[ES6] const, let, var 차이점 알아보기

1. var

 

자바스크립트 ES5 버전까지의 변수 선언 방식 ( 요즘은 사용하지 않는걸 추천한다)

 

특징

 

1. var 키워드는 생략이 가능하다.

(var) a = 29;
console.log(a); //29

2. 재선언과 재할당이 가능하다.

var a = 10;
console.log(a); // 10

var a = 42;
console.log(a); // 42

a = 12312;
console.log(a); //12312

 

3. 함수 레벨 스코프이다.

 

자바스크립트는 블록레벨 스코프를 사용하는 java나 C와 다르게 함수레벨 스코프이다.
함수레벨 스코프(function level scope) 란 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근이 가능하고 함수 외부에서 선언된 모든 변수는 전역 변수로 한다는 뜻이다.

function foo() {
	var num = 10;
    console.log(num);
}

foo(); // 10;
console.log(num); // ReferenceError

함수레벨스코프이기때문에 위 코드에서 foo라는 함수를 호출 했을때는 에러가 안나지만 함수블록 안의 변수를 콘솔에 찍으려고 하면 참조에러가 뜬다.

또한 전역 변수의 무분별한 사용은 수많은 코드에서 자신도 모르게 변수의 이름이 중복되게 선언 할 수 있고, 의도치 않은 재할당에 의한 상태 변화로 쉽게 찾기 어려운 버그에 직면 할 수 있다.

이러한 문제점을 해결하기 위해 ES6 부터 const 와 let이 등장하게 된다.

 

2. const. let

 

1. const와 let 둘다 재선언은 불가능하다.

let a = 10;
let a = 29; // SyntaxError

const cafe = 'TwoSome';
const cafe = 'TOMTOM'; // SyntaxError

 

2. let은 재할당이 가능하지만 const는 재할당이 불가능하다.

let cafe = 'TwoSome';
cafe = 'BBaekDaBang';
console.log(cafe); // 'BBaekDaBang'

const phone = 'Galaxy';
phone = 'Iphone';
console.log(phone); // TypeError

 

3. const, let은 블록레벨 스코프다.

block level scope 란 모든 코드 블록(함수, 반복문, 조건문 ..... etc) 내에서 선언된 변수는 코드 블록 내에서만 유효하며

코드 블록 외부에서는 참조할 수 없다.

function foo() {
	if(true){
    	let num = 100; 
    }
    console.log(num); //ReferenceEerror , const도 참조에러뜸
}

 

 

📣 그래서 변수선언과 변수할당이 뭔데?

 

변수의 선언은 var, let, const 키워드로 할 수 있다.

자바스크립트에서 변수 선언은 선언 후 초기화 단계를 거쳐 수행된다.

 - 선언단계 : 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
 - 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

다음 코드 예시를 보자

var name;
console.log(name) // undefined

var 키워드를 이용한 변수 선언은 선언 단계와 초기화 단계가 동시에 진행되어, name에 암묵적으로 undefined를 할당해 초기화 한다.

그런데 순서를 바꿔서 작성해도 반환 값이 undefined로 나온다.

console.log(name); // undefined
var name;

어떻게 된걸까? 이는 변수 선언이 런타임에서 되는 것이 아니라, 그 이전 단계에서 먼저 실행되기 때문이다. JavaScript 엔진은 소스코드를 한 줄 씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문을 찾아내 먼저! 실행한다. 즉 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 Hoisting 이라고 한다. 

 

 

그렇다면 변수할당이란 무엇일까? 변수에 값을 할당 할때는 모두에게 익숙한 할당 연산자인 = 를 사용한다.

변수 선언과 할당은 하나의 문으로 단축 표현 할 수 있지만, 두 개의 실행 시점이 다르다.
변수 선언이 호이스팅되어 런타임 이전에 실행되지만, 값의 할당은 소스코드가 순차적으로 실행되는 런타임에 실행된다.

즉 변수의 할당과 console을 실행하는 위치에 따라 반환되는 값이 다르다.

console.log(name); // undefined

var name = 'Lee Dong Hyeong'
console.log(name); // Lee Dong Hyeong

또한 name 이라는 변수에 새로운 값을 재할당 할 수도 있다.

var name = 'Lee Dong Hyeong'
console.log(name); // Lee Dong Hyeong;

name = 'Bark Bo Young';
console.log(name); // Bark Bo Young'

재할당은 변수에 저장된 값을 다른 값으로 변경하는 것으로 , 만약 변경할 수 없는 값이라면 이는 변수가 아니라 상수라고 부른다.

 

 

 

그냥 간단히 요약하자면 

 

var : 더이상 사용하지 않는 것을 추천

const : 한번 선언 후 고정적인 값

 let : 유동적인 값