9.1 Spread (스프레드 연산자)
JavaScript에서 rest와 spread 연산자는 배열, 객체 및 함수 작업에 다양한 가능성을 제공합니다. 이 연산자는 코드 작성을 간소화하여 보다 표현적이고 유연하게 만들어줍니다. 이번 강의에서는 rest와 spread의 기본 개념과 그 사용 예를 자세히 살펴보겠습니다.
spread (...) 연산자는 배열과 객체를 필요한 위치에 "풀어놓을" 수 있게 해줍니다. 이것은 배열이나 객체를 복사하거나 결합할 때, 그리고 함수에 인수를 전달할 때 유용할 수 있습니다.
예제 1: 배열 복사하기
이 예제에서 copiedArray는 originalArray의 복사본입니다.
여기서 … 연산자는 배열을 변수 목록으로 풀어놓고, [] 연산자는 변수들의 집합을 새로운 배열로 묶습니다:
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // 콘솔 출력: [1, 2, 3]
예제 2: 배열 결합하기
이 예제에서 두 배열 array1과 array2가 하나의 배열 combinedArray로 결합됩니다.
여기서 … 연산자는 두 배열을 변수 목록으로 풀어놓고, [] 연산자는 변수들의 집합을 새로운 배열로 묶습니다:
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // 콘솔 출력: [1, 2, 3, 4, 5, 6]
예제 3: 함수에 인수 전달하기
이 예제에서 배열 numbers는 함수 sum()의 세 인수로 풀어집니다:
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 콘솔 출력: 6
예제 4: 객체 복사하기
이 예제에서 copiedObject는 originalObject의 복사본입니다:
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // 콘솔 출력: { a: 1, b: 2 }
예제 5: 객체 결합하기
이 예제에서 두 객체 obj1과 obj2가 하나의 객체 combinedObject로 결합됩니다:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // 콘솔 출력: { a: 1, b: 2, c: 3, d: 4 }
9.2 Rest (나머지 파라미터 연산자)
rest (...) 연산자는 여러 요소를 배열로 모으는 데 사용됩니다. 이는 가변 인수를 받는 함수 작업 및 배열과 객체의 구조 분해 시 특히 유용합니다.
예제 1: 함수에서 나머지 파라미터 사용하기
이 예제에서 함수 sum()은 임의의 개수의 인수를 받아 합산합니다:
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 콘솔 출력: 6
console.log(sum(4, 5, 6, 7)); // 콘솔 출력: 22
예제 2: rest로 배열 구조분해
이 예제에서 배열의 처음 두 요소는 first와 second 변수로 할당되고, 나머지 요소들은 rest 배열로 모입니다:
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 콘솔 출력: 1
console.log(second); // 콘솔 출력: 2
console.log(rest); // 콘솔 출력: [3, 4, 5]
예제 3: rest로 객체 구조분해
이 예제에서 속성 a와 b는 개별 변수로 추출되며, 나머지 속성들은 rest 객체로 모입니다:
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 콘솔 출력: 1
console.log(b); // 콘솔 출력: 2
console.log(rest); // 콘솔 출력: { c: 3, d: 4 }
9.3 실제 과제에서의 rest와 spread 사용
예제 1: 조건부로 배열 결합하기
이 예제에서 사용자 설정 userSettings은 기본 설정 defaultSettings 값을 재정의합니다:
const defaultSettings = { theme: 'dark', showNotifications: true };
const userSettings = { showNotifications: false, fontSize: 14 };
const settings = { ...defaultSettings, ...userSettings };
console.log(settings); // 콘솔 출력: { theme: 'dark', showNotifications: false, fontSize: 14 }
예제 2: 배열을 부분으로 나누기
이 예제에서 배열 numbers는 처음 두 요소를 추출한 후 두 부분으로 나뉩니다:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [first, second, ...rest] = numbers;
const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
const secondHalf = rest.slice(Math.floor(rest.length / 2));
console.log(firstHalf); // 콘솔 출력: [3, 4, 5, 6]
console.log(secondHalf); // 콘솔 출력: [7, 8, 9, 10]
GO TO FULL VERSION