From db37e3ead59be6d8d645ff0993a2e9de04e8d90c Mon Sep 17 00:00:00 2001 From: cs09g Date: Wed, 15 Sep 2021 04:34:48 +0900 Subject: l10n: rename html to md --- .../operators/object_initializer/index.html | 292 --------------------- .../operators/object_initializer/index.md | 292 +++++++++++++++++++++ 2 files changed, 292 insertions(+), 292 deletions(-) delete mode 100644 files/ko/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/ko/web/javascript/reference/operators/object_initializer/index.md (limited to 'files/ko/web') diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.html b/files/ko/web/javascript/reference/operators/object_initializer/index.html deleted file mode 100644 index b3bebf8541..0000000000 --- a/files/ko/web/javascript/reference/operators/object_initializer/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: 객체 초기자 -slug: Web/JavaScript/Reference/Operators/Object_initializer -tags: - - ECMAScript 2015 - - ECMAScript6 - - JSON - - JavaScript - - Literal - - Methods - - Object - - Primary Expression - - computed - - mutation - - properties -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -
{{JsSidebar("Operators")}}
- -

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

- -

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

- -

구문

- -
var o = {};
-var o = { a: "foo", b: 42, c: {} };
-
-var a = "foo", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
-
- -

ECMAScript 2015의 새로운 표기법

- -
// 단축 속성명 (ES2015)
-let a = "foo", b = 42, c = {}
-let o = { a, b, c }
-
-// 단축 메서드명 (ES2015)
-var o = {
-  property([parameters]) {}
-}
-
-// 계산된 속성명 (ES2015)
-var prop = 'foo'
-var o = {
-  [prop]: 'hey',
-  ['b' + 'ar']: 'there'
-}
- -

설명

- -

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

- -

객체 리터럴 표기법 vs JSON

- -

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

- - - -

예제

- -

객체 생성

- -

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

- -
var object = {};
- -

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

- -

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

- -
var object = {
-  foo: "bar",
-  age: 42,
-  baz: { myProp: 12 },
-}
- -

속성 접근

- -

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

- -
object.foo; // "bar"
-object["age"]; // 42
-
-object.foo = "baz";
-
- -

속성 정의

- -

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

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};
- -

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

- -
var a = "foo",
-    b = 42,
-    c = {};
-
-// 단축 속성명 (ES6)
-var o = { a, b, c }
-
-// 다시 말해서,
-console.log((o.a === {a}.a)) // true
-
- -

중복된 속성명

- -

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

- -
var a = {x: 1, x: 2};
-console.log(a); // {x: 2}
-
- -

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

- -
function haveES6DuplicatePropertySemantics(){
-  "use strict";
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨
-    return true;
-  } catch (e) {
-    // 오류 발생, 중복은 엄격 모드에서 금지됨
-    return false;
-  }
-}
- -

메서드 정의

- -

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

- -
var o = {
-  property: function ([parameters]) {},
-  get property() {},
-  set property(value) {},
-};
- -

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

- -
// 단축 메서드 명 (ES6)
-var o = {
-  property([parameters]) {},
-}
- -

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

- -
var o = {
-  *generator() {
-    ...........
-  }
-};
- -

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

- -
var o = {
-  generatorMethod: function* () {
-    ...........
-  }
-};
- -

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

- -

계산된 속성명

- -

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

- -

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

- -
// 계산된 속성명 (ES6)
-var i = 0;
-var 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
-
-var param = 'size';
-var config = {
-  [param]: 12,
-  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { size: 12, mobileSize: 4 }
- -

전개 속성

- -

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

- -

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

- -
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 }
- -
-

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

-
- -

프로토타입 변이

- -

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

- -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var 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__"));
-
- -

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

- -

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

- -
var __proto__ = "variable";
-
-var 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");
-
-var obj3 = { ["__prot" + "o__"]: 17 };
-assert(obj3.__proto__ === 17);
-
- -

스펙

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

브라우저 호환성

- -

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

- -

참조

- - diff --git a/files/ko/web/javascript/reference/operators/object_initializer/index.md b/files/ko/web/javascript/reference/operators/object_initializer/index.md new file mode 100644 index 0000000000..b3bebf8541 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.md @@ -0,0 +1,292 @@ +--- +title: 객체 초기자 +slug: Web/JavaScript/Reference/Operators/Object_initializer +tags: + - ECMAScript 2015 + - ECMAScript6 + - JSON + - JavaScript + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

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

+ +

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

+ +

구문

+ +
var o = {};
+var o = { a: "foo", b: 42, c: {} };
+
+var a = "foo", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+
+ +

ECMAScript 2015의 새로운 표기법

+ +
// 단축 속성명 (ES2015)
+let a = "foo", b = 42, c = {}
+let o = { a, b, c }
+
+// 단축 메서드명 (ES2015)
+var o = {
+  property([parameters]) {}
+}
+
+// 계산된 속성명 (ES2015)
+var prop = 'foo'
+var o = {
+  [prop]: 'hey',
+  ['b' + 'ar']: 'there'
+}
+ +

설명

+ +

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

+ +

객체 리터럴 표기법 vs JSON

+ +

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

+ + + +

예제

+ +

객체 생성

+ +

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

+ +
var object = {};
+ +

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

+ +

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

+ +
var object = {
+  foo: "bar",
+  age: 42,
+  baz: { myProp: 12 },
+}
+ +

속성 접근

+ +

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

+ +
object.foo; // "bar"
+object["age"]; // 42
+
+object.foo = "baz";
+
+ +

속성 정의

+ +

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

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

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

+ +
var a = "foo",
+    b = 42,
+    c = {};
+
+// 단축 속성명 (ES6)
+var o = { a, b, c }
+
+// 다시 말해서,
+console.log((o.a === {a}.a)) // true
+
+ +

중복된 속성명

+ +

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

+ +
var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+
+ +

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

+ +
function haveES6DuplicatePropertySemantics(){
+  "use strict";
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨
+    return true;
+  } catch (e) {
+    // 오류 발생, 중복은 엄격 모드에서 금지됨
+    return false;
+  }
+}
+ +

메서드 정의

+ +

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

+ +
var o = {
+  property: function ([parameters]) {},
+  get property() {},
+  set property(value) {},
+};
+ +

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

+ +
// 단축 메서드 명 (ES6)
+var o = {
+  property([parameters]) {},
+}
+ +

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

+ +
var o = {
+  *generator() {
+    ...........
+  }
+};
+ +

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

+ +
var o = {
+  generatorMethod: function* () {
+    ...........
+  }
+};
+ +

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

+ +

계산된 속성명

+ +

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

+ +

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

+ +
// 계산된 속성명 (ES6)
+var i = 0;
+var 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
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { size: 12, mobileSize: 4 }
+ +

전개 속성

+ +

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

+ +

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

+ +
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 }
+ +
+

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

+
+ +

프로토타입 변이

+ +

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

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var 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__"));
+
+ +

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

+ +

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

+ +
var __proto__ = "variable";
+
+var 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");
+
+var obj3 = { ["__prot" + "o__"]: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

스펙

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

브라우저 호환성

+ +

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

+ +

참조

+ + -- cgit v1.2.3-54-g00ecf