[Front CS] ES6문법에서 var, let, const 의 차이점은?

 

안녕하세요 미어캣입니다. 😺

 

vue.js를 공부하면서 예전에 들었던 강의와 요즘 듣고 있는 강의의

 

차이점은 바로 ES6 문법을 적용한 방식이라고 생각합니다.

 

최근에는 저 역시 변수/함수 선언 시에 const나 let을 사용하고 있습니다.

 

근데 기존의 var과 어떤 차이가 있는지 ES6문법과 ES5의 문법의 차이가 어떤지 대~충은 느낌으로는

 

체감하고 있겠지만 정확하게는 모른다고 생각해서 한 번 알아보는 시간을 가졌습니다.(대충은 싫어요)

 

그래서 오늘은 ES6문법의 특징과 변수 선언 방식에 차이가 어떤지에 대해서 알아보도록 하겠습니다.

 

---

 

var, let, const의 차이점을 비교하기 전에 ES6가 먼지 알아보았습니다.

 

ES6 : ECMA Script 2015 

JavaScript의 표준화된 버전인 ECMAScript의 6번째 릴리스

주요 특징 :
- Arrow Functions
- var 이외 let, const의 추가
- 객체지향 프로그래밍을 위한 클래스의 추가
- import와 export를 통환 모듈화 지원
- 템플릿 리터럴 (``) 백틱의 활용
- 비동기 프로그래밍을 위한 Promise와 async/await 문법의 도입

 

이러한 기능들은 JavaScript 코드를 보다 간결하고 가독성을 높여주는 것 같습니다.

---

 

저는 그 중에서도 기존의 변수 선언할 때 기존의 var과 let, const의 차이점을

 

확인하고 싶어서 글을 작성하게 되었습니다.

 

크게 변수의 선언, 할당, 범위에서 각각의 차이점이 있었습니다.

 

 

변수의 재 선언 

var : O

let, const : X

var data; 
var data;

에러가 발생하지 않고 extension을 통해서 봤을 때는 뒤의 선언이 앞의 데이터를 덮어씌우는 것 같았습니다.

 

반면에 let과 const의 경우에는

let age;
let age; //error

const name;
const name; //error

둘 다 complie시에 errror를 발생시킵니다.

차이점은 const의 경우에는 함수 선언이후 데이터를 할당하지 않으면 데이터를 할당해야한다는 에러를 뱉습니다.

 

긴 소스에서 var을 사용은 특정 변수를 재선언해도 에러를 뱉지 않기 때문에 기존의 개발자가 변수명을 지각하고 있지 않는다면 큰 문제가 발생할 수도 있습니다.

 

따라서 let과 const를 통해서 사전에 이를 방지 할 수 있습니다.

 

변수의 재 할당

var, let : O

const : X

var data = 'name';
data = 'kim'; //Success

let age = '11';
age = '12'; //Success

const name = 'kim';
name = 'park'// complie은 성공하나 TypeError가 발생

 

이는 기본적으로 const가 constant(상수)이기 때문에 변동 없는 값에 대한 선언에 사용하면 좋을 것 같습니다.

(그래서 메서드를 선언할 때 function a() 에서 const a () =>으로 변경된게 아닐까요?...)

 

변수의 범위 

var : function scope(함수 내)

let, const : block scope(중괄호 내)

//function scope
function a(){
	
    var name = 'kim';
    console.log(name); //kim
}
console.log(name); //error

//block scope 

if(a){

	let name = 'park;
    console.log(name); //park;
}
console.log(name); //error

 

function 내 값과 중괄호 내 값은 공통적으로 console.log로 찍지만 function과 중괄호 밖의 console.log의 경우에는 없는 코드처럼 사용 됩니다.(읽지 않음)

 

🥸 그럼 차이점은 ?

function Scope :
변수는 함수 내에서만 유효
호이스팅이 되어 변수/함수 선언은 해당 함수의 시작부분으로 끌어 올려짐

*호이스팅 :
호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상


block Scope : 
변수는 중괄호 내에서만 유효
선언 되기 이전에 참조될 경우에는 TDZ에 빠짐!

* TDZ(Temporal Dead Zone) :
let 및 const 키워드로 선언된 변수가 선언되기 전에 접근되었을 때 발생하는 현상

 

//호이스팅
funciont a() {
	console.log(name);
    var name = 'kim'; //undefined
}

 

함수의 시작부분으로 호이스팅되어 끌어올려짐으로 실행은 되지만 데이터에 대해서는 undefined로 찍힘!

 

//TDZ

const a = () => {
	console.log(name);
    const name = 'kim';
}

 

let과 const의 경우에는 ReferenceError : Cannot access 'name' before initialization

이라는 에러로 선언되기 전에 실행되어 접근할 수 없다는 에러를 줍니다!!

 

기존의 JavaScript는 undefined라는 모호한 에러만 뱉어서 디버깅이 어려웠다면 let과 const의 사용으로 

 

변수/함수에 관해서는 상당 부분을  해소 할 수 있을 것 같습니다.

 

감사합니다.

---

참고자료 : 

https://codingapple.com/unit/es6-4-var-let-const-hoisting/