자바스크립트 ES6, var와 let 그리고 const

자바스크립트 ES6

ES6는 ECMAScript가 배포된 버전으로 2011년에 릴리스된 버전 5의 다음 버전이다. 자바스크립트 언어의 주요 개선되면서 대규모 소프트웨어 개발을 쉽게 하기 위한 더 많은 기능이 추가되었다.

ES6 변경 사항

ES6는 2015년 6월 게시되었으며 주요 변경사항은 아래와 같다.

let 키워드
const 키워드
화살표 함수
For/of
Map Objects
Set Objects
Classes
Prmises
Symbol
Default Parameters
Function Rest Parameter
String.includes()
String.startsWith()
String.endsWith()
Array.from()
Array.keys()
Array.find()
Array.findIndex()
New Math Methods
New Number Properties
New Number Methods
New Global Methods
Iterables Global Methods
Iterables Object.entries
Javascript Modules

리스트만 보아도 많이 추가가 되었고 실제로 한 달 동안 프론트엔드를 배우면서 자주 쓰는 let, const나 Map, Set도 ES6에서 나오게 됐다는 사실을 알게 되었다.

var와 let 그리고 const

ES6에서 let과 const가 나왔는데 기존의 var와의 차이를 알아보자.

var : 변수 재선언 가능

let, const : 변수 재선언 불가능

let : 변수 재할당 가능

const : 변수 재할당 불가능

var : functional scope로 호이스팅

let, const : block scope로 호이스팅

functional scope

함수 내에서 선언된 변수는 함수 내에서만 유효하고 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수인 것이다.

var num = 123

console.log(num) // 123

{
	var num = 456
}

	console.log(num) // 456

코드 블록을 보면 중괄호 안에 num이 선언되고 할당되었음에도 중괄호 밖에서 456으로 출력된다.

block scope

모든 코드 블록(함수, if문, for문, while문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

let num =123
{
	let num = 456
	let num2 = 456
    console.log(num) // 456
    console.log(num2) // 456
}

console.log(num) // 123
console.log(num2) // ReferenceError: num2 is not defined

let과 const의 경우 num2를 보면 알겠지만 중괄호에 있는 건 중괄호 안에서 할당된 값을 보여주고 그 밖의 범위에서는 선언되지 않은 것으로 나온다.

저작자표시

제이엠_개발일지

자바스크립트 ES6, var와 let 그리고 const