1.5.5 나머지 매개변수와 전개 연산자

1.5.5 나머지 매개변수와 전개 연산자

ES6에서 도입된 나머지 매개변수와 전개 연산자는 함수 인자와 배열 작업을 더 유연하게 만들어 줍니다. 아래에서는 각각의 개념을 설명하고, 실용적인 예제를 통해 이해를 돕겠습니다.

나머지 매개변수

나머지 매개변수(...)는 함수의 매개변수 중 일부 또는 전체가 특정 개수 이상의 인자를 처리할 수 있도록 도와줍니다. 이를 통해 유연한 함수 정의가 가능해집니다.

예제 - 나머지 매개변수 사용하기

// 두 개 이상의 숫자를 더하는 함수
function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3, 4)); // 10

전개 연산자

전개 연산자(...)는 배열이나 객체를 쉽게 펼칠 수 있게 해줍니다. 이는 주로 배열 결합, 객체 복사, 또는 매개변수 전달 시 유용하게 사용됩니다.

예제 - 전개 연산자 사용하기

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

// 두 배열 결합하기
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// 객체 복사하기
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};
console.log(obj2); // {a: 1, b: 2, c: 3}

실습

실습 프로젝트로 간단한 ToDo List를 만들어볼 것입니다. 이 프로젝트에서는 나머지 매개변수를 사용하여 목록 아이템을 추가하고, 전개 연산자를 사용하여 기존 아이템을 복사해보겠습니다.

ToDo List 예제

HTML:

<ul id="todo-list"></ul>
<input type="text" id="new-todo" placeholder="할 일 추가">
<button id="add-btn">추가</button>

CSS:

#todo-list {
    list-style-type: none;
}
#todo-list li {
    margin: 5px 0;
}

JavaScript:

const todoList = document.getElementById('todo-list');
const addBtn = document.getElementById('add-btn');
const newTodoInput = document.getElementById('new-todo');

// ToDo 목록을 추가하는 함수
function addTodo(...todos) {
    todos.forEach(todo => {
        const li = document.createElement('li');
        li.textContent = todo;
        todoList.appendChild(li);
    });
}

// 버튼 클릭 시 새로운 할 일을 추가
addBtn.addEventListener('click', () => {
    const newTodo = newTodoInput.value;
    if (newTodo) {
        addTodo(newTodo);
        newTodoInput.value = ''; // 입력창 초기화
    }
});

응용

이번 강의에서 배운 나머지 매개변수와 전개 연산자를 활용하여 다른 프로젝트 또는 기능에 적용해 보세요. 예를 들어, 여러 사용자 입력을 받아서 처리하는 기능을 추가하거나, 배열 데이터를 받아들이는 함수로 확장해보는 것입니다.

정리

이번 강의에서는 나머지 매개변수와 전개 연산자에 대해 배우고, 이를 활용한 실습 예제를 통해 이해했습니다. 이러한 ES6의 새로운 문법은 코드의 가독성과 유연성을 높이는 데 큰 도움이 됩니다.

다음 시간에는 비동기 프로그래밍에 대해 더욱 깊이 있게 배워보겠습니다!