1 files changed, 153 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/operators/property_accessors/index.html b/files/ko/web/javascript/reference/operators/property_accessors/index.html
new file mode 100644
index 0000000000..83ae2e0b80
--- /dev/null
+++ b/files/ko/web/javascript/reference/operators/property_accessors/index.html
@@ -0,0 +1,153 @@
+---
+title: 속성 접근자
+slug: Web/JavaScript/Reference/Operators/Property_Accessors
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>속성 접근자</strong>는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">object.property
+object['property']
+</pre>
+
+<h2 id="설명">설명</h2>
+
+<p>객체는 속성의 이름을 키로 사용하는 연관 배열(다른 이름으로는 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하곤 하지만, 서로의 차이는 관례에 불과합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 {{jsxref("Function")}}을 가리키는 참조라면 그 속성을 메서드라고 합니다.</p>
+
+<p>속성에 접근하는 법은 점 표기법과 괄호 표기법 두 가지가 있습니다.</p>
+
+<h3 id="점_표기법">점 표기법</h3>
+
+<pre class="brush: js">get = object.property;
+object.property = set;
+</pre>
+
+<p>이 코드에서, <code>property</code>는 유효한 JavaScript {{glossary("identifier", "식별자")}}여야합니다. 따라서 <code>object.$1</code>은 유효하지만 <code>object.1</code>은 아닙니다.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>여기서는 "createElement"라는 이름을 가진 메서드를 <code>document</code>에서 찾아 호출하고 있습니다.</p>
+
+<p>소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록 해야 합니다.</p>
+
+<pre><code>77 .toExponential();
+// or
+77
+.toExponential();
+// or
+(77).toExponential();
+// or
+77..toExponential();
+// or
+77.0.toExponential();
+// because 77. === 77.0, no ambiguity</code>
+</pre>
+
+<h3 id="괄호_표기법">괄호 표기법</h3>
+
+<pre class="brush: js">get = object[property_name];
+object[property_name] = set;
+</pre>
+
+<p>괄호 표기법에서는 <code>property_name</code>으로 문자열이나 {{jsxref("Symbol")}}을 사용할 수 있습니다. 문자열은 유효한 식별자가 아니어도 괜찮습니다. "<code>1foo</code>", "<code>!bar!</code>", 심지어 "<code> </code>"(공백)도 가능합니다.</p>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>이 코드는 점 표기법의 예시와 동일합니다.</p>
+
+<p>괄호 앞에 공백이 올 수도 있습니다.</p>
+
+<pre><code>document ['createElement']('pre');</code>
+</pre>
+
+<h3 id="속성_이름">속성 이름</h3>
+
+<p>속성의 이름은 문자열이나 {{jsxref("Symbol")}}입니다. 숫자 등의 다른 자료형은 문자열로 변환됩니다.</p>
+
+<pre class="brush: js">var object = {};
+object['1'] = 'value';
+console.log(object[1]);
+</pre>
+
+<p>위 코드의 <code>1</code>은 <code>'1'</code>로 변환되므로, 출력 결과는 "value"입니다.</p>
+
+<pre class="brush: js">var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
+object[foo] = 'value';
+console.log(object[bar]);
+</pre>
+
+<p>위의 코드 역시 <code>foo</code>와 <code>bar</code>가 같은 문자열(<a href="/ko/docs/SpiderMonkey">SpiderMonkey</a> JavaScript 엔진에서는 문자열 "<code>['object Object']</code>")로 변환되므로, 출력 결과는 동일하게 "value"입니다.</p>
+
+<h3 id="메서드_바인딩">메서드 바인딩</h3>
+
+<p>메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 <code>this</code>는 메서드 내에 고정되지 않으므로 <code>this</code>가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, <code>this</code>는 함수 호출 방식에 따라 "전달"됩니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/this#bind_메서드" title="method binding">메서드 바인딩</a>을 참고하세요.</p>
+
+<h3 id="eval()_주의사항"><code>eval()</code> 주의사항</h3>
+
+<p>JavaScript 초심자로써는 괄호 표기법을 사용할 수 있는 장소에 {{jsxref("eval", "eval()")}}을 남용하기 쉽습니다. 간혹 스크립트에서 다음과 같은 구문을 찾아볼 수 있습니다.</p>
+
+<pre class="brush: js">x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
+</pre>
+
+<p><code>eval()</code>은 느리고, 가능하다면 최대한 피해야 합니다. 또한, <code>strFormControl</code>은 유효한 식별자여야 하지만, 폼 컨트롤의 ID나 이름은 식별자가 아닐 수도 있습니다. 따라서 괄호 표기법을 대신 사용하는 것이 좋습니다.</p>
+
+<pre class="brush: js">x = document.forms["form_name"].elements[strFormControl].value;
+</pre>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">명세</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Property Accessors')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>초기 정의. JavaScript 1.0에서 구현됨.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>