[JavaScript] 자바스크립트 전개 연산자란?

🎯 전개 연산자, Spread Oprator

• 묶인 배열 혹은 객체를 각각의 필드로 변환한다.
• 객체는 또 다른 객체로의 spread를 지원한다.
• 배열은 또 다른 배열의 인자, 함수의 인자로의 spread를 지원한다.
• 배열의 필드들을 객체에 spread operator로 합치면 에러가 발생한다.
• 객체의 필드들을 배열에 spread operator로 합치면 에러가 발생한다.
• spread operator로 객체를 복사하면, 객체나 배열 필드의 경우 reference만 복사된다.

 

📝 객체 전개 연산자

const o = {
    name: "test",
    age: 23,
    address: "Street",
    job: "FE",
};

let o2 = {
    ...o,
    name: "Tom,",
    age: 24,
}

let o3 = {
    name: "Tom,",
    age: 24,
    ...o,
}

console.log(o2.job); //FE
console.log(o3.name); //test

• spread opreator의 등장 순서에 따라 객체의 필드가 덮어씌워질 수 있다.
• ...o가 뒤에 등장하면, 기존의 name필드가 나중에 등장하여 앞의 name: "Tom"을 덮어 씌운다.

 

📝 배열 전개 연산자

function findMinInObject(o) {
    return Math.min(
            ...Object.values(o)
    )
}

let o1 = { a: 1 }
let o2 = { b: 3 }
let o3 = { c: 7 }

findMinInObject(
    mergeObjects(o1, o2, o3)
) // 1

• mergeObjects는 주어진 객체들의 필드를 합친다.
• findMinInObject에서는 객체의 필드들 중 최솟값을 반환한다.
• Object.values는 객체 값들의 배열을 반환한다.
• 배열 전개 연산자로 Math.min의 인자를 넘긴다.