[Javascript] ES5, 6 차이

 

ES6

1. const and let
 새로운 변수 키워드
 const - var보다 강력하고, 변수를 재할당할 수 없다.
 let - const와 달리 변수 재할당 가능

---

2. Arrow functions(화살표 함수)

ES5

function func(name) {
return '내 이름은' + name;
}
console.log(func('kea')); //내 이름은 kea

ES6

<방법 1>
const func = (name) => {
return `내 이름은 ${name}`;
}

<방법 2 : return 키워드 빼도 된다.>
const func = (name) => `안녕 ${name}`;

<결과>
console.log(func('kea')); //내 이름은 kea

 

---

map, filter, reduce 등 내장 함수와 사용이 가능하다.

ES5

const arr = ['바나나', '딸기', '사과', 0];

let arrFruits1 = arr.map(function(item)) {
return item;
});
console.log(arrFruits1); //(4) ['바나나', '딸기', '사과', 0];

ES6

let arrFruits2 = arr.map((item) => item);
console.log(arrFruits2); //(4) ['바나나', '딸기', '사과', 0];

3. Template Literals(템플릿 리터럴)
문자열 연결을 위해 더하기(+) 연산자 사용할 필요가 없고, 백틱(`) 사용하여 문자열 내에서 변수를 사용할 수 있다.

ES5

function func() {
return '내 이름은 ' + name + ', 나이는 ' + age + '이다.';
}
console.log(func('kea',29)); //내 이름은 kea이고 나이는 29이다.

ES6

const func = (name, age) => {
return `내 이름은 ${name}, 나이는 ${age}이다.`;
};
console.log(func('kea',29)); //내 이름은 kea이고 나이는 29이다.

4. Default parameters(기본 매개 변수)
매개변수를 놓치더라고, default 값을 지정해놓으면 값을 반환한다. 
기본 파라미터 처리를 하여 오류를 사전에 방지할 수 있다.

ES5

const func = (name, age) => {
return `내 이름은 ${name}, 나이는 ${age}이다.`;
};
console.log(func('kea')); //내 이름은 kea, 나이는 undefined이다.

ES6

const func = (name, age = 29) => {
return `내 이름은 ${name}, 나이는 ${age}이다.`;
};
console.log(func('kea')); //내 이름은 kea, 나이는 29이다.

5.  Array and object destructing(배열 및 객체 비구조화)
 비구조화를 통해 배열/객체 값을 새 변수에 쉽게 할당할 수 있다.
 
ES5 

const contacts = {
familyName : 'k'
name : 'ea'
age : '29'
};

let familyName = contacts.familyName;
let name = contacts.name;
let age = contacts.age;

ES6

const contacts = {
familyName : 'k'
name : 'ea'
age : '29'
};

let {familyName, name, age} = contacts;
console.log(famillyName);
console.log(name);
console.log(age);

참고

변수 명을 바꿀 수도 있다! name에 myName으로 변수명 주기
let {familyName, name: myName, age} = contacts;

예시는 객체이지만, 배열도 동일하다 {}만 []로 바꾸면 된다.