모던 자바스크립트 Deep Dive (13장 ~ 15장)

🔰스코프

스코프란?

스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.

모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 즉, 스코프는 식별자가 유효한 범위를 말한다.

자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다. 이를 식별자 결정(identifier resolution)이라 한다. 따라서 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 한다.

스코프가 없다면 같은 이름을 갖는 식별자는 충돌을 일으킨다. 식별자는 유일해야 한다.

프로그래밍 언어에서는 스코프를 통해 식별자의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에서는 같은 이름의 식별자를 사용할 수 있다. 즉, 스코프는 네임스페이스다.

스코프의 종류

전역	지역
전역이란, 코드의 가장 바깥 영역을 말한다. 전역 스코프를 만든다. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든 참조할 수 있다.	함수 몸체 내부를 말한다. 지역 스코프를 만든다. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

스코프 체인

스코프는 함수의 중첩에 의해 계층적 구조를 갖는다.

모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다.

스코프가 계층적으로 연결된 것을 스코프 체인이라 한다.

자바스크립트 엔진은 변수를 참조할 때 스코프 체인을 통해 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 따라서 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.

자바스크립트 엔진은 렉시컬 환경이라는 자료구조를 실제로 생성하고, 변수 선언이 실행되면 변수 식별자가 이 자료구조에 키로 등록된다. 변수 할당이 일어나면 변수 식별자에 해당하는 값을 변경한다. 변수의 검색도 이 자료구조 상에서 이뤄진다.

스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것이다. 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고, 함수의 렉시컬 환경은 함수가 호출되면 곧바로 생성된다.

함수 레벨 스코프

코드 블록이 아닌 함수에 의해 지역 스코프가 생성되는 것을 말한다.

var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

렉시컬 스코프

동적 스코프(dynamic scope)	렉시컬 스코프(lexical scope) / 정적 스코프(static scope)
함수가 호출되는 시점에 동적으로 상위 스코프를 결정한다.	함수 정의가 평가되는 시점에 상위 스코프가 정적으로 결정된다.

자바스크립트는 렉시컬 스코프를 따른다. 다시 말해, 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다.

자바스크립트에서 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다. 생성된 함수 객체는 상위 스코프를 기억한다.

🔰전역 변수의 문제점

변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 생명 주기가 있다. 변수의 생명 주기는 메모리 공간이 확보된 시점부터 해제되어 가용 메모리 풀에 반환되는 시점까지다.

변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유한다.

전역 변수는 애플리케이션과 생명 주기가 같다.

지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 대부분 함수와 생명 주기가 같다.

변수는 자신이 등록된 스코프가 해제될 때까지 유효한데, 누군가 해당 메모리 공간을 참조하고 있으면 해제되지 않고 확보된 상태로 유지된다.

호이스팅은 스코프를 단위로 동작한다. 호이스팅은 변수 선언이 스코프의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말한다.

전역 코드는 명시적인 호출 없이 실행된다. 특별한 진입점이 없고 코드가 로드되자마자 해석되고 실행된다. 더 이상 실행할 문이 없을 때 종료한다.

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

🍎 전역 객체
코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체다. 브라우저에서는 window, Node.js에서는 global 객체를 의미한다. 전역 객체를 가리키는 식별자는 globalThis로 ES11부터 통일되었다.
전역 객체는 표준 빌트인 객체와 환경에 따른 호스트 객체(브라우저 - Web API / 노드 - 호스트 API), var 키워드로 선언한 전역 변수와 전역 함수를 프로퍼티로 갖는다.

전역 변수의 문제점

암묵적 결합(implicit coupling)	모든 코드가 전역 변수를 참조하고 변경할 수 있다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.
긴 생명 주기	전역 변수는 생명 주기가 길어 메모리 리소스도 오랜 기간 소비한다. 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다. var 키워드는 변수의 중복 선언을 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있다.
스코프 체인 상에서 종점에 존재	전역 변수의 검색 속도가 가장 느리다. 검색 속도의 차이는 그다지 크지 않지만, 차이는 분명히 있다.
네임스페이스 오염	자바스크립트의 문제점 중 하나는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 것이다. 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 있을 경우 예상치 못한 결과를 가져올 수 있다.

전역 변수의 사용을 억제하는 방법

전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수를 사용해야 한다. 스코프는 좁을수록 좋다.

즉시 실행 함수	모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다. 라이브러리 등에 자주 사용된다.
네임스페이스 객체	전역에 네임스페이스 역할을 담당할 객체를 생성하고 프로퍼티를 추가하는 방법이다.  네임스페이스 객체 자체가 전역 변수에 할당되므로 그다지 유용하진 않다.
모듈 패턴	클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만드는 패턴이다. 전역 변수 억제는 물론 캡슐화까지 구현할 수 있다.
ES6 모듈	ES6 모듈을 사용하면 전역 변수를 사용할 수 없다. 파일 자체의 독자적인 모듈 스코프를 제공한다. 모듈 내에서 var 키워드로 선언한 변수는 더는 전역 변수가 아니며, window 객체의 프로퍼티도 아니다. ES6 모듈을 사용하더라도 트랜스파일링이나 번들링이 필요하기 때문에 아직까지는 모듈 번들러를 사용하는 것이 일반적이다.

🍎 캡슐화와 정보 은닉
캡슐화(encapsulation)는 프로퍼티와 메서드를 하나로 묶는 것을 말한다. 객체의 특정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데, 이를 정보 은닉(information hiding)이라 한다.
대부분 객체지향 프로그래밍 언어는 클래스 멤버에 대해 public, private, protected 등의 접근 제한자를 사용해 공개 범위를 한정한다. 하지만 자바스크립트는 접근 제한자를 제공하지 않는다.

🔰let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점

변수 중복 선언 허용	의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생한다.
함수 레벨 스코프	함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. 이로 인해 전역 변수가 중복 선언되는 경우가 발생한다.
변수 호이스팅	var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 이 때는 언제나 undefined를 반환한다. 에러가 발생하지는 않지만, 흐름상 맞지 않을뿐더러 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

let 키워드

변수 중복 선언 금지	let 키워드로 이름이 같은 변수를 중복 선언하면 SyntaxError가 발생한다.
블록 레벨 스코프	모든 코드 블록을 지역 스코프로 인정한다.
변수 호이스팅	let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 변수 선언문 이전에 변수를 참조하면 ReferenceError가 발생한다. 선언 단계와 초기화 단계가 분리되어, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ;Temporal Dead Zone)라고 부른다. * 모든 선언은 호이스팅 된다. 다만, let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작할 뿐이다.
전역 객체와 let	let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. let 전역 변수는 전역 렉시컬 환경의 선언적 환경 레코드 내에 존재한다.

const 키워드

상수를 선언하기 위해 사용한다. 반드시 상수만을 위해 사용하지는 않는다.

선언과 초기화	const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다. 그렇지 않으면 SyntaxError가 발생한다.
재할당 금지	let 키워드와 달리, 재할당이 금지된다.
상수	상수는 재할당이 금지된 변수를 말한다. 상수는 상태 유지와 가독성, 유지보수의 편의를 위해 적극적으로 사용해야 한다. 일반적으로 상수의 이름은 대문자로 선언하여 상수임을 명확히 나타낸다.
const 키워드와 객체	const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다. const 키워드는 재할당을 금지할 뿐 불변을 의미하지 않는다.

var vs let vs const

변수 선언에는 기본적으로 const를 사용한다. 의도치 않은 재할당을 방지할 수 있다.

ES6를 사용한다면 var 키워드는 사용하지 않는다.

재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 변수의 스코프는 최대한 좁게 만든다.