7. var로 변수 선언
자바스크립트에서 var로 변수를 선언하는 것을 종종본다.
내가 배울 때는 let 그리고 const라고 배웠는데
인터넷을 찾다보면 var가 많이 보인다.
var에 대해 정리해보자!
일단 var변수는 let이나 const처럼 똑같이 키워드, 변수 이름으로 선언할 수 있다.
키워드, 변수이름, 할당 연산자, 값으로 선언과 동시에 값을 할당해 줄 수도 있다.
var variable;
variable = 'Yunju';
//또는
var variable = 'Yunju';
그럼 var는 왜 사라진 것일까?
첫번째! 중복 선언 허용의 문제점 때문이다.
let과 const와는 다르게 var는 중복 선언이 가능하다.
똑같은 이름으로 변수를 한 번 더 선언하게 되면, 기존의 변수를 덮어써 버린다.
let 변수에 값을 재할당하는 것과는 다르다.
var myVariable = 'yunju';
console.log(myVariable); //yunju가 출력
var myVariable = 'Yunju!';
console.log(myVariable); //Yunju!가 출력이렇게 변수가 중복선언되면 길고 복잡한 코드를 작성할 때 실수할 가능성이 커진다.
두번째! 함수 Scope의 문제이다.
let이나 const는
if, for, function등등 어떤 키워드와 관계 없이 코드 블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope를 나눈다.
하지만 var 변수는 scope가 function에서만 구분되어 있다.
???
예시를 통해 살펴보자.
let으로 x 변수를 선언한 것과
var로 x 변수를 선언한 예시이다.
{
let x = 3;
}
function myFunction() {
let y = 4;
}
console.log(x);
console.log(y);
//Uncaught ReferenceError : x in not defined
//let이나 const의 경우 중괄호로 감싸진 경우라면 모두 중괄호 밖에서는 지역 변수에 접근 할 수 없음!{
var x = 3;
}
function myFunction() {
var y = 4;
}
console.log(x);
console.log(y);
//var 변수는 지역변수의 구분이 함수에만 있음. if 문 등에서 선언한 변수가 전역변수의 역할을 하게 될 수도 있다. 이렇게 함수를 기준으로만 적용되는 스코프를 함수 스코프,
코드 블록을 기준으로 적용되는 스코프를 블록 스코프라고 부른다.
마지막 세번째! 호이스팅(Hoisting)의 문제!
let과 const로 선언한 변수는 선언되기 이전에는 당연히 사용될 수 없다.
하지만, var 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능하다.
ㄷㄷ
변수의 선언이 끌려 올라가서 마치 변수 선언이 된 것 처럼 동작한다.
이렇게 변수가 끌어올려지는 현상을 호이스팅(hoisting)이라고 부른다.
또한 함수 선언도 마찬가지로 호이스팅이 가능하다.
이러한 3가지 이유 등으로 var는 이제 잘 사용되지 않는다.
var에 대해 잘 몰랐는데
알게되니 더 헷갈리는 느낌...
여하튼 변수를 선언할 때는 let과 const를 사용하고
함수를 선언할 때는 function을 사용한다!