[ javascript 코딩 ] 자바스크립트 변수 선언 - let 키워드

자바스크립트에서 변수 선언은 아래 세가지 키워드를 사용하는 방법이 있습니다.  

var / let / const

이번에는 let 키워드에 대해 알아 볼까 합니다

■ let 키워드

var 키워드와는 다르게 블록 범위의 로컬 변수를 선언하는데 사용합니다. 물론 글로벌로 선언은 가능하지만 로컬에서 별도로 let 키워드를 사용하요 동일한명의 변수를 선언 시 완전히 다른 변수로 사용 됩니다. 

let y = 50;

위와 같이 y 라는 변수를 let 키워드로 선언합니다. 

let y = 50;
console.log('1. y = '+y);
y = 40;
console.log('2. y = '+y);
 
if(true){
    y = 30;
    console.log('3. y = '+y);
}
console.log('4. y = '+y);
 
if(true){
    let y = 50;
    console.log('5. y = '+y);
}
console.log('6. y = '+y);

위와 같이 코드를 작성 했을 경우를 살펴 보겠습니다. 

글로벌로 선언된 상태에서 변수 값을 50 에서 40으로 변경하는 시도를 했습니다. 

당연하게도 실행 시 y 값은 40으로 변경 되어 있습니다. 

첫번째 if 절에서 y = 30 으로 선언했습니다. 여전히 새로운 let 키워드 사용 없이 기존 변수 값을 30으로 변경하려 시도 했습니다. 

결과는 y = 30 으로 나옵니다. if 절 밖에서 y 값을 찍어봐도 동일하게 y = 30 입니다. 

두번째 if 절에서 let 키워드를 사용하여 y 를 50 으로 선언했습니다. 

5. y = 50 으로 실행 결과 값이 나옵니다. 

여기서 우리는 let 키워드를 사용했다는 것에 주목해야 하며 if 절 안에서 로컬 변수로 선언 되었다는 것을 인지 해야 합니다. 

마지막 console 로그를 찍었을때 최종적으로 나오느 y 값은 무엇일까요? 

50 이라고 생각 하실수도 있지만 30 이 리턴됩니다. 

if 절 안에서 let y = 50 과 같이 let 키워드를 사용한 경우 로컬변수로 글로벌변수 y 와 다른 변수로 인식 됩니다. 

위 코드를 실행 한 실제 결과 값은 아래와 같습니다. 

1. points = 50    (Global Variable)

2. points = 40    (Global Variable)

3. points = 30    (Global Variable)

4. points = 30    (Global Variable)

5. points = 50    (Local Variable)

6. points = 30    (Global Variable)

let 키워드는 var 키워드와 달리 변수 선언 순서에 유의해야 합니다. 

let x;
console.log('x 값은 ' + x);

위와 같이 먼저 변수 선언을 한 이후 호출 하는 경우는 문제가 없습니다. 

console.log('y 값은 ' + y);
let y;

하지만 위와 같이 아직 선언되지 않은 변수를 호출 하고자 하면 Uncaught ReferenceError 오류가 발생합니다. 

var 키워드의 경우가 특이 했던 거였습니다. let 은 다른 언어들과 비슷한 선언 순서를 유지하고 있습니다. 

var 키워드와 let 키워드의 또다른 차이점을 하나 더 정리하면 아래와 같습니다. 

if(true){
    var var_Keyword = 1;
    let let_Keyword = 1;
}
console.log('var_Keyword ==> '+var_Keyword);
console.log('let_Keyword ==> '+let_Keyword);

위와 같이 block statement scope 내에서 (if절) var 키워드와 let 키워드를 이용하여 서로 다른 변수를 선언 했습니다. 

그리고 if절 밖에서 각각의 변수 값을 찍어 보면 어떻게 될까요? 

var 키워드는 글로벌 및 로컬 구분 없이 사용 된다고 했습니다. 

즉, var_keyword 값이 1로 리턴 됩니다. 

하지만 let 키워드는 로컬변수로 선언 한다고 생각하면 됩니다. 즉, if 절 내에서 선언하여 사용 했기 때문에 if 절 밖에서는 해당 변수는 존재하지 않는 변수 이므로 Uncaught ReferenceError 오류가 발생 합니다. 

아래는 위 코드의 실행 결과 입니다. 

var_Keyword ==> 1

Uncaught ReferenceError: let_Keyword is not defined

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D