Javascript (자바스크립트) - 변수 선언 (var, let, const)

ES6가 나오기 전 까지 변수를 선언하는 방법은 var 선언을 통해서 할 수 있었다.

 

var 변수 선언 외에 ES6이상 부터는 let, const라는 변수 선언이 가능해졌다.

 

1. var 변수 선언의 특징

- 함수 레벨 스코프

변수의 범위가 함수의 범위 내에만 적용이 된다.

if문이나 for 문과 같은 블록 영역에 선언된 변수는 전역변수가 된다.

var test = 'test 문구';

function testFnc(){
   var test2 = 'test2 문구';
}

console.log(test);   // 'test 문구' 출력
console.log(test2);  // Uncaught ReferenceError: test2 is not defined 출력

위의 예시와 같이 함수 안에 선언한 var 변수는 함수 안에서만 사용이 가능하다.

 

 

- 변수 중복 선언 가능

변수를 이미 선언한 후에 다른 영역에서 언제든지 변수를 재선언, 중복선언이 가능하다.

이 경우 기존에 선언한 변수를 덮어버리는 경우가 되기 때문에 유의할 필요가 있다.

var test = 'test 문구';

console.log(test);   // 'test 문구' 출력

var test = '또 다른 test 문구';

console.log(test);   // '또 다른 test 문구' 출력

위의 예시를 통해 보이는 코드와 같이 test 변수를 선언 후에

다른 데이터 값으로 test 변수를 또 한번 선언하여 test 함수의 값을 변경하였다.

 

2. let, const 변수 선언의 특징

let, const 변수 선언은

es6 부터 등장한 문법으로 기존의 var 변수 선언과는 조금 다른 특징을 가지고 있다.

 

- 블록 레벨 스코프

var 변수가 함수 레벨 스코프로 함수 내에서 변수의 범위(스코프)를 잡았다면

let과 const의 변수의 범위는 블록 레벨 스코프의 형식이다.

 

즉, var 변수 선언과 다르게 if문, for문 등의 블록 영역 안에서 변수의 범위가 형성된다.

var testBool = true;

/* var 변수 선언 */
if(testBool == true){
   var test = 'test 문구';
}

console.log(test);  // 'test 문구' 출력


/* let, const 변수 선언 */
if(testBool == true){
   let test2 = 'test2 문구';
   const test3 = 'test3 문구';
}

console.log(test2);  // Uncaught ReferenceError: test2 is not defined
console.log(test3);  // Uncaught ReferenceError: test3 is not defined

위의 예시와 같이 var 변수 선언은 if문 안에서 사용이 되어도 전역에서 사용이 가능하고

 

let, const 변수 선언의 경우 if문과 같은 블록 영역 안에서 선언된 변수는

그 안에서만 사용이 가능하고 전역이나 다른 영역에서는 사용할 수 없다.

 

3. let 변수 선언과 const 변수 선언의 차이

위에서 let, const 변수 선언이 var 변수 선언과 다른 차이를 알아봤다면

let과 const 변수선언의 차이를 알아보려한다.

 

- let

변수 선언 후 데이터 변경만 가능, 재선언 불가능

 

- const

변수 선언 후 데이터 변경 및 재선언 불가능

 

위 내용과 같은 특징이 있다.

/* let 변수 선언 */
let test = 'test 문구';
let test2 = 'test2 문구';

let test = '또 다른 문구';
// Uncaught SyntaxError: Identifier 'test' has already been declared

test2 = '또 다른 2 문구';

console.log(test2);   // '또 다른 2 문구' 출력


/* const 변수 선언 */
const test3 = 'test3 문구';

const test3 = '또 다른 3 문구';
// Uncaught SyntaxError: Identifier 'test' has already been declared

test3 = '또 다른 3 문구';
// Uncaught SyntaxError: Identifier 'test' has already been declared

 

 

 

 

 

 

---

참고

https://poiemaweb.com/es6-block-scope