[JavaScript] 구조 분해 할당, 스프레드 연산자

구조 분해 할당 이란?

 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기는데 이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법을 구조 분해 할당(destructuring assignment)이라 한다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘하게 된다.

 

구조 분해 할당(destructuring assignment) : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식

 

- 배열의 구조 분해 할당

 

// 배열의 구조 분해 할당
const pet = ["강아지","고양이","앵무새"]

const [dog,cat,parrot] = pet

console.log(dog,cat,parrot)

-- 구조 분해 시 디폴트 선언

 

// 배열의 구조 분해 할당
const pet = ["강아지","고양이","앵무새"]

const [dog,cat,parrot,hamster] = pet

console.log(dog,cat,parrot,hamster)

-> 분해한 값이 undefined인 경우를 대비해 디폴트 값을 지정할 수도 있다.

// 배열의 구조 분해 할당
const pet = ["강아지","고양이","앵무새"]

const [dog = "개",cat= "고양",parrot, hamster = "햄스터"] = pet

console.log(dog, cat,parrot, hamster)

-> 디폴트 값이 있어도, 분해할 값이 있다면 디폴트 값은 무시된다.

 

- 객체 구조 분해 할당

기본적인 방법

 

// 객체 구조 분해 할당
const cafe = {
    starbucks : "스타벅스",
    coffeebean : "커피빈",
}

const {starbucks} = cafe
console.log(starbucks)

-> 키가 이름 그대로 '키' 역할을 한다.

 

-- 새로운 이름 할당

// 객체 구조 분해 할당
const cafe = {
    starbucks : "스타벅스",
    coffeebean : "커피빈",
}
const { coffeebean : cb } = cafe // 키가 coffeebean인 value 복사하고, 거기에 cb라고 이름 붙여 사용
// console.log(coffeebean) // 바꾸면 원래 변수는 쓰면 안된다
console.log(cb) // 커피빈

const {twosome = "투썸플레이스"} = cafe
console.log(twosome)

-> 객체의 원래 속성명(키)과는 다른 이름의 변수에 할당할 수도 있다.

 

- 객체 리터럴

const avante = "아반떼"
const sonata = "소나타"
const spark = "스파크"

const car = {
    avante : avante , sonata: sonata, spark: spark
}
console.log(car)

 

// 향상된 객체 리터럴
// 객체 리터럴 개선. 새로운 객체 표기법
const avante = "아반떼"
const sonata = "소나타"
const spark = "스파크"
const car = {
    avante , sonata, spark
}
console.log(car)

 

서로 같은 결과가 나온다

 

- 스프레드 연산자

스프레드 연산자를 사용하면 배열,객체 등을 개별요소로 분리할 수 있게된다.

 

새로운 배열을 선언할 때 스프레드 연산자를 사용하면, 기존 배열의 개별 요소를 멤버로 갖는 배열을 생성할 수 있다.

// 스프레드 연산자

const birds = ["앵무새","칠면조","꿩"]
const birds2 = ["닭", ...birds, "타조"] 

console.log(birds2) // 스프레드 연산자는, 사용한 자리에 개별 요소를 '놓고 온다'.

const bd = "빽다방"
const cafe = {
    sb: "스타벅스",
    ed: "이디야",
    cb: "커피빈"
}
const cafe2 = {
    ...cafe,
    tp: "투썸플레이스",
    bd
}
console.log(cafe2)

 

- 분해할당과 스프레드 연산자를 통해 배열에 값 입력받기

let animals = []

document.getElementById("push").onclick = function(){
   const animal = document.getElementById("animal").value
// animals.push(animal)

    if(animals.indexOf(animal) ===-1 ){ // 중복시 추가 X
        animals = [...animals, animal]
    }
   console.log(animals)
}