모두가 아는let이나 const 이외에 ES6 이후 개선된 부분을 한눈에 보기쉽게 요약 정리해보고자 한다.
객체표기법(Object Literal)
객체를 보다 간결하게 쓸 수 있게한 syntactic sugar로, 불필요한 프로퍼티의 기재를 최소화한다.
프로퍼티의 key와 value을 모두 쓰던 x:x에서 x로 대체해 key와 value가 같다면 한 번만 기재할 수 있게 하였다.
+Syntactic Sugar(문법적 설탕): 중복되는 표현을 줄이고 보다 간결하고 명확한 표현이 가능하게 하는 프로그래밍 문법
const createPerson = (name, age, gender) => {
"use strict";
return {
name: name,
age: age,
gender: gender
};
};위 코드는 아래 코드와 동일하다.
const createPerson = (name, age, gender) => {
"use strict";
return {
name,
age,
gender
};
};객체 내 함수선언 간략화
객체 내에 메소드로 함수를 선언할 때 ES5까지는 아래와 같이 쓰였다면,
const person = {
name: "Taylor",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};ES6 이후로는 같은 코드를 아래와 같이 function키워드와 colon(:)을 생략할 수 있게 되었다.
const person = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};객체 구조 분해 할당(Destructuring Assignment)
이전에는 아래와 같이 객체를 분해했다면,
const obj = {
a: "apple",
b: "banana",
c: "carrot"
};
const a = obj.a; //"apple"
const b = obj.b; //"banana"
const c = obj.c; //"carrot"
//함수의 매개변수로 전달되는 객체
function myCat(infos) {
infos = infos === undefined ? {} : infos;
var name = infos.name === undefined ? "Sogeum" : infos.name;
var color = infos.color === undefined ? "white" : infos.color;
var age = infos.age === undefined ? 3 : infos.age;
var toys = infos.toys === undefined ? ["kasha-kasha", " wool-ball", " bugs"] : infos.toys;
console.log(`My cat is ${age} year-old ${color} Persian. Her name is ${name} and she loves to play with ${toys}.`);
}
myCat();
//My cat is 3 year-old white Persian. Her name is Sogeum and she loves to play with kasha-kasha, wool-ball, bugs.ES6 이후부터는 중괄호{} 및 대괄호[]를 사용해 보다 간단히 분해할 수 있게 되었다.
//예제1.
const obj = {
a: "apple",
b: "banana",
c: "carrot"
};
const { a, b, c } = obj;
console.log(a, b, c); //apple banana carrot
//함수의 매개변수로 전달되는 객체
function myCat({name = "Untitled", color = "white", age = 3, toys = []}) {
console.log(`My cat is ${age} year-old ${color} Persian. Her name is ${name} and she loves to play with ${toys}.`);
}
const infos = {
name: "Sogeum",
toys: ["kasha-kasha", " wool-ball", " bugs"]
};
myCat(infos);
//My cat is 3 year-old white Persian. Her name is Sogeum and she loves to play with kasha-kasha, wool-ball, bugs.
//예제2.
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
const { today, tomorrow } = HIGH_TEMPERATURES;
console.log(today); //77
console.log(tomorrow); //80배열 분해 할당(Array Destructuring)
이전에는 인덱스를 사용해 아래와 같이 배열을 분해했다면,
const array = [1, 2, 3, 4, 5, 6];
const a = array[4]; //[5]
const b = array[array.length - 1]; //[6]ES6 이후로는 보다 간단히, 그리고 다양한 방법(Trailing Commas, Rest Parameters, etc.)으로 배열을 분해하는 것이 가능해졌다!
/*Trailing Commas a.k.a Final Commas*/
//Ex.1
const array = [1, 2, 3, 4, 5, 6];
var [ , , , , a, b] = [1, 2, 3, 4, 5, 6];
console.log(a); //[5]
console.log(b); //[6]
var [ a, b, , , , ] = [1, 2, 3, 4, 5, 6];
console.log(a); //[1]
console.log(b); //[2]
//Ex.2
const arr = [7, 8, 9, , , ];
arr.length; //5
/*Rest Parameters*/
//Ex.1
[c, d, ...rest] = [1, 2, 3, 4, 5, 6]; //<-'rest'가 새로 만들어지는 배열의 이름이 된다.
console.log(c); //[1]
console.log(d); //[2]
console.log(rest); //[3, 4, 5, 6]
//Ex.2
const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
const [a, b,...arr] = list; //<-여기서 source의 인덱스 2~나머지가 'arr'라는 새로운 배열을 생성한다.
return arr;
}
removeFirstTwo(source); //[3, 4, 5, 6, 7, 8, 9, 10]더불어 아래의 방법으로 값을 서로 swap 하는 것도 가능해졌다!
let a = 5;
let b = 9;
[a, b]; //[5, 9]
//a와 b의 값 swap
[a, b] = [b, a]; //[9, 5]
console.log(a); //[9]
console.log(b); //[5]Class-constructor 키워드로 생성자함수 만들기
function키워드로 아래와 같이 생성자함수의 표현식을 기재했다면,
var SpaceShuttle = function(targetPlanet){
this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');ES6 이후로는 같은 코드를 class와 costructor라는 키워드를 이용해 표현할 수 있게 되었다.
class SpaceShuttle {
constructor(targetPlanet) {
this.targetPlanet = targetPlanet;
}
}
const zeus = new SpaceShuttle('Jupiter');extends로 프로퍼티 상속하기
ES6부터는 extends 키워드를 사용해서 다른 객체의 메소드를 상속받는 것이 가능해졌다.
예를 들어 아래와 같이 Shape라는 생성자함수가 있을 때,
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
}Shape의 모든 기존 메소드를 상속받는 Rectagle 인스턴스를 새롭게 만들고 싶다면,
아래와 같이 한다:
class Rectangle extends Shape {}
const rectangle = new Rectangle (20, 20, 'blue');
console.log(rectangle.width); //20
console.log(rectangle.height); //20
console.log(rectangle.color); //blue
매개변수 기본값(default parameter)설정하기
이전에는 아래와 같이 매개변수의 기본값을 설정했다면,
//방법 1.
function calcAge (year) {
if (!year) {
year = 1998;
}
return 2020 - year;
}
calcAge(); //22
//방법2.
function calcAge (year) {
year = year || 1998;
return 2020 - year;
}
calcAge(); //22ES6 이후로는 매개변수가 들어가는 괄호 안에 기본값을 할당해줌으로써 같은 코드를 표현할 수 있게 되었다.
function calcAge (year = 1998) {
return 2020 - year;
}
calcAge(); //22Reference
*본 게시글은
freecodecamp.org 의 ES6 파트와
https://www.zerocho.com/category/ECMAScript/post/575d20a97d96d81700508ccd
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
를 참고 및 번역하여 작성되었습니다.
학습단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 곧바로 정정하도록 하겠습니다 😊
