2026년 상식닷컴 선정 식당 & 카페 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요

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

_____
Q1: Object.assign() 함수는 무엇인가요?
A1: Object.assign()은 하나 이상의 출처(source) 객체로부터 대상(target) 객체로 속성을 복사하여 대상 객체를 반환하는 자바스크립트 내장 함수입니다.

Q2: Object.assign()의 기본 문법은 어떻게 되나요?
A2: 문법은 다음과 같습니다.
```javascript
Object.assign(target, ...sources)
```
여기서 `target`은 속성을 복사받을 객체이며, `sources`는 복사할 하나 이상의 객체입니다.

Q3: Object.assign()은 어떻게 사용하나요? 간단한 예제가 있나요?
A3: 예를 들어 두 객체의 속성을 합치고 싶을 때 사용합니다.
```javascript
const target = { a: 1 };
const source = { b: 2, c: 3 };

Object.assign(target, source);
console.log(target); // { a: 1, b: 2, c: 3 }
```

Q4: Object.assign() 사용 시 주의할 점이 있나요?
A4: 네. Object.assign()은 얕은 복사(shallow copy)를 수행하므로, 중첩된 객체의 경우 참조가 복사됩니다. 복사한 객체 내부 속성을 변경하면 원본 객체도 영향을 받습니다.

Q5: Object.assign()은 원본 대상 객체를 변경하나요?
A5: 네. 대상 객체는 직접 변경되고 변경된 대상 객체가 반환됩니다.

Q6: Object.assign()을 객체 복제(clone) 용도로 쓸 수 있나요?
A6: 얕은 복제는 가능합니다.
```javascript
const obj = { a: 1 };
const copy = Object.assign({}, obj);
```
다만, 중첩 객체가 있는 경우 내부 객체는 참조가 복사됩니다.
Q7: 여러 소스 객체를 한꺼번에 복사할 수 있나요?
A7: 예, 가능합니다.
```javascript
const target = {};
const source1 = { a: 1 };
const source2 = { b: 2 };
const source3 = { c: 3 };

Object.assign(target, source1, source2, source3);
console.log(target); // { a: 1, b: 2, c: 3 }
```

Q8: 동일한 프로퍼티가 여러 출처 객체에 있는 경우 어떻게 되나요?
A8: 가장 마지막(source 순서 기준) 객체의 프로퍼티가 대상 객체에 덮어쓰여집니다.

Q9: Object.assign()은 심볼(Symbol) 타입의 키도 복사하나요?
A9: 네, 심볼 키도 복사 대상에 포함됩니다.

Q10: Object.assign()은 프로토타입 체인에 있는 속성도 복사하나요?
A10: 아니요, 열거 가능한(enumerable) 자신의 직접 속성만 복사합니다.

Q11: Object.assign()이 대상 객체가 아닌 다른 타입도 될 수 있나요?
A11: 대상 객체는 객체여야 하며, 만약 원시값이 전달되면 객체로 변환됩니다. 예: `Object.assign(42, {a:1})` 는 `Number` 객체로 변환되어 동작하지만, 원시 값을 직접 변경하지는 않습니다.

Q12: 객체 합치기 외에 Object.assign()의 다른 활용 예제는?
A12: 기본값 설정 시 활용 가능합니다.
```javascript
const defaults = { a: 1, b: 2 };
const options = { b: 3 };

const settings = Object.assign({}, defaults, options);
console.log(settings); // { a: 1, b: 3 }
```

요약: Object.assign()은 객체의 속성을 복사하고 결합할 때 간편한 메서드로, 얕은 복사를 수행하며 대상 객체를 변경합니다. 중첩 객체를 안전하게 복제하려면 다른 방식을 사용해야 합니다.
`Object.assign()`은 JavaScript에서 객체를 복사하고 병합하는 데 사용되는 유용한 메서드입니다.

이 메서드는 ECMAScript 2015(ES

6)에서 도입되었으며, 여러 개의 소스 객체의 속성을 대상 객체에 복사하여 새로운 객체를 생성하는 데 사용됩니다.

이 메서드는 주로 객체의 속성을 병합하거나, 객체의 얕은 복사를 수행할 때 유용합니다.

기본 사용법 `Object.assign()`의 기본 구문은 다음과 같습니다: ```javascript Object.assign(target, ...sources); ``` - target : 속성을 복사할 대상 객체입니다.

이 객체는 변경됩니다.

- sources : 하나 이상의 소스 객체입니다.

객체들의 속성이 대상 객체에 복사됩니다.

예제 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, source

2); console.log(target); // { a: 1, b: 3, c: 4 } ``` 이 예제에서 `source1`의 `b` 속성은 `source2`의 `b` 속성에 의해 덮어씌워졌습니다.

주의사항 1. 얕은 복사 : `Object.assign()`은 얕은 복사를 수행하므로, 중첩된 객체를 복사할 때 주의해야 합니다.

중첩된 객체의 속성은 참조로 복사되기 때문에, 원본 객체의 중첩된 속성을 변경하면 복사된 객체에도 영향을 미칠 수 있습니다.



2. 프로토타입 체인 : `Object.assign()`은 객체의 프로토타입 체인을 무시하고, 오직 객체의 자체 속성만을 복사합니다.



3. Immutable 객체 : `Object.assign()`은 대상 객체를 직접 수정하므로, 불변성을 유지해야 하는 경우에는 주의해야 합니다.

불변성을 유지하려면, 새로운 객체를 생성하여 반환하는 방법을 고려해야 합니다.

```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에서 객체를 병합하고 복사하는 데 매우 유용한 메서드입니다.

객체의 속성을 간편하게 병합할 수 있으며, 여러 개의 소스 객체를 사용하여 복잡한 객체를 쉽게 구성할 수 있습니다.

그러나 얕은 복사라는 특성을 이해하고, 필요한 경우 불변성을 유지하는 방법을 고려하는 것이 중요합니다.

작성자: 김하린 [비회원] | 작성일자: 1년 전 2024-09-08 14:47:26
조회수: 185 | 댓글: 0 | 좋아요: 0 | 싫어요: 0
내용이 부정확하다면 싫어요를 클릭해주세요.