[TIL 23/10/12] JS문법공부, ES6 문법 정리

1. 구조분해할당

(1) 배열의 경우

let [value1, value2] = [1, 'new'
console.log(value2) // 'new' 가 출력됨

let arr = ['value1', 'value2', 'value3']
let [a, b, c, d = 4] = arr

console.log(a) // 'value1' 이 출력됨

2. 객체인 경우

let user = {
  name: 'abc',
  age: 30,
}

let { name, age, birthday } = user 

birthday는 undefined 출력된다. 이 현상을 피하고 싶다면 let { name, age, birthday='1995-12-14 } = user
이런 방식으로 초기값 셋팅해주면 해결 가능

-> 새로운 이름으로 할당

let { name: newName, age: newAge } = user

변수 이름이 각각 newName과 newAge로 바뀌어 출력해보면 {name: 'abc', age: 30} 로 출력됨

3. 단축 속성명 : property shorthand

const name = 'abc'
const newAge = 30


const obj = {
  name: name, 
  age: newAge,
}

const obj2 = {
  name, // 키와 밸류값이 같으므로 생략가능
  age: newAge,
}

위와 아래의 코드가 같은 결과임

4. 전개구문 = spread operator

let arr = [1, 2, 3] //  [1,2,3]
let newArr = [...arr, 4] //  [1,2,3,4]

// 객체

let user = {
  name: 'abc',
  age: 30,
}

let user2 = { ...user }
// 콘솔에 찍으면 시 user, user2 똑같이 출력됨
// {name: 'abc',age: 30}

// 나머지 매개변수
function exam(a, b, ...args) {
  console.log(a, b, c) // 1,2,3
  console.log(...args) // 4,5,6,7
  console.log(args) // [4,5,6,7]
}

exam(1, 2, 3, 4, 5, 6, 7)

5. 템플릿 리터럴

let js = 'Java Script'
console.log(`hello word! ${js}`) // hello word! Java Script 출력됨

템플릿 리터럴 기능이 개인적으로 마음에 들었다. 변수만 바꿔주면 되는 양식이 있는 안내문구나 메세지 기능을 만들때 유용할 것 같다.
그리고 단축속성명 같은 경우에도 코드를 깔끔하게 구현하는데 좋겠다는 생각이 들었다.