0Pricing
JavaScript Academy · 강의

복제 및 병합 — 전개 구문과 Object.assign

전개 구문과 Object.assign으로 객체와 배열을 복제·병합하고, 얕은 복사와 덮어쓰기 순서를 이해합니다.

복제 및 병합 — 전개 구문과 Object.assign은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 2개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 2개의 강의가 포함되어 있습니다.

소개

목표: 객체와 배열을 안전하게 clone하고 병합합니다.

  • 전개 구문으로 clone 및 병합
  • Object.assign
  • 덮어쓰기 순서
  • 얕은 복사의 주의점
복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 1

전개 구문으로 객체 clone하기

{...obj}를 사용하면 얕은 clone을 만들 수 있습니다. clone을 수정해도 original의 최상위 필드는 변경되지 않습니다.

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 2

Object.assign으로 clone하기

Object.assign({}, obj)도 얕은 clone을 만듭니다. 빈 객체에 할당하여 원본을 변경하지 않도록 합니다.

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 3

병합: 순서가 중요합니다

병합은 순서의 영향을 받습니다. 뒤쪽 소스가 앞쪽 키를 덮어씁니다(b는 여기서 9가 됩니다).

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 4

배열 전개 구문으로 clone 및 병합

[...arr]는 배열을 clone합니다. [...a, ...b]를 사용하면 원본을 변경하지 않고 배열을 결합할 수 있습니다.

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 5

얕은 복사와 깊은 복사

shallow 복사: 중첩된 객체와 배열은 공유됩니다. 깊은 구조에서는 내부 수준을 명시적으로 복사합니다.

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 6

clone 메서드 퀴즈

빠른 확인: 변경 없이 얕은 clone 만들기입니다.

복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 7

복습

복습: 빈 객체에 전개 구문이나 Object.assign을 사용해 clone하고, 뒤쪽 소스를 마지막에 배치하여 병합하며, 이 복사 방식은 shallow라는 점을 기억하세요.

복제 및 병합 — 전개 구문과 Object.assign — 일러스트레이션 8

자주 묻는 질문

“복제 및 병합 — 전개 구문과 Object.assign” 강의는 무료인가요?

네 — “복제 및 병합 — 전개 구문과 Object.assign” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 2개의 강의가 포함되어 있습니다.

“복제 및 병합 — 전개 구문과 Object.assign”에서 뭘 배우나요?

전개 구문과 Object.assign으로 객체와 배열을 복제·병합하고, 얕은 복사와 덮어쓰기 순서를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 2개 중 2번째 강의입니다.

“복제 및 병합 — 전개 구문과 Object.assign” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 배열 CRUD와 순회, 객체 기초 및 접근
  2. 복제 및 병합 — 전개 구문과 Object.assign
← JavaScript Academy(으)로 돌아가기