자바스크립트 - 확장 연산자: 코드를 단순화하는 마법의 점

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 현대 자바스크립트에서 가장 다재다능하고 강력한 기능 중 하나를 탐구할 것입니다: 확장 연산자. 이전에 들어본 적이 없다면 걱정하지 마세요 - 이 강의가 끝나면 프로처럼 확장할 수 있을 것입니다! ?

확장 연산자는 무엇인가요?

기본적인 것부터 시작해보겠습니다. 확장 연산자는 세 개의 작은 점(...)으로 표현됩니다. 맞아요, 정말로 세 개의 점만으로도 많은 일을 할 수 있습니다! 마법의 지팡이처럼 배열, 객체, 함수 인자에서 요소를 풀어줄 수 있습니다.

상상해보세요, 초콜릿 상자가 있습니다 (음!). 확장 연산자는 그 상자를 열고 모든 초콜릿을 개별적으로 나열하는 것입니다. 각 초콜릿은 별도로 분리되었지만, 같은 상자에서 왔습니다.

간단한 예제를 보겠습니다:

const chocolateBox = ['dark', 'milk', 'white'];
console.log(...chocolateBox);

출력:

dark milk white

이 예제에서 ...chocolateBox는 배열의 모든 요소를 퍼트립니다. 마치 다음과 같이 작성한 것과 같습니다:

console.log('dark', 'milk', 'white');

정말 쉬워요, right? 하지만 이것이 전부가 아닙니다. 확장 연산자의 더 강력한 사용법을 탐구해보겠습니다!

배열을 결합하는 확장 연산자

확장 연산자의 가장 일반적인 사용법 중 하나는 배열을 결합하는 것입니다. 두 개의 다른 초콜릿 상자를 섞어 꿈에 그리던 혼합을 만드는 것과 같습니다!

const fruitBasket1 = ['apple', 'banana'];
const fruitBasket2 = ['orange', 'pear'];
const combinedBasket = [...fruitBasket1, ...fruitBasket2];

console.log(combinedBasket);

출력:

['apple', 'banana', 'orange', 'pear']

여기서 우리는 새로운 배열 combinedBasket를 만들어 fruitBasket1과 fruitBasket2의 모든 요소를 포함시켰습니다. 확장 연산자는 각 배열을 풀어서 하나의 배열로 결합합니다.

하지만 여기서 끝이 아닙니다! 결합하는 동안 새로운 요소를 추가할 수도 있습니다:

const superBasket = ['grape', ...fruitBasket1, 'kiwi', ...fruitBasket2, 'mango'];
console.log(superBasket);

출력:

['grape', 'apple', 'banana', 'kiwi', 'orange', 'pear', 'mango']

이 예제에서 우리는 앞에 'grape', 중간에 'kiwi', 뒤에 'mango'를 추가했습니다. 확장 연산자는 우리가 원하는 곳에 배열을 정확히 삽입할 수 있게 해줍니다.

배열을 복사하는 확장 연산자

확장 연산자의 또 다른 매우 유용한 적용은 배열의 복사입니다. 학교에서 과제를 복사하는 것처럼 (하지만 실제로는 그렇게 하지 마세요, 아이들!) ?

const originalArray = [1, 2, 3, 4, 5];
const clonedArray = [...originalArray];

console.log(clonedArray);

출력:

[1, 2, 3, 4, 5]

이렇게 하면 originalArray와 동일한 요소를 포함하는 새로운 배열 clonedArray를 만듭니다. 최고의 부분? clonedArray에 대한 변경은 originalArray에 영향을 미치지 않으며, 반대로도 그렇습니다. 그들은 독립된 복사본입니다!

그것을 증명해보겠습니다:

clonedArray.push(6);
console.log('Original:', originalArray);
console.log('Cloned:', clonedArray);

출력:

Original: [1, 2, 3, 4, 5]
Cloned: [1, 2, 3, 4, 5, 6]

보세요? 원래 배열은 변경되지 않았고, 우리는 복사본을 변경했습니다.

객체를 결합하는 확장 연산자

확장 연산자는 배열뿐만 아니라 객체에도 마법을 발휘합니다! 두 개의 다른 레시피를 결합하여 슈퍼 레시피를 만드는 것과 같습니다.

const person = { name: 'Alice', age: 25 };
const job = { title: 'Developer', company: 'Tech Co.' };

const employeeProfile = { ...person, ...job };
console.log(employeeProfile);

출력:

{name: 'Alice', age: 25, title: 'Developer', company: 'Tech Co.'}

여기서 우리는 person과 job 객체를 하나의 employeeProfile 객체로 결합했습니다. 두 객체의 모든 속성이 이제 한 곳에 있습니다!

같은 방식으로 속성을 추가하거나 덮어쓰기할 수도 있습니다:

const updatedProfile = { ...employeeProfile, age: 26, location: 'New York' };
console.log(updatedProfile);

출력:

{name: 'Alice', age: 26, title: 'Developer', company: 'Tech Co.', location: 'New York'}

이 예제에서 우리는 Alice의 나이를 업데이트하고 새로운 속성 location을 추가했습니다.

함수의 나머지 매개변수

마지막으로, 함수 매개변수에서 확장 연산자를 사용하는 방법에 대해 이야기해보겠습니다. 이 경우, 그것은 실제로 나머지 매개변수로 알려져 있지만, 같은 ... 기호를 사용합니다.

나머지 매개변수는 함수가 어느 정도의 인자를 받아들일 수 있게 해줍니다. 마법의 가방처럼 많은 아이템을 담을 수 있습니다!

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

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

출력:

6
15

이 예제에서 ...numbers는 sum 함수에 전달된 모든 인자를 배열로 수집합니다. 그런 다음 reduce 메서드를 사용하여 모든 숫자를 더합니다. 이제 이 함수는 임의의 인자 수를 받아들일 수 있습니다!

더 실용적인 예제를 보겠습니다:

function introducePeople(greeting, ...names) {
names.forEach(name => console.log(`${greeting}, ${name}!`));
}

introducePeople('Hello', 'Alice', 'Bob', 'Charlie');

출력:

Hello, Alice!
Hello, Bob!
Hello, Charlie!

이 함수에서 첫 번째 인자는 greeting에 할당되고, 나머지 인자는 names 배열로 수집됩니다.

확장 연산자 메서드 요약

이제 우리가 다루었던 메서드의 빠른 참조 표를 제공해드리겠습니다:

메서드	설명	예제
배열 결합	두 개 이상의 배열을 결합	[...array1, ...array2]
배열 복사	배열의 얕은 복사본을 만들기	[...originalArray]
객체 결합	두 개 이상의 객체를 결합	{...object1, ...object2}
함수 인자	배열을 별도의 인자로 퍼트리기	myFunction(...args)
나머지 매개변수	여러 인자를 배열로 수집하기	function(...args) {}

이제 여러분은 현대 자바스크립트에서 가장 강력하고 유연한 기능 중 하나를 배웠습니다. 확장 연산자는 작은 것처럼 보일 수 있지만, 코드를 깨끗하게 만들고 가독성을 높이며 효율성을 높일 수 있습니다.

기억하시오, 연습이 완벽을 이루는 열쇠입니다. 자신의 코드에서 확장 연산자를 사용해보고, 그것을 실험해보세요. 그러면 그것이 없는 삶을 어떻게 살았는지 이해하게 될 것입니다. 행복한 코딩 되세요, 그리고 코드가 항상 원활하게 퍼지길 바랍니다! ??‍??‍?

Credits: Image by storyset