2021-01-07(Thu)

항목	내용
학습 날짜	2021-01-07(목)
학습 시간	09:00~23:00
학습 범위 및 주제	javascript ES6
학습 목표	모던 자바스크립트 튜토리얼의 Part 1을 훑는다.
동료 학습 방법	eunhkim, jujeong, sanam, yohlee 님과 디스코드를 켜놓고 학습하였다.

상세 학습 내용

Modern JavaScript 튜토리얼을 추가로 학습진행하였다.

학습한 내용이 너무 많아서 다 글로 옮기지 않았고(사실 의미도 크지 않고) 그 중 클로저에 대한 내용이 흥미로워서 튜토리얼 내에 있는 내용 외에도 더 파고들어 학습했다.

클로저

'클로저(closure)'는 개발자라면 알고 있어야할 프로그래밍 용어입니다.

클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미합니다.내부함수와 외부함수의 관계를 통해 클로저를 설명하자면, 내부함수가 외부함수의 지역변수에 접근할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미합니다.

몇몇 언어에선 클로저를 구현하는게 불가능하거나 특수한 방식으로 함수를 작성해야 클로저를 만들 수 있습니다. 하지만 자바스크립트에선 한 가지 경우를 제외하곤 모든 함수가 자연스럽게 클로저가 됩니다. 바로 new Function 문법을 사용하는 경우인데 이는 밑에서 다시 다루겠습니다.

자바스크립트의 함수는 숨김 프로퍼티인 [[Environment]]를 이용해 자신이 어디서 만들어졌는지를 기억합니다. 함수 내부의 코드는 [[Environment]]를 사용해 외부 변수에 접근합니다.

함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거됩니다. 함수와 관련된 변수들은 이 때 모두 사라지죠. 함수 호출이 끝나면 관련 변수를 참조할 수 없는 이유가 바로 여기 있습니다. 자바스크립트에서 모든 객체는 도달 가능한 상태일 때만 메모리에 유지됩니다.

그런데 호출이 끝난 후에도 여전히 도달 가능한 중첩 함수가 있을 수 있습니다. 이 때는 이 중첩함수의 [[Environment]] 프로퍼티에 외부 함수 렉시컬 환경에 대한 정보가 저장됩니다. 도달 가능한 상태가 되는 것이죠.

함수 호출은 끝났지만 렉시컬 환경이 메모리에 유지되는 이유는 바로 이 것입니다.

클로저는 함수 프로퍼티로 대체할 수 있습니다. 객체로서의 함수와 기명 함수 표현식

하지만 클로저를 사용한 경우엔 외부 코드에서 count에 접근할 수 없고, 오직 중첩함수 내에서만 count 값을 수정할 수 있습니다. 반면 함수 프로퍼티를 사용해 count를 함수에 바인딩시킨 경우엔 외부에서 값을 수정할 수 있습니다.

따라서 전자는 소위 private 변수처럼 값을 은닉해야할 때 쓰면 적절합니다.

학습 내용에 대한 개인적인 총평

자바스크립트가 생각보다 재밌는 개념이 많네요. 다만, 실행 컨텍스트, 렉시컬 환경, 클로저 같은 개념들은 머리에 넣더라도 너무 세세한 메소드의 사용방법 같은 것들은 최대한 걸러서 학습속도를 높여야겠습니다. 어우 학습할게 너무 많네요..

다음 학습 계획

• 모던 자바스크립트 튜토리얼 적어도 Part 2는 다 훑기