자바스크립트 중급 강좌 #10 나머지 매개변수, 전개 구문(Rest parameters, Spread syntax)

나머지 매개변수 이해하기

나머지 매개변수는 함수의 매개변수에서 사용되며, 특정 개수 이상의 인수를 배열 형태로 받을 수 있게 해줘요. 예를 들어, function myFunction(...args) {}와 같이 정의하면, 함수 호출 시 전달된 모든 인수가 args라는 배열로 묶이게 돼요.

이렇게 되면 함수 내부에서 전달된 인수의 개수에 상관없이 유연하게 처리할 수 있죠. 만약 아무 인수도 전달하지 않으면 args는 빈 배열로 초기화돼요. 이 점은 함수 호출 시 인수의 개수를 정해놓지 않고도 다양한 입력을 처리할 수 있는 큰 장점이에요.

한 가지 예를 들어볼게요. 여러 개의 숫자를 더하는 함수를 작성한다고 했을 때, 나머지 매개변수를 사용하면 다음과 같이 간단하게 구현할 수 있어요:

javascript function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); }

이 함수는 몇 개의 숫자를 전달하든지 간에 그 합계를 계산해줄 수 있어요. 만약 1, 2, 3을 전달하면 결과는 6이 될 거고, 5개 이상의 숫자를 전달해도 문제없이 작동하죠.

전개 구문 활용하기

전개 구문(Spread Syntax)은 배열이나 객체를 쉽게 펼치거나 복사할 수 있게 해주는 아주 유용한 기능이에요. 예를 들어, 배열을 합치거나 복사할 때 사용할 수 있어요.

배열을 합칠 때 전개 구문을 사용하면 다음과 같이 간단하게 할 수 있어요:

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

이렇게 하면 combinedArr는 [1, 2, 3, 4, 5, 6]이 되죠. 또한, 객체에서도 사용할 수 있어요. 예를 들어, 기존 객체를 복사하면서 새로운 속성을 추가하고 싶다면 다음과 같이 할 수 있어요:

javascript const user = { name: 'Alice', age: 25 }; const updatedUser = { ...user, age: 26 };

이렇게 하면 updatedUser는 age가 26으로 업데이트된 새로운 객체가 되죠. 전개 구문을 사용하면 코드가 훨씬 간결해지고 가독성도 좋아져요.

실전 예제와 주의사항

실전에서 나머지 매개변수와 전개 구문을 잘 활용하면 코드의 효율성을 높일 수 있어요. 예를 들어, 다양한 데이터를 처리하는 API를 만들 때 이 두 기능을 함께 사용할 수 있죠.

하지만 주의할 점도 있어요. 나머지 매개변수는 항상 마지막에 위치해야 하며, 여러 개의 매개변수를 사용할 때는 순서를 잘 지켜야 해요. 예를 들어, function example(param1, param2, ...rest)와 같이 정의해야 해요. 만약 나머지 매개변수를 다른 매개변수 앞에 두면 에러가 발생해요.

또한, 전개 구문을 사용할 때는 객체와 배열의 구조를 잘 이해하고 있어야 해요. 중첩된 객체나 배열을 다룰 때는 전개 구문이 복잡해질 수 있으니, 주의해서 사용해야 해요.

이렇게 나머지 매개변수와 전개 구문을 함께 사용하면 더욱 강력한 자바스크립트 코드를 작성할 수 있어요. 다양한 예제로 연습해보면서 자신의 코드를 개선해보세요!