TIL 2025-01-06

Februaar·2025년 1월 6일

✅ 오늘 한 일

[모던 자바스크립트 Deep Dive] 35장 스프레드 문법 정리

🍀 스프레드 문법

스프레드 문법 ...은 하나로 뭉쳐진 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록 으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set과 같은 for...of 문으로 순회할 수 있는 이터러블 에 한정된다-!!

하나의 코드를 예시로 두고 보면,

console.log(...[1, 2, 3]); // 1 2 3

위 예제에서 ...[1, 2, 3]은 이터러블인 배열을 펼쳐서 요소들을 개별적인 값들의 목록 1 2 3으로 만든다.

❕❕ 여기서 주의할 점

1 2 3은 값이 아닌 값들의 목록으로 봐야한다.

즉 스프레드 문법의 결과는 값이 아니다.

스프레드 문법 ...이 피연산자의 연산을 통해 값을 생성하는 연산자가 아니라는 말도 된다.

따라서 스프레드 문법의 결과는 변수에 할당할 수 없다.

이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다는 특징이 있다.

근데 쉼표로 구분한 값의 목록이란 어떤 것들을 말하는 걸까?

⭐ 함수 호출시 인자 목록

function sum(a, b, c) {
	return a + b + c;
}

const numbers = [1, 2, 3];

const result = sum(...numbers);
console.log(result); // 6

💡 설명
함수 호출 시 인자 목록은 쉼표로 구분되므로, 배열을 스프레드 문법으로 펼쳐서 함수에 전달할 수 있다.

⭐ 배열 요소 목록

const fruits1 = ["apple", "banana"];
const fruits2 = ["orange", "grape"];

const allFruits = [...fruits1, ...fruits2];
console.log(allFruits); // ["apple", "banana", "orange", "grape"]

💡 설명
배열을 합칠 때도 스프레드 문법을 사용하면 쉼표로 구분된 요소 목록으로 펼쳐서 새로운 배열을 만들 수 있다.

⭐ 객체 프로퍼티 목록

const user1 = { name: "februaar", age: 25 };
const user2 = { job: "Developer", location: "Seoul" };

const userProfile = { ...user1, ...user2 };
console.log(userProfile);
// { name: "februaar", age: 25, job: "Developer", location: "Seoul" }

💡 설명
객체의 프로퍼티들도 쉼표로 구분되므로, 스프레드 문법을 사용하면 여러 객체를 병합할 수 있다.