구조분해할당

익숙한 내용들이기 때문에 새롭게 알게된 내용들만 정리하려고 한다.

배열

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log(rest) // ["Consul", "of the Roman Republic"]

rest에는 변수가 정의되지 않은 나머지 부분들이 배열로 담겨 있다.
*rest말고 다른 이름을 사용해도 된다.

let [firstName, surname] = []; 할당값이 없다? undefined 반환.

객체

let obj = {title: 'Man'}

let {width = 100, height = 100, title} = obj 
obj에 width와 height는 없지만 기본값을 주어 사용할 수 있다.
*그렇다고 obj.width가 추가되는건 아니다 // undefined

함수

객체를 함수 인자로 사용할 때 구조분해하여 인자에 사용할 수 있다.

let options = { title: "My menu", items: ["Item1", "Item2"]};
add(options)

function add({title, width = 100, height = 100, item: [i1,i2] })

*반드시 인자가 전달된다고 가정을 하고 사용해야한다.
즉 전달인자가 없을 때 add()가아닌 add({}) 또는 add()로 실행하고
function add({title, width = 100, height = 100, item: [i1,i2] } = {} )
함수 인자의 기본값을 빈객체로 만들어주는 것이다.

참고

https://ko.javascript.info/