모던 자바스크립트 Deep Dive, 이웅모

스코프

식별자에 대한 유효범위
그래서 다른 코드가 해당 변수를 참조할 수 있는 범위를 나타냄

보통 블록단위로 스코프가 생기는 다른 언어들과는 다르게
자바스크립트는 기본적으로 전역에 대한 전역스코프와 함수에 의해서 생성(지역)된 스코프만 존재

→ ES6에서 블록 단위로도 스코프를 생성하도록 추가했음. 이후 서술

같은 이름을 가지는 식별자가 만약 존재할 경우 스코프에 따라 어떤 변수를 참조할 것인지 결정

스코프는 함수 정의 위치에 따라 결정 ( 호출 위치와는 관련 없음 )

→ 스코프를 결정하면서 상위 스코프에 대한 정보도 같이 저장, 그래서 정적/렉시컬 스코프라고도 부름

스코프와 변수

그렇지 않은 경우도 있지만(클로저)
일반적으로 함수 내부에서 선언된 변수는 스코프가 소멸하면 더 이상 참조될 수 없기 때문에 같이 소멸

해당 함수가 실행될 때 실행 컨텍스트를 생성하고 평가하는 과정에서 발생하는 호이스팅도 이 스코프를 단위로하여 진행

스코프 체인

중첩 함수가 존재하기 때문에 스코프가 중첩되는 경우도 있음
스코프가 중첩되는 경우 해당 스코프는 하위 지역(내부 함수)에서도 유효함
그래서 내부 함수 지역에서 외부 함수의 식별자를 참조할 수 있음

이렇게 지역스코프들이 중첩되어 계층을 이루는 것을 스코프 체인 이라고 하고 이를 이용하여 내부에서 외부로 참조할 식별자를 탐색해 나갈 수 있음 (가장 마지막에 존재하는 것은 전역 스코프일 것)

추가로 외부에서 내부로 접근하는 것은 불가능

var, let, const

var 키워드

자바스크립트에서 변수 선언시 사용하던 기존 키워드

• 중복 선언 에러X → 초기화 문 있으면 기존 값 변경, 없으면 무시
• 함수 레벨 스코프에서만 작동 : 블록(if문, for문 등) 내에서 선언한 경우 전역 스코프 또는 가장 가까운 상위 스코프의 변수 취급
• 호이스팅시 undefined로 초기화 : 그래서 선언문 이전에서도 '참조'는 가능함
• 선언할 때 전역 객체의 프로퍼티로 추가

var 키워드로 선언한 변수들은 위와 같은 특징을 가지게 되는데 직접적인 오류는 오히려 피할 수 있지만 흔한 프로그래밍 흐름과 다르고 예상과 다른 결과를 가져오게될 수 있음
좋지않음!!

ES6의 let, const 키워드

위 var 키워드와 같은 순서로 특징을 적어보면 다음과 같다

• 중복 선언 에러O, 중복 선언 불가능함
• 블록 레벨 스코프에서도 작동 (추가적으로 class나 strict mode의 함수도 블록 레벨 스코프)
  그래서 반복문(for, for...in 등) 내부에서 사용하면 반복실행 될때마다 새로운 렉시컬 환경을 생성함
• 호이스팅시 선언만 진행 → 그래서 실제 코드에서 선언문+초기화문이 존재하는 부분 이전에서 해당 변수를 접근하려하면 오류가 발생함어쩌면 당연한일..., 일시적 사각지대
• 전역 객체의 프로퍼티로 추가되지 않음 → 정말 렉시컬 환경 내에 존재하는 우리가 생각하는 그런 변수가 됨

이때 let과 const의 차이가 조금 있는데 const 의 경우 선언과 초기화를 동시에 해주어야하고 재할당이 불가능

const a; // X, Error
const b = 0; // O

b = 1; // X, Error

유의할 것은 재할당이 불가능 한 것이지 변경은 가능
ex) 객체 할당 후 프로퍼티 추가/변경, 배열 할당 후 요소 수정

그래서...

ES6이상이라면 var은 사용하지 않고 let과 const로 변수들을 선언하며
그 중에서도 의도치 않은 재할당 방지를 위해 최대한 const 키워드를 이용하는 것을 권장