[JavaScript] JavaScript 변수
JavaScript의 변수에는 var와 let, const 이 세가지가 있다.
이번 시간에는 이 변수들의 특징과 차이점에 대해 알아볼 것이다.
var는 한번 선언된 변수를 다시 선언할 수 있다.
|
var name = 'Mike';
console.log(name); // 여기서의 name 은 Mike
var name = 'Jane';
console.log(name); // 여기서 name은 Jane
|
같은 상황에서 let은 에러가 난다. 한번 선언된 변수를 다시 선언할 수 없다는 것이다.
const도 마찬가지이다.
|
let name = 'Mike';
console.log(name); // 여기서의 name 은 Mike
let name = 'Jane';
console.log(name); // Error가 남
|
또한 var는 선언하기 전에 사용할 수 있다.
|
var name';
console.log(name); // undefined
name = 'Mike'; // 할당 |
이는 호이스팅이 일어나기 때문이다.
여기서 호이스팅(Hoisting) 이란?
: 스코프 내부 어디에서든 변수 선언은 최상위 단에 선언된 것처럼 행동하는 것
그렇다면 let과 const는 호이스팅이 일어나지 않을까??
우선 변수는 세가지의 과정을 거쳐서 생성이 된다.
1. 선언 단계
2. 초기화 단계
3. 할당 단계
var는 선언과 초기화가 동시에 진행이 된다.
때문에 위처럼 name = 'Mike'라고 할당 해주기 전에 선언과 초기화를 해주었기 때문에 에러가 나는 것이 아닌 undefined로 나타나는 것이다.
let은 선언 단계와 초기화 단계 할당 단계가 모두 분리되어 작동한다.
호이스팅 되면서 선언 단계가 이루어지지만 초기화는 코드가 진행되면서 이루어지기 때문에 var를 사용했던 것처럼 let을 사용했을 시에는 reference error가 난다.
const는 선언과 초기화, 할당이 동시에 이루어지기 때문에 나중에 변수를 할당할 수 없다.
var 는 함수 스코프이고 let, const는 블록 스코프이다.
블록 스코프는 모든 코드 블록에서 선언된 변수는 그 코드 블록 안에서만 유효하며 외부에서는 접근할 수 없다.
이때 블록 스코프는 함수, if 문, for 문, while 문, try/catch 문 등을 말한다.
즉, 코드 블록에서 선언한 변수들은 지역 변수이다.
|
function add() {
//block-level Scope
}
if() {
//block-level Scope
}
for (let index = 0; index < array.length; index++) {
//block-level Scope
}
|
반면 함수 스코프는 함수 내에서 선언한 변수만 그 함수 내에서의 지역변수가 되는 것이다.
|
const age = 30;
if(age>19) {
var txt = '성인입니다.';
}
console.log(txt); //'성인입니다.'
|
위의 코드와 같이 if 문 안에서 선언한 var 는 if 문 바깥의 영역에서도 사용이 가능하지만 let과 const는 그렇게 할 수 없다는 것이다. let과 const는 if 문 안에서 선언했다면 if 문 내부에서만 사용이 가능하다.
|
function add(num1, num2) {
var result = num1 + num2;
}
add(2, 3);
console.log(result); // ReferenceError : result is not defined
|
let도 함수 안에 선언했을 때에는 그 함수 내에서만 사용이 가능하다.
유일하게 벗어날 수 없는 스코프가 함수인 셈이다.
하지만 var는 이제 사용하지 않고 let과 const를 사용한다.
* 본 포스팅은 코딩앙마님의 JavaScript 중급 강좌를 기반으로 작성한 글입니다.