[JS] 구조분해(Destructuring) (feat. 쉽게 변수 만들기)

 

안녕하세요 Foma 💻 입니다!

 

오늘은 JavaScript에서 아주 유용하게 변수를 만들 수 있는 구조분해에 대해 알아보도록 하겠습니다.

 

바로 시작할게요~

---

배열 분해해서 변수 만들기

 

대괄호를 이용해서 변수에 값을 할당할 수 있습니다.

 

let arr = ["foma","gran"]
let [foma,gran] = arr
console.log(foma) //"foma"
console.log(gran) //"gran"

---

문자열 분해해서 변수 만들기

 

문자열을 원하는 단위로 분해하여 변수로 만들 수 있습니다.

 

let fomagran = "foma,gran"
let [foma,gran] = fomagran.split(',')
console.log(foma) //"foma"
console.log(gran) //"gran"

---

원하는 요소만 만들기

 

쉼표와 공백을 이용하여 건너 뛸 수 있고 원하는 길이까지만 변수로 만들 수 있습니다.

 

let names = ["foma"."gran","fomagran","young"]
let [foma, ,fomagran] = names
console.log(foma) //foma
console.log(fomagran) //fomagran

---

나머지 한 번에 묶어서 지정하기

 

...을 이용해서 남은 변수들을 모두 담을 수 있습니다.

 

let names = ["foma"."gran","fomagran","young"]
let [foma,gran,...rest] = names
console.log(foma) //foma
console.log(rest) //["fomagran","young"]

---

객체 분해하기

 

객체는 배열이나 문자열과 다르게 중괄호를 사용하여 변수를 지정합니다.

 

let user = {
    name:"fomagran",
    age:27,
    color:"Black"
}
let {name,age,color} = user
console.log(name) //"fomagran"

 

프로퍼티명:원하는 이름으로 지정할 수도 있습니다.

 

let {name:n,age:a,color:c} = user
print(n) //"fomagran"

 

프로퍼티가 없을 때나 값이 없을 때를 대비하여 기본값을 설정할 수도 있습니다.

 

let {name:n = "Fomagran",age:a = 27,color:c = "Blue",food:f = "Rice"} = user
print(f) //"Rice"

---

중첩구조 분해하기

 

중첩으로 되어있는 구조가 있다면 중괄호 안에 중괄호나 대괄호를 사용하여 값을 지정할 수 있습니다.

 

let options = {
    size: {
        width:100,
        height:90
    },
    items:["Cake","Donut"],
    isOkay:false
}

let {size:{width,height},items:[item1,item2]} = options
console.log(width) //100
console.log(item1)//"Cake"

---

파라미터로 분해하기

 

파라미터로 객체를 받을 때 분해하여 값을 얻어낼 수 있습니다.

 

function showOption({title = "title",items:[item1,item2]}) {
    print(`${title} ${item1} ${item2}`)
}
showOption(options)
// title Cake Donut

---

Reference

 

모든 JS 지식은 모던 JavaScript 튜토리얼을 통해 학습하였습니다.

 

모던 JavaScript 튜토리얼