ES6+ | Spread Operator 전개 연산자

Spread Operator 전개 연산자

나열형 자료를 추출하거나 연결할 때 사용하는 연산자

• 배열, 객체, 변수명 앞에 마침표 세 개(...) 입력
• 배열, 객체, 함수 인자 표현식([], {}, ()) 안에서만 사용 가능
• 기본값 지정 가능

---

Spread Operator 배열, 함수 인자 표현식

• 배열에 저장된 순서대로 요소 나열
• 기본값을 지정하면 해당 변수에 저장될 값이 없을 때 기본값이 저장됨

const arr1 = [1, 2];
const arr2 = [3, 4];

const combined = [...arr1, ...arr2];
console.log(combined);    // [1, 2, 3, 4]

// Destructuring(구조 분해 할당)과 함께 사용
const [first, second, third, fourth, fifth = 'empty'] = combined;
console.log(fifth);    // empty

const spread = (...args) => {
    var[one, two, ...others] = args;
    console.log(others);
}

spread(...combined);    // [3, 4]

---

Spread Operator 객체

• 두 객체를 병합할 때 중복된 키값들은 마지막에 사용한 객체의 값으로 덮어씀
• 객체에서 하나의 값을 추출할 때는 변수 이름을 객체의 키 이름과 동일하게 작성
• 객체에서 여러 값을 추출할 때는 변수 이름에 전개 연산자 사용

const obj1 = {one: 1, two: 2, other: 'hi'};
const obj2 = {three: 3, four: 4, other: 'bye'};

const newObj = {
    ...obj1, ...obj2
}

console.log(newObj);
// {one: 1, two: 2, other: "bye", three: 3, four: 4}

// Destructuring(구조 분해 할당)과 함께 사용
const {one} = obj1;
console.log(one); // 1

const {other, ...theOthers} = newObj;
console.log(theOthers);
// {one: 1, two: 2, three: 3, four: 4}

---

배열, 객체, 함수 인자 표현식에서 나열형 자료형의 값들을 풀어주는 전개 연산자에 대해 알아보았습니다.

내부의 값들을 풀어주기 때문에 배열이나 객체의 값들을 일일이 따로 꺼내지 않아도 돼서 편리하게 사용할 수 있습니다.

주로 Destructuring(구조 분해 할당)과 함께 사용되며 구조 분해 할당에 대해서는 다음 글에서 다루도록 하겠습니다.