수정하기 - 자바스크립트에서 Object.assign()의 사용법은 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

`Object.assign()`은 JavaScript에서 객체를 복사하고 병합하는 데 사용되는 유용한 메서드입니다. 이 메서드는 ECMAScript 2015(ES6)에서 도입되었으며, 여러 개의 소스 객체의 속성을 대상 객체에 복사하여 새로운 객체를 생성하는 데 사용됩니다. 이 메서드는 주로 객체의 속성을 병합하거나, 객체의 얕은 복사를 수행할 때 유용합니다.           기본 사용법    `Object.assign()`의 기본 구문은 다음과 같습니다:    ```javascript  Object.assign(target, ...sources);  ```    -   target  : 속성을 복사할 대상 객체입니다. 이 객체는 변경됩니다.  -   sources  : 하나 이상의 소스 객체입니다. 이 <a href='https://sangseek.com/sangseeks/객체들/ko'>객체들</a>의 속성이 대상 객체에 복사됩니다.           <a href='https://sangseek.com/sangseeks/예제/ko'>예제</a>    1.   기본적인 객체 병합      ```javascript  const target = { a: 1 };  const source = { b: 2, c: 3 };    const returnedTarget = Object.assign(target, source);    console.log(target); // { a: 1, b: 2, c: 3 }  console.log(returnedTarget); // { a: 1, b: 2, c: 3 }  ```    위의 예제에서 `source` 객체의 속성 `b`와 `c`가 `target` 객체에 복사되었습니다. `Object.assign()`은 대상 객체를 반환하므로, `returnedTarget`은 `target`과 동일한 객체를 참조합니다.    2.   얕은 복사      `Object.assign()`은 얕은 복사를 수행합니다. 즉, 객체의 속성이 객체인 경우, 해당 속성의 참조만 복사됩니다.    ```javascript  const target = { a: 1, nested: { b: 2 } };  const source = { nested: { c: 3 } };    Object.assign(target, source);    console.log(target); // { a: 1, nested: { c: 3 } }  ```    위의 예제에서 `target`의 `nested` 속성이 `source`의 `nested` 속성으로 덮어씌워졌습니다. 이로 인해 원래의 `nested` 객체는 사라지고, `source`의 `nested` 객체가 `target`에 할당되었습니다.    3.   속성 덮어쓰기      `Object.assign()`은 소스 객체의 속성이 대상 객체에 이미 존재하는 경우, 기존 속성을 덮어씌웁니다.    ```javascript  const target = { a: 1, b: 2 };  const source = { b: 3, c: 4 };    Object.assign(target, source);    console.log(target); // { a: 1, b: 3, c: 4 }  ```    여기서 `source`의 `b` 속성이 `target`의 `b` 속성을 덮어씌웠습니다.    4.   다수의 소스 객체 사용      여러 개의 소스 객체를 사용할 수도 있습니다. 이 경우, 마지막 소스 객체의 속성이 우선적으로 적용됩니다.    ```javascript  const target = { a: 1 };  const source1 = { b: 2 };  const source2 = { b: 3, c: 4 };    Object.assign(target, source1, source2);    console.log(target); // { a: 1, b: 3, c: 4 }  ```    이 예제에서 `source1`의 `b` 속성은 `source2`의 `b` 속성에 의해 덮어씌워졌습니다.           주의사항    1.   얕은 복사  : `Object.assign()`은 얕은 복사를 수행하므로, 중첩된 객체를 복사할 때 주의해야 합니다. 중첩된 객체의 속성은 참조로 복사되기 때문에, 원본 객체의 중첩된 속성을 변경하면 복사된 객체에도 영향을 미칠 수 있습니다.    2.   <a href='https://sangseek.com/sangseeks/프로토타입 체인/ko'>프로토타입 체인</a>  : `Object.assign()`은 객체의 프로토타입 체인을 무시하고, 오직 객체의 자체 속성만을 복사합니다.    3.   Immutable 객체  : `Object.assign()`은 대상 객체를 직접 수정하므로, <a href='https://sangseek.com/sangseeks/불변성/ko'>불변성</a>을 유지해야 하는 경우에는 주의해야 합니다. 불변성을 유지하려면, 새로운 객체를 생성하여 반환하는 방법을 고려해야 합니다.    ```javascript  const target = { a: 1 };  const source = { b: 2 };    const newObject = Object.assign({}, target, source);    console.log(newObject); // { a: 1, b: 2 }  console.log(target); // { a: 1 }  ```    위의 예제에서는 빈 객체 `{}`를 첫 번째 인자로 전달하여 새로운 객체를 생성하고, 원본 `target` 객체는 변경되지 않았습니다.           결론    `Object.assign()`은 JavaScript에서 객체를 병합하고 복사하는 데 매우 유용한 메서드입니다. 객체의 속성을 간편하게 병합할 수 있으며, 여러 개의 소스 객체를 사용하여 복잡한 객체를 쉽게 구성할 수 있습니다. 그러나 얕은 복사라는 특성을 이해하고, 필요한 경우 불변성을 유지하는 방법을 고려하는 것이 중요합니다.