변형 피하기
데이터를 직접 변경하지 않고 복사본으로 작업합니다.
변형 피하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
변경을 피해야 하는 이유
공유 데이터를 변경하면 추적하기 어려운 버그가 발생합니다. 한 곳의 변경이 다른 곳의 코드를 예기치 않게 만듭니다. 함수형 방식은 기존 값을 수정하는 대신 새 값을 만드는 것(불변성)을 선호합니다.
const original = [1, 2, 3];
const copy = [...original, 4];
console.log(original); // [1, 2, 3]
console.log(copy); // [1, 2, 3, 4]배열을 복사하는 스프레드
스프레드 연산자 ...는 배열의 얕은 복사본을 만들어 원본을 건드리지 않고 요소를 추가할 수 있게 합니다.
const nums = [1, 2, 3];
const more = [...nums, 4, 5];
console.log(more); // [1, 2, 3, 4, 5]
console.log(nums); // [1, 2, 3]객체를 복사하는 스프레드
스프레드는 객체에도 사용할 수 있으며, 같은 속성과 원하는 재정의 값을 가진 새 객체를 만듭니다.
const user = { name: "Ada", age: 36 };
const older = { ...user, age: 37 };
console.log(older); // { name: "Ada", age: 37 }
console.log(user); // unchanged변경하지 않는 배열 메서드
새 배열을 반환하는 메서드를 우선 사용하세요. map, filter, concat, slice가 이에 해당합니다. push, splice, 제자리에서 실행되는 sort처럼 배열을 변경하는 메서드는 피하세요.
const a = [3, 1, 2];
const sorted = [...a].sort((x, y) => x - y);
console.log(sorted); // [1, 2, 3]
console.log(a); // [3, 1, 2]변경 없이 추가하기
push 대신 스프레드나 concat을 사용하여 새 배열을 만드세요.
const list = [1, 2];
const added = [...list, 3]; // not list.push(3)
console.log(added); // [1, 2, 3]변경 없이 제거하기
splice 대신 filter를 사용하여 특정 요소가 없는 새 배열을 만드세요.
const list = [1, 2, 3, 4];
const without3 = list.filter((n) => n !== 3);
console.log(without3); // [1, 2, 4]항목을 변경 없이 업데이트하기
요소 하나를 변경하려면 배열에 map을 적용하고, 일치하는 항목에 대해 새 값을 반환하세요.
const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map((t) =>
t.id === 1 ? { ...t, done: true } : t
);
console.log(updated[0].done); // true얕은 복사와 깊은 복사
스프레드는 한 단계 깊이까지만 복사합니다. 중첩된 객체는 여전히 같은 참조를 공유합니다. 중첩된 데이터를 변경 없이 업데이트하려면 변경하려는 각 단계에서 스프레드를 사용하세요.
const state = { user: { name: "Ada", age: 36 } };
const next = {
...state,
user: { ...state.user, age: 37 }
};
console.log(state.user.age); // 36
console.log(next.user.age); // 37안전을 위한 동결
Object.freeze는 실행 중 객체가 실수로 변경되는 것을 방지하여 불변성을 명시적으로 만듭니다(한 단계 깊이).
const config = Object.freeze({ env: "prod" });
config.env = "dev"; // ignored in non-strict mode
console.log(config.env); // "prod"const는 불변성이 아님
흔히 혼동하는 부분이 있습니다. const는 변수의 재할당만 막을 뿐, 변수가 보유한 값의 변경은 막지 않습니다. const로 선언한 배열도 여전히 push할 수 있습니다.
const arr = [1, 2];
arr.push(3); // allowed - value mutated
console.log(arr); // [1, 2, 3]
// arr = [] would throw장점 복습
변경 없이 업데이트하면 변경 추적이 간단해지고(참조 비교), 실행 취소와 다시 실행을 가능하게 하며, 멀리 떨어진 곳에 예기치 않은 영향을 주는 일을 방지하고, 순수 함수와 자연스럽게 결합됩니다.
const prev = { count: 0 };
const next = { ...prev, count: 1 };
console.log(prev === next); // false - easy to detect change빠른 확인
변경 피하기
복습
불변성이란 변경하는 대신 새 값을 만드는 것입니다. 스프레드를 사용하여 배열과 객체를 복사하고, 변경하지 않는 메서드(map, filter, concat)를 우선 사용하세요. 중첩된 데이터를 업데이트할 때는 각 단계에서 스프레드를 사용하세요. const는 재할당을 막을 뿐 변경을 막지는 않는다는 점을 기억하세요. Object.freeze는 실행 중 보호 기능을 추가합니다. 변경 없이 업데이트하면 변경 감지와 순수한 코드 작성이 쉬워집니다.
자주 묻는 질문
“변형 피하기” 강의는 무료인가요?
네 — “변형 피하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“변형 피하기”에서 뭘 배우나요?
데이터를 직접 변경하지 않고 복사본으로 작업합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“변형 피하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.