[새싹 성동 2기] JavaScript 전개 연산자(Spread Operator)와 비구조화(Destructuring) 정리

전개 연산자 (Spread Operator)

전개 연자는 배열이나 객체의 요소들을 개별 항목으로 분리할 때 사용됩니다. 배열이나 객체를 펼쳐서 값을 복사하거나 결합하는 등의 작업을 간단하게 할 수 있습니다.

1. 배열의 요소 펼치기

배열에서 Math.max()처럼 인수로 배열을 직접 전달하면 제대로 동작하지 않지만, 전개 연자를 사용하면 배열 요소를 펼쳐서 전달할 수 있습니다.

//이하는 전개 연자로 배열요소를 전달하는 방법입니다.
const numbers = [20, 2, 9, 22];
console.log(Math.max(...numbers));  // 22 



//이하는 전개 연자 없이 apply로 배열 요소를 전달하는 방법입니다.
const numbers = [20, 2, 9, 22];

// apply() 메서드로 배열을 개별 인수로 전달
console.log(Math.max.apply(null, numbers));  // 22



// 이하는 반복문을 통해 배열 요소를 전달하는 방법입니다.
const numbers = [20, 2, 9, 22];
let max = -Infinity;  // 가장 작은 값으로 초기화

// 배열 요소를 하나씩 비교하면서 최대값 구하기
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

console.log(max);  // 22

 

2. 배열 복사

배열을 복사할 때, 단순히 배열을 할당하면 주소를 공유하게 됩니다. 하지만 전개 연자를 사용하면 배열의 요소를 복사하여 새로운 배열을 생성할 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = [...arr1];  // 배열 복사
arr1[0] = 10;
console.log(arr1, arr2);  // [10, 2, 3] [1, 2, 3]

3. 객체 복사

객체도 배열과 마찬가지로 전개 연자를 사용해 복사할 수 있습니다. 객체를 복사하면, 객체의 속성값을 새로운 객체로 복사하여 독립적으로 작업할 수 있습니다.

let obj1 = { name: "홍길동", age: 23 };
let obj2 = { ...obj1 };  // 객체 복사
obj1.name = "고길동";
console.log(obj1, obj2);  // { name: '고길동', age: 23 } { name: '홍길동', age: 23 }

4. 배열 및 객체 결합

배열이나 객체를 결합할 때도 전개 연자를 사용하면 간편하게 처리할 수 있습니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArr = [...arr1, ...arr2];		
console.log(combinedArr);  // [1, 2, 3, 4, 5, 6]  //만약 전개하지 않으면 [[1, 2, 3], [4, 5, 6]]이 된다.

const obj1 = { name: '홍길동', age: 23 };
const obj2 = { hobby: '축구' };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj);  // { name: '홍길동', age: 23, hobby: '축구' }

 

비구조화 (Destructuring)

비구조화는 배열이나 객체의 값을 쉽게 변수로 분할할 수 있는 문법입니다. 배열과 객체에서 필요한 값만 추출해 변수에 할당하는 데 유용합니다.

1. 배열 비구조화

배열 비구조화는 배열의 각 요소를 변수로 나누어 할당할 수 있게 해줍니다.

const arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);  // 1 2 3 // 기존 배열이었던게 각 a, b, c에 들어갔음을 볼 수 있습니다.

2. 배열의 일부 값 추출

배열에서 일부 값만 추출하려면 쉼표(,)를 사용하여 필요한 값만 선택할 수 있습니다.

const arr = [1, 2, 3];
let [a, , c] = arr;
console.log(a, c);  // 1 3

3. 배열 크기보다 변수 수가 많을 때

배열의 크기보다 많은 변수 수를 지정하면, 나머지 변수는 undefined로 설정됩니다.

const arr = [1, 2];
let [a, b, c] = arr;
console.log(a, b, c);  // 1 2 undefined

4. 기본값 설정

배열 비구조화 시 기본값을 설정할 수 있습니다. 배열의 값이 없으면 기본값이 사용됩니다.

const arr = [1];
let [a, b = 20] = arr;
console.log(a, b);  // 1 20

5. 객체 비구조화

객체 비구조화는 객체의 속성명을 기반으로 값을 변수에 할당합니다. 이때 속성명이 중요합니다.

const obj = { name: "홍길동", age: 23 };
let { name, age } = obj;
console.log(name, age);  // 홍길동 23

6. 객체 속성명 변경 (별칭)

비구조화 시 객체의 속성명을 다른 이름으로 변경할 수 있습니다.

const obj = { name: "홍길동", age: 23 };
let { name: newName, age: newAge } = obj;
console.log(newName, newAge);  // 홍길동 23

7. 기본값 설정

객체에서 존재하지 않는 속성을 변수로 받을 때 기본값을 설정할 수 있습니다.

const obj = { name: "홍길동" };
let { name, age = 30 } = obj;
console.log(name, age);  // 홍길동 30

8. 객체의 나머지 속성 처리

객체에서 특정 속성만 추출하고 나머지 속성들은 rest 객체로 처리할 수 있습니다.

const obj = { name: "홍길동", age: 23, hobby: "축구" };
let { name, ...rest } = obj;
console.log(name);   // 홍길동
console.log(rest);   // { age: 23, hobby: '축구' }

비구조화와 함수 매개변수 사용

비구조화는 함수의 매개변수에서도 유용하게 사용됩니다. 매개변수로 전달된 객체를 비구조화해서 바로 사용할 수 있습니다.

function print1(obj) {
    console.log("#1", `${obj.name} ${obj.age} ${obj.email}`);
}


// 매개변수로 전달된 객체를 지역변수로 비구조화해서 사용
function print2(obj) {
    const { name, age, email } = obj;
    console.log("#2", `${name} ${age} ${email}`);
}


// 비구조화해서 매개변수의 값으로 받는 형식
function print3({ name, age, email }) {
    console.log("#3", `${name} ${age} ${email}`);
}




const person = {
    name: "홍길동",
    age: 23,
    email: "hong@test.com"
};
print1(person);
print2(person);
print3(person);

// #1 홍길동 23 hong@test.com
// #2 홍길동 23 hong@test.com
// #3 홍길동 23 hong@test.com

 

 

 

 

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.