Object.assign ์— ๋Œ€ํ•ด

· โ˜• 3 min read · ๐Ÿ‘€... views

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 4์žฅ์—์„œ ๊ฐ์ฒด ๋ณต์‚ฌ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๋‹ค๊ฐ€
Object.assign() ์„ ํ†ตํ•ด ๋ณต์‚ฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์–˜๊ธฐ๋ฅผ ์ž ๊น ํ–ˆ์—ˆ๋Š”๋ฐ,
์ž์„ธํžˆ ๋ชจ๋ฅด๋‹ˆ ์ด๋ฒˆ ๊ธฐํšŒ์— ์งš๊ณ  ๋„˜์–ด๊ฐ€๋ณด์ž

Object.assign()

์šฐ์„  MDN ์—์„œ ํ•˜๋Š” ์„ค๋ช…์„ ๋ณด๋ฉด

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

๋Œ€์ƒ ๊ฐ์ฒด๋กœ ํ•˜๋‚˜ ๋˜๋Š” ๊ทธ ์ด์ƒ์˜ ์—ด๊ฑฐ ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ํƒ€๊ฒŸ์˜ค๋ธŒ์ ํŠธ ๋ณต์‚ฌํ•  ๋•Œ ์‚ฌ์šฉ.. ํ•œ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ, ๊ธ€๋งŒ ๋ด์„œ๋Š” ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค.

์šฐ์„  ๋ฌธ๋ฒ•์„ ์‚ดํŽด๋ณด๋ฉด,

Object.assign(target, …sources)

parameter

  • target
  • sources

return

  • target Object

์ฒซ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ์ธ target ์€ ์„ค๋ช…์˜ target object ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ , sources ๋Š” 1๊ฐœ ํ˜น์€ ๊ทธ ์ด์ƒ์˜ ์—ด๊ฑฐ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๋ฐ˜ํ™˜๊ฐ’์€ target object ์ด๋‹ค.

๋ฌธ๋ฒ•์„ ์•Œ์•„๋ดค์œผ๋‹ˆ, ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด.

1
2
3
4
5
6
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
obj.a = 2;
console.log(obj); // { a: 2 }
console.log(copy); // { a: 1 }

{} ์— obj์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ณต์‚ฌ(?) ํ–ˆ๊ณ , obj ์™€ copy ๋Š” ๋ณ„๊ฐœ์˜ ๊ฐ์ฒด๋กœ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
์ด๊ฐ™์ด obj ์˜ ์†์„ฑ์ด ๊ฐ’์ผ ๊ฒฝ์šฐ์—” ๋ณ„ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ์ฒด๋ฅผ ๋ณต์‚ฌํ•  ๊ฒฝ์šฐ์—๋Š” ์–˜๊ธฐ๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š”๋ฐ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(obj2); // { "a": 0, "b": { "c": 0}}

1)  
obj1.a = 1;
console.log(obj1); // { "a": 1, "b": { "c": 0}}
console.log(obj2); // { "a": 0, "b": { "c": 0}}

2)  
obj2.a = 2;
console.log(obj1); // { "a": 1, "b": { "c": 0}}
console.log(obj2); // { "a": 2, "b": { "c": 0}}

3)  
obj2.b.c = 3;
console.log(obj1); // { "a": 1, "b": { "c": 3}}
console.log(obj2); // { "a": 2, "b": { "c": 3}}

1๊ณผ 2์˜ ๊ฒฝ์šฐ์—์„œ๋Š” ๊ฐ’ ์ž์ฒด์ด๋ฏ€๋กœ ์„œ๋กœ ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š”๋‹ค.
ํ•˜์ง€๋งŒ, 3๊ณผ ๊ฐ™์ด ๊ฐ์ฒด์˜ ๊ฒฝ์šฐ์—๋Š” ์–•์€ ๋ณต์‚ฌ ๋ฅผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฐธ์กฐ๊ฐ’์„ ๋ณต์‚ฌํ•˜๊ฒŒ ๋œ๋‹ค.
MDN ์—์„œ๋Š” ๊นŠ์€ ๋ณต์‚ฌ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์„ ํ•˜๋ผ๊ณ  ์–˜๊ธฐํ•˜๋Š”๋ฐ

1
2
3
4
5
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(obj3); // { a: 0, b: { c: 0}}

JSON ์„ ํ†ตํ•˜์—ฌ obj1 ์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜๊ณ , ๋‹ค์‹œ ๊ฐ์ฒด๋กœ ๋งŒ๋“œ๋Š” ๊ณผ์ •์„ ํ†ตํ•˜๋Š” ๊ฒƒ์ด๋‹ค. (๋ฌธ์ž์—ด๋กœ ๋งŒ๋“  ์‹œ์ ์—์„œ ์ฐธ์กฐ ์ฃผ์†Œ๊ณ  ๋ญ๊ณ  ์—†์„ ๊ฒƒ ๊ฐ™๊ธด ํ•˜๋‹ค.)

์•Œ๊ณ ์žํ•ด์„œ ์ž‘์„ฑํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ์„œ ๋์ด์ง€๋งŒ, assign ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์œผ๋‹ˆ, ์ข€ ๋” ์ ์–ด๋ณด๊ฒ ๋‹ค.

1. ๊ฐ์ฒด ๋ณ‘ํ•ฉ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj1 = Object.assign({}, o1, o2, o3);
console.log(obj1); // { a: 1, b: 2, c: 3 } // ๋’ค์— ๊ฐ’์— ์˜ํ•ด ๋ฎ์–ด์“ฐ๊ธฐ

const obj2 = Object.assign(o1, o2, o3);
console.log(obj2) // { a: 1, b: 2, c: 3 }
console.log(o1) // { a: 1, b: 2, c: 3 } // ๋Œ€์ƒ ์ž์ฒด๊ฐ€ ๋ณ€๊ฒฝ
  • ์ดํ›„์˜ ๋ถ€๋ถ„์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•ด ๊ณต๋ถ€๋ฅผ ๋” ํ•œ ํ›„ ๊ฐœ๋…์„ ์•Œ๋ฉด ํ›„์ˆ ํ•˜๋Š” ๊ฒƒ์œผ๋กœ…

2. ์‹ฌ๋ณผ ํƒ€์ž… ํ”„๋กœํผํ‹ฐ ๋ณต์‚ฌ

3. ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์˜ ์†์„ฑ, ์—ด๊ฑฐ๋ถˆ๊ฐ€ ํ”„๋กœํผํ‹ฐ๋Š” ๋ณต์‚ฌ ๋ถˆ๊ฐ€

4. ํ”„๋ฆฌ๋ฏธํ‹ฐ๋ธŒ ๋Š” ๊ฐ์ฒด๋กœ ๋ž˜ํ•‘

1
2
3
4
5
6
7
8
9
var v1 = 'abc';
var v2 = true;
var v3 = 10;
var v4 = Symbol('foo');

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
// Primitives will be wrapped, null and undefined will be ignored.
// Note, only string wrappers can have own enumerable properties.
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

๋ฌธ์ž์—ด๋งŒ ์—ด๊ฑฐ ๊ฐ€๋Šฅํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ž์—ด๋งŒ ๋ณต์‚ฌ๊ฐ€ ๋จ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

5. ๋ณต์‚ฌ์ค‘ ์˜ˆ์™ธ ๋ฐœ์ƒ

6. ์ ‘๊ทผ์ž ๋ณต์‚ฌ


์ ์–ด๋ณด๋ ค๊ณ  ํ–ˆ์œผ๋‚˜ ๋ชจ๋ฅด๋Š” ๊ฒŒ ๋„ˆ๋ฌด ๋งŽ๋‹ค.

์ฐธ๊ณ ๋กœ, Object.assign() ์˜ ๊ฒฝ์šฐ ์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ํ•œ๋‹ค.

Share on

snack
WRITTEN BY
snack
Web Programmer


What's on this Page