ES6에서 추가된 문법과 기능

let, const

let : 재할당O, 재선언X
const : 재할당X, 재선언X, 초기값 필요O

 

화살표 함수(Arrow Function)

function이나 return 키워드 없이 함수를 만드는 방법

const func = () => true;

const func = (param) => {

    return true;

};

⭐function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

 

삼항 연산자

condition ? expr1 : expr2

 

구조 분해 할당(Destructuring)

배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해줌

배열

let [value1, value2] = [1, "new"];

let arr = ["value1", "value2", "value3"];

let [a,b,c,d] = arr

console.log(d) // undefined

// 기본 값 지정

let [a,b,c,d = 4] = arr

 

객체

let user = {name: "nbc", age: 30};

let {name, age} = user; // 왼쪽{}에 있는 애들이 오른쪽 user 안 key랑 매칭이 됨 

// 새로운 이름으로 할당

let {name: newName, age: newAge} = user; // user에서 name을 가져오긴 할건데 newName이라는 이름으로 넣어달라

console.log(name, age) // ReferenceError: name is not defined

console.log(newName, newAge) //nbc 30

// 기본 값 지정

let {name, age, birthDay = "today"} = user;

console.log(birthDay) // today

 

단축 속성명

객체의 key와 value 값이 같다면, 생략 가능

const name = "nbc"

const age = "30"

 // key - value pair

const obj = {

    name,  // 이름과 값이 name: name으로 똑같은 경우 name으로 생략할 수 있다

    age: newAge

}

const obj = {

    name,

    age

}

 

전개 구분(Spread)

배열

let arr = [1,2,3];

let newArr = [...arr, 4];

 

객체

let user = {name: "nbc", age: 30};

let user2 = {...user}

 

나머지 매개변수(rest parameter)

나머지를 배열 형태[]로 받음

function func (a, b, ...args) { }

 

템플릿 리터럴

백틱(`) 과 ${}로 표현. 여러 줄 표현가능

`string

text ${value} text`