[JavaScript] ES5와 ES6 차이

ES는 ECMAScript의 줄인 말로 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 JS를 표준화한 것이다. ES5와 ES6처럼 뒤에 버전 숫자를 붙여 사용된다.

 

 

let, const 키워드 추가

ES5에는 var 만 존재하여 재할당, 재선언에는 자유로웠지만, 호이스팅 문제가 발생하였다. ES6에서는 var를 사용할 때 호이스팅 문제를 해결하기 위해 let과 const가 도입되었다.

 

호이스팅이란?

: 함수나 변수 선언이 코드 최상단으로 끌어올려지는 현상

: 변수나 함수가 어디서 선언이 되었든 최상단에 위치하게 되어 어디서든 참조 가능한 것

 

add(1, 2);

function add(a, b){
	return a + b;
}

add(1, 2)를 실행할 때 function add는 선언되어있지 않아 에러가 발생할 수 있는 상황이지만 정상적으로 동작된다. 이는 add() 함수가 상단으로 올려서 참조할 수 있도록 하였고 이를 호이스팅 이라고 한다.

var를 사용하면 호이스팅이 발생할지만 ES6에서 let과 const를 사용하면 호이스팅이 발생하지 않는다.

 

 

<var, let, const 차이>

var	중복 선언 가능.  var를 이용해 같은 변수명을 계속 선언하고 값을 넣어도 에러 발생하지 않음.
let	변수명을 중복 선언하면 에러 발생. 변수에 재할당이 가능 즉, 변수 중복 선언은 불가. 재할당은 가능
const	변수 재선언, 변수 재할당 모두 불가능

 

※ 값이 변할 수 있는 변수에는 주로 let, 변하지 않고 고정된 변수를 선언하기 위해서는 주로 const를 사용하는 것이 좋다.

※ var는 웬만하면 사용하지 않는다.

※ let과 const를 사용하면서 어떤 변수가 값이 변화될 수 있는 것인지 구분 가능하다.

 

 

화살표 함수(arrow Function) 추가

: ES6에서 등장한 함수 선언 방법이다.

 

<ES5에서 함수 선언>

var func5 = function(arg1, arg2){
	console.log("ES5");
}

 

<ES6에서 함수 선언>

let func6 = (arg1, arg2) => {
	console.log("ES6");
}

ES6에서 화살표 함수를 사용해 함수를 선언하면 함수 명을 따로 지정하지 않아도 된다.

 

 

map() 함수 추가

: 값과 인덱스를 인자로 받아 자동으로 for문을 돌려가며 결과를 낸다.

 

< 기존 for 반복문을 이용해 배열에 모두 접근하는 방법 >

const arr = [10, 20, 30, 40, 50];

for(let i=0l i<arr.length; i++){
	console.log(arr[i]);
}

 

< for문을 향상시킨 방법 >

cont arr = [10, 20, 30, 40, 50];

for(let item of arr){
	console.log(i);
}

 

< map() 함수 사용하는 방법 >

cosnt arr = [10, 20, 30, 40, 50];

arr.map(function(item, i){
	console.log(i + ": " + item);
}

arr.map((item, i) => {
	console.log(i + ": " + item);
});

 

템플릿 리터럴

: 백틱(`)으로 문자열 감싸 표현

const name = "name";
const age = 23;
console.log(`이름은 ${name}, 나이는 ${age}살.`);