22.2.03 목

설은 다들 잘 보내셨나요?

저는 설날을 쉬고 다시 공부를 시작해보았습니다. 받은 세뱃돈으로 듣고 싶은 강의를 사니 듣지 않을 수가 없더라구요..

 

그래서 코어 자바스크립트부터 공부를 시작해보았습니다.

 

---

오늘은 클로저와 콜백 함수에 대해 알아보았습니다.

 

1. 클로저

컨텍스트 a에서 선언한 변수를 내부함수 b에서 참조해 사용했을 때 전역 컨텍스트가 끝날 때까지 변수가 살아있는 것을 클로저라고 합니다. 변수 a가 사용된 컨텍스트가 끝났음에도 불구하고 마치 좀비처럼 계속 살아있는 것이죠. 이를 이용해서 우리는 지역변수가 함수 종료 후에도 사라지지 않게 할 수 있습니다.

2. 콜백함수

콜백함수는 내가 직접 함수 제어권을 가지고 있는 게 아니라 다른 곳에 제어권을 위임해 함수를 처리합니다. 콜백함수가 넘겨주는 제어권은 실행시점, this(바인딩), 매개변수 입니다.

 

 

그러면 이번에는 어제 배웠던 것을 상기해보겠습니다.

 

1. 데이터 타입

자바스크립트의 데이터 타입은 크게 2가지로 나뉘었습니다. 기본형과 참조형으로 나눴는데요, 기본형은 Number, String, Boolean, null, undefined가 있었고 참조형으로는 Array, function RegExp가 있었습니다.

 

각 데이터를 메모리에 저장할 때 어떻게 저장했고 무슨 차이가 있는지 보겠습니다.

기본형은 다음과 같이 저장합니다.

주소	1002	1003	....	5005	5006
데이터	이름: a 값: @5005			'Hi'

 

참조형은 다음과 같이 저장합니다.

주소	1002	1003	1004	...	5005	5006	5007
데이터	이름: obj 값: @5005				@6006~?	'a'	'b'

주소	6002	6003	6004	...	8005	8006	8007
데이터	이름: a 값: @5006	이름: b 값: @5007

 

공통점은 둘 다 주소를 저장한다는 점이다. 이렇게 하면 직접 저장에 비해 한 단계 더 거쳐야 하지만 비교시 비용이 적게 들고 최소한의 메모리로 주소를 사용할 수 있습니다.

 

2. 실행 컨텍스트(Execution Context)

실행 컨텍스트는 코드가 실행되는 조건, 배경, 환경을 담은 객체입니다.

맨 처음 생성된 컨텍스트 내에 다음 컨텍스트가 생기고 모두 생긴 뒤에 최근에 생긴 것부터 다시 사라지는데 이를 스택이라고하며 그것을 순서대로 쌓아 나타낸 자료구조를 콜스택이라고 합니다.

 

실행 컨텍스트에 담기는 환경 정보는 3가지 입니다.

VariableEnviroment, LexicalEnviroment, ThisBing

여기서 VariableEnviroment, LexicalEnviroment의 차이는 값의 변화를 반영하느냐 하지 않느냐의 차이만 있습니다. 그래서 우리는 LexicalEnviroment를 주목해보겠습니다.

LexicalEnviroment는 environmentRecord, outerEnvironmentReference로 구성되어 있습니다.

environmentRecord는 내부 식별자 정보를 호이스팅하여 수집한 정보입니다.

outerEnvironmentReference는 내부와 관련된 외부 식별자 정보를 수집한 것입니다. 이때 outerEnvironmentReference는 외부의 environmentRecord를 참조합니다. 이것을 scope chain이라고 합니다. 즉 outerEnvironmentReference가 참조할 수 있는 것은 외부의 environmentRecord이며 내부의 environmentRecord는 참조할 수 없어 이를 통해 변수의 유효범위를 알 수 있습니다.

 

3. This

this는 호출 방법에 따라 달라집니다.

전역공간에서 this는 전역객체(window, global)

함수에서 this는 전역객체 (ES6에서 arrow function을 사용하면 위 컨텍스트의 this 사용 가능)

메서드에서 this는 메서드 호출의 주체

callback에서 this는 기본적으로 함수 내부에서는 전역객체이나 넘겨 받은 대상이 어떤 식으로 처리하느냐에 따라 달라집니다. call, apply, bind가 있으면 지정한 this값을 갖고 이벤트 핸들러의 경우 html dom이 나옵니다.

생성자 함수에서 this는 새로 만들어진 인스턴트 객체 자신이 this가 됩니다.

 

---

지금까지 배운 것을 정리해보았습니다 . 어떤 부분은 벌써 잊어버린 것도 있고 다시 읽어보면서 이해하는 시간을 가져서 공부한 내용을 오랫동안 기억할 수 있을 것 같습니다. 앞으로도 복습을 꾸준히 해보겠습니다.