[JavaScript] JavaScript의 구조 분해와 스프레드 연산자

JavaScript는 구조 분해(Destructuring)와 스프레드 연산자(Spread Operator)를 통해 데이터를 보다 효율적으로 다룰 수 있습니다. 이 문서에서는 이 두 가지 기능의 개념과 활용 방법을 설명합니다.

---

1. 구조 분해 할당(Destructuring)

구조 분해 할당은 배열이나 객체의 값을 쉽게 추출하여 변수에 할당하는 문법입니다.

1-1. 배열 구조 분해

배열의 값을 원하는 변수에 간단히 할당할 수 있습니다.

const arr = [1, 2, 3];
const [x, y, z] = arr;
console.log(x, y, z); // 1, 2, 3

특정 값 건너뛰기

const arr = [1, 2, 3];
const [first, , third] = arr;
console.log(first, third); // 1, 3

중첩 배열 구조 분해

const nested = [2, 4, [5, 6]];
const [i, , [j, k]] = nested;
console.log(i, j, k); // 2, 5, 6

1-2. 객체 구조 분해

객체의 속성을 변수로 추출할 수 있습니다.

const restaurant = {
    name: 'Super Pizza',
    location: 'Rome, Italy',
    opening: {
        mon: { open: 11, close: 22 },
        tue: { open: 10, close: 23 }
    }
};

const { name, location } = restaurant;
console.log(name, location); // Super Pizza, Rome, Italy

중첩된 객체 구조 분해

const { mon: { open, close } } = restaurant.opening;
console.log(open, close); // 11, 22

기본값 설정

const { fri = { open: 9, close: 18 } } = restaurant.opening;
console.log(fri); // { open: 9, close: 18 }

---

2. 스프레드 연산자(Spread Operator)

스프레드 연산자는 배열이나 객체의 요소를 펼치거나 복사하는 데 사용됩니다.

2-1. 배열에서의 스프레드 연산자

배열의 요소를 펼쳐 새로운 배열을 생성하거나 복사할 수 있습니다.

const arr = [1, 2, 3];
const newArray = [5, 6, ...arr];
console.log(newArray); // [5, 6, 1, 2, 3]

문자열 펼치기

const str = 'Owen';
console.log([...str]); // ['O', 'w', 'e', 'n']

2-2. 객체에서의 스프레드 연산자

객체의 속성을 펼치거나 복사할 수 있습니다.

const restaurantDetails = { name: 'Super Pizza', location: 'Rome, Italy' };
const extendedDetails = { ...restaurantDetails, rating: 4.5 };
console.log(extendedDetails);
// { name: 'Super Pizza', location: 'Rome, Italy', rating: 4.5 }

---

3. 나머지 매개변수(Rest Parameter)

나머지 매개변수는 함수 호출 시 전달된 나머지 인자들을 배열로 수집합니다.

예제

const add = function (...numbers) {
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
    }
    return sum;
};

console.log(add(2, 3)); // 5
console.log(add(2, 3, 4, 5)); // 14

배열 및 객체의 나머지 매개변수 활용

const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(others); // [3, 4, 5]

const { mon, ...weekdays } = restaurant.opening;
console.log(weekdays); // { tue: { open: 10, close: 23 } }

---

4. 구조 분해와 스프레드 연산자 활용 예제

배열 구조 분해와 스프레드 연산자

const restaurant = {
    name: 'Super Pizza',
    location: 'Rome, Italy',
    opening: {
        mon: { open: 11, close: 22 },
        tue: { open: 10, close: 23 }
    }
};


const [Pizza, , Risotto, ...otherFoods] = [...restaurant.mainMenu, ...restaurant.startMenus];
console.log(Pizza); // Pizza
console.log(Risotto); // Risotto
console.log(otherFoods); // ['Focaccia', 'Bruschetta', 'Garlic Bread']

객체 구조 분해와 스프레드 연산자

const restaurant = {
    name: 'Super Pizza',
    location: 'Rome, Italy',
    opening: {
        mon: { open: 11, close: 22 },
        tue: { open: 10, close: 23 }
    }
};


const { name, ...otherDetails } = restaurant;
console.log(name); // Super Pizza
console.log(otherDetails); 
// { location: 'Rome, Italy', opening: { ... } }

---

5. 요약

기능	설명	예시
구조 분해	배열/객체 데이터를 변수로 간단히 추출.	const { a } = obj; / const [x] = arr;
스프레드 연산자	배열/객체 요소를 펼치거나 복사.	[...arr] / { ...obj }
나머지 매개변수	함수 호출 시 전달된 나머지 인자를 배열로 수집.	function(...args) {}

 

구조 분해와 스프레드 연산자는 JavaScript에서 데이터를 더 간결하고 직관적으로 다룰 수 있게 합니다. 이 두 가지 기능을 숙달하면 코드 가독성과 효율성이 크게 향상될 것입니다.