스코프란 ? ( scope )모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다.
이를 스코프라고 한다. 즉, 스코프는 식별자가 유효한 범위를 말하며
스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.
스코프의 종류 ? 전역 vs 지역전역 스코프는 코드의 가장 바깥 영역 - 전역 변수
지역 스코프는 함수 몸체 내부 영역 - 지역 변수
아래 예제를 통해 콘솔이 어떻게 찍힐지 예측해보자 !!
function one (){
two();
console.log('one 내부 !!');
}
three();
console.log('외부 1 !!');
function two(){
console.log('two 내부 !!');
}
function three(){
two();
console.log('three 내부 !!');
}
one();
function four(){
console.log('four 내부 !!');
}
/*
two 내부 !!
내부 !!
외부 1 !!
two 내부 !!
one 내부 !!
four은 호출을 안했다 ..
*/
호이스팅이란 ?예제를 먼저 확인해보자
console.log(score); // undefined
var score ; // 변수 선언자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);
가 먼저 실행되는데 console.log(score); 실행 시점에는 score 변수가 선언이 실행되지 않았는데 에러 발생이 나지 않았다.
이유가 뭘까 ?
그 이유는 변수 선언 시점이 인터프리터에 의해 순차적으로 실행되는 시점보다 빠르기 때문이다.
1. 변수 선언
2. 스크립트 코드 순차적으로 실행 ( 런타임 )
의 순서로 실행이 된다.
이처럼 변수의 선언 시점이 런타임 시점보다 먼저 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 한다.
아래 에제 코드는 어떻게 실행될까 ?
console.log(test);
test = 80;
var test;
console.log(test);
/* 콘솔 출력 결과이다.
undefined
80
*/TDZ란 ?var 키워드로 선언하는 변수와 달리 let 키워드로 선언한 변수는 호이스팅이 발생하기 않는 것처럼 동작한다.
console.log(score); // undefined
var score ; // 변수 선언
console.log(foo); // Uncaught ReferenceError: foo is not defined
let foo ; // 변수 선언
왜그럴까 ?
var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 undefined 로
선언과 초기화가 한번에 진행된다.
하지만 let 키워드로 선언한 변수는 선언과 초기화가 분리되어 진행된다.
즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만
초기화 단계는 런타임 이후 인터프리터에 의해 함수 선언문에 도달했을 때 실행된다.
/*
런타임 이전 변수 선언 단계 런타임 단계 (인터프리터의 순차적 코드 실행)
var로 선언 선언과 동시에 undefined로 초기화
let로 선언 변수 선언 (초기화 x)<---요기가 TDZ--->함수 선언문에 의한 변수 초기화
*/위 예시 처럼 변수 선언 후 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 (TDZ) 라고 부른다.
요약
1. 스코프는 식별자가 유효한 범위를 말한다.
2. 호이스팅은 변수의 선언 시점이 런타임 시점보다 먼저 동작하는 자바스크립트 고유의 특징이다.
3. TDZ는 let 키워드로 변수 선언 후 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 (TDZ) 라고 부른다.
*오타 혹은 오류 지적해주시면 감사하겠습니다 !!
