JavaScript 문법 - 4

---

ES6 문법 - 1

---

- 구조분해할당 ( destructuring )

배열이나, 객체의 속성 을 분해해서 변수에 담을 수 있게해주는 문법

배열인 경우

let [value1, value2] = ["박재민", "24살"] 
console.log(value1) // 박재민
console.log(value2) // 24살

// 분해 후 순서대로 담음 ( "박재민" -> value1 , "24살" -> value2 )

객체인 경우

let {name, age} = {
  age: 24,
  name: "Jaemin"
}

console.log(name) // Jaemin
console.log(age) // 24
// 분해 후 key 에 맞춰서 담음 ( "Jaemin" -> name , 24 -> age )

새로운 이름으로 할당

let user = {
  name: "Jaemin",
  age: 24
}

let { name: newName, age: newAge } = user
console.log(newName) // Jaemin
console.log(newAge) // 24

// user 에 있는 name 의 값과 age 의 값을 newName 과 newAge 에 할당시킴 ( 새로운 이름으로 할당 )

---

- 단축 속성명

value 에는 변수도 올 수 있는데 이때, key 와 value (변수) 가 같을 경우 생략 가능하다.
const object = { name, age }

const name = "Jaemin"
const newAge = "24"

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

// object 객체 안에 있는 name (key) 와 name(value) 가 완전히 똑같으므로 생략 가능.
// age (key) 와 newAge (value) 는 다르기때문에 생략이 안됨.

const object = { name, age : newAge } // 생략된 형태

---

- 전개 구문 (spread)

기존 구조를 벗어나서 새로운 구조를 덧입힐 때 사용한다.

let arr = [1, 2, 3]
console.log(arr) // [1, 2, 3] 
console.log(...arr) // 1 2 3 기존 [] 구조를 벗어남

let newArr = [...arr, 4]
console.log(arr) // [1, 2, 3]
console.log(newArr) // [ 1, 2, 3, 4 ] 기존 구조를 벗어나서 새로운 구조 안에 arr + 4 의 결과가 나옴

- 나머지 매개변수

spread 형식

// ...args : 추가적으로 어떤 아규먼트(argument) 가 들어올 수 있다.
function exampleFunc (a, b, c, ...args) {
  console.log(a, b, c) // 1 2 3
  console.log(...args) // 4 5 6 7
}

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

args 만 출력

function exampleFunc (a, b, c, ...args) {
  console.log(a, b, c) // 1 2 3 
  console.log(args) // [ 4, 5, 6, 7 ]
}

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

- 템플릿 리터럴

백틱 ( `` ) 을 사용하고 멀티라인 을 지원한다.

console.log("I am 24 years old.") // I am 24 years old. (기존엔 문자열 출력할 때 " " 사용)

console.log(`I am ${12 + 12} years old`) // I am 24 years old.
// `` 사용하면 JS 코드도 들어갈 수 있음 ( ${} 사용 )

const age = "I am 24 years old."
console.log(`My name is Jaemin and ${age}`)
// My name is Jaemin and I am 24 years old

멀티라인

console.log(`
    Hi
      My name is Jaemin!

      nice to meet you

                    2024.01.02 `)
// Hi
//       My name is Jaemin!

//       nice to meet you

//                     2024.01.02
// 줄바꿈, 띄어쓰기가 유지된 상태로 출력됨