코어 자바스크립트 : 모던 자바스크립트 압축판

자바스크립트를 학습하는 사람들이라면 학습 초반 가장 많이 들어보고 접해봤을 책

코어 자바스크립트에 대한 이야기를 해보려고 한다.

 

결론부터 말하면 코어 자바스크립트를 읽는다고

자바스크립트의 모든 걸 이해해서 기깔나게 코드를 짤 수 있는 건 아니다.

 

그러나 저자의 말에 따르면

자바스크립트의 핵심 개념들을 정확하게 이해하는 것이

초급 개발자에서 중급 개발자로 갈 수 있는 발판이 될 수 있다고 한다.

 

그래서 이 책을 읽어야 하는 사람은

이제 막 개발을 배우는 병아리 단계의 개발자 지망생보다는

어느정도 학습을 통해 개발을 경험했고, 이제 취업을 위한 준비를 하는 취준생

혹은 개발자로 개발은 하고 있지만, 이론에 대한 바탕이 부족한 사람이 읽었을 때 가장 효과적일 것 같다.

 

---

 

목차

1. 데이터 타입
2. 실행 컨텍스트
3. this
4. 콜백 함수
5. 클로저
6. 프로토 타입
7. 클래스

 

목차를 보면 해당 책에 대한 전반적인 내용을 살필 수 있다.

소설이 아닌 정보를 전달하는 글이면 더더욱 그 내용에 대한 파악이 수월한데,

코어 자바스크립트는 총 7개의 파트로 나눠져 있다.

 

목차 리스트만 봤는데 어질어질하고 한번도 본적이 없다 해도 괜찮다.

원래 맞으면서 크는거다.

 

어쨋든 목차를 보면 각 파트별 중요한 내용이 어떤 것이 있을지 유추할 수 있는데, 해당 내용을 정리해 보자.

 

파트별 주요 내용

1. 데이터 타입

우선 데이터 타입은 자바스크립트에서 사용하는 데이터의 종류에 대해 알아볼 수 있는 글이다.

숫자, 문자, boolean 등 데이터에 대한 종류에 대해서 설명하는 파트다.

 

해당 파트에서는 변수를 선언하고 데이터가 할당되는 과정에 대한 부분이나.

얕은 복사와 깊은 복사에 대한 부분, undefined와 null의 차이에 대한 부분이 등장한다.

 

이 파트에 대해서 학습하고 나면 아래와 같은 문제 상황이 왜 발생하는지에 대해 이해할 수 있다

 

const obj = {
  name:"um"
}

const obj2 = obj
obj2.name = "test"

console.log(obj.name)       // "test"

obj라는 객체가 있고, obj2 변수에 obj 객체를 할당해 주었다.

그 다음 obj2의 name 프로퍼티의 값을 변경하고, 기존 obj의 name 프로퍼티를 console로 확인했는데

"um"이 아닌 "test"가 출력되는 것을 볼 수 있다.

 

왜 이런 문제가 발생하는지는 코어 자바스크립트 : 데이터 타입 파트를 읽으면 알 수 있다.

 

핵심 정리 리스트

데이터 타입의 종류 / 얕은 복사와 깊은 복사

null과 undefined

 

2. 실행 컨텍스트

실행 컨텍스트 파트에서는 자바스크립트의 함수가 작동할 때 필요한 데이터의 구조를 알 수 있다.

자바스크립트가 동작할 때 여러가지 필요한 데이터와 다양한 구조에 따라서 실행이 되는데

그 과정과 동작 원리에 대해서 알 수 있게 된다.

 

해당 파트에서는 실행 컨텍스트가 어떤 구조로 구성 되어있는지,

호이스팅이 뭔지, 스코프와 스코프 체인이 무엇인지에 대해서 알 수 있다.

 

function test () {
  console.log(num);      // undefined
  var num = 1;
}

test();

위의 문제는 호이스팅과 연관 되어있는 부분인데

어떻게 자바스크립트는 선언되지 않은 변수를 찾아 값을 보여주는지

왜 이런 현상이 발생하는지에 대해서 이번 파트를 학습하면 알 수 있게 된다.

 

3. this

this 파트는 사실 실행 컨텍스트 파트에서 이어져 오는 파트다.

실행 컨텍스트의 구조를 설명할 때 3개의 구조로 나눠지게 된다고 하는데

그 중 ThisBinding과 관련된 내용이 이 3번째 파트가 되겠다.

 

해당 파트에서는 this가 무엇인지, 상황에 따라 this가 어떻게 바인딩 되는지,

this를 명시적으로 바인딩 하는 방법에 대해서 알 수 있다.

 

const person = {
  name: "um",
  age: 20,
  whatAmI: this
};
 
console.log(person.whatAmI);

this라는 이름만 보면 뭔가 내가 현재 있는 위치, 상태 이런걸 표시할 거라고 생각하게 된다.

그래서 위의 코드를 보면 당연하게 현재 console로 확인하는 this는

person이라는 객체를 표시하지 않을까 하는데 window 객체를 표시한다.

 

왜 이런 현상이 발생하는지, 그리고 내가 의도한대로 this가 특정 객체를 표시하게 하는데

어떠한 방법을 사용해야하는지 이 파트에서 확인할 수 있다.

 

 

4. 콜백 함수

개발에 대한 학습을 하다보면 콜백 지옥이라는 단어에 대해서 들어 볼 수 있다.

물론 현재는 그러한 콜백 지옥을 해결하기 위해 다양한 방법을 사용하곤 한다.

그래도 콜백이라는 개념에 지옥이라는 단어가 결합 된 것은

콜백 함수를 잘못 사용했을 경우, 개발자가 얼마나 힘들어 질 수 있는지 단적으로 보여주는 것이라고 볼 수 있다.

 

해당 파트에서는 콜백 함수에 대한 내용과 콜백 함수와 this

그리고 콜백 지옥을 제어하는 방법 등에 대해 설명하고 있다.

 

현재는 try catch 문이나 async, await를 활용하는 방법을 사용하곤 하는데

왜 이런 방법들을 사용했는지에 대해 이해하는것이 중요한지 보여주는 파트라고 보면 되겠다.

 

5. 클로저

우리가 react를 사용할 때 state를 사용해서 해당 컴포넌트의 다양한 상태를 관리하곤 한다.

이 state의 시작점은 클로저라고 할 수 있을 만큼 클로저의 개념은 중요한 내용이다.

 

해당 파트에서는 클로저의 의미와 원리, 활용 사례 등을 설명하고 있다. 

 

클로저에 대한 개념을 공부하면서 캡슐화, 모듈화에 대한 개념도 이해하게 되는 만큼

중요하게 생각하고 학습해야 하는 부분이 되겠다.

 

6. 프로토 타입

- 학습 후 정리 할 예정

 

 

7. 클래스

 - 학습 후 정리할 예정

 

---

 

이 책으로 자바스크립트의 모든 것을 학습했다고 할 수 없지만,

주요한 내용들을 꽉꽉 눌러담은 책이기 때문에 서두에도 나왔듯,

주니어 개발자들이라면 꼭 읽어봐야 하는 책이 되겠다.

 

함께 읽으면 좋은 글 리스트

실행 컨텍스트 : 자 이게 너가 사용할 수 있는 친구들이야

This : 이거라며.. 왜 다르냐고

클로저 : 자바스크립트의 네크로멘서