ZENO — 웹 개발, 디자인, 자격증 정리

자바스크립트에서 ...(세 개의 점)은 스프레드 연산자(Spread Operator) 라고 부른다.
이 연산자는 배열이나 객체를 “펼쳐서(spread)” 다른 배열이나 객체에 복사하거나 전달할 때 사용된다.
쉽게 말해, 묶음 데이터를 낱개로 풀어내는 마법의 도구다.

---

1. 배열에서의 스프레드

스프레드 연산자는 배열을 합치거나 복사할 때 매우 자주 사용된다.

const a = [1, 2, 3]; const b = [4, 5, 6]; const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

위 예시는 기존 배열 a, b를 건드리지 않고 새로운 배열을 만들어낸다.
즉, 얕은 복사(shallow copy) 를 수행한다.

 

const copy = [...a]; // a의 복사본

---

2. 객체에서의 스프레드

객체도 같은 방식으로 펼칠 수 있다.

const user = { name: "Jin", age: 33 };
const info = { job: "developer", country: "Korea" };
const newUser = { ...user, ...info }; // { name: "Jin", age: 33, job: "developer", country: "Korea" }

 

만약 같은 키(key) 가 있을 경우,
뒤에 오는 값이 앞의 값을 덮어쓴다.

 

 

---

3. 함수 인자에서의 스프레드

함수에 배열을 인자로 전달할 때 매우 유용하다.

function sum(x, y, z) { return x + y + z; }
const nums = [1, 2, 3]; console.log(sum(...nums)); // 6

 

sum(...nums)는 sum(1, 2, 3)과 완전히 같다.
즉, 배열을 풀어서 함수의 개별 인자로 전달하는 역할을 한다.

---

4. 스프레드와 반대 개념: Rest Parameter

스프레드는 데이터를 펼치는 역할,
반대로 Rest 파라미터(...args)는 데이터를 모으는 역할을 한다.

function logAll(...args) { console.log(args); // 모든 인자를 배열로 모은다. } logAll(1, 2, 3, "hi"); // [1, 2, 3, "hi"]

 

모양은 같지만 동작은 정반대다.
spread = 펼치기, rest = 모으기.

---

5. 실무에서 자주 쓰는 패턴들

① 상태(state) 불변성 유지 (React 등)

setState({ ...state, name: "Jin" });

→ 기존 상태를 그대로 두고 새로운 속성만 덮어쓰기.

② 배열 복사 및 필터링 후 새로운 값 추가

const newArr = [...arr.filter(v => v > 10), 99];

→ 기존 배열에서 조건을 통과한 값들만 모아 새로운 배열을 만들고, 99를 추가.

③ 함수 인자 전달 간소화

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

→ 배열을 풀어서 각각의 인자로 전달.

---

6. 스프레드의 한계

스프레드 연산자는 깊은 복사(deep copy) 를 하지 않는다.
즉, 내부 객체가 있을 경우 그 내부는 여전히 원본과 연결되어 있다.

const obj = { a: { b: 1 } }; const clone = { ...obj }; clone.a.b = 99; console.log(obj.a.b); // 99 (같이 바뀜)

이는 스프레드가 겉껍질만 복사하는 얕은 복사(shallow copy) 이기 때문이다.
내부 객체까지 완전히 분리하려면 깊은 복사를 직접 해야 한다.

const deepClone = JSON.parse(JSON.stringify(obj)); deepClone.a.b = 99; console.log(obj.a.b); // 1 (원본 그대로 유지)

---

✳️ 핵심 요약

• ... 은 “펼쳐서 전달하거나 복사”하는 연산자
• 얕은 복사만 수행하므로 내부 참조는 원본과 공유됨
• 완전한 분리를 원할 때는 깊은 복사를 사용해야 함
• 스프레드는 배열, 객체, 함수 인자 등 다양한 곳에서 쓰임

---

단어장

스프레드 연산자(Spread Operator)

• 한자: 펼 스(展), 펼칠 포(布)
• 영어: Spread — 고대 영어 sprædan (“to stretch out”, 늘이다, 펴다)
• 뜻: 배열이나 객체를 개별 요소로 펼치는 연산자

얕은 복사(淺複寫)

• 한자: 얕을 천(淺), 겹칠 복(複), 쓸 사(寫)
• 영어: Shallow Copy — shallow(얕은) + copy(복사하다)
• 뜻: 객체의 한 단계 값만 복사, 내부 참조는 그대로 연결됨

깊은 복사(深複寫)

• 한자: 깊을 심(深), 겹칠 복(複), 쓸 사(寫)
• 영어: Deep Copy — deep(깊은) + copy(복사하다)
• 뜻: 내부 객체까지 완전히 새로 만들어 원본과 완전히 독립시킴

파라미터(Parameter)

• 한자: 외래어
• 영어 어원: para- (옆에) + meter (측정하다) → “함수 옆에서 값을 전달하는 변수”
• 뜻: 함수 정의 시 사용하는 변수

인자(引子)

• 한자: 끌 인(引), 아들 자(子)
• 영어: Argument — 라틴어 arguere (명확히 하다, 주장하다)
• 뜻: 함수 호출 시 실제로 전달되는 값

---

#️⃣ 해시태그