라이브러리

[JAVASCRIPT] Object.assign(target, source) - 여러 개의 객체를 하나의 객체로 병합




Object.assign() 메서드

`Object.assign()` 메서드는 객체의 속성을 복사하는 데 사용됩니다. 이 메서드는 첫 번째 인자로 받은 `target` 객체에 `source` 객체의 속성을 복사합니다.

Syntax

#hostingforum.kr
javascript

Object.assign(target, source1, source2, ..., sourceN)


인자

- `target`: 복사할 대상 객체입니다.
- `source1`, `source2`, ..., `sourceN`: 복사할 소스 객체입니다.

예제

#hostingforum.kr
javascript

// 객체 생성

const target = { a: 1, b: 2 };

const source1 = { b: 3, c: 4 };

const source2 = { c: 5, d: 6 };



// Object.assign() 메서드 사용

Object.assign(target, source1, source2);



console.log(target); // { a: 1, b: 3, c: 4, d: 6 }


Object.assign() 메서드의 특징

- `target` 객체에 `source` 객체의 속성이 이미 존재하는 경우, `source` 객체의 속성이 덮어씌워집니다.
- `source` 객체가 `null` 또는 `undefined`인 경우, 아무런 효과가 없습니다.
- `target` 객체가 `null` 또는 `undefined`인 경우, `target` 객체가 생성되고 `source` 객체의 속성이 복사됩니다.

Object.assign() 메서드의 활용

- 객체의 속성을 복사하는 데 사용할 수 있습니다.
- 객체의 속성을 병합하는 데 사용할 수 있습니다.

#hostingforum.kr
javascript

// 객체 생성

const obj1 = { a: 1, b: 2 };

const obj2 = { b: 3, c: 4 };



// Object.assign() 메서드 사용

const obj3 = Object.assign({}, obj1, obj2);



console.log(obj3); // { a: 1, b: 3, c: 4 }


Object.assign() 메서드의 단점

- 객체의 속성을 복사할 때, 객체의 참조가 복사되지 않습니다. 따라서 객체의 속성이 객체를 참조하는 경우, 원본 객체가 변경될 때, 복사된 객체도 변경됩니다.

#hostingforum.kr
javascript

// 객체 생성

const obj1 = { a: { b: 1 } };

const obj2 = { a: { b: 2 } };



// Object.assign() 메서드 사용

const obj3 = Object.assign({}, obj1, obj2);



obj1.a.b = 3;



console.log(obj3); // { a: { b: 3 } }


Object.assign() 메서드의 대안

- `Object.create()` 메서드를 사용하여 객체를 복사할 수 있습니다.
- `JSON.parse(JSON.stringify())` 메서드를 사용하여 객체를 복사할 수 있습니다.

#hostingforum.kr
javascript

// 객체 생성

const obj1 = { a: 1, b: 2 };



// Object.create() 메서드 사용

const obj2 = Object.create(obj1);



console.log(obj2); // { a: 1, b: 2 }



// JSON.parse(JSON.stringify()) 메서드 사용

const obj3 = JSON.parse(JSON.stringify(obj1));



console.log(obj3); // { a: 1, b: 2 }

  • profile_image
    나우호스팅 @pcs8404　
    호스팅포럼 화이팅!

    댓글목록

    등록된 댓글이 없습니다.

  • 전체 10,077건 / 11 페이지

검색

게시물 검색