From 67ee0366fbec9d31aeac62b30230b9a7c59f88ac Mon Sep 17 00:00:00 2001 From: 윤승재 Date: Tue, 3 Aug 2021 15:34:10 +0900 Subject: update javascript/object/object (#1455) Co-authored-by: echo.youn Co-authored-by: hochan Lee --- .../global_objects/object/assign/index.html | 179 ++++++++++----------- 1 file changed, 85 insertions(+), 94 deletions(-) (limited to 'files/ko') diff --git a/files/ko/web/javascript/reference/global_objects/object/assign/index.html b/files/ko/web/javascript/reference/global_objects/object/assign/index.html index 445cae9bb0..71f17c01b9 100644 --- a/files/ko/web/javascript/reference/global_objects/object/assign/index.html +++ b/files/ko/web/javascript/reference/global_objects/object/assign/index.html @@ -12,54 +12,98 @@ tags: - 레퍼런스 - 메소드 translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +browser-compat: javascript.builtins.Object.assign ---
{{JSRef}}
-

Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.

+

Object.assign() 메소드는 출처 객체로부터 모든 열거할 수 있는({{jsxref("Object/propertyIsEnumerable", "enumerable", "", 1)}}) 하나 이상의 속성({{jsxref("Object/hasOwnProperty", "own properties", "", 1)}})들을 목표 객체로 복사합니다. 이는 수정된 목표 객체를 반환합니다.

{{EmbedInteractiveExample("pages/js/object-assign.html")}}

-

구문

+

구문

Object.assign(target, ...sources)
-

매개변수

+

매개변수

-
target
-
대상 객체.
-
sources
-
하나 이상의 출처 객체.
+
target
+
목표 객체 - 출처 객체의 속성을 받아 반영된 목표 객체를 반환합니다.
+
sources
+
출처 객체(들) - 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체입니다.
-

반환 값

+

반환 값

-

대상 객체.

+

목표 객체

-

설명

+

설명

-

동일한 키가 존재할 경우 대상 객체의 속성은 출처 객체의 속성으로 덮어쓰여집니다. 후에 출처의 속성은 이전의 출처의 속성과 유사하게 덮어씁니다.

+

목표 객체에 동일한 {{jsxref("Object/keys", "키", "", 1)}}를 갖는 속성이 존재할 경우 그 속성 값은 출처 객체의 속성 값으로 덮어쓰여집니다. 동일하게, 앞의 출처 속성들은 뒤의 출처 속성들에게 덮어쓰여집니다.

-

Object.assign() 메소드는 열거할 수 있는 출처 객체의 속성만 대상 객체로 복사합니다. 이 메소드는 출처 객체의 [[Get]], 대상 객체의 [[Set]] 을 사용하여 getter 와 setter 를 호출합니다. 따라서 이는 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것입니다. 병합 출처가 getter 를 포함하는 경우 프로토타입으로 새로운 속성을 병합하는 것이 적절하지 않을 수 있습니다. 프로토타입으로 속성의 열거성을 포함한 속성의 정의를 복사하려면 대신 {{jsxref("Object.getOwnPropertyDescriptor()")}} 와 {{jsxref("Object.defineProperty()")}} 를 사용해야합니다.

+

Object.assign() 메소드는 출처 객체의 열거할 수 있는 속성만 목표 객체로 복사합니다. 이 메소드는 출처 객체의 [[Get]], 목표 객체의 [[Set]] 을 사용하여 getter 와 setter 를 호출합니다. 그러므로 이는 속성을 단순히 복사하거나 새롭게 정의하는 것이 아니라 할당하는 것입니다. + 병합될 출처 객체들이 getter 를 포함하는 경우 프로토타입에 새로운 속성들을 병합하기에는 적절하지 않을 수 있습니다. +

+ +

속성의 열거성을 포함한 속성의 정의를 프로토타입으로 복사하려면 대신 {{jsxref("Object.getOwnPropertyDescriptor()")}} 와 {{jsxref("Object.defineProperty()")}} 를 사용해야합니다.

{{jsxref("String")}} 과 {{jsxref("Symbol")}} 속성 모두가 복사됩니다.

-

에러가 발생할 수 있는 상황에서는(예, 프로퍼티가 쓰기 불가인 경우), {{jsxref("TypeError")}} 가 발생하며, 에러가 발생하기 전에 속성이 추가되었다면 target 객체는 변경될 수 있습니다.

+

에러가 발생할 수 있는 상황에서는(예, 프로퍼티가 쓰기 불가인 경우), {{jsxref("TypeError")}} 가 발생하며, 에러가 발생하기 전에 속성이 추가되었다면 목표 객체는 변경될 수 있습니다.

+ +
+

Note: Object.assign() 메소드는 + {{jsxref("null")}} 또는 {{jsxref("undefined")}} 출처 값에 대해서 예외를 던지지 않음을 유의하세요.

+
+ +

폴리필

+ +

ES5 에는 심볼이 없기 때문에 다음 {{Glossary("Polyfill","폴리필")}} 은 심볼 속성을 지원하지 않습니다.

+ +
if (typeof Object.assign != 'function') {
+  // Must be writable: true, enumerable: false, configurable: true
+  Object.defineProperty(Object, "assign", {
+    value: function assign(target, varArgs) { // .length of function is 2
+      'use strict';
+      if (target == null) { // TypeError if undefined or null
+        throw new TypeError('Cannot convert undefined or null to object');
+      }
+
+      var to = Object(target);
+
+      for (var index = 1; index < arguments.length; index++) {
+        var nextSource = arguments[index];
 
-
Object.assign() 메소드는 {{jsxref("null")}} 또는 {{jsxref("undefined")}} 출처 값에 대해서는 오류를 던지지 않음을 유의하세요.

+        if (nextSource != null) { // Skip over if undefined or null
+          for (var nextKey in nextSource) {
+            // Avoid bugs when hasOwnProperty is shadowed
+            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+              to[nextKey] = nextSource[nextKey];
+            }
+          }
+        }
+      }
+      return to;
+    },
+    writable: true,
+    configurable: true
+  });
+}
-

예시

+

예시

-

객체 클로닝

+

객체 복제

const obj = { a: 1 };
 const copy = Object.assign({}, obj);
 console.log(copy); // { a: 1 }
-

깊은 클로닝에 대한 주의사항

+

깊은 복사에 대한 주의사항

-

깊은 클로닝에 대해서, Object.assign() 은 속성의 값을 복사하기때문에 다른 대안을 사용해야합니다. 출처 값이 객체에 대한 참조인 경우, 참조 값만을 복사합니다.

+

깊은 복사를 위해서는, 다른 방법을 사용해야 합니다. 왜냐하면 Object.assign() 은 속성 값을 복사하기 때문입니다.

+ +

만약 출처 값이 객체를 참조하고 있다면, 참조 값만 복사합니다.

function test() {
   'use strict';
@@ -80,7 +124,7 @@ console.log(copy); // { a: 1 }
   console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
   console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
 
-  // 깊은 클론
+  // 깊은 복사
   obj1 = { a: 0 , b: { c: 0}};
   let obj3 = JSON.parse(JSON.stringify(obj1));
   obj1.a = 4;
@@ -90,17 +134,17 @@ console.log(copy); // { a: 1 }
 
 test();
-

객체 병합

+

객체 병합

const o1 = { a: 1 };
 const o2 = { b: 2 };
 const o3 = { c: 3 };
 
-const obj = Object.assign(o1, o2, o3);
+
 console.log(obj); // { a: 1, b: 2, c: 3 }
-console.log(o1);  // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨.
+console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨. -

같은 속성을 가진 객체 병합

+

같은 속성을 가진 객체 병합

const o1 = { a: 1, b: 1, c: 1 };
 const o2 = { b: 2, c: 2 };
@@ -109,9 +153,9 @@ const o3 = { c: 3 };
 const obj = Object.assign({}, o1, o2, o3);
 console.log(obj); // { a: 1, b: 2, c: 3 }
-

속성은 파라미터 순서에서 더 뒤에 위치한 동일한 속성을 가진 다른 객체에 의해 덮어쓰입니다.

+

속성들은 매개변수 순서에서 더 뒤에 위치하고 동일한 속성을 가진 다른 객체에 의해 덮어쓰여집니다.

-

심볼형 속성 복사

+

심볼형 속성 복사

const o1 = { a: 1 };
 const o2 = { [Symbol('foo')]: 2 };
@@ -121,15 +165,15 @@ console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox)
 Object.getOwnPropertySymbols(obj); // [Symbol(foo)]
-

프로토타입 체인의 속성과 열거 불가형 속성은 복사 불가

+

프로토타입 체인의 속성과 열거 할 수 없는 속성은 복사 불가

-
const obj = Object.create({ foo: 1 }, { // foo 는 obj 의 프로토타입 체인상에 있음.
+
const obj = Object.create({ foo: 1 }, { // foo 는 obj 의 프로토타입 체인에 있음.
   bar: {
-    value: 2  // bar 는 열거 불가능한 속성임.
+    value: 2  // bar 는 열거할 수 없는 속성.
   },
   baz: {
     value: 3,
-    enumerable: true  // baz 는 자체 열거형 속성임.
+    enumerable: true  // baz 는 열거형 속성임.
   }
 });
 
@@ -137,7 +181,7 @@ const copy = Object.assign({}, obj);
 console.log(copy); // { baz: 3 }
 

 
-
원시 자료형은 객체로 래핑

+
원시 자료형은 객체로 래핑

 
 
var v1 = 'abc';
 var v2 = true;
@@ -145,12 +189,12 @@ var v3 = 10;
 var v4 = Symbol('foo');
 
 var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
-// 원시 자료형은 래핑되지만, null 과 undefined 는 무시됨.
-// 스트링 래퍼만 자체 열거형 속성을 가짐을 유의.
+// 원시 자료형은 래핑되지만, null 과 undefined 는 무시.
+// 문자열 래퍼만 자체 열거형 속성을 가짐을 유의.
 console.log(obj); // { "0": "a", "1": "b", "2": "c" }
 

 
-
예외에 의해 진행중인 복사 작업 중단

+
예외에 의해 진행중인 복사 작업 중단

 
 
var target = Object.defineProperty({}, 'foo', {
   value: 1,
@@ -165,10 +209,10 @@ console.log(target.bar);  // 2, 첫 번째 출처 객체는 성공적으로 복
 console.log(target.foo2); // 3, 두 번째 출처 객체의 첫 번째 프로퍼티도 성공적으로 복사되었음.
 console.log(target.foo);  // 1, 여기에서 예외가 발생.
 console.log(target.foo3); // undefined, assign 메소드가 종료되었음, foo3 은 복사되지 않음.
-console.log(target.baz);  // undefined, 세 번째 출처도 복사되지 않음.
+console.log(target.baz);  // undefined, 세 번째 출처 객체도 복사되지 않음.
 

 
-
접근자 복사

+
접근자 복사

 
 
var obj = {
   foo: 1,
@@ -205,72 +249,19 @@ console.log(copy);
 // { foo:1, get bar() { return 2 } }
 

 
-
폴리필

-
-
ES5 에는 심볼이 없기 때문에 다음 {{Glossary("Polyfill","폴리필")}} 은 심볼 속성을 지원하지 않습니다.

-
-
if (typeof Object.assign != 'function') {
-  // Must be writable: true, enumerable: false, configurable: true
-  Object.defineProperty(Object, "assign", {
-    value: function assign(target, varArgs) { // .length of function is 2
-      'use strict';
-      if (target == null) { // TypeError if undefined or null
-        throw new TypeError('Cannot convert undefined or null to object');
-      }
-
-      var to = Object(target);
-
-      for (var index = 1; index < arguments.length; index++) {
-        var nextSource = arguments[index];
-
-        if (nextSource != null) { // Skip over if undefined or null
-          for (var nextKey in nextSource) {
-            // Avoid bugs when hasOwnProperty is shadowed
-            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-              to[nextKey] = nextSource[nextKey];
-            }
-          }
-        }
-      }
-      return to;
-    },
-    writable: true,
-    configurable: true
-  });
-}

+
명세

 
-
명세

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
명세상태코멘트
{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}{{Spec2('ES2015')}}초기 정의.

+{{Specifications}}
 
 
브라우저 호환성

 
-
{{Compat("javascript.builtins.Object.assign")}}

-
-
 

+
{{Compat}}

 
-
함께 보기

+
같이 보기

 
 
-- 
cgit v1.2.3-54-g00ecf