Spread 연산자 파트 1
Coddy JavaScript 여정의 논리 & 흐름 섹션에 포함된 레슨 — 65개 중 18번째.
전개 연산자(...)는 JSON에 대해 많은 사용 사례가 있습니다. 예를 들어, 다음과 같은 작업을 수행할 때:
const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456
console.log(obj2.key1)어떤 결과가 출력될까요?
console.log(obj2.key1)
// 출력: "456"이것은 놀라운 일일 수 있습니다! obj1만 변경했음에도 불구하고, obj2도 변경되었습니다.
이것은 객체를 직접 할당할 때(obj2 = obj1) 복사본이 아니라 참조를 생성하기 때문에 발생합니다. 두 변수 모두 메모리 내의 동일한 객체를 가리킵니다.
이 지점에서 스프레드 연산자가 유용해집니다. 진정한 복사본(true copy)을 만드는 방법을 알아보겠습니다:
const obj1 = {key1: "123"};
const obj2 = {...obj1};
obj1.key1 = "456";
console.log(obj2.key1);
// 출력: "123"전개 연산자(spread operator)는 새로운 객체를 생성하고 소스 객체의 모든 열거 가능한 속성을 새 객체로 복사합니다.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
치트 시트
전개 연산자(...)는 참조 대신 객체의 복사본을 생성합니다:
// 참조 (두 변수 모두 동일한 객체를 가리킴)
const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456"
console.log(obj2.key1) // 출력: "456"// 전개 연산자를 사용한 복사
const obj1 = {key1: "123"}
const obj2 = {...obj1}
obj1.key1 = "456"
console.log(obj2.key1) // 출력: "123"전개 연산자는 소스 객체의 모든 열거 가능한 속성을 새로운 객체로 복사합니다.
직접 해보기
이 레슨에는 코드 챌린지가 없습니다.
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
