js : var 와 let의 차이 그리고 const

 

항상 var 와 let의 차이가 궁금하였는데 js를 공부하면서 가장 처음 기초로 알아야 할 문법이자 가장 중요한 문법이니 

정리 해보고자 한다. 

 

우선 변수에 대해서 알아야한다. 

변수

변수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소 라고 할 수 있다. 

let tistory;

 

할당 연산자 = 를 사용해 변수 안에 데이터를 저장할 수 있다. 

 

let tistory;

tistory = 'Hello'

 

문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다. 

 

상수

const 는 상수이며 상수는 변하지 않는 값이다. 따라서 변하지 않는 값을 선언할 때는 let대신 const를 사용한다. 

 

const myHeight = 165;

 

이렇게 const 로 선언한 변수를 '상수'라고 한다. 상수는 재할당할 수 없으므로 상수를 변경하려고 하면 에러가 발생한다.

const myHeight = 165;
myHeight = 293 ; // error, can't reassign the constant!

 

var 과 let의 차이

 

이젠 var 과 let의 차이에 대해서 정리 해보겠다.

 

1. var은 블록스코프가 없다.  

 

스코프(scope)란? : 유효 범위

• 스코프는 변수의 유효 범위를 나타냅니다.
• 변수가 선언되었을 때, 해당 변수의 스코프 내에서만 접근이 가능합니다.

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근이 가능하다. 

if (true) {
	var x = true; //let대신 var 사용.
}

console.log(x);//true (블록 문인 if문이 끝났어도 변수에 여전히 접근 가능하다.)

 

var 는 전역스코프이거나 함수스코프이기 때문에 블록 스코프 밖에서 변수에 접근이 가능하다.

 

var는 블록스코프 뿐만 아니라 루프 스코프도 형성하지 않기 때문에 다음 예제와 같이 루프 스코프 밖에서 접근이 가능하다. 

for (var i =0; i < 10; i++ ) {
//...
}
alert(i);//10, 반복문이 종료되었지만 i는 전역변수이므로 여전히 i에 접근 가능하다.

 

코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 된다.

function sayHello() {
	if(true) {
		var x = 'Hello';
        }
        alert(x);//제대로 출력된다.
}
sayHello();
alert(phrase);// Error: phrase is not defined

 

 

2. 호이스팅(끌어올리다.)

Hoisting이란 코드에 실제 선언되기 전에 자바스크립트에서 일부 유형의 변수를 접근 가능하게 혹은 코드에서 사용 가능하게 해주는 것이다.

Hoisting 원리 : 실행 이전에, 변수 선언을 스캔한다. 이 작업은 execution context의 생성 단계에서 이루어진다. 코드에 있는 각각의 변수는 변수 환경 개체에 생성된다.

 

var는 변수를 나중에 선언해도된다. 즉 호이스팅이 발생한다. 변수를 사용하기 전에 참조하여도 에러가 발생하지 않는다.

이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 해두었기 때문이다.

또한 var와 마찬가지로 함수 선언문 또한 동일하게 선언 하기 전 호출되어도 에러가 발생하지 않는다.

 

function add() {
	a = 5;
    b = 4;
    var a;
    var b;
    var add = a + b;
}

add();

 

var phrase가 위로 이동한 것처럼 보인다.

function add() { 
	var a = 4;
    var b = 5;
    var add = a+b;
} 
add();

 

이렇게 변수가 끌어 올려지는 현상을 '호이스팅(hoistiong)'이라고 부른다. var로 선언한 모든 변수는 함수의 최상위로 '끌어올려지기' 때문이다.

 

3. var 은  let 과 달리 전역 객체 변수에 접근할 수 있다.

let gLet = 5;
alert(window.gLet);//undefined(let으로 선언한 변수는 전역 객체의 프로퍼티가 되지 않습니다.)

 

브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 된다.

var gVar = 5;
alert(window.gVar); // 5 (var로 선언한 변수는 전역 객체 window의 프로퍼티가 됩니다)

 

 

 

요약 

1. var로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖는다.

2. var 선언은 함수가 시작되는 시점에서 처리된다. 

3. var은 전역 객체 변수에 접근할 수 있다.