JS의 모듈 패턴은 코드를 구조화하기 위해 사용된다.즉, JS로 캡슐화를 구현하는 것이다. 따라서 모듈 패턴은 최소 노출의 원칙(POLE)을 따라 가시성을 제어하고, 정보(데이터, 상태)와 동작(함수,메서드)을 한데 묶는다.이를 위해 JS의 특징인 렉시컬 스코프 메커니즘을 이용한다. 모듈은 아니지만 비슷한 데이터 묶음으로,네임스페이스(데이터 없이 관련한 무상태 함수를 묶어놓은 것)와,데이터 구조(데이터와 동작을 묶지만, 가시성 제한을 하지않음)가 있다. 먼저, 모듈 패턴을 구현하기 위해서는 위에서 설명한대로 간단히 렉시컬 스코프 메커니즘을 이용하면 된다.//모듈 팩토리 함수function defineStateModule(){ var state = 0; var publicAPI = { g..

JavaScript의 클로저란?클로저는 함수가 명시적으로 외부 스코프의 변수를 사용하면서,해당 변수에 접근 가능하지 않은 다른 스코프에서 실행할 때 관찰되는 함수의 특성이다.function getCountAdder(){ let count = 0; return function countAdder(){ count++; console.log(count); }}let addCount = getCountAdder();addCount(); // 1addCount(); // 2addCount(); // 3 위 코드에서 보면, getCountAdder 함수는 countAdder라는 내부 함수 인스턴스를 반환한다.이 때 반환된 내부함수인 countAdder는 외부 스코프(getCountAd..

스코프는 변수가 어떤 것을 참조하는지를 결정하는 규칙 모음이다.보통 중괄호({})로 표현하며, 전역스코프, 함수스코프, 블록스코프 등이 있다. ( 중괄호라고 해도 class 선언, 객체 선언, switch 등에서 사용하는 중괄호는 당연히 스코프가 아니다.)//전역 스코프var global_a = 0;function func(){ //함수 스코프 let a = 0; var b = 1; if(true){ //블록 스코프 let block_a = 0; }} 스코프는 보통 컴파일타임에 결정되는데, 구체적으론 컴파일 중 렉싱 과정에서 결정된다.렉싱 과정은 토크나이징 이후, 생성된 토큰들에 대한 의미를 부여하는 과정인데, 이 때 어떤 변수가 어디에 작성돼있..

JS, React로 프로그래밍을 하면서도, 정작 JS 파일이 어떻게 브라우저 엔진에서 처리되고 실행되는지에 대해 무지했었다. 책을 읽으면서 관련 내용을 간단히 정리해본다. 보통 프로그래밍 언어를 컴파일 언어와 인터프리터를 거치는 스크립트 언어로 구분할 때,JS는 일반적으로 스크립트 언어로 분류된다.그런데 과연 JS가 마냥 한줄씩 처리되는 인터프리터 언어로 작동할까?자바스크립트를 사용해본 개발자라면, 그렇지 않을 것이라 짐작할 수 있을 것이다. 실제로 JS는 실행 전 별도의 단계에서 파싱과 컴파일이 일어난다.개발자가 지정한 변수/함수/블록의 위치는 파싱/컴파일 단계에서 스코프 규칙에 따라 분석되고,그 결과에 따라 결정된 스코프 구조는 대개 런타임에 영향을 받지 않는다.(비엄격모드에서 eval, with 등..