[JavaScript] var / let / const (중복선언, 재할당, 스코프)

자바스크립트에서 변수를 선언할때 사용하는 var, let, const는

어떤 차이점이 있을까요?

---

[1. 변수의 선언방식]

1.1. var 

var은 중복 선언과 변수의 재할당이 가능합니다.

 

변수를 유연하게 사용할 수 있다는 장점이 있지만

복잡한 코드에서 같은 이름의 변수가 여러번 사용되면 문제를 파악하기에 어려움이 있습니다.

var name = "메롱"
console.log(name) //메롱

var name = "안녕"
console.log(name) //안녕

name = "하이"
console.log(name) //하이

 

이러한 문제점을 보완하기 위해

ES6에서 등장한 변수의 선언방식이 let과 const 입니다.

1.2. let 

let은 중복 선언은 불가하고 변수의 재할당은 가능합니다.

let name = "딸기"
console.log(name) //딸기

let name = "초코"
console.log(name) //Uncaught SyntaxError: Identifier 'name' has already been declared

name = "바나나"
console.log(name) //바나나

 

👇👇 크롬개발자도구에서 let 테스트하기

cf. 크롬개발자도구에서 let 테스트하기

let의 변수 재할당을 테스트하기 위해 크롬 개발자도구를 사용하였습니다.

 

그런데 let으로 재할당이되는 것을 확인했습니다.

이는 개발자도구와 같은 REPL(Read-Eval-Print-Loop)모드와 일반 스크립트의 차이 때문이라고 합니다.

 

 

개발자도구에서 let을 테스트하기 위해서는 아래와 같이 한번에 입력해야합니다.

1.3. const 

const는 중복 선언과 변수의 재할당 모두 불가능합니다.

const name = "딸기"
console.log(name) //딸기

const name = "초코"
console.log(name) //Uncaught SyntaxError: Identifier 'name' has already been declared

name = "바나나"
console.log(name) //Uncaught SyntaxError: Identifier 'name' has already been declared

---

[2. 스코프]

2.1. 함수레벨 스코프 (function level scope) 

• var이 해당함.
• 함수 내부에서 선언한 변수 -> 지역 변수
• 함수 외부에서 선언한 변수 -> 전역 변수

for문의 선언문에서 var 키워드로 선언한 변수 i는 for문의 외부에서 참조가 가능합니다.

var i = 10;

for (var i = 0; i < 3; i++){
    console.log(i) // 0 1 2
}

console.log(i); // 3

 

함수 내에 선언된 변수가 아닌 경우 전역 변수로 인식됩니다.

var value = "org" //전역변수
if(true){
    var value = "new" //전역변수
}
console.log(value) //new

 

2.2. 블록레벨 스코프 (block level scope) 

• let, const가 해당함.
• 모든 코드 블록 내에서 선언한 변수 -> 지역 변수

let cake = "초코" //전역변수
if(true){
    let cake = "딸기" //지역변수
    let cookie = "마시멜로"//지역변수
}
console.log(cake) //초코
console.log(cookie) //Uncaught ReferenceError: cookie is not defined

---

결론적으로, 재할당이 필요없는 상수에는 const

재할당이 필요한 경우 let을 사용하도록 합시다 ~!