TIL - 20220713

 오늘은 모던 JavaScript 튜토리얼에서 변수의 유효 범위와 클로저(https://ko.javascript.info/closure)에 대해서 공부했다. 공부하면서 내용이 많기도 하고 또 중요하다는 생각도 들어서 자세하게 정리한 글을 따로 작성할 예정이다(작성 후 수정 예정). 먼저, 작성한 질문은 다음과 같다.

 자바스크립트는 함수 지향 언어이다. 왜냐하면, 함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수의 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출할 수 있기 때문이다. 질문에 대한 대답을 작성하면서도 함수를 동적으로 생성한다는 말이 무슨 의미인지, 생성한 함수를 다른 함수의 인수로 넘기는 예를 공부해야겠다는 생각이 들었다. 내가 작성하면서도 이게 무슨 의미일까 바로 고민이 되기 때문이다.

 

 코드 블록 {...} 안에서 선언한 변수는 코드 블록 안에서만 유효하다. 예를 들어 조건문이나 반복문 안에 변수를 선언한 뒤 그 변수를 조건문이나 반복문 밖에서 사용하려면 undefined 에러를 만나게 될 것이다. 이 이유가 코드 블록 {...} 안에서 선언한 변수는 코드 블록 안에서만 유효하기 때문이다.

 

 렉시컬 환경은 실행 중인 함수, 코드 블록, 스크립트 전체가 속해 있는 내부 숨김 연관 객체를 뜻하며, 렉시컬 환경 객체는 두 부분으로 구성된다.

1. 환경 레코드 - 모든 지역 변수를 프로퍼티로 저장하고 있는 객체
2. 외부 렉시컬 환경에 대한 참조 - 외부 코드와 연관

임의로 만들어 준 변수도 결국 특수 내부 객체인 환경 레코드의 프로퍼티인 것이다.

 

 렉시컬 환경에서, 함수 선언문은 코드가 실행될 때 바로 사용할 수 있지만 함수 표현식은 바로 사용할 수 없다. 왜냐하면, 함수 선언문으로 선언한 함수는 일반 변수, 함수 표현식과 달리 바로 초기화되기 때문이다.

 

 자바스크립트 코드에서 변수는 먼저 내부 렉시컬 환경에서부터 찾기 시작하며 찾는 변수가 내부 렉시컬 환경에 존재하지 않으면, 내부 렉시컬 환경이 참조하고 있는 외부 렉시컬 환경으로 확장되고, 이 과정은 전역 렉시컬 환경으로 확장될 때까지 진행한다.

 

 클로저란 외부 변수를 기억하여 접근할 수 있는 함수를 뜻한다. 면접에서 이러한 질문이 나온다면 클로저의 정의부터 시작해서, 자바스크립트에서 왜 모든 함수가 클로저인지, 이때 [[Environment]] 프로퍼티와 렉시컬 환경이 어떤 방식으로 동작하는지에 대한 설명을 하면 되고 이 내용은 자세히 정리한 글에 기록하겠다.

 

 내용이 많고 복잡해서 쉽지 않지만, JavaScript라는 언어를 정복하고 싶다면 반드시 거쳐야하는 과정이라 생각한다. 절대 포기하지 않을 것이며 클로저가 무엇인가요?라고 면접관이 물었을 때 술술 답할 수 있을 정도로 열심히 공부해야겠다.