배열에서의 Spread 문법

Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨 — 65개 중 48번째.

전개 구문(...)을 사용하면 배열과 같은 이터러블을 0개 이상의 인수 또는 요소가 예상되는 위치에서 확장할 수 있습니다. 이는 배열을 결합하거나 배열을 복사하는 것과 같은 작업을 수행하는 간결한 방법을 제공합니다.

일반적인 사용 사례는 다음과 같습니다:

1. 배열 합치기:

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

2. 배열의 얕은 복사본 생성하기:

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

3. 배열에 요소 추가하기:

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]

4. 배열 요소를 함수의 인수로 전달하기:

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

챌린지

쉬움

두 개의 숫자 배열을 인자로 받는 mergeArr라는 이름의 함수를 만드세요. 이 함수는 다음을 수행해야 합니다:

치트 시트

전개 구문(...)을 사용하면 반복 가능한 객체(iterable)를 0개 이상의 인수 또는 요소가 예상되는 위치에서 확장할 수 있습니다.

배열 결합하기:

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

얕은 복사(shallow copy) 생성하기:

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

배열에 요소 추가하기:

const numbers = [1, 2, 3];
const moreNumbers = [0, ...numbers, 4];
console.log(moreNumbers); // [0, 1, 2, 3, 4]

배열 요소를 함수의 인수로 전달하기:

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

직접 해보기

function mergeArr(arr1, arr2) {
  // 여기에 코드를 작성하세요
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.