diff options
Diffstat (limited to 'files/ko/web/javascript')
4 files changed, 341 insertions, 363 deletions
diff --git a/files/ko/web/javascript/data_structures/index.md b/files/ko/web/javascript/data_structures/index.md index e72d37dd85..884d33c308 100644 --- a/files/ko/web/javascript/data_structures/index.md +++ b/files/ko/web/javascript/data_structures/index.md @@ -89,13 +89,13 @@ Infinity ### BigInt type -The {{jsxref("BigInt")}} type is a numeric primitive in JavaScript that can represent integers with arbitrary precision. With `BigInt`s, you can safely store and operate on large integers even beyond the safe integer limit for `Number`s. +[BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 타입은 임의 정밀도로 정수를 나타낼 수 있는 자바스크립트의 숫자 원시 형식이다. `BigInt`를 사용하면 `Number`의 정수 한계를 넘어서는 큰 정수도 안전하게 저장 및 연산할 수 있다. -A `BigInt` is created by appending `n` to the end of an integer or by calling the constructor. +`BigInt`는 정수 끝에 `n`을 추가하거나 생성자를 호출하여 생성된다. -You can obtain the safest value that can be incremented with `Number`s by using the constant {{jsxref("Number.MAX_SAFE_INTEGER")}}. With the introduction of `BigInt`s, you can operate with numbers beyond the {{jsxref("Number.MAX_SAFE_INTEGER")}}. +`BigInt`의 도입으로, 다음의 [Number.MAX_SAFE_INTEGER](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)로 작업할 수 있으며 상수 [Number.MAX_SAFE_INTEGER](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)를 사용하여 숫자로 증가시킬 수 있는 가장 안전한 값을 얻을 수 있다. -This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTEGER")}} returns the expected result: +이 예제는 [Number.MAX_SAFE_INTEGER](/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER)를 증가시키면 예상 결과가 반환된다는 것을 보여준다: ```js > const x = 2n ** 53n; @@ -104,11 +104,11 @@ This example demonstrates, where incrementing the {{jsxref("Number.MAX_SAFE_INTE 9007199254740993n ``` -You can use the operators `+`, `*`, `-`, `**`, and `%` with `BigInt`s—just like with `Number`s. A `BigInt` is not strictly equal to a `Number`, but it is loosely so. +산술 연산자 `+`, `*`, `-`, `**` 및 `%`를 `BigInt`에서도 사용할 수 있다. `BigInt`는 정확히 `Number`와 같지는 않으나 대략적으로는 같다. -A `BigInt` behaves like a `Number` in cases where it is converted to `Boolean`: `if`, `||`, `&&`, `Boolean`, `!`. +`BigInt`는 `if`, `||`, `&&,` `Boolean`, `!`와 같이 `Boolean 타입`으로 변환되는 경우 `Number`처럼 작동한다. -`BigInt`s cannot be operated on interchangeably with `Number`s. Instead a {{jsxref("TypeError")}} will be thrown. +`BigInt`는 `Number`로 교체할 수 없으며 [TypeError](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError)가 발생한다. ### String 타입 @@ -145,77 +145,26 @@ Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변 두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다. -> **Note:** Each property has corresponding *attributes.* Attributes are used internally by the JavaScript engine, so you cannot directly access them. That's why attributes are listed in double square brackets, rather than single. +> **Note:** 각 프로퍼티에는 `특성들`이 있다. 특성은 자바스크립트 엔진에서 내부적으로 사용되므로 사용자가 직접 액세스할 수 없다. 그렇기 때문에 속성이 단일 대괄호가 아닌 이중 대괄호로 나열된다. > -> See {{jsxref("Object.defineProperty()")}} to learn more. +> 더 알아보려면 [Object.defineProperty()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 확인하자. #### 데이터 속성 (Data property) 키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다. -<table class="standard-table"> - <caption> - Attributes of a data property - </caption> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - <th scope="col">Default value</th> - </tr> - </thead> - <tbody> - <tr> - <td>[[Value]]</td> - <td>Any JavaScript type</td> - <td>The value retrieved by a get access of the property.</td> - <td><code>undefined</code></td> - </tr> - <tr> - <td>[[Writable]]</td> - <td>Boolean</td> - <td> - If <code>false</code>, the property's [[Value]] cannot be changed. - </td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Enumerable]]</td> - <td>Boolean</td> - <td> - <p> - If <code>true</code>, the property will be enumerated in - <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" - >for...in</a - > - loops.<br />See also - <a - href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties" - >Enumerability and ownership of properties</a - >. - </p> - </td> - <td><code>false</code></td> - </tr> - <tr> - <td>[[Configurable]]</td> - <td>Boolean</td> - <td> - If <code>false</code>, the property cannot be deleted, cannot be changed - to an accessor property, and attributes other than [[Value]] and - [[Writable]] cannot be changed. - </td> - <td><code>false</code></td> - </tr> - </tbody> -</table> +|Attribute|Type|Description|Default value| +|---------|----|-----------|-------------| +|[[Value]]|Any<br>JavaScript<br>type|액세스로 검색된 값의 속성을 가져온다.|`undefined`| +|[[Writable]]|Boolean|만약 `false` 라면, 속성의 [[Value]] 를 변경할 수 없다.|`false`| +|[[Enumerable]]|Boolean|만약 `true`이면, 이 속성은 [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다.<br>참고 : [Enumerability and ownership of properties](/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)|`false`| +|[[Configurable]]|Boolean|만약 `false` 라면, 속성을 삭제하거나 접근자 속성으로 변경할 수 없으며, [[Value]] 와 [[Writable]] 특성 외에는 변경할 수 없다.|`false`| | Attribute | Type | Description | | ---------- | ------- | ----------------------------------------------------- | -| Read-only | Boolean | Reversed state of the ES5 [[Writable]] attribute. | -| DontEnum | Boolean | Reversed state of the ES5 [[Enumerable]] attribute. | -| DontDelete | Boolean | Reversed state of the ES5 [[Configurable]] attribute. | +| Read-only | Boolean | ES5의 [[Writable]] 특성으로 변경되었다. | +| DontEnum | Boolean | ES5의 [[Enumerable]] 특성으로 변경되었다. | +| DontDelete | Boolean | ES5의 [[Configurable]] 특성으로 변경되었다. | #### 접근자 속성 (Accessor property) @@ -225,7 +174,7 @@ Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변 | ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | [[Get]] | Function 객체 혹은 `undefined` | 이 속성의 값에 접근할 때마다, 인자 목록 없이 함수가 호출되고, 함수의 반환된 값으로 속성값을 가져온다. 같이보기 [`get`](/ko/docs/Web/JavaScript/Reference/Functions/get). | `undefined` | | [[Set]] | Function 객체 혹은 `undefined` | 이 속성의 값이 바뀌려고 할 때마다, 할당된 값을 인자로 함수가 호출된다. 같이보기 [`set`](/ko/docs/Web/JavaScript/Reference/Functions/set). | `undefined` | -| [[Enumerable]] | Boolean | 만약 `true`이면, 이 속성은, [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다.loops. | `false` | +| [[Enumerable]] | Boolean | 만약 `true`이면, 이 속성은, [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in)로 루프에서 열거될 수 있다. | `false` | | [[Configurable]] | Boolean | 만약 `false`이면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다. | `false` | ### "Normal" objects, and functions diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index cb42f89ebc..44e2310468 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -12,7 +12,14 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 --- <div>{{jsSidebar("Functions")}}</div> -<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">function 표현</a>에 비해 구문이 짧고 자신의 <a href="/ko/docs/Web/JavaScript/Reference/Operators/this">this</a>, <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>을 바인딩 하지 않습니다. 화살표 함수는 항상 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/name">익명</a>입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.</p> +<p>화살표 함수 표현(<strong>arrow function expression</strong>)은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/function">전통적인 함수표현(function)</a>의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.</p> +<ul> +<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a>나 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>에 대한 바인딩이 없고, <a href="https://developer.mozilla.org/en-US/docs/Glossary/Method">methods</a> 로 사용될 수 없습니다.</li> +<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a>키워드가 없습니다.</li> +<li>일반적으로 스코프를 지정할 때 사용하는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a> methods를 이용할 수 없습니다.</li> +<li>생성자<a href="https://developer.mozilla.org/en-US/docs/Glossary/Constructor">(Constructor)</a>로 사용할 수 없습니다.</li> +<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a>를 화살표 함수 내부에서 사용할 수 없습니다.</li> +</ul> <p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> 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 ---- -<div>{{JsSidebar("Operators")}}</div> - -<p>객체는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object()</code></a>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> 또는 <em>리터럴</em> 표기법 (<em>initializer</em> 표기법)을 사용하여 초기화될 수 있습니다. 객체 초기자(object initializer)는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호(<code>{}</code>)로 묶인 형태입니다.</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}}</p> - -<h2 id="구문">구문</h2> - -<pre class="brush: js notranslate">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 = { - <var>property: function </var>([<var>parameters</var>]) {}, - get <var>property</var>() {}, - set <var>property</var>(<var>value</var>) {}, -}; -</pre> - -<h3 id="ECMAScript_2015의_새로운_표기법">ECMAScript 2015의 새로운 표기법</h3> - -<pre class="brush: js notranslate">// 단축 속성명 (ES2015) -let a = "foo", b = 42, c = {} -let o = { a, b, c } - -// 단축 메서드명 (ES2015) -var o = { - <var>property</var>([<var>parameters</var>]) {} -} - -// 계산된 속성명 (ES2015) -var prop = 'foo' -var o = { - [prop]: 'hey', - ['b' + 'ar']: 'there' -}</pre> - -<h2 id="설명">설명</h2> - -<p>객체 초기자는 {{jsxref("Object")}}의 초기화를 기술하는 표현식(expression)입니다. 객체는 객체를 설명하는 데 사용되는<em>속성</em>으로 구성됩니다. 객체의 속성값은 {{Glossary("primitive")}} 데이터 형 또는 다른 객체를 포함할 수 있습니다.</p> - -<h3 id="객체_리터럴_표기법_vs_JSON">객체 리터럴 표기법 vs JSON</h3> - -<p>객체 리터럴 표기법은 <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/ko/docs/Glossary/JSON">JSON</a>)과 같지 않습니다. 비슷해 보이지만, 차이가 있습니다:</p> - -<ul> - <li>JSON은 <code>"property": value</code> 구문을 사용한 속성 정의<em>만</em> 허용합니다. 속성명은 큰 따옴표로 묶여야 하고, 정의는 단축(명)일 수 없습니다.</li> - <li>JSON에서 값은 오직 문자열, 숫자, 배열, <code>true</code>, <code>false</code>, <code>null</code> 또는 다른 (JSON) 객체만 될 수 있습니다.</li> - <li>함수 값(아래 "메서드" 참조)은 JSON에서 값에 할당될 수 없습니다.</li> - <li>{{jsxref("Date")}} 같은 객체는 {{jsxref("JSON.parse()")}} 후에 문자열이 됩니다.</li> - <li>{{jsxref("JSON.parse()")}}는 계산된 속성명을 거부하고 오류를 발생합니다.</li> -</ul> - -<h2 id="예제">예제</h2> - -<h3 id="객체_생성">객체 생성</h3> - -<p>속성이 없는 빈 객체는 다음과 같이 만들 수 있습니다:</p> - -<pre class="brush: js notranslate">var object = {};</pre> - -<p>그러나, 리터럴(<em>literal</em>) 또는 초기자(<em>initializer</em>) 표기법의 이점은, 빠르게 중괄호 내 속성이 있는 객체를 만들 수 있다는 것입니다. 당신은 그저 쉼표로 구분된 <strong><code>키: 값</code></strong> 쌍 목록을 표기합니다.</p> - -<p>다음 코드는 키가 <code>"foo"</code>, <code>"age"</code> 및 <code>"baz"</code>인 세 속성이 있는 객체를 만듭니다. 이들 키값은 문자열 <code>"bar"</code>, 숫자 <code>42</code> 그리고 세 번째 속성은 그 값으로 다른 객체를 갖습니다.</p> - -<pre class="brush: js notranslate">var object = { - foo: "bar", - age: 42, - baz: { myProp: 12 }, -}</pre> - -<h3 id="속성_접근">속성 접근</h3> - -<p>일단 객체를 생성하면, 읽거나 바꿀 수 있습니다. 객체 속성은 점 표기법 또는 각괄호 표기법을 사용하여 액세스될 수 있습니다. (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 참조.)</p> - -<pre class="brush: js notranslate">object.foo; // "bar" -object["age"]; // 42 - -object.foo = "baz"; -</pre> - -<h3 id="속성_정의">속성 정의</h3> - -<p>우리는 이미 초기자 구문을 사용한 속성 표기법을 배웠습니다. 가끔, 객체 안에 두고 싶은 코드 속 변수가 있습니다. 다음과 같은 코드가 보입니다:</p> - -<pre class="brush: js notranslate">var a = "foo", - b = 42, - c = {}; - -var o = { - a: a, - b: b, - c: c -};</pre> - -<p>ECMAScript 2015의 경우, 똑같은 일을 할 수 있는 더 짧은 표기법이 있습니다:</p> - -<pre class="brush: js notranslate">var a = "foo", - b = 42, - c = {}; - -// 단축 속성명 (ES6) -var o = { a, b, c } - -// 다시 말해서, -console.log((o.a === {a}.a)) // true -</pre> - -<h4 id="중복된_속성명">중복된 속성명</h4> - -<p>속성이 같은 이름을 쓰는 경우, 두 번째 속성은 첫 번째를 겹쳐씁니다.</p> - -<pre class="brush: js notranslate">var a = {x: 1, x: 2}; -console.log(a); // {x: 2} -</pre> - -<p>ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 {{jsxref("SyntaxError")}}로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다.</p> - -<pre class="brush: js notranslate">function haveES6DuplicatePropertySemantics(){ - "use strict"; - try { - ({ prop: 1, prop: 2 }); - - // 오류 미 발생, 중복 속성명은 엄격 모드에서 허용됨 - return true; - } catch (e) { - // 오류 발생, 중복은 엄격 모드에서 금지됨 - return false; - } -}</pre> - -<h3 id="메서드_정의">메서드 정의</h3> - -<p>객체의 속성은 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a>나 <a href="/ko/docs/Web/JavaScript/Reference/Functions/get">getter</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setter</a> 메서드를 참조할 수도 있습니다.</p> - -<pre class="brush: js notranslate">var o = { - <var>property: function </var>([<var>parameters</var>]) {}, - get <var>property</var>() {}, - set <var>property</var>(<var>value</var>) {}, -};</pre> - -<p>ECMAScript 2015에서는, 단축 표기법을 이용할 수 있습니다, 그래서 키워드 "<code>function</code>"은 더 이상 필요치 않습니다.</p> - -<pre class="brush: js notranslate">// 단축 메서드 명 (ES6) -var o = { - <var>property</var>([<var>parameters</var>]) {}, -}</pre> - -<p>ECMAScript 2015에는 값이 생성기 함수인 속성을 간결하게 정의하는 법도 있습니다:</p> - -<pre class="brush: js notranslate">var o = { - *<var>generator</var>() { - ........... - } -};</pre> - -<p>ECMAScript 5에서는 다음과 같이 작성할 수 있습니다 (하지만 ES5는 생성기가 없음을 주의하세요):</p> - -<pre class="brush: js notranslate">var o = { - generator<var>Method: function* </var>() { - ........... - } -};</pre> - -<p>메서드에 관한 자세한 사항 및 예는, <a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a> 참조.</p> - -<h3 id="계산된_속성명">계산된 속성명</h3> - -<p>ECMAScript 2015를 시작으로, 객체 초기화 구문은 계산된 속성명(computed property name)도 지원합니다. 각괄호 <code>[]</code> 안에 식을 넣을 수 있고, 식이 계산되고 그 결과가 속성명으로 사용됩니다. 이는 이미 속성을 읽고 설정하는 데 사용했을 수 있는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a> 구문의 각괄호 표기법을 연상시킵니다. </p> - -<p>이제 당신은 객체 리터럴에서도 같은 구문을 쓸 수 있습니다:</p> - -<pre class="brush: js notranslate">// 계산된 속성명 (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 }</pre> - -<h3 id="전개_속성">전개 속성</h3> - -<p><a href="https://github.com/tc39/proposal-object-rest-spread">ECMASCript의 나머지/전개 속성</a> 제안 (stage 4) 으로 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">전개(spread)</a> 속성이 객체 리터럴에 추가됩니다. 이 속성은 제공된 객체의 열거 가능한(enumerable) 속성을 새 객체로 복사합니다.</p> - -<p>(<code>prototype</code>을 제외하는) 얕은 복제(Shallow-cloning) 나 객체 합침(merging objects)이 이제{{jsxref("Object.assign()")}} 보다 짧은 문법으로 가능해집니다.</p> - -<pre class="notranslate">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 }</pre> - -<div class="blockIndicator warning"> -<p>{{jsxref("Object.assign()")}}는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/set">setters</a>를 작동시키지만, 전개 연산자(spread operator)는 아니라는 걸 주목하세요!</p> -</div> - -<h3 id="프로토타입_변이">프로토타입 변이</h3> - -<p><code>__proto__: value</code> 또는 <code>"__proto__": value</code> 형태의 속성 정의는 이름이 <code>__proto__</code>인 속성을 만들지 않습니다. 대신, 제공된 값이 객체 또는 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>이면, 생성된 객체의 <code>[[Prototype]]</code>을 그 값으로 바꿉니다. (값이 객체나 null이 아니면, 객체는 바뀌지 않습니다.)</p> - -<pre class="brush: js notranslate">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__")); -</pre> - -<p>단일 프로토타입 변이(mutation)만 객체 리터럴에 허용됩니다: 다중 프로토타입 변이는 구문 오류입니다.</p> - -<p>"colon" 표기법을 쓰지 않는 속성 정의는 프로토타입 변이가 아닙니다: 그들은 다른 이름을 사용하는 비슷한 정의와 동일하게 동작하는 속성 정의입니다.</p> - -<pre class="brush: js notranslate">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); -</pre> - -<h2 id="스펙">스펙</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> - </tr> - </tbody> -</table> - -<h2 id="브라우저_호환성">브라우저 호환성</h2> - -<p>{{Compat("javascript.operators.object_initializer")}}</p> - -<h2 id="참조">참조</h2> - -<ul> - <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a></li> - <li><code><a href="/ko/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/ko/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions">메서드 정의</a></li> - <li><a href="/ko/docs/Web/JavaScript/Reference/Lexical_grammar">어휘 문법</a></li> -</ul> 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..b4b6eb6bd9 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/object_initializer/index.md @@ -0,0 +1,314 @@ +--- +title: 객체 초기자 +slug: Web/JavaScript/Reference/Operators/Object_initializer +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Language feature + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +browser-compat: javascript.operators.object_initializer +--- +{{JsSidebar("Operators")}} + +객체는 [`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")}} + +## 구문 + +```js +let o = {} +let o = {a: 'foo', b: 42, c: {}} + +let a = 'foo', b = 42, c = {} +let o = {a: a, b: b, c: c} + +let o = { + property: function (parameters) {}, + get property() {}, + set property(value) {} +}; +``` + +### ECMAScript 2015의 새로운 표기법 + +이러한 표기법의 지원에 대해서는 호환성 테이블을 확인해주세요. 지원하지 않는 환경에서는 이러한 표기법들은 구문 에러를 유발합니다. + +```js +// 프로퍼티명 약식 (ES2015) +let a = 'foo', b = 42, c = {}; +let o = {a, b, c} + +// 프로퍼티명 약식 (ES2015) +let o = { + property(parameters) {} +} + +// 계산된 프로퍼티명 (ES2015) +let prop = 'foo'; +let o = { + [prop]: 'hey', + ['b' + 'ar']: 'there' +} +``` + +## 설명 + +객체 초기자는 {{jsxref("Object")}}의 초기화를 나타내는 표현입니다. 객체는 객체를 나타내는 데 사용되는 _properties_로 구성됩니다. 객체 프로퍼티의 값은 [원시 값](/ko/docs/Glossary/Primitive) 데이터 타입 또는 다른 객체를 포함할 수 있습니다. + +### 객체 리터럴 표기법 vs 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()")}}는 계산된 프로퍼티명을 거부하며 에러가 발생합니다. + +## 예제 + +### 객체 생성하기 + +프로퍼티가 없는 빈 객체는 다음과 같이 생성합니다. + +```js +let object = {} +``` + +_literal_ 또는 _initializer_ 표기법의 장점은 중괄호 안에 프로퍼티를 갖는 객체를 빠르게 생성할 수 있다는 것입니다. 콤마로 구분하여 `key: value` 상의 목록을 작성하면 됩니다. + +다음 코드는 세 개의 프로퍼티를 갖는 객체를 생성하며 키는 `"foo"`, `"age"`, `"baz"`입니다. 다음 세 키의 값은 문자열 `"bar"`, 숫자 `42`, 그리고 다른 객체입니다. + +```js +let object = { + foo: 'bar', + age: 42, + baz: {myProp: 12} +} +``` + +### 프로퍼티에 접근하기 + +객체를 생성한 후에는 이를 읽거나 변경할 수 있습니다. 객체 프로퍼티는 점 표기법 또는 대괄호 표기법을 사용해 접근할 수 있습니다(자세한 정보는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors)를 보세요). + +```js +object.foo // "bar" +object['age'] // 42 +object.baz // {myProp: 12} +object.baz.myProp //12 +``` + +### 프로퍼티 정의 + +우리는 초기자 구문을 사용해 프로퍼티를 작성하는 방법을 이미 배웠습니다. 때때로 코드의 변수를 객체로 넣고 싶은 경우가 있습니다. 다음과 같은 코드를 보게 될 수 있습니다. + +```js +let a = 'foo', + b = 42, + c = {}; + +let o = { + a: a, + b: b, + c: c +} +``` + +ECMAScript 2015를 사용하면 더 짧은 표기법을 사용해 동일한 결과를 얻을 수 있습니다. + +```js +let a = 'foo', + b = 42, + c = {}; + +// 프로퍼티명 약식 (ES2015) +let o = {a, b, c} + +// 다르게 작성하면, +console.log((o.a === {a}.a)) // true +``` + +#### 중복된 프로퍼티명 + +동일한 프로퍼티명을 사용하면 두 번째 프로퍼티가 첫 번째 프로퍼티를 덮어씁니다. + +```js +let a = {x: 1, x: 2} +console.log(a) // {x: 2} +``` + +ECMAScript 5 엄격 모드 코드에서는 중복된 프로퍼티명을 {{jsxref("SyntaxError")}}로 간주합니다. 런타임 시 복제를 가능하게 한 계산된 프로퍼티 명의 도입으로 ECMScript 2015는 이 제한을 제거했습니다. + +```js +function haveES2015DuplicatePropertySemantics() { + 'use strict'; + try { + ({prop: 1, prop: 2}); + + // 에러가 발생하지 않음, 중복된 프로퍼티명이 엄격 모드에서 허용됨 + return true; + } catch(e) { + // 에러가 발생함, 엄격 모드에서 중복이 금지됨 + return false; + } +} +``` + +### 메서드 정의 + +객체의 프로퍼티는 [function](/ko/docs/Web/JavaScript/Reference/Functions) 또는 [getter](/ko/docs/Web/JavaScript/Reference/Functions/get) 또는 [setter](/ko/docs/Web/JavaScript/Reference/Functions/set) 메서드를 참조할 수도 있습니다. + +```js +let o = { + property: function (parameters) {}, + get property() {}, + set property(value) {} +} +``` + +ECMAScript 2015에서는 약식 표기법을 사용할 수 있으므로 "`function`" 키워드는 필요하지 않습니다. + +```js +// 약식 메서드명(ES2015) +let o = { + property(parameters) {}, +} +``` + +ECMAScript 2015에서는 값이 generator 함수인 프로퍼티를 간결하게 정의하는 방법이 있습니다. + +```js +let o = { + *generator() { + ........... + } +}; +``` + +다음의 ES5와 유사한 표기법과 동일합니다(하지만 ECMAScript 5에는 generator가 없음을 유의하세요). + +```js +let o = { + generator: function* () { + ........... + } +}; +``` + +메서드에 대한 상세 정보와 예제는 [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions)를 보세요. + +### 계산된 프로퍼티명 + +ECMAScript 2015부터 객체 초기자 구문은 계산된 프로퍼티 명도 지원합니다. 대괄호 `[]` 안에서 표현식을 허용하며, 표현식은 프로퍼티명으로 계산되어 사용됩니다. 이는 이미 프로퍼티를 읽고 설정하는 데 사용하는 [프로퍼티 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors) 구문의 대괄호 표기법을 연상시킵니다. + +이제 객체 리터럴에서도 유사한 구문을 사용할 수 있습니다. + +```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 + +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 +} + +console.log(config) // {size: 12, mobileSize: 4} +``` + +### 전개 프로퍼티 + +[ECMAScript의 나머지/전개 프로퍼티](https://github.com/tc39/proposal-object-rest-spread) 제안(stage 4)은 객체 리터럴에 [전개](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 프로퍼티를 추가합니다. 이는 제공된 객체로부터 새로운 객체로 자신만의 열거형 프로퍼티를 복사합니다. + +이제 {{jsxref("Object.assign()")}} 보다 더 짧은 구문을 사용해 얕은 복제(`prototype` 제외) 또는 객체 병합이 가능합니다. + +```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 } +``` + +> **경고:** {{jsxref("Object.assign()")}}은 [setters](/ko/docs/Web/JavaScript/Reference/Functions/set)를 트리거하는 반면 전개 연산자는 그렇지 않음을 유의하세요! + +### 프로토타입 변형 + +`__proto__: value` 또는 `"__proto__": value` 형태의 프로토타입 정의는 `__proto__` 이름을 갖는 프로퍼티를 생성하지 않습니다. 대신에, 제공된 값이 객체 또는 [`null`](/ko/docs/Web/JavaScript/Reference/Global_Objects/null)인 경우, 생성된 객체의 `[[Prototype]]`을 해당 값으로 변경합니다(값이 객체 또는 `null`이 아닌 경우, 객체는 변경되지 않습니다). + +```js +let obj1 = {} +assert(Object.getPrototypeOf(obj1) === Object.prototype) + +let obj2 = {__proto__: null} +assert(Object.getPrototypeOf(obj2) === null) + +let protoObj = {} +let obj3 = {'__proto__': protoObj} +assert(Object.getPrototypeOf(obj3) === protoObj) + +let obj4 = {__proto__: 'not an object or null'} +assert(Object.getPrototypeOf(obj4) === Object.prototype) +assert(!obj4.hasOwnProperty('__proto__')) +``` + +객체 리터럴에서는 단일 프로토타입 변형만 허용됩니다. 다중 프로토타입 변형은 구문 에러입니다. + +"콜론" 표기법을 사용하지 않는 프로퍼티 정의는 프로토타입 변형이 아닙니다. 이는 다른 이름을 사용하여 유사한 정의와 동일하게 동작하는 프로퍼티 정의입니다. + +```js +let __proto__ = 'variable' + +let obj1 = {__proto__} +assert(Object.getPrototypeOf(obj1) === Object.prototype) +assert(obj1.hasOwnProperty('__proto__')) +assert(obj1.__proto__ === 'variable') + +let obj2 = {__proto__() { return 'hello'; }} +assert(obj2.__proto__() === 'hello') + +let obj3 = {['__prot' + 'o__']: 17} +assert(obj3.__proto__ === 17) +``` + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{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) |