From b06871f75b88e03b54d6b5327da651b995eef6ef Mon Sep 17 00:00:00 2001 From: cs09g Date: Wed, 15 Sep 2021 06:22:07 +0900 Subject: l10n: update contents as en-US --- .../operators/object_initializer/index.md | 362 +++++++++++---------- 1 file changed, 192 insertions(+), 170 deletions(-) (limited to 'files/ko') diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.md b/files/ko/web/javascript/reference/operators/object_initializer/index.md index b3bebf8541..b4b6eb6bd9 100644 --- a/files/ko/web/javascript/reference/operators/object_initializer/index.md +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.md @@ -3,9 +3,9 @@ title: 객체 초기자 slug: Web/JavaScript/Reference/Operators/Object_initializer tags: - ECMAScript 2015 - - ECMAScript6 - JSON - JavaScript + - Language feature - Literal - Methods - Object @@ -13,280 +13,302 @@ tags: - computed - mutation - properties -translation_of: Web/JavaScript/Reference/Operators/Object_initializer +browser-compat: javascript.operators.object_initializer --- -
{{JsSidebar("Operators")}}
+{{JsSidebar("Operators")}} -

객체는 new Object(), Object.create() 또는 리터럴 표기법 (initializer 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호({})로 묶인 형태입니다.

+객체는 [`new Object()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/Object), [`Object.create()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create) 또는 _literal_ 표기법(_initializer_ 표기법)을 사용해 초기화될 수 있습니다. 객체 초기자는 중괄호(`{}`)로 묶인 0개 이상의 객체의 프로퍼티명과 관련 값의 쌍을 콤마로 구분한 목록입니다. -

{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}

+{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}} -

구문

+## 구문 -
var o = {};
-var o = { a: "foo", b: 42, c: {} };
+```js
+let o = {}
+let o = {a: 'foo', b: 42, c: {}}
 
-var a = "foo", b = 42, c = {};
-var o = { a: a, b: b, c: c };
+let a = 'foo', b = 42, c = {}
+let o = {a: a, b: b, c: c}
 
-var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
+let o = {
+  property: function (parameters) {},
+  get property() {},
+  set property(value) {}
 };
-
+``` -

ECMAScript 2015의 새로운 표기법

+### ECMAScript 2015의 새로운 표기법 -
// 단축 속성명 (ES2015)
-let a = "foo", b = 42, c = {}
-let o = { a, b, c }
+이러한 표기법의 지원에 대해서는 호환성 테이블을 확인해주세요. 지원하지 않는 환경에서는 이러한 표기법들은 구문 에러를 유발합니다.
 
-// 단축 메서드명 (ES2015)
-var o = {
-  property([parameters]) {}
+```js
+// 프로퍼티명 약식 (ES2015)
+let a = 'foo', b = 42, c = {};
+let o = {a, b, c}
+
+// 프로퍼티명 약식 (ES2015)
+let o = {
+  property(parameters) {}
 }
 
-// 계산된 속성명 (ES2015)
-var prop = 'foo'
-var o = {
+// 계산된 프로퍼티명 (ES2015)
+let prop = 'foo';
+let o = {
   [prop]: 'hey',
   ['b' + 'ar']: 'there'
-}
+} +``` -

설명

+## 설명 -

객체 초기자는 {{jsxref("Object")}}의 초기화를 기술하는 표현식(expression)입니다. 객체는 객체를 설명하는 데 사용되는속성으로 구성됩니다. 객체의 속성값은 {{Glossary("primitive")}} 데이터 형 또는 다른 객체를 포함할 수 있습니다.

+객체 초기자는 {{jsxref("Object")}}의 초기화를 나타내는 표현입니다. 객체는 객체를 나타내는 데 사용되는 _properties_로 구성됩니다. 객체 프로퍼티의 값은 [원시 값](/ko/docs/Glossary/Primitive) 데이터 타입 또는 다른 객체를 포함할 수 있습니다. -

객체 리터럴 표기법 vs JSON

+### 객체 리터럴 표기법 vs JSON -

객체 리터럴 표기법은 JavaScript Object Notation (JSON)과 같지 않습니다. 비슷해 보이지만, 차이가 있습니다:

+객체 리터럴 표기법은 **J**ava**S**cript **O**bject **N**otation([JSON](/ko/docs/Glossary/JSON))과 동일하지 않습니다. 비슷하게 보이지만 다음과 같은 차이가 있습니다. - +- JSON은 _오직_ `"property": value` 구문을 사용해 정의한 프로퍼티만 허용합니다. 프로퍼티명에는 반드시 큰따옴표를 사용해야 하며 약식으로 정의할 수 없습니다. +- JSON에서 값은 문자열, 숫자, 배열, `true`, `false`, `null`, 또는 다른 (JSON) 객체만 사용할 수 있습니다. +- 함수 값(아래 "메서드"를 보세요)은 JSON의 값으로 할당할 수 없습니다. +- {{jsxref("Date")}}와 같은 객체는 {{jsxref("JSON.parse()")}} 이후의 문자열이 됩니다. +- {{jsxref("JSON.parse()")}}는 계산된 프로퍼티명을 거부하며 에러가 발생합니다. -

예제

+## 예제 -

객체 생성

+### 객체 생성하기 -

속성이 없는 빈 객체는 다음과 같이 만들 수 있습니다:

+프로퍼티가 없는 빈 객체는 다음과 같이 생성합니다. -
var object = {};
+```js +let object = {} +``` -

그러나, 리터럴(literal) 또는 초기자(initializer) 표기법의 이점은, 빠르게 중괄호 내 속성이 있는 객체를 만들 수 있다는 것입니다. 당신은 그저 쉼표로 구분된 키: 값 쌍 목록을 표기합니다.

+_literal_ 또는 _initializer_ 표기법의 장점은 중괄호 안에 프로퍼티를 갖는 객체를 빠르게 생성할 수 있다는 것입니다. 콤마로 구분하여 `key: value` 상의 목록을 작성하면 됩니다. -

다음 코드는 키가 "foo", "age" 및 "baz"인 세 속성이 있는 객체를 만듭니다. 이들 키값은 문자열 "bar", 숫자 42 그리고 세 번째 속성은 그 값으로 다른 객체를 갖습니다.

+다음 코드는 세 개의 프로퍼티를 갖는 객체를 생성하며 키는 `"foo"`, `"age"`, `"baz"`입니다. 다음 세 키의 값은 문자열 `"bar"`, 숫자 `42`, 그리고 다른 객체입니다. -
var object = {
-  foo: "bar",
+```js
+let object = {
+  foo: 'bar',
   age: 42,
-  baz: { myProp: 12 },
-}
- -

속성 접근

+ baz: {myProp: 12} +} +``` -

일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 속성 접근자 참조.)

+### 프로퍼티에 접근하기 -
object.foo; // "bar"
-object["age"]; // 42
+객체를 생성한 후에는 이를 읽거나 변경할 수 있습니다. 객체 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용해 접근할 수 있습니다(자세한 정보는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors)를 보세요).
 
-object.foo = "baz";
-
+```js +object.foo // "bar" +object['age'] // 42 +object.baz // {myProp: 12} +object.baz.myProp //12 +``` -

속성 정의

+### 프로퍼티 정의 -

우리는 이미 초기자 구문을 사용한 속성 표기법을 배웠습니다. 가끔, 객체 안에 두고 싶은 코드 속 변수가 있습니다. 다음과 같은 코드가 보입니다:

+우리는 초기자 구문을 사용해 프로퍼티를 작성하는 방법을 이미 배웠습니다. 때때로 코드의 변수를 객체로 넣고 싶은 경우가 있습니다. 다음과 같은 코드를 보게 될 수 있습니다. -
var a = "foo",
+```js
+let a = 'foo',
     b = 42,
     c = {};
 
-var o = {
+let o = {
   a: a,
   b: b,
   c: c
-};
+} +``` -

ECMAScript 2015의 경우, 똑같은 일을 할 수 있는 더 짧은 표기법이 있습니다:

+ECMAScript 2015를 사용하면 더 짧은 표기법을 사용해 동일한 결과를 얻을 수 있습니다. -
var a = "foo",
+```js
+let a = 'foo',
     b = 42,
     c = {};
 
-// 단축 속성명 (ES6)
-var o = { a, b, c }
+// 프로퍼티명 약식 (ES2015)
+let o = {a, b, c}
 
-// 다시 말해서,
+// 다르게 작성하면,
 console.log((o.a === {a}.a)) // true
-
+``` -

중복된 속성명

+#### 중복된 프로퍼티명 -

속성이 같은 이름을 쓰는 경우, 두 번째 속성은 첫 번째를 겹쳐씁니다.

+동일한 프로퍼티명을 사용하면 두 번째 프로퍼티가 첫 번째 프로퍼티를 덮어씁니다. -
var a = {x: 1, x: 2};
-console.log(a); // {x: 2}
-
+```js +let a = {x: 1, x: 2} +console.log(a) // {x: 2} +``` -

ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 {{jsxref("SyntaxError")}}로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.

+ECMAScript 5 엄격 모드 코드에서는 중복된 프로퍼티명을 {{jsxref("SyntaxError")}}로 간주합니다. 런타임 시 복제를 가능하게 한 계산된 프로퍼티 명의 도입으로 ECMScript 2015는 이 제한을 제거했습니다. -
function haveES6DuplicatePropertySemantics(){
-  "use strict";
+```js
+function haveES2015DuplicatePropertySemantics() {
+  'use strict';
   try {
-    ({ prop: 1, prop: 2 });
+    ({prop: 1, prop: 2});
 
-    // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨
+    // 에러가 발생하지 않음, 중복된 프로퍼티명이 엄격 모드에서 허용됨
     return true;
-  } catch (e) {
-    // 오류 발생, 중복은 엄격 모드에서 금지됨
+  } catch(e) {
+    // 에러가 발생함, 엄격 모드에서 중복이 금지됨
     return false;
   }
-}
+} +``` -

메서드 정의

+### 메서드 정의 -

객체의 속성은 함수나 getter 또는 setter 메서드를 참조할 수도 있습니다.

+객체의 프로퍼티는 [function](/ko/docs/Web/JavaScript/Reference/Functions) 또는 [getter](/ko/docs/Web/JavaScript/Reference/Functions/get) 또는 [setter](/ko/docs/Web/JavaScript/Reference/Functions/set) 메서드를 참조할 수도 있습니다. -
var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
+```js +let o = { + property: function (parameters) {}, + get property() {}, + set property(value) {} +} +``` -

ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "function"은 더 이상 필요치 않습니다.

+ECMAScript 2015에서는 약식 표기법을 사용할 수 있으므로 "`function`" 키워드는 필요하지 않습니다. -
// 단축 메서드 명 (ES6)
-var o = {
-  property([parameters]) {},
-}
+```js +// 약식 메서드명(ES2015) +let o = { + property(parameters) {}, +} +``` -

ECMAScript 2015에는 값이 생성기 함수인 속성을 간결하게 정의하는 법도 있습니다:

+ECMAScript 2015에서는 값이 generator 함수인 프로퍼티를 간결하게 정의하는 방법이 있습니다. -
var o = {
-  *generator() {
+```js
+let o = {
+  *generator() {
     ...........
   }
-};
+}; +``` -

ECMAScript 5에서는 다음과 같이 작성할 수 있습니다 (하지만 ES5는 생성기가 없음을 주의하세요):

+다음의 ES5와 유사한 표기법과 동일합니다(하지만 ECMAScript 5에는 generator가 없음을 유의하세요). -
var o = {
-  generatorMethod: function* () {
+```js
+let o = {
+  generator: function* () {
     ...........
   }
-};
+}; +``` -

메서드에 관한 자세한 사항 및 예는, 메서드 정의 참조.

+메서드에 대한 상세 정보와 예제는 [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions)를 보세요. -

계산된 속성명

+### 계산된 프로퍼티명 -

ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 [] 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 속성 접근자 구문의 각괄호 표기법을 연상시킵니다.  

+ECMAScript 2015부터 객체 초기자 구문은 계산된 프로퍼티 명도 지원합니다. 대괄호 `[]` 안에서 표현식을 허용하며, 표현식은 프로퍼티명으로 계산되어 사용됩니다. 이는 이미 프로퍼티를 읽고 설정하는 데 사용하는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors) 구문의 대괄호 표기법을 연상시킵니다. -

이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:

+이제 객체 리터럴에서도 유사한 구문을 사용할 수 있습니다. -
// 계산된 속성명 (ES6)
-var i = 0;
-var a = {
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i,
-  ["foo" + ++i]: i
-};
+```js
+// 계산된 프로퍼티명(ES2015)
+let i = 0
+let a = {
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i,
+  ['foo' + ++i]: i
+}
 
-console.log(a.foo1); // 1
-console.log(a.foo2); // 2
-console.log(a.foo3); // 3
+console.log(a.foo1) // 1
+console.log(a.foo2) // 2
+console.log(a.foo3) // 3
 
-var param = 'size';
-var config = {
+const items = ["A","B","C"];
+const obj = {
+[items]: "Hello"
+}
+console.log(obj); // A,B,C: "Hello"
+console.log(obj["A,B,C"]) // "Hello"
+
+let param = 'size'
+let config = {
   [param]: 12,
-  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+}
 
-console.log(config); // { size: 12, mobileSize: 4 }
+console.log(config) // {size: 12, mobileSize: 4} +``` -

전개 속성

+### 전개 프로퍼티 -

ECMASCript의 나머지/전개 속성 제안 (stage 4) 으로 전개(spread) 속성이 객체 리터럴에 추가됩니다. 이 속성은 제공된 객체의 열거 가능한(enumerable) 속성을 새 객체로 복사합니다.

+[ECMAScript의 나머지/전개 프로퍼티](https://github.com/tc39/proposal-object-rest-spread) 제안(stage 4)은 객체 리터럴에 [전개](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 프로퍼티를 추가합니다. 이는 제공된 객체로부터 새로운 객체로 자신만의 열거형 프로퍼티를 복사합니다. -

(prototype을 제외하는) 얕은 복제(Shallow-cloning) 나 객체 합침(merging objects)이 이제{{jsxref("Object.assign()")}} 보다 짧은 문법으로 가능해집니다.

+이제 {{jsxref("Object.assign()")}} 보다 더 짧은 구문을 사용해 얕은 복제(`prototype` 제외) 또는 객체 병합이 가능합니다. -
let obj1 = { foo: 'bar', x: 42 }
+```js
+let obj1 = { foo: 'bar', x: 42 }
 let obj2 = { foo: 'baz', y: 13 }
 
 let clonedObj = { ...obj1 }
 // Object { foo: "bar", x: 42 }
 
 let mergedObj = { ...obj1, ...obj2 }
-// Object { foo: "baz", x: 42, y: 13 }
+// Object { foo: "baz", x: 42, y: 13 } +``` -
-

{{jsxref("Object.assign()")}}는 setters를 작동시키지만, 전개 연산자(spread operator)는 아니라는 걸 주목하세요!

-
+> **경고:** {{jsxref("Object.assign()")}}은 [setters](/ko/docs/Web/JavaScript/Reference/Functions/set)를 트리거하는 반면 전개 연산자는 그렇지 않음을 유의하세요! -

프로토타입 변이

+### 프로토타입 변형 -

__proto__: value 또는 "__proto__": value 형태의 속성 정의는 이름이 __proto__인 속성을 만들지 않습니다. 대신, 제공된 값이 객체 또는 null이면, 생성된 객체의 [[Prototype]]을 그 값으로 바꿉니다. (값이 객체나 null이 아니면, 객체는 바뀌지 않습니다.)

+`__proto__: value` 또는 `"__proto__": value` 형태의 프로토타입 정의는 `__proto__` 이름을 갖는 프로퍼티를 생성하지 않습니다. 대신에, 제공된 값이 객체 또는 [`null`](/ko/docs/Web/JavaScript/Reference/Global_Objects/null)인 경우, 생성된 객체의 `[[Prototype]]`을 해당 값으로 변경합니다(값이 객체 또는 `null`이 아닌 경우, 객체는 변경되지 않습니다). -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
+```js
+let obj1 = {}
+assert(Object.getPrototypeOf(obj1) === Object.prototype)
 
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
+let obj2 = {__proto__: null}
+assert(Object.getPrototypeOf(obj2) === null)
 
-var protoObj = {};
-var obj3 = { "__proto__": protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
+let protoObj = {}
+let obj3 = {'__proto__': protoObj}
+assert(Object.getPrototypeOf(obj3) === protoObj)
 
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-
+let obj4 = {__proto__: 'not an object or null'} +assert(Object.getPrototypeOf(obj4) === Object.prototype) +assert(!obj4.hasOwnProperty('__proto__')) +``` -

단일 프로토타입 변이(mutation)만 객체 리터럴에 허용됩니다: 다중 프로토타입 변이는 구문 오류입니다.

+객체 리터럴에서는 단일 프로토타입 변형만 허용됩니다. 다중 프로토타입 변형은 구문 에러입니다. -

"colon" 표기법을 쓰지 않는 속성 정의는 프로토타입 변이가 아닙니다: 그들은 다른 이름을 사용하는 비슷한 정의와 동일하게 동작하는 속성 정의입니다.

+"콜론" 표기법을 사용하지 않는 프로퍼티 정의는 프로토타입 변형이 아닙니다. 이는 다른 이름을 사용하여 유사한 정의와 동일하게 동작하는 프로퍼티 정의입니다. -
var __proto__ = "variable";
+```js
+let __proto__ = 'variable'
 
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty("__proto__"));
-assert(obj1.__proto__ === "variable");
+let obj1 = {__proto__}
+assert(Object.getPrototypeOf(obj1) === Object.prototype)
+assert(obj1.hasOwnProperty('__proto__'))
+assert(obj1.__proto__ === 'variable')
 
-var obj2 = { __proto__() { return "hello"; } };
-assert(obj2.__proto__() === "hello");
+let obj2 = {__proto__() { return 'hello'; }}
+assert(obj2.__proto__() === 'hello')
 
-var obj3 = { ["__prot" + "o__"]: 17 };
-assert(obj3.__proto__ === 17);
-
+let obj3 = {['__prot' + 'o__']: 17} +assert(obj3.__proto__ === 17) +``` -

스펙

+## 명세 - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}
+{{Specifications}} -

브라우저 호환성

+## 브라우저 호환성 -

{{Compat("javascript.operators.object_initializer")}}

+{{Compat}} -

참조

+## 같이 보기 - +- [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors) +- [`get`](/ko/docs/Web/JavaScript/Reference/Functions/get) / [`set`](/ko/docs/Web/JavaScript/Reference/Functions/set) +- [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions) +- [Lexical grammar](/ko/docs/Web/JavaScript/Reference/Lexical_grammar) -- cgit v1.2.3-54-g00ecf