[JavaScript] 펼침 연산자 (...), 활용과 예제

자바스크립트에서 펼침 연산자는 ...으로 표시된다. 이 연산자는 배열이나 객체에 포함된 항목을 목록으로 변환하는 역할을 한다. 코드의 간결함과 가독성을 높여주는 이 연산자는 자주 사용되며, 강력한 도구다. 예제를 통해 살펴보자.

const menu = ['coffee', 'tea', 'juice'];
const copyMenu = [...menu];

console.log(copyMenu); // ['coffee', 'tea', 'juice']

 

활용: 배열에서 특정 항목 제거

---

배열에서 특정 항목을 제거하려고 할 때, 다양한 방식이 있다. 각 방식을 비교하며, 펼침 연산자의 장점을 알아보자.

 

1. 반복문을 이용한 제거

function removeItem(items, removable) {
    const updated = [];
    for (let i = 0; i < items.length; i++) {
        if (items[i] !== removable) {
            updated.push(items[i]);
        }
    }
    return updated;
}

기능적으로는 문제없지만, 반복문을 사용한 이 코드는 다소 길고 복잡하다.

 

2. slice를 활용한 제거

function removeItem2(items, removable) {
    const index = items.indexOf(removable);
    items.slice(index, 1); // 원본 배열 조작
    return items;
}

slice()를 사용하면 코드가 간결해진다. 하지만 이 방법은 원본 배열을 조작하는 단점이 있다. 원본 데이터를 유지해야 하는 경우에는 적합하지 않다.

 

3. 펼침 연산자를 이용한 제거

function removeItem3(items, removable) {
    const index = items.indexOf(removable);
    return [...items.slice(0, index), ...items.slice(index + 1)];
}

 

정리

---

펼침 연산자는 자바스크립트에서 데이터를 다룰 때 필수적인 도구다. 특히, 원본 데이터를 조작하지 않고 새로운 데이터를 생성하는 경우에 적합하다. 위의 예제를 통해, 펼침 연산자의 강력함과 간결함을 확인할 수 있다.

 

요약

• ...은 배열이나 객체의 요소를 목록으로 바꾼다.
• 원본 데이터를 조작하지 않고 새 데이터를 생성한다.
• 코드의 가독성과 유지보수성을 높인다.