자바스크립트에서는 변수를 어떻게 선언하고 선언되는 위치에 따라 다른 스코프 범위를 갖는다. 어떻게 스코프의 범위가 결정되는지 살펴보자.
스코프(Scope)
Scope는 영어로 범위라는 의미를 가지며 자바스크립트에서는 변수가 참조되고 사용될 수 있는 범위를 의미한다.
스코프의 3가지 타입
- 글로벌 스코프(Global Scope)
글로벌 스코프에 선언된 변수는 전역 변수로 사용되며 코드 어디에서나 참조될 수 있다.
const global = "hello";
function exampleFunction() {
console.log(global) // hello 출력
}
exampleFunction();gobal 변수는 어느 범위에도 포함되지 않게 선언되어 전역 변수 역할을 한다, 전역 변수로써 함수 or 블록 어디에서나 사용이 가능하다.
- 함수 스코프(Function Scope)
스코프의 생명주기 : 함수가 호출되어 실행 과정 동안 변수가 메모리에 적재되어 참조 및 사용이 가능하고 함수가 종료되면 그 함수 내의 지역 스코프 변수는 메모리에서 해제되어 더이상 접근 사용이 불가능하다.
함수 내 선언된 변수는 해당 함수에서만 사용할 수 있으며 함수 외부에서는 접근 할 수 없다, 또한 함수 스코프는 스코프의 생명주기 동안만 유효하다.
function exampleFunction() {
const global = "hello";
console.log(global) // hello 출력
}
exampleFunction();
console.log(global); // ReferenceError: global is not defined - 블록 스코프(Block Scope)
중괄호 {}로 둘러싸인 영역의 스코프이다. let, const로 선언된 변수는 선언된 위치의 스코프를 그들의 블록 스코프로 간주한다, 블록 스코프는 조건문, 반복문, 함수 등에서 사용된다.
if(true) {
let a = "a";
const b = "b";
console.log(a); // a출력
console.log(b); // b출력
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: b is not defined블록 스코프 또한 해당 범위가 벗어나면 블록 스코프의 변수가 메모리에서 해제되어 사용이 불가능하게 된다.
var, let, const의 스코프
- var
var로 선언하게 되면 전역 혹은 함수 범위 스코프로 지정된다. 만약 블록 스코프에서 선언하게 되어도 함수 외부에서 선언될 경우 무조건 전역 스코프로 범위가 지정된다.
function test(){
var test1 = 1; // 함수 내에서만 사용
console.log(test1) // 1 출력
}
console.log(test1); // error
if(true){
var test2 = 2; // 전역적으로 사용
}
console.log(test2); // 2 출력var은 같은 스코프 범위일지라도 중복 선언이 가능하고 수정할 수 있다. 가장 최근에 선언한 변수가 기존 변수를 덮어버리며 이는 유연하지만 오류와 혼동을 발생시킬 위험이 크다.
var test1 = 0;
var test1 = 1;
function test(){
console.log(test1) // 1 출력
}- let
let은 블록안에서 선언되면 해당 블록 안에서만 유효한 범위를 가지며 블록 밖에서 선언되면 전역 스코프의 범위를 갖는다.
function test() {
let test1 = 1; // 함수 스코프 안에서만 유효
console.log(test1); // 1 출력
}
test();
console.log(test1); // errorlet은 같은 스코프 범위에서 변수를 재선언이 불가능하다. 재선언시 오류를 발생한다, 하지만 변경은 가능하다.
function test() {
let test1 = 1;
let test1 = 2; // Cannot redeclare block-scoped variable 'test1'.ts(2451)
test1 = 2; // O
}
test();하지만 let은 해당 스코프에서만 유효하고 다른 스코프에서는 다른 변수로 취급하기 때문에 다른 블록 범위에서 재선언이 가능하다.
var고 다른 특징으로 오류에 있어 안정적인 개발을 할 수 있으며 var 보다 let 사용을 권고하는 이유다.
function test() {
let test1 = 1; // 함수 스코프
}
let test1 = 2; // 전역 스코프- const
const도 let과 같은 스코프 범위를 가진다. 블록 안에서 선언되면 해당 블록 스코프의 범위, 블록 밖에서 선언되면 전역 스코프의 범위, 또한 다른 스코프 범위에서도 스코프 범위가 다른 변수로 취급하여 같은 변수명으로도 선언이 가능하다.
let과 대부분 같은 특징을 가지지만 하나의 차이점이 있다. const는 같은 스코프에서라도 재선언 및 변경이 불가능하다. 이는 스코프때문이 아닌 const의 상수 개념때문이다.
const temp = 1;
temp = 2; // TypeError: Assignment to constant variable.
const temp = 2; // Cannot redeclare block-scoped variable 'temp'.ts(2451)
