diff options
Diffstat (limited to 'files/ko')
8 files changed, 417 insertions, 372 deletions
diff --git a/files/ko/glossary/immutable/index.html b/files/ko/glossary/immutable/index.html new file mode 100644 index 0000000000..847f9bbbe3 --- /dev/null +++ b/files/ko/glossary/immutable/index.html @@ -0,0 +1,23 @@ +--- +title: Immutable +slug: Glossary/Immutable +tags: + - CodingScripting + - Glossary +--- +<p>불변 <a href="/ko/docs/Glossary/Object">객체</a> 는 내용을 변경할 수 없는 객체입니다.<br> + 객체는 다양한 이유로 불변일 수 있습니다. 예를 들어 아래와 같습니다.</p> + +<ul> + <li>성능 향상하기(향후 객체의 변경에 대한 계획 없음)</li> + <li>메모리 사용을 줄이기(전체 객체를 복제하는 대신 <a href="/ko/docs/Glossary/Object_reference">객체를 참조</a>)</li> + <li>스레드 안전성(여러 스레드가 서로 간섭하지 않고 동일한 객체 참조 가능)</li> +</ul> + +<h2 id="Learn_more">더 알아보기</h2> + +<h3 id="General_knowledge">일반적 지식</h3> + +<ul> + <li>{{interwiki("wikipedia", "Immutable object", "Immutable")}} on Wikipedia</li> +</ul>
\ No newline at end of file diff --git a/files/ko/glossary/mutable/index.html b/files/ko/glossary/mutable/index.html new file mode 100644 index 0000000000..664479134d --- /dev/null +++ b/files/ko/glossary/mutable/index.html @@ -0,0 +1,44 @@ +--- +title: Mutable +slug: Glossary/Mutable +tags: + - CodingScripting + - Glossary + - NeedsContent +--- +<p>"Mutable"은 변경 가능(가변)한 변수의 유형입니다. <a href="/ko/docs/Glossary/JavaScript">JavaScript</a>에서, <a href="/ko/docs/Glossary/Primitive">원시 값</a>이 아닌 <a href="/ko/docs/Glossary/Object">객체</a>와 <a href="/ko/docs/Glossary/array">배열</a>만이 mutable입니다.</p> + +<p>(변수 이름이 새 값을 가리키도록 "만들 수 있지만" 이전 값은 여전히 메모리에 유지됩니다. 따라서 Garbage collection이 필요합니다.)</p> + +<p><strong>가변 객체</strong>는 객체가 생성된 후 상태를 수정할 수 있는 객체입니다.</p> + +<p><strong>불변 객체</strong>는 일단 객체가 생성되면 상태를 변경할 수 없는 객체입니다.</p> + +<p><strong>문자열과 숫자</strong>는 <strong>불변</strong>입니다. 예제를 보고 이해해볼까요?</p> + +<pre>var immutableString = "Hello"; + +// 위의 코드에서는 문자열 값을 가진 새 개체가 생성됩니다. + +immutableString = immutableString + "World"; + +// 우리는 지금 기존 값에 "World" 를 추가하고 있습니다. +</pre> + +<p>문자열 값을 사용하여 "immutableString" 을 추가하면 다음 이벤트가 발생합니다.:</p> + +<ol> + <li>기존 값 "immutableString"이 검색되었습니다.</li> + <li>"World"가 "immutableString"의 기존 값에 추가됩니다.</li> + <li>결과 값이 새 메모리 블록에 할당됩니다.</li> + <li>"immutableString" 객체는 새로 만든 메모리 공간을 가리킵니다.</li> + <li>기존에 생성한 메모리 공간은 Garbage collection이 가능해 집니다.</li> +</ol> + +<h2 id="Learn_more">더 알아보기</h2> + +<h3 id="General_knowledge">일반적 지식</h3> + +<ul> + <li>{{Interwiki("wikipedia", "Immutable object")}} on Wikipedia</li> +</ul> diff --git a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index f4992c339f..bd3724cb47 100644 --- a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -85,11 +85,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> +<p>The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> <p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong>aria-checked</strong> property is used to declare the selection state of the menu items.</p> -<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1a. HTML for a selectable menu.</em></p> <pre class="deki-transform"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" @@ -109,7 +109,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the <strong>aria-checked</strong> attribute on line 1.</p> -<p><em>Example 1b. Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></em></p> +<p><em>Example 1b. Attribute-based selector for indicating state.</em></p> <pre class="deki-transform">li[aria-checked="true"] { font-weight: bold; @@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong>aria-checked</strong> property has the form shown in Example 1c. Note that the script only updates the <strong>aria-checked</strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> -<p><em>Example 1c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p> +<p><em>Example 1c. JavaScript to update the aria-checked attribute</em></p> <pre class="deki-transform">var processMenuChoice = function(item) { // 'check' the selected item @@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>When content visibility is changed (i.e. an element is hidden or shown), developers should change the <strong>aria-hidden</strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip</a>. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> +<p>The Open Ajax Alliance website provides an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> <p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong>aria-hidden</strong> state to <code>true</code>.</p> -<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2a. HTML for a tooltip.</em></p> <pre class="deki-transform"><div class="text"> <label id="tp1-label" for="first">First Name:</label> @@ -160,7 +160,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong>aria-hidden</strong> attribute on line 1.</p> -<p>Example 2b. <em>Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p> +<p>Example 2b. <em>Attribute-based selector for indicating state.</em></p> <pre class="deki-transform">div.tooltip[aria-hidden="true"] { display: none; @@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong>aria-hidden</strong> property has the form shown in Example 2c. Note that the script only updates the <strong>aria-</strong><strong>hidden</strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> -<p><em>Example 2c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p> +<p><em>Example 2c. JavaScript to update the aria-checked attribute </em></p> <pre class="deki-transform">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); diff --git a/files/ko/web/api/streams_api/concepts/index.html b/files/ko/web/api/streams_api/concepts/index.html index 3537318227..fd212aa988 100644 --- a/files/ko/web/api/streams_api/concepts/index.html +++ b/files/ko/web/api/streams_api/concepts/index.html @@ -19,7 +19,7 @@ original_slug: Web/API/Streams_API/컨셉 <li><strong>Pull sources</strong> require you to explicitly request data from them once connected to. Examples include a file access operation via a <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> or <a href="/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest">XHR</a> call.</li> </ul> -<p>컨The data is read sequentially in small pieces called <strong>chunks</strong>. A chunk can be a single byte, or it can be something larger such as a <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> of a certain size. A single stream can contain chunks of different sizes and types.</p> +<p>The data is read sequentially in small pieces called <strong>chunks</strong>. A chunk can be a single byte, or it can be something larger such as a <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> of a certain size. A single stream can contain chunks of different sizes and types.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15819/Readable%20streams.png" style="height: 452px; width: 1000px;"></p> 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) |