From 2a18a140122fc87b4f13577b9910e1627f2bbb88 Mon Sep 17 00:00:00 2001
From: alattalatta <urty5656@gmail.com>
Date: Tue, 23 Nov 2021 20:51:34 +0900
Subject: Rename html to md
---
.../guide/working_with_objects/index.html | 500 ---------------------
.../javascript/guide/working_with_objects/index.md | 500 +++++++++++++++++++++
.../reference/global_objects/array/index.html | 483 --------------------
.../reference/global_objects/array/index.md | 483 ++++++++++++++++++++
4 files changed, 983 insertions(+), 983 deletions(-)
delete mode 100644 files/ko/web/javascript/guide/working_with_objects/index.html
create mode 100644 files/ko/web/javascript/guide/working_with_objects/index.md
delete mode 100644 files/ko/web/javascript/reference/global_objects/array/index.html
create mode 100644 files/ko/web/javascript/reference/global_objects/array/index.md
diff --git a/files/ko/web/javascript/guide/working_with_objects/index.html b/files/ko/web/javascript/guide/working_with_objects/index.html
deleted file mode 100644
index 7dce2677f8..0000000000
--- a/files/ko/web/javascript/guide/working_with_objects/index.html
+++ /dev/null
@@ -1,500 +0,0 @@
----
-title: Working with objects
-slug: Web/JavaScript/Guide/Working_with_Objects
-translation_of: Web/JavaScript/Guide/Working_with_Objects
----
-<p>자바스크립트는 간단한 객체기반 패러다임 상에서 만들어졌다. 객체는 프로퍼티의 모음이며, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다 . 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티는 메소드라고 불린다. 브라우저 안에 미리 정의 된 객체뿐 아니라 사용자들이 직접 자신만의 객체를 정의할 수도 있다.</p>
-
-<p class="summary">이 절에서는 객체, 프로퍼티, 함수, 메소드가 어떻게 사용되는지, 그리고 사용자를 위한 새로운 객체를 생성하는 방법을 설명한다</p>
-
-<h2 id="개요">개요</h2>
-
-<p>자바스크립트에서의 객체는 다른 프로그래밍 언어에서와 비슷하게 현실 세계에서의 사물(objects)과 비교해 볼 수 있다. 자바스크립트에서의 객체의 개념은 실세계상에서의 인식 가능한 사물로 이해할 수 있다.</p>
-
-<p>객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다. 예를 들어 컵과 비교를 해 본다면 컵은 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(프로퍼티)을 가지고 있다. 비슷하게 자바스크립트의 객체는 그 특징을 결정짓는 여러 프로퍼티를 가진다.</p>
-
-<h2 id="객체와_프로퍼티">객체와 프로퍼티</h2>
-
-<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트의 객체에는 그와 연관된 프로퍼티가 있다. 프로퍼티는 객체에 붙은 변수(variable)라고 설명할 수 있겠다. 객체의 프로퍼티는 일반 자바스크립의 변수와 기본적으로 똑같은데, 다만 객체에 속해있다는 차이만 있을 뿐이다. 객체의 프로퍼티들이 객체의 특징을 규정한다. 프로퍼티에 접근할 때는 도트(점) 표기법을 사용한다.</span></p>
-
-<pre class="brush: js">objectName.propertyName
-</pre>
-
-<p><span style="font-size: 14.39px; line-height: 16.79px;">자바스크립트의 모든 변수가 그렇듯이, 객체의 이름과 프로퍼티 이름은 모두 대소문자를 구별한다. 프로퍼티를 새로 정의하려면 그냥 이름과 값을 추가하면 된다. 예를 들어</span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">myCar</code><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14.39px; line-height: 16.79px;">라는 이름의 객체를 생성하고, 거기에</span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">make</code><span style="font-size: 14px; line-height: 1.5;">, </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">model</code><span style="font-size: 14px; line-height: 1.5;">, and </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">year</code><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14.39px; line-height: 16.79px;">라는 프로퍼티들을 추가해보자:</span></p>
-
-<pre class="brush: js">var myCar = new Object();
-myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-</pre>
-
-<p><span style="font-size: 14px; line-height: 1.5;">대괄호 표기법을 사용하여 객체의 프로퍼티에 접근할 수 있다. 객체는 연관배열(</span><em>associative arrays</em><span style="font-size: 14px; line-height: 1.5;">)이라고도 불리는데, 각 프로퍼티는 하나의 문자열 이름과 연관되어(associated) 이것을 통해 접근할 수 있기 때문이다. 예를 들면 </span><span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">myCar</span><span style="font-size: 14px; line-height: 1.5;"> 객체의 프로퍼티에 다음과 같이 접근할 수 있다.</span></p>
-
-<pre class="brush: js">myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1969;
-</pre>
-
-<p><span style="font-size: 14px; line-height: 1.5;">객체의 프로퍼티 이름은 유효한 자바스크립트 문자열이거나 문자열로 변환이 가능한 것이면 어떤 것이든 가능하며, 심지어 빈 문자열도 된다. 하지만 자바스크립트 식별자(identifier)로 적합하지 않으면 (예 : 하이픈, 빈칸을 포함하거나 숫자로 시작하는 이름), 대괄호를 이용한 표기법으로만 접근이 가능하다. 이 표기법은 프로퍼티 이름이 사전에 미리 결정되지 않고 런타임 시점에 결정되는 경우에 특히 유용하다. 아래의 예를 보자.</span></p>
-
-<pre class="brush: js">var myObj = new Object(),
- str = "myString",
- rand = Math.random(),
- obj = new Object(); // 변수 4개를 콤마를 사용하여 한번에 생성하고 할당.
-
-myObj.type = "Dot syntax";
-myObj["date created"] = "String with space";
-myObj[str] = "String value";
-myObj[rand] = "Random Number";
-myObj[obj] = "Object";
-myObj[""] = "Even an empty string";
-
-console.log(myObj);
-</pre>
-
-<p><span style="font-size: 14px; line-height: 1.5;">변수에 저장된 문자열을 이용해서도 프로퍼티에 접근할 수 있다.</span></p>
-
-<div style="width: auto;">
-<pre class="brush: js">var propertyName = "make";
-myCar[propertyName] = "Ford";
-
-propertyName = "model";
-myCar[propertyName] = "Mustang";
-</pre>
-</div>
-
-<p>대괄호 표기법을 <a class="internal" href="/ko/docs/JavaScript/Guide/Statements#for...in_Statement" title="ko/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> 과 함께 사용하면 객체의 열거가능한 프로퍼티를 나열할 수 있다. 이것이 어떻게 작동하는지 알기 위해 아래의 함수를 보자. 이 함수는 객체와 객체 이름을 함수의 인자로 전달받아서 객체의 프로퍼티들을 출력해 준다.</p>
-
-<pre class="brush: js">function showProps(obj, objName) {
- var result = "";
- for (var i in obj) {
- if (obj.hasOwnProperty(i)) {
- result += objName + "." + i + " = " + obj[i] + "\n";
- }
- }
- return result;
-}
-</pre>
-
-<p><code>showProps(myCar, "myCar")</code> 함수를 호출하면 다음과 같은 문자열을 반환한다.</p>
-
-<pre>myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969</pre>
-
-<h2 id="모든_것이_객체">모든 것이 객체</h2>
-
-<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트 세상에서는 거의 모든 것들이 객체이다. </span><code style="line-height: 16.79px; font-size: 14.39px; font-style: normal;">null</code><span style="font-size: 14.39px; line-height: 16.79px;"> 과 </span><code style="line-height: 16.79px; font-size: 14.39px; font-style: normal;">undefined</code><span style="font-size: 14.39px; line-height: 16.79px;"> 를 제외한 모든 </span><span style="font-size: 14px; line-height: 1.5;">원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고 (설명 필요: </span><span style="font-size: 14.39px; line-height: 16.79px;">assigned properties of some types are not persistent), 모두 객체로서의 특징을 갖는다.</span></p>
-
-<h2 id="객체의_프로퍼티_나열하기">객체의 프로퍼티 나열하기</h2>
-
-<p><a href="/ko/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 를 기준으로 객체의 프로퍼티를 나열/순회하는 방법이 세 가지 있다.</p>
-
-<ul>
- <li><a href="/ko/docs/JavaScript/Reference/Statements/for...in" title="ko/docs/JavaScript/Reference/Statements/for...in">for...in</a> 루프<br>
- 이 방법은 객체와 객체의 프로토타입 체인 상의 열거 가능한 모든 프로퍼티를 순회한다.</li>
- <li><a href="/ko/docs/JavaScript/Reference/Global_Objects/Object/keys" title="ko/docs/JavaScript/Reference/Global Objects/Object/keys">Object.keys(o)</a><br>
- 이 메소드는 객체 <span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">o</span><span style="font-size: 14.39px; line-height: 16.79px;"> </span> 자체에 속한(즉 프로토타입 체인 상에 있는 것은 제외) 열거 가능한 프로퍼티 이름들("keys")의 배열을 반환한다.</li>
- <li><a href="/ko/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="ko/docs/JavaScript/Reference/Global Objects/Object/getOwnPropertyNames">Object.getOwnPropertyNames(o)</a><br>
- 이 메소드는 객체 <span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">o</span> 자체의 모든 프로퍼티(열거 가능 여부에 무관) 이름들의 배열을 반환한다.</li>
-</ul>
-
-<p>ECMAScript 5 이전 버전에서는 객체의 모든 프로퍼티를 나열하는 자체적인 방법이 제공되지 않았다. 하지만 아래 함수를 이용하면 가능하다.</p>
-
-<pre class="brush: js">function listAllProperties(o){
- var objectToInspect;
- var result = [];
-
- for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
- result = result.concat(Object.getOwnPropertyNames(objectToInspect));
- }
-
- return result;
-}
-</pre>
-
-<p>이 트릭은 객체의 "숨겨진" 프로퍼티를 알아내는 데 유용하다. (숨겨진 프로퍼티란 프로토타입 체인 상의 프로퍼티 중 객체를 통해 접근이 불가능한 것들을 말하는데 동일 이름의 다른 프로퍼티가 프로퍼티 체인 상에서 먼저 존재하는 경우에 발생한다). 만약 접근 가능한 프로퍼티만 나열하고 싶다면 배열에서 중복되는 프로퍼티들을 제거하면 된다.</p>
-
-<h2 id="객체_생성하기">객체 생성하기</h2>
-
-<p>자바스크립트에는 미리 정의된 객체가 몇 개 존재한다. 사용자는 여기에 추가적으로 자신의 객체를 생성할 수 있다. 자바스크립트 1.2 부터는 객체 이니셜라이저(initializer) 를 이용하여 객체를 생성할 수 있다. 또 다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 <code style="font-style: normal;">new</code> 연산자를 이용하여 인스턴스를 만들수 있다.</p>
-
-<p><span style="font-size: 1.71rem; letter-spacing: -0.5px; line-height: 24px;">객체 이니셜라이저</span></p>
-
-<p>생성자 함수를 사용하는 방법 대신, 객체 이니셜라이저를 사용하여 객체를 생성할 수 있다. 이 방식은 때때로 "리터럴 표기에 의한 객체 생성"(creating objects with literal notation) 이라고도 불린다. 객체 이니셜라이저라는 단어는 C++ 에서도 비슷한 의미로 사용된다.</p>
-
-<p><span style="line-height: 1.5;">객체 이니셜라이저를 이용한 객체 생성의 문법은 다음과 같다.</span></p>
-
-<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier...
- 2: value_2, // or a number...
- // ...,
- "property n": value_n }; // or a string </pre>
-
-<p><code>obj</code>는 새로 만들어질 객체 이름이고, <code>property_<em>i</em></code>는 식별자 (이름, 숫자, 또는 스트링 리터럴), <code style="font-style: normal;">value_<em>i</em></code> 는 수식인데 이 값이 <code>property_<em>i</em></code> 에 할당 된다. <code>obj</code> 변수에 할당 (assignment =) 하는 것은 선택 사항이다; 이 생성된 객체를 다른 곳에서 참조할 필요가 없다면 변수에 할당하지 않아도 된다. (만약 이 생성된 객체를 변수를 사용하지 않고 구문 안에서 바로 사용하려면 블럭 구문과 혼돈되지 않도록 리터널을 괄호로 감싸줄 필요가 있다.)</p>
-
-<p>객체 이니셜라이저는 수식이고, 각각의 이니셜라이저가 포함된 구문이 실행될 때 마다 이니셜라이저 수식에 의해 새로운 객체가 하나씩 생성이 된다. 똑같은 이니셜라이저에 의해 생성된 객체라도 서로 별개이며 비교 결과는 동일하지 않음 (not equal) 이 된다. 객체는 마치 <code>new Object()</code> 호출이 실행된 것 처럼 생성이 된다; 즉, 객체 이니셜라이저 수식에 의해 만들어진 객체들은 <code>Object</code>의 인스턴스들이 된다.</p>
-
-<p>다음 문장은 수식<code>cond</code>가 참일 경우 객체를 만들어서 변수 <code>x</code> 에 할당한다:</p>
-
-<pre class="brush: js">if (cond) var x = {hi: "there"};
-</pre>
-
-<p>다음 예제는 <code>myHonda</code>을 생성하고 세개의 속성을 추가한다. <code>engine</code> 속성 역시 자신의 속성들을 가지고 있는 객체이다.</p>
-
-<pre class="brush: js">var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
-</pre>
-
-<p>객체 이니셜라이저를 이용하여 배열을 만들 수 있다. <a href="/ko/docs/Web/JavaScript/Guide/Values%2C_variables%2C_and_literals#Array_literals">array literals</a> 를 참조하기 바란다.</p>
-
-<p>JavaScript 1.1 과 그 이전 버전에서는, 객체 이니셜라이저를 사용할 수 없었다. 항상 생성자 함수를 쓰거나 생성 목적으로 제공되는 별도 함수를 사용했어야 했다. <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function">Using a constructor function</a> 참고.</p>
-
-<h3 id="생성자_함수_사용하기">생성자 함수 사용하기</h3>
-
-<p>다른 방법으로는 다음 두 단계에 따라 객체를 생성할 수 있다:</p>
-
-<ol>
- <li>생성자 함수를 작성하여 객체 타입을 정의한다. 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있으므로 따르기를 권장한다.</li>
- <li><code>new</code>를 이용하여 객체의 인스턴스를 생성한다.</li>
-</ol>
-
-<p>객체의 타입을 정의하려면 타입의 이름, 속성(프로퍼티), 메소드 등을 기술하는 함수를 하나 만들어야 한다. 예를 들면, 여러분이 자동차를 위한 객체 타입을 만들기 원한다면, 이 객체의 타입의 이름은 <code>car</code>이고, 이 타입은 제조사, 모델, 생산연도를 위한 속성을 포함하길 원할 것이다. 아마도 다음과 같은 함수를 작성하게 될 것이다:</p>
-
-<pre class="brush: js">function Car(make, model, year) {
- this.make = make;
- this.model = model;
- this.year = year;
-}
-</pre>
-
-<p>함수 인자로 전달 받은 값을 객체의 속성에 할당하기 위해서 <code>this</code>를 사용 한 것에 주목하기 바란다.</p>
-
-<p>이제 다음과 같이 하여 <code>mycar</code>라는 이름의 객체를 생성할 수 있다:</p>
-
-<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
-</pre>
-
-<p>이 문장은 <code>mycar</code>를 만들고 특정 값들을 속성으로 할당하고 있다. 이렇게 하면 <code>mycar.make</code>의 값은 문자열 "Eagle" 이 되고, <code>mycar.year</code>는 정수 1993 이 된다.</p>
-
-<p><code>new</code>를 이용하면 어떤 갯수의 <code>car</code> 객체도 만들 수 있다. 예를 들면 다음과 같다.</p>
-
-<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
-var vpgscar = new Car("Mazda", "Miata", 1990);
-</pre>
-
-<p>객체는 또 다른 객체를 속성으로 가질 수 있다. 예를 들어 여러분이 <code>person</code> 이라는 객체를 다음과 같이 정의를 했고:</p>
-
-<pre class="brush: js">function Person(name, age, sex) {
- this.name = name;
- this.age = age;
- this.sex = sex;
-}
-</pre>
-
-<p>그리고 두 개의 새 <code>person</code> 객체의 인스턴스를 만들었다고 하면:</p>
-
-<pre class="brush: js">var rand = new Person("Rand McKinnon", 33, "M");
-var ken = new Person("Ken Jones", 39, "M");
-</pre>
-
-<p><code>car</code>의 정의에 <code>person</code> 객체의 값을 갖는 <code>owner</code> 속성을 추가하도록 수정할 수 있다:</p>
-
-<pre class="brush: js">function Car(make, model, year, owner) {
- this.make = make;
- this.model = model;
- this.year = year;
- this.owner = owner;
-}
-</pre>
-
-<p>수정된 새 객체의 인스턴스를 만들려면 다음과 같이 하면 된다:</p>
-
-<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
-var car2 = new Car("Nissan", "300ZX", 1992, ken);
-</pre>
-
-<p>위 문장은 문자열 리터럴이나 정수를 넘기는 대신 객체 <code>rand</code> 와 <code>ken</code>을 owners를 위한 인자로 전달하고 있다. car2의 소유자 이름을 찾고 싶다면 다음과 같은 속성을 사용할 수 있다.:</p>
-
-<pre class="brush: js">car2.owner.name
-</pre>
-
-<p>이미 정의 된 객체에도 새로운 속성을 추가할 수 있다.</p>
-
-<pre class="brush: js">car1.color = "black";
-</pre>
-
-<p>위 문장은 속성 <code>color</code>를 car1 에 추가하고, 그 값으로는 "black"을 지정하고 있다. 그러나 이것은 다른 객체들에는 영향을 주지 않는다. 새 속성을 해당 타입의 모든 객체들에 다 추가하고 싶다면, 이 속성을 <code>car</code> 객체 타입의 정의에 추가해야 한다.</p>
-
-<h3 id="Object.create_메서드_사용하기">Object.create 메서드 사용하기</h3>
-
-<p>객체는 <code>Object.create</code> 메서드를 이용해서 생성될 수 있다. 이 메서드는 사용할 프로토타입 객체를 사용자가 직접 선택할 수 있기 때문에 상당히 유용하다. (객체 생성시 생성자 함수가 없어도 가능하다). 이 메서드에 대한 더 자세한 정보는 {{jsxref("Object.create()")}} 를 참고하도록 하자.</p>
-
-<pre class="brush: js">// Animal properties and method encapsulation
-var Animal = {
- type: "Invertebrates", // Default value of properties
- displayType : function(){ // Method which will display type of Animal
- console.log(this.type);
- }
-}
-
-// Create new animal type called animal1
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
-
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = "Fishes";
-fish.displayType(); // Output:Fishes</pre>
-
-<h2 id="상속">상속</h2>
-
-<p>JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 <code>prototype</code> 이라는 생성자 객체에서 찾을 수 있다.</p>
-
-<h2 id="객체_프로퍼티의_인덱싱">객체 프로퍼티의 인덱싱</h2>
-
-<p>JavaScript 1.0에서는 객체의 속성을 참조할 때 속성 이름을 이용하거나 또는 숫자 인덱스를 이용할 수 있었다. 하지만 JavaScript 1.1과 그 이후 부터는 처음에 프로퍼티를 이름으로 정의하면 항상 이름으로만 참조를 할 수 있고, 처음에 인덱스를 이용하여 정의하면 인덱스를 이용해서만 참조할 수 있다.</p>
-
-<p>이 제약 사항은 생성자 함수를 이용하여 객체와 프로퍼티를 생성할 때 (앞에서 <code>Car</code> 객체 타입의 예)에도 동일하게 적용되고, 개개의 속성을 명시적으로 지정할 때 (예: <code>myCar.color = "red"</code>)에도 마찬가지이다. 만약 처음에 객체 속성을 정의할 때 <code>myCar[5] = "25 mpg"</code> 처럼 인덱스 방식을 사용하면, 그 이후에도 계속 <code>myCar[5]</code> 방식으로만 참조할 수 있다.</p>
-
-<p><code>forms</code> 배열과 같이 HTML 로부터 얻어지는 객체들에는 이 규칙이 적용되지 않는다. 숫자를 이용하거나 (이 객체가 문서 상에 존재하는 순서에 따라) 또는 태그의 attribute 이름으로 참조가 가능하다. 예를 들면 HTML 문서에서 두 번째 <code><FORM></code> 태그가 "myForm" 이라는 값의 <code>NAME</code> attribute 를 가지고 있다면, 이 form을 <code>document.forms[1]</code> 또는 <code>document.forms["myForm"]</code> 또는 <code>document.myForm</code> 와 같이 접근할 수 있다.</p>
-
-<h2 id="객체의_프로퍼티_정의">객체의 프로퍼티 정의</h2>
-
-<p><code>prototype</code> 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다. 다음 코드에서는 <code>car</code> 타입의 객체 전체에 <code>color</code> 프로퍼티를 추가한 후, <code>car1</code> 인스턴스의 <code>color</code> 프로퍼티에 값을 할당하는 것을 보여준다.</p>
-
-<pre class="brush: js">Car.prototype.color = null;
-car1.color = "black";
-</pre>
-
-<p>더 많은 정보는 <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a>에서 <code>Function</code> 객체의 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype">prototype 속성</a>을 참조</p>
-
-<h2 id="메소드_정의">메소드 정의</h2>
-
-<p><em>메소드</em>는 한 객체와 연관된(associated) 함수이며, 간단하게 말해 객체의 프로퍼티 중에서 함수인 것을 메소드라고 한다. 메소드를 정의하는 방식은 일반 함수를 정의하는 것과 동일하고, 다만 어떤 객체의 프로퍼티로 할당되어야 한다는 점이 차이가 난다. 자세한 것은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>를 참조하자. 다음은 메소드 정의의 한 예이다.</p>
-
-<pre class="brush: js">objectName.methodname = function_name;
-
-var myObj = {
- myMethod: function(params) {
- // ...do something
- }
-};
-</pre>
-
-<p>첫번째 줄은 이미 존재하는 <code>objectName</code>이라는 객체에 <code>methodname</code>이라는 이름의 메소드를 추가하는 것이다. <code>function_name</code> 은 메소드로 사용될 함수의 이름이다. 두번째 줄부터는 객체를 정의할 때 메소드를 같이 정의하는 예이다.</p>
-
-<p>그러고 나면 다음과 같이 해당 객체의 문맥(context)에서 메소드를 호출할 수 있다.</p>
-
-<pre class="brush: js">object.methodname(params);
-</pre>
-
-<p>객체 생성자 함수에 메소드 정의를 포함시킴으로써 해당 객체 타입의 메소드를 정의할 수 있다. 한 예로 이전에 정의한 car 객체의 프로퍼티를 형식에 맞춰 출력하는 함수를 정의할 수 있는데, 다음과 같다.</p>
-
-<pre class="brush: js">function displayCar() {
- var result = "A Beautiful " + this.year + " " + this.make
- + " " + this.model;
- pretty_print(result);
-}
-</pre>
-
-<p>위에서 <code>pretty_print</code>는 수평 규칙과 문자열을 나타내 주는 함수이다. 여기서 사용한 <code>this</code>는 해당 메소드가 속한 객체를 가리킨다는 점을 기억하자.</p>
-
-<p>아래와 같은 코드를 <code>car</code>객체의 정의에 추가함으로써 해당 함수를 <code>car</code>객체의 메소드로 만들 수 있다.</p>
-
-<pre class="brush: js">this.displayCar = displayCar;
-</pre>
-
-<p>따라서 <code>car객체의 전체 정의는 아래와 같이 됩니다.</code></p>
-
-<pre class="brush: js">function Car(make, model, year, owner) {
- this.make = make;
- this.model = model;
- this.year = year;
- this.owner = owner;
- this.displayCar = displayCar;
-}
-</pre>
-
-<p>그리고 각각의 객체(인스턴스)를 가지고 <code>displayCar메서드를 아래와 같이 호출 할 수 있습니다:</code></p>
-
-<pre class="brush: js">car1.displayCar();
-car2.displayCar();
-</pre>
-
-<h2 id="객체_참조를_위해_this_를_사용하기">객체 참조를 위해 <code>this</code> 를 사용하기</h2>
-
-<p>자바스크립트는 특별한 키워드를 가지고 잇습니다. 바로 <code>this</code>라는 키워드이다. 메서드 내부에서 <code>this 키워드를 사용하게 되면 해당 메서드를 포함한 객체를 가리키게 된다. 예를 들어 특정 객체의 속성값의 상한과 하한 값의 범위에 있는지를 확인하는 validate라는 함수를 아래와 같이 작성한다고 했을 때, </code></p>
-
-<pre class="brush: js">function validate(obj, lowval, hival) {
- if ((obj.value < lowval) || (obj.value > hival))
- alert("Invalid Value!");
-}
-</pre>
-
-<p><code>validate메서드를 각각의 form 요소들의 onchange 이벤트 핸들러에서 호출할 수 있다. 그 때, 다음 예제처럼 this 키워드를 사용해서 해당 form요소를 인자로 넘길 수 있다. </code></p>
-
-<pre class="brush: html"><input type="text" name="age" size="3"
- onChange="validate(this, 18, 99)">
-</pre>
-
-<p>일반적으로 <code>this는 메서드를 호출하는 객체를 지칭합니다. </code></p>
-
-<p> <code>myForm</code>. <code>form속성과 함께 사용할때, this키워드는 현재 객체의 부모 form을 지칭한다. 다음의 예제에서, myForm form은 텍스트 객체와 버튼 객체를 가지고 있다. 사용자가 해당 버튼을 클릭했을때, myForm form안에 있는 텍스트 객체의 값을 myForm form의 이름으로 설정한다. 해당 버튼의 onclick 이벤트 처리자는 부모 form인 myForm을 지칭하기 위해 this.form를 사용한다. </code></p>
-
-<pre class="brush: html"><form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
- onclick="this.form.text1.value = this.form.name">
-</p>
-</form></pre>
-
-<h2 id="getters_와_setters_정의">getters 와 setters 정의</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> 메서드는 특정 속성의 값을 받아 오기 위한 메서드 입니다. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>메서드는 특정 속성의 값을 설정하기 위한 메서드 입니다. 새로운 속성을 추가 하기 위해 getter와 setter 메서드들을 미리 정의된 객체 혹은 사용자 정의 객체에 정의 하 수 있습니다. getter와 setter메서드들을 정의 하기 위한 문법은 객체 구문 문법을 사용합니다.</p>
-
-<p>자바스크립트 1.8.1버전부터, 객체와 배열 초기화에서 속성들을 설정하고자 할 경우 setter메서드들은 더이상 사용이 불가합니다.</p>
-
-<p>다음의 <a href="/en-US/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="en-US/docs/SpiderMonkey/Introduction to the JavaScript shell">JS 쉘</a>은 getter와 setter메서드들이 사용자 정의객체인 o에서 어떻게 작동하는지를 보여 줍니다. JS쉘은 개발자가 배치 모드 혹은 대화형 모드에서 자바스크립트 코드를 테스트하기위한 하나의 어플리케이션입니다. </p>
-
-<pre class="brush: js">js> var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
-[object Object]
-js> o.a;
-7
-js> o.b;
-8
-js> o.c = 50;
-js> o.a;
-25
-</pre>
-
-<p>o 객체의 속성이 다음과 같을 때,</p>
-
-<ul>
- <li><code>o.a</code> — 숫자</li>
- <li><code>o.b</code> — o.a에 1을 더한 값을 반환하는 getter 메서드</li>
- <li><code>o.c</code> — <code>o.a에 주어진 인자 값의 반에 해당 하는 값을 설정하는 setter 메서드</code></li>
-</ul>
-
-<p><code>[gs]et <em>속성명</em>()</code> 문법이 실제 사용되는 메서드명이라고 생각이 될지라도, "[gs]et <em>속성명</em>()" 문법(<code>__define[GS]etter__와는 반대로</code>)을 사용한 객체 구문 문법으로 정의된 getter와 setter메서드들의 이름들은 실제 getter 메서드들의 이름이 아니라는 점에 유의 하세요. "[gs]et <em>속성명</em>()" 문법을 사용하여 getter, setter메서드내의 함수명을 작성하기 위해서는, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
-Objects/Object/defineProperty">Object.defineProperty</a></code> (혹은 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
-Objects/Object/defineGetter">Object.prototype.__defineGetter__</a> 레거시 콜백</code>)을 사용하여 프로그램적으로 분명한 이름의 함수명을 사용하세요. </p>
-
-<p>아래의 자바스크립트 쉡은 이미 정의된 Date 클래스의 모든 인스턴스들에 년도 속성을 추가 하기 위해 getter와 setter 메서드들이 Date 프로토타입을 확장하는 방법을 보여 줍니다. </p>
-
-<p>아래의 구문들은 년도 속성 추가를 위한 getter와 setter메서드를 정의합니다:</p>
-
-<pre class="brush: js">js> var d = Date.prototype;
-js> Object.defineProperty(d, "year", {
- get: function() {return this.getFullYear() },
- set: function(y) { this.setFullYear(y) }
-});
-</pre>
-
-<p>아래의 구문들은 Date객체에서 getter와 setter메서드를 사용하는 법을 보여 줍니다:</p>
-
-<pre class="brush: js">js> var now = new Date;
-js> print(now.year);
-2000
-js> now.year = 2001;
-987617605170
-js> print(now);
-Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
-</pre>
-
-<p>원칙적으로, getter와 setter는 둘 중 하나가 될 수 있다.</p>
-
-<ul>
- <li>object initializers 를 사용하여 정의하거나, </li>
- <li>getter와 setter메서드 추가 방법을 사용하여 언제든지 특정 객체에 나중에 추가하는 방법</li>
-</ul>
-
-<p>object initializers를 사용해서 getter와 setter메서드들을 정의할 경우, getter메서드는 get, setter메서드는 set이라는 접두사만 추가하면 됩니다. 물론 getter메서드는 인자를 받지 않는 반면, setter 메서드는 정확히 하나의 인자(설정할 새로운 값)만을 받습니다. </p>
-
-<pre class="brush: js">var o = {
- a: 7,
- get b() { return this.a + 1; },
- set c(x) { this.a = x / 2; }
-};
-</pre>
-
-<p><code>Object.defineProperties 메서드를 사용하면 객체 생성이후라도 언제든지 </code>getter and setter메서드들을 객체에 추가할 수 있습니다. <code>Object.defineProperties 메서드의 첫번째 인자는 </code>getter and setter메서드들을 추가할 객체이고, 두번째 인자는 getter and setter메서드들의 이름과 getter and setter메서드들의 정의를 가지고 있는 객체가 되어야 합니다. 이전 예제와 동일하게 사용된 getter and setter메서드들을 정의하고 있는 예제는 아래와 같습니다:</p>
-
-<pre class="brush: js">var o = { a:0 }
-
-Object.defineProperties(o, {
- "b": { get: function () { return this.a + 1; } },
- "c": { set: function (x) { this.a = x / 2; } }
-});
-
-o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
-console.log(o.b) // Runs the getter, which yields a + 1 or 6
-</pre>
-
-<p>당신의 프로그래밍 스타일과 현재 진행 중인 작업에 따라 getter and setter메서드들을 정의할 수 있는 두가지 양식 중 하나를 선택하여 사용할 수 있습니다. prototype을 정의 할때 object initializer를 사용했다면 앞으로도 대부분 첫번째 양식을 선택 하여 작성을 할 것입니다. 이 양식이 보다 간결하고 자연스럽기 때문입니다. 하지만 prototype 혹은 특정 객체를 작성하지 않고서 나중에 getter and setter 메서드를 추가하고자 한다면 두번째 양식만이 가능한 선택입니다. 두번째 양식은 아마도 자바스크립트의 동적 속성을 가장 잘 나타내고 있습니다. 하지만 코드 작성과 읽고 이해하는 부분에 어려움이 있습니다. </p>
-
-<div class="note">
-<p>Firefox 3.0 이전 버전의 경우, getter and setter 메서드들은 DOM 요소들에는 지원되지 않습니다. 이전 버전의 Firefox에서는 아무런 에러 없이 작동하지 않을 것입니다. 이것에 대한 예외가 필요하다면, HTMLElement의 prototype<code>(HTMLElement.prototype.__define[SG]etter__)</code>을 변경하고 예외를 던지는 것이 하나의 방법입니다.</p>
-
-<p>Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. </p>
-</div>
-
-<h4 id="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4>
-
-<ul>
- <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter">Object.defineProperty</a></code></li>
- <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/get" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code></li>
- <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/set" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code></li>
-</ul>
-
-<h2 id="프로퍼티의_삭제">프로퍼티의 삭제</h2>
-
-<p>상속 받지 않은 속성은 <code>delete</code> 연산자를 이용하여 제거 할 수 있다. 다음 코드는 어떻게 속성을 제거하는지 보여준다.</p>
-
-<pre class="brush: js">// 새 객체 myobj를 두 개의 속성 a, b 와 함께 생성
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// 속성을 삭제. myobj 에는 속성 b 만 남게 됨.
-delete myobj.a;
-console.log ("a" in myobj) // "false"를 출력
-</pre>
-
-<p><code>var</code> 키워드로 선언하지 않은 전역 변수도 <code>delete</code>를 이용하여 삭제를 할 수 있다:</p>
-
-<pre class="brush: js">g = 17;
-delete g;
-</pre>
-
-<p>더 자세한 정보는 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>를 보면 된다.</p>
-
-<h2 id="객체_간의_비교">객체 간의 비교</h2>
-
-<p>JavaScript 에서는 객체들은 레퍼런스 타입이다. 두 개의 별개 객체들은, 설령 그 속성 값들이 모두 다 동일하다고 하더라도, 절대로 동일하다고 비교(equal)될 수 없다. In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p>
-
-<pre class="brush: js">// 속성은 같지만 서로 별개인 두 변수와 두 객체
-var fruit = {name: "apple"};
-var fruitbear = {name: "apple"};
-
-fruit == fruitbear // false 리턴
-fruit === fruitbear // false 리턴</pre>
-
-<pre class="brush: js">// 두 개의 변수이지만 하나의 객체
-var fruit = {name: "apple"};
-var fruitbear = fruit; // fruit 객체 레퍼런스를 fruitbear 에 할당
-
-// here fruit and fruitbear are pointing to same object
-fruit == fruitbear // true 리턴
-fruit === fruitbear // true 리턴
-</pre>
-
-<p>비교 연산자에 대한 상세한 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>를 참고하기 바란다.</p>
-
-<h2 id="추가_검토">추가 검토</h2>
-
-<ul>
- <li><a class="external" href="http://es5.github.com/#x4.2">ECMAScript 5.1 spec: Language Overview</a></li>
- <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core">JavaScript. The core. (Dmitry A. Soshnikov ECMA-262 article series)</a></li>
-</ul>
-
-<div>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
diff --git a/files/ko/web/javascript/guide/working_with_objects/index.md b/files/ko/web/javascript/guide/working_with_objects/index.md
new file mode 100644
index 0000000000..7dce2677f8
--- /dev/null
+++ b/files/ko/web/javascript/guide/working_with_objects/index.md
@@ -0,0 +1,500 @@
+---
+title: Working with objects
+slug: Web/JavaScript/Guide/Working_with_Objects
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<p>자바스크립트는 간단한 객체기반 패러다임 상에서 만들어졌다. 객체는 프로퍼티의 모음이며, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다 . 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티는 메소드라고 불린다. 브라우저 안에 미리 정의 된 객체뿐 아니라 사용자들이 직접 자신만의 객체를 정의할 수도 있다.</p>
+
+<p class="summary">이 절에서는 객체, 프로퍼티, 함수, 메소드가 어떻게 사용되는지, 그리고 사용자를 위한 새로운 객체를 생성하는 방법을 설명한다</p>
+
+<h2 id="개요">개요</h2>
+
+<p>자바스크립트에서의 객체는 다른 프로그래밍 언어에서와 비슷하게 현실 세계에서의 사물(objects)과 비교해 볼 수 있다. 자바스크립트에서의 객체의 개념은 실세계상에서의 인식 가능한 사물로 이해할 수 있다.</p>
+
+<p>객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다. 예를 들어 컵과 비교를 해 본다면 컵은 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(프로퍼티)을 가지고 있다. 비슷하게 자바스크립트의 객체는 그 특징을 결정짓는 여러 프로퍼티를 가진다.</p>
+
+<h2 id="객체와_프로퍼티">객체와 프로퍼티</h2>
+
+<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트의 객체에는 그와 연관된 프로퍼티가 있다. 프로퍼티는 객체에 붙은 변수(variable)라고 설명할 수 있겠다. 객체의 프로퍼티는 일반 자바스크립의 변수와 기본적으로 똑같은데, 다만 객체에 속해있다는 차이만 있을 뿐이다. 객체의 프로퍼티들이 객체의 특징을 규정한다. 프로퍼티에 접근할 때는 도트(점) 표기법을 사용한다.</span></p>
+
+<pre class="brush: js">objectName.propertyName
+</pre>
+
+<p><span style="font-size: 14.39px; line-height: 16.79px;">자바스크립트의 모든 변수가 그렇듯이, 객체의 이름과 프로퍼티 이름은 모두 대소문자를 구별한다. 프로퍼티를 새로 정의하려면 그냥 이름과 값을 추가하면 된다. 예를 들어</span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">myCar</code><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14.39px; line-height: 16.79px;">라는 이름의 객체를 생성하고, 거기에</span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">make</code><span style="font-size: 14px; line-height: 1.5;">, </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">model</code><span style="font-size: 14px; line-height: 1.5;">, and </span><code style="line-height: 1.5; font-size: 14px; font-style: normal;">year</code><span style="font-size: 14px; line-height: 1.5;"> </span><span style="font-size: 14.39px; line-height: 16.79px;">라는 프로퍼티들을 추가해보자:</span></p>
+
+<pre class="brush: js">var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.5;">대괄호 표기법을 사용하여 객체의 프로퍼티에 접근할 수 있다. 객체는 연관배열(</span><em>associative arrays</em><span style="font-size: 14px; line-height: 1.5;">)이라고도 불리는데, 각 프로퍼티는 하나의 문자열 이름과 연관되어(associated) 이것을 통해 접근할 수 있기 때문이다. 예를 들면 </span><span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">myCar</span><span style="font-size: 14px; line-height: 1.5;"> 객체의 프로퍼티에 다음과 같이 접근할 수 있다.</span></p>
+
+<pre class="brush: js">myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.5;">객체의 프로퍼티 이름은 유효한 자바스크립트 문자열이거나 문자열로 변환이 가능한 것이면 어떤 것이든 가능하며, 심지어 빈 문자열도 된다. 하지만 자바스크립트 식별자(identifier)로 적합하지 않으면 (예 : 하이픈, 빈칸을 포함하거나 숫자로 시작하는 이름), 대괄호를 이용한 표기법으로만 접근이 가능하다. 이 표기법은 프로퍼티 이름이 사전에 미리 결정되지 않고 런타임 시점에 결정되는 경우에 특히 유용하다. 아래의 예를 보자.</span></p>
+
+<pre class="brush: js">var myObj = new Object(),
+ str = "myString",
+ rand = Math.random(),
+ obj = new Object(); // 변수 4개를 콤마를 사용하여 한번에 생성하고 할당.
+
+myObj.type = "Dot syntax";
+myObj["date created"] = "String with space";
+myObj[str] = "String value";
+myObj[rand] = "Random Number";
+myObj[obj] = "Object";
+myObj[""] = "Even an empty string";
+
+console.log(myObj);
+</pre>
+
+<p><span style="font-size: 14px; line-height: 1.5;">변수에 저장된 문자열을 이용해서도 프로퍼티에 접근할 수 있다.</span></p>
+
+<div style="width: auto;">
+<pre class="brush: js">var propertyName = "make";
+myCar[propertyName] = "Ford";
+
+propertyName = "model";
+myCar[propertyName] = "Mustang";
+</pre>
+</div>
+
+<p>대괄호 표기법을 <a class="internal" href="/ko/docs/JavaScript/Guide/Statements#for...in_Statement" title="ko/docs/JavaScript/Guide/Statements#for...in Statement">for...in</a> 과 함께 사용하면 객체의 열거가능한 프로퍼티를 나열할 수 있다. 이것이 어떻게 작동하는지 알기 위해 아래의 함수를 보자. 이 함수는 객체와 객체 이름을 함수의 인자로 전달받아서 객체의 프로퍼티들을 출력해 준다.</p>
+
+<pre class="brush: js">function showProps(obj, objName) {
+ var result = "";
+ for (var i in obj) {
+ if (obj.hasOwnProperty(i)) {
+ result += objName + "." + i + " = " + obj[i] + "\n";
+ }
+ }
+ return result;
+}
+</pre>
+
+<p><code>showProps(myCar, "myCar")</code> 함수를 호출하면 다음과 같은 문자열을 반환한다.</p>
+
+<pre>myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969</pre>
+
+<h2 id="모든_것이_객체">모든 것이 객체</h2>
+
+<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트 세상에서는 거의 모든 것들이 객체이다. </span><code style="line-height: 16.79px; font-size: 14.39px; font-style: normal;">null</code><span style="font-size: 14.39px; line-height: 16.79px;"> 과 </span><code style="line-height: 16.79px; font-size: 14.39px; font-style: normal;">undefined</code><span style="font-size: 14.39px; line-height: 16.79px;"> 를 제외한 모든 </span><span style="font-size: 14px; line-height: 1.5;">원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고 (설명 필요: </span><span style="font-size: 14.39px; line-height: 16.79px;">assigned properties of some types are not persistent), 모두 객체로서의 특징을 갖는다.</span></p>
+
+<h2 id="객체의_프로퍼티_나열하기">객체의 프로퍼티 나열하기</h2>
+
+<p><a href="/ko/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 를 기준으로 객체의 프로퍼티를 나열/순회하는 방법이 세 가지 있다.</p>
+
+<ul>
+ <li><a href="/ko/docs/JavaScript/Reference/Statements/for...in" title="ko/docs/JavaScript/Reference/Statements/for...in">for...in</a> 루프<br>
+ 이 방법은 객체와 객체의 프로토타입 체인 상의 열거 가능한 모든 프로퍼티를 순회한다.</li>
+ <li><a href="/ko/docs/JavaScript/Reference/Global_Objects/Object/keys" title="ko/docs/JavaScript/Reference/Global Objects/Object/keys">Object.keys(o)</a><br>
+ 이 메소드는 객체 <span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">o</span><span style="font-size: 14.39px; line-height: 16.79px;"> </span> 자체에 속한(즉 프로토타입 체인 상에 있는 것은 제외) 열거 가능한 프로퍼티 이름들("keys")의 배열을 반환한다.</li>
+ <li><a href="/ko/docs/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="ko/docs/JavaScript/Reference/Global Objects/Object/getOwnPropertyNames">Object.getOwnPropertyNames(o)</a><br>
+ 이 메소드는 객체 <span style="font-family: courier new,andale mono,monospace; font-size: 14.39px; line-height: 16.79px;">o</span> 자체의 모든 프로퍼티(열거 가능 여부에 무관) 이름들의 배열을 반환한다.</li>
+</ul>
+
+<p>ECMAScript 5 이전 버전에서는 객체의 모든 프로퍼티를 나열하는 자체적인 방법이 제공되지 않았다. 하지만 아래 함수를 이용하면 가능하다.</p>
+
+<pre class="brush: js">function listAllProperties(o){
+ var objectToInspect;
+ var result = [];
+
+ for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
+ result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+ }
+
+ return result;
+}
+</pre>
+
+<p>이 트릭은 객체의 "숨겨진" 프로퍼티를 알아내는 데 유용하다. (숨겨진 프로퍼티란 프로토타입 체인 상의 프로퍼티 중 객체를 통해 접근이 불가능한 것들을 말하는데 동일 이름의 다른 프로퍼티가 프로퍼티 체인 상에서 먼저 존재하는 경우에 발생한다). 만약 접근 가능한 프로퍼티만 나열하고 싶다면 배열에서 중복되는 프로퍼티들을 제거하면 된다.</p>
+
+<h2 id="객체_생성하기">객체 생성하기</h2>
+
+<p>자바스크립트에는 미리 정의된 객체가 몇 개 존재한다. 사용자는 여기에 추가적으로 자신의 객체를 생성할 수 있다. 자바스크립트 1.2 부터는 객체 이니셜라이저(initializer) 를 이용하여 객체를 생성할 수 있다. 또 다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 <code style="font-style: normal;">new</code> 연산자를 이용하여 인스턴스를 만들수 있다.</p>
+
+<p><span style="font-size: 1.71rem; letter-spacing: -0.5px; line-height: 24px;">객체 이니셜라이저</span></p>
+
+<p>생성자 함수를 사용하는 방법 대신, 객체 이니셜라이저를 사용하여 객체를 생성할 수 있다. 이 방식은 때때로 "리터럴 표기에 의한 객체 생성"(creating objects with literal notation) 이라고도 불린다. 객체 이니셜라이저라는 단어는 C++ 에서도 비슷한 의미로 사용된다.</p>
+
+<p><span style="line-height: 1.5;">객체 이니셜라이저를 이용한 객체 생성의 문법은 다음과 같다.</span></p>
+
+<pre class="brush: js">var obj = { property_1: value_1, // property_# may be an identifier...
+ 2: value_2, // or a number...
+ // ...,
+ "property n": value_n }; // or a string </pre>
+
+<p><code>obj</code>는 새로 만들어질 객체 이름이고, <code>property_<em>i</em></code>는 식별자 (이름, 숫자, 또는 스트링 리터럴), <code style="font-style: normal;">value_<em>i</em></code> 는 수식인데 이 값이 <code>property_<em>i</em></code> 에 할당 된다. <code>obj</code> 변수에 할당 (assignment =) 하는 것은 선택 사항이다; 이 생성된 객체를 다른 곳에서 참조할 필요가 없다면 변수에 할당하지 않아도 된다. (만약 이 생성된 객체를 변수를 사용하지 않고 구문 안에서 바로 사용하려면 블럭 구문과 혼돈되지 않도록 리터널을 괄호로 감싸줄 필요가 있다.)</p>
+
+<p>객체 이니셜라이저는 수식이고, 각각의 이니셜라이저가 포함된 구문이 실행될 때 마다 이니셜라이저 수식에 의해 새로운 객체가 하나씩 생성이 된다. 똑같은 이니셜라이저에 의해 생성된 객체라도 서로 별개이며 비교 결과는 동일하지 않음 (not equal) 이 된다. 객체는 마치 <code>new Object()</code> 호출이 실행된 것 처럼 생성이 된다; 즉, 객체 이니셜라이저 수식에 의해 만들어진 객체들은 <code>Object</code>의 인스턴스들이 된다.</p>
+
+<p>다음 문장은 수식<code>cond</code>가 참일 경우 객체를 만들어서 변수 <code>x</code> 에 할당한다:</p>
+
+<pre class="brush: js">if (cond) var x = {hi: "there"};
+</pre>
+
+<p>다음 예제는 <code>myHonda</code>을 생성하고 세개의 속성을 추가한다. <code>engine</code> 속성 역시 자신의 속성들을 가지고 있는 객체이다.</p>
+
+<pre class="brush: js">var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
+</pre>
+
+<p>객체 이니셜라이저를 이용하여 배열을 만들 수 있다. <a href="/ko/docs/Web/JavaScript/Guide/Values%2C_variables%2C_and_literals#Array_literals">array literals</a> 를 참조하기 바란다.</p>
+
+<p>JavaScript 1.1 과 그 이전 버전에서는, 객체 이니셜라이저를 사용할 수 없었다. 항상 생성자 함수를 쓰거나 생성 목적으로 제공되는 별도 함수를 사용했어야 했다. <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function">Using a constructor function</a> 참고.</p>
+
+<h3 id="생성자_함수_사용하기">생성자 함수 사용하기</h3>
+
+<p>다른 방법으로는 다음 두 단계에 따라 객체를 생성할 수 있다:</p>
+
+<ol>
+ <li>생성자 함수를 작성하여 객체 타입을 정의한다. 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있으므로 따르기를 권장한다.</li>
+ <li><code>new</code>를 이용하여 객체의 인스턴스를 생성한다.</li>
+</ol>
+
+<p>객체의 타입을 정의하려면 타입의 이름, 속성(프로퍼티), 메소드 등을 기술하는 함수를 하나 만들어야 한다. 예를 들면, 여러분이 자동차를 위한 객체 타입을 만들기 원한다면, 이 객체의 타입의 이름은 <code>car</code>이고, 이 타입은 제조사, 모델, 생산연도를 위한 속성을 포함하길 원할 것이다. 아마도 다음과 같은 함수를 작성하게 될 것이다:</p>
+
+<pre class="brush: js">function Car(make, model, year) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+}
+</pre>
+
+<p>함수 인자로 전달 받은 값을 객체의 속성에 할당하기 위해서 <code>this</code>를 사용 한 것에 주목하기 바란다.</p>
+
+<p>이제 다음과 같이 하여 <code>mycar</code>라는 이름의 객체를 생성할 수 있다:</p>
+
+<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>이 문장은 <code>mycar</code>를 만들고 특정 값들을 속성으로 할당하고 있다. 이렇게 하면 <code>mycar.make</code>의 값은 문자열 "Eagle" 이 되고, <code>mycar.year</code>는 정수 1993 이 된다.</p>
+
+<p><code>new</code>를 이용하면 어떤 갯수의 <code>car</code> 객체도 만들 수 있다. 예를 들면 다음과 같다.</p>
+
+<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
+var vpgscar = new Car("Mazda", "Miata", 1990);
+</pre>
+
+<p>객체는 또 다른 객체를 속성으로 가질 수 있다. 예를 들어 여러분이 <code>person</code> 이라는 객체를 다음과 같이 정의를 했고:</p>
+
+<pre class="brush: js">function Person(name, age, sex) {
+ this.name = name;
+ this.age = age;
+ this.sex = sex;
+}
+</pre>
+
+<p>그리고 두 개의 새 <code>person</code> 객체의 인스턴스를 만들었다고 하면:</p>
+
+<pre class="brush: js">var rand = new Person("Rand McKinnon", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+</pre>
+
+<p><code>car</code>의 정의에 <code>person</code> 객체의 값을 갖는 <code>owner</code> 속성을 추가하도록 수정할 수 있다:</p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+ this.owner = owner;
+}
+</pre>
+
+<p>수정된 새 객체의 인스턴스를 만들려면 다음과 같이 하면 된다:</p>
+
+<pre class="brush: js">var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>위 문장은 문자열 리터럴이나 정수를 넘기는 대신 객체 <code>rand</code> 와 <code>ken</code>을 owners를 위한 인자로 전달하고 있다. car2의 소유자 이름을 찾고 싶다면 다음과 같은 속성을 사용할 수 있다.:</p>
+
+<pre class="brush: js">car2.owner.name
+</pre>
+
+<p>이미 정의 된 객체에도 새로운 속성을 추가할 수 있다.</p>
+
+<pre class="brush: js">car1.color = "black";
+</pre>
+
+<p>위 문장은 속성 <code>color</code>를 car1 에 추가하고, 그 값으로는 "black"을 지정하고 있다. 그러나 이것은 다른 객체들에는 영향을 주지 않는다. 새 속성을 해당 타입의 모든 객체들에 다 추가하고 싶다면, 이 속성을 <code>car</code> 객체 타입의 정의에 추가해야 한다.</p>
+
+<h3 id="Object.create_메서드_사용하기">Object.create 메서드 사용하기</h3>
+
+<p>객체는 <code>Object.create</code> 메서드를 이용해서 생성될 수 있다. 이 메서드는 사용할 프로토타입 객체를 사용자가 직접 선택할 수 있기 때문에 상당히 유용하다. (객체 생성시 생성자 함수가 없어도 가능하다). 이 메서드에 대한 더 자세한 정보는 {{jsxref("Object.create()")}} 를 참고하도록 하자.</p>
+
+<pre class="brush: js">// Animal properties and method encapsulation
+var Animal = {
+ type: "Invertebrates", // Default value of properties
+ displayType : function(){ // Method which will display type of Animal
+ console.log(this.type);
+ }
+}
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = "Fishes";
+fish.displayType(); // Output:Fishes</pre>
+
+<h2 id="상속">상속</h2>
+
+<p>JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 <code>prototype</code> 이라는 생성자 객체에서 찾을 수 있다.</p>
+
+<h2 id="객체_프로퍼티의_인덱싱">객체 프로퍼티의 인덱싱</h2>
+
+<p>JavaScript 1.0에서는 객체의 속성을 참조할 때 속성 이름을 이용하거나 또는 숫자 인덱스를 이용할 수 있었다. 하지만 JavaScript 1.1과 그 이후 부터는 처음에 프로퍼티를 이름으로 정의하면 항상 이름으로만 참조를 할 수 있고, 처음에 인덱스를 이용하여 정의하면 인덱스를 이용해서만 참조할 수 있다.</p>
+
+<p>이 제약 사항은 생성자 함수를 이용하여 객체와 프로퍼티를 생성할 때 (앞에서 <code>Car</code> 객체 타입의 예)에도 동일하게 적용되고, 개개의 속성을 명시적으로 지정할 때 (예: <code>myCar.color = "red"</code>)에도 마찬가지이다. 만약 처음에 객체 속성을 정의할 때 <code>myCar[5] = "25 mpg"</code> 처럼 인덱스 방식을 사용하면, 그 이후에도 계속 <code>myCar[5]</code> 방식으로만 참조할 수 있다.</p>
+
+<p><code>forms</code> 배열과 같이 HTML 로부터 얻어지는 객체들에는 이 규칙이 적용되지 않는다. 숫자를 이용하거나 (이 객체가 문서 상에 존재하는 순서에 따라) 또는 태그의 attribute 이름으로 참조가 가능하다. 예를 들면 HTML 문서에서 두 번째 <code><FORM></code> 태그가 "myForm" 이라는 값의 <code>NAME</code> attribute 를 가지고 있다면, 이 form을 <code>document.forms[1]</code> 또는 <code>document.forms["myForm"]</code> 또는 <code>document.myForm</code> 와 같이 접근할 수 있다.</p>
+
+<h2 id="객체의_프로퍼티_정의">객체의 프로퍼티 정의</h2>
+
+<p><code>prototype</code> 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다. 다음 코드에서는 <code>car</code> 타입의 객체 전체에 <code>color</code> 프로퍼티를 추가한 후, <code>car1</code> 인스턴스의 <code>color</code> 프로퍼티에 값을 할당하는 것을 보여준다.</p>
+
+<pre class="brush: js">Car.prototype.color = null;
+car1.color = "black";
+</pre>
+
+<p>더 많은 정보는 <a href="/en-US/docs/JavaScript/Reference" title="en-US/docs/JavaScript/Reference">JavaScript Reference</a>에서 <code>Function</code> 객체의 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype">prototype 속성</a>을 참조</p>
+
+<h2 id="메소드_정의">메소드 정의</h2>
+
+<p><em>메소드</em>는 한 객체와 연관된(associated) 함수이며, 간단하게 말해 객체의 프로퍼티 중에서 함수인 것을 메소드라고 한다. 메소드를 정의하는 방식은 일반 함수를 정의하는 것과 동일하고, 다만 어떤 객체의 프로퍼티로 할당되어야 한다는 점이 차이가 난다. 자세한 것은 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>를 참조하자. 다음은 메소드 정의의 한 예이다.</p>
+
+<pre class="brush: js">objectName.methodname = function_name;
+
+var myObj = {
+ myMethod: function(params) {
+ // ...do something
+ }
+};
+</pre>
+
+<p>첫번째 줄은 이미 존재하는 <code>objectName</code>이라는 객체에 <code>methodname</code>이라는 이름의 메소드를 추가하는 것이다. <code>function_name</code> 은 메소드로 사용될 함수의 이름이다. 두번째 줄부터는 객체를 정의할 때 메소드를 같이 정의하는 예이다.</p>
+
+<p>그러고 나면 다음과 같이 해당 객체의 문맥(context)에서 메소드를 호출할 수 있다.</p>
+
+<pre class="brush: js">object.methodname(params);
+</pre>
+
+<p>객체 생성자 함수에 메소드 정의를 포함시킴으로써 해당 객체 타입의 메소드를 정의할 수 있다. 한 예로 이전에 정의한 car 객체의 프로퍼티를 형식에 맞춰 출력하는 함수를 정의할 수 있는데, 다음과 같다.</p>
+
+<pre class="brush: js">function displayCar() {
+ var result = "A Beautiful " + this.year + " " + this.make
+ + " " + this.model;
+ pretty_print(result);
+}
+</pre>
+
+<p>위에서 <code>pretty_print</code>는 수평 규칙과 문자열을 나타내 주는 함수이다. 여기서 사용한 <code>this</code>는 해당 메소드가 속한 객체를 가리킨다는 점을 기억하자.</p>
+
+<p>아래와 같은 코드를 <code>car</code>객체의 정의에 추가함으로써 해당 함수를 <code>car</code>객체의 메소드로 만들 수 있다.</p>
+
+<pre class="brush: js">this.displayCar = displayCar;
+</pre>
+
+<p>따라서 <code>car객체의 전체 정의는 아래와 같이 됩니다.</code></p>
+
+<pre class="brush: js">function Car(make, model, year, owner) {
+ this.make = make;
+ this.model = model;
+ this.year = year;
+ this.owner = owner;
+ this.displayCar = displayCar;
+}
+</pre>
+
+<p>그리고 각각의 객체(인스턴스)를 가지고 <code>displayCar메서드를 아래와 같이 호출 할 수 있습니다:</code></p>
+
+<pre class="brush: js">car1.displayCar();
+car2.displayCar();
+</pre>
+
+<h2 id="객체_참조를_위해_this_를_사용하기">객체 참조를 위해 <code>this</code> 를 사용하기</h2>
+
+<p>자바스크립트는 특별한 키워드를 가지고 잇습니다. 바로 <code>this</code>라는 키워드이다. 메서드 내부에서 <code>this 키워드를 사용하게 되면 해당 메서드를 포함한 객체를 가리키게 된다. 예를 들어 특정 객체의 속성값의 상한과 하한 값의 범위에 있는지를 확인하는 validate라는 함수를 아래와 같이 작성한다고 했을 때, </code></p>
+
+<pre class="brush: js">function validate(obj, lowval, hival) {
+ if ((obj.value < lowval) || (obj.value > hival))
+ alert("Invalid Value!");
+}
+</pre>
+
+<p><code>validate메서드를 각각의 form 요소들의 onchange 이벤트 핸들러에서 호출할 수 있다. 그 때, 다음 예제처럼 this 키워드를 사용해서 해당 form요소를 인자로 넘길 수 있다. </code></p>
+
+<pre class="brush: html"><input type="text" name="age" size="3"
+ onChange="validate(this, 18, 99)">
+</pre>
+
+<p>일반적으로 <code>this는 메서드를 호출하는 객체를 지칭합니다. </code></p>
+
+<p> <code>myForm</code>. <code>form속성과 함께 사용할때, this키워드는 현재 객체의 부모 form을 지칭한다. 다음의 예제에서, myForm form은 텍스트 객체와 버튼 객체를 가지고 있다. 사용자가 해당 버튼을 클릭했을때, myForm form안에 있는 텍스트 객체의 값을 myForm form의 이름으로 설정한다. 해당 버튼의 onclick 이벤트 처리자는 부모 form인 myForm을 지칭하기 위해 this.form를 사용한다. </code></p>
+
+<pre class="brush: html"><form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+ onclick="this.form.text1.value = this.form.name">
+</p>
+</form></pre>
+
+<h2 id="getters_와_setters_정의">getters 와 setters 정의</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> 메서드는 특정 속성의 값을 받아 오기 위한 메서드 입니다. <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>메서드는 특정 속성의 값을 설정하기 위한 메서드 입니다. 새로운 속성을 추가 하기 위해 getter와 setter 메서드들을 미리 정의된 객체 혹은 사용자 정의 객체에 정의 하 수 있습니다. getter와 setter메서드들을 정의 하기 위한 문법은 객체 구문 문법을 사용합니다.</p>
+
+<p>자바스크립트 1.8.1버전부터, 객체와 배열 초기화에서 속성들을 설정하고자 할 경우 setter메서드들은 더이상 사용이 불가합니다.</p>
+
+<p>다음의 <a href="/en-US/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell" title="en-US/docs/SpiderMonkey/Introduction to the JavaScript shell">JS 쉘</a>은 getter와 setter메서드들이 사용자 정의객체인 o에서 어떻게 작동하는지를 보여 줍니다. JS쉘은 개발자가 배치 모드 혹은 대화형 모드에서 자바스크립트 코드를 테스트하기위한 하나의 어플리케이션입니다. </p>
+
+<pre class="brush: js">js> var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
+[object Object]
+js> o.a;
+7
+js> o.b;
+8
+js> o.c = 50;
+js> o.a;
+25
+</pre>
+
+<p>o 객체의 속성이 다음과 같을 때,</p>
+
+<ul>
+ <li><code>o.a</code> — 숫자</li>
+ <li><code>o.b</code> — o.a에 1을 더한 값을 반환하는 getter 메서드</li>
+ <li><code>o.c</code> — <code>o.a에 주어진 인자 값의 반에 해당 하는 값을 설정하는 setter 메서드</code></li>
+</ul>
+
+<p><code>[gs]et <em>속성명</em>()</code> 문법이 실제 사용되는 메서드명이라고 생각이 될지라도, "[gs]et <em>속성명</em>()" 문법(<code>__define[GS]etter__와는 반대로</code>)을 사용한 객체 구문 문법으로 정의된 getter와 setter메서드들의 이름들은 실제 getter 메서드들의 이름이 아니라는 점에 유의 하세요. "[gs]et <em>속성명</em>()" 문법을 사용하여 getter, setter메서드내의 함수명을 작성하기 위해서는, <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineProperty">Object.defineProperty</a></code> (혹은 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineGetter" title="en-US/docs/Core JavaScript 1.5 Reference/Global
+Objects/Object/defineGetter">Object.prototype.__defineGetter__</a> 레거시 콜백</code>)을 사용하여 프로그램적으로 분명한 이름의 함수명을 사용하세요. </p>
+
+<p>아래의 자바스크립트 쉡은 이미 정의된 Date 클래스의 모든 인스턴스들에 년도 속성을 추가 하기 위해 getter와 setter 메서드들이 Date 프로토타입을 확장하는 방법을 보여 줍니다. </p>
+
+<p>아래의 구문들은 년도 속성 추가를 위한 getter와 setter메서드를 정의합니다:</p>
+
+<pre class="brush: js">js> var d = Date.prototype;
+js> Object.defineProperty(d, "year", {
+ get: function() {return this.getFullYear() },
+ set: function(y) { this.setFullYear(y) }
+});
+</pre>
+
+<p>아래의 구문들은 Date객체에서 getter와 setter메서드를 사용하는 법을 보여 줍니다:</p>
+
+<pre class="brush: js">js> var now = new Date;
+js> print(now.year);
+2000
+js> now.year = 2001;
+987617605170
+js> print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+</pre>
+
+<p>원칙적으로, getter와 setter는 둘 중 하나가 될 수 있다.</p>
+
+<ul>
+ <li>object initializers 를 사용하여 정의하거나, </li>
+ <li>getter와 setter메서드 추가 방법을 사용하여 언제든지 특정 객체에 나중에 추가하는 방법</li>
+</ul>
+
+<p>object initializers를 사용해서 getter와 setter메서드들을 정의할 경우, getter메서드는 get, setter메서드는 set이라는 접두사만 추가하면 됩니다. 물론 getter메서드는 인자를 받지 않는 반면, setter 메서드는 정확히 하나의 인자(설정할 새로운 값)만을 받습니다. </p>
+
+<pre class="brush: js">var o = {
+ a: 7,
+ get b() { return this.a + 1; },
+ set c(x) { this.a = x / 2; }
+};
+</pre>
+
+<p><code>Object.defineProperties 메서드를 사용하면 객체 생성이후라도 언제든지 </code>getter and setter메서드들을 객체에 추가할 수 있습니다. <code>Object.defineProperties 메서드의 첫번째 인자는 </code>getter and setter메서드들을 추가할 객체이고, 두번째 인자는 getter and setter메서드들의 이름과 getter and setter메서드들의 정의를 가지고 있는 객체가 되어야 합니다. 이전 예제와 동일하게 사용된 getter and setter메서드들을 정의하고 있는 예제는 아래와 같습니다:</p>
+
+<pre class="brush: js">var o = { a:0 }
+
+Object.defineProperties(o, {
+ "b": { get: function () { return this.a + 1; } },
+ "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b) // Runs the getter, which yields a + 1 or 6
+</pre>
+
+<p>당신의 프로그래밍 스타일과 현재 진행 중인 작업에 따라 getter and setter메서드들을 정의할 수 있는 두가지 양식 중 하나를 선택하여 사용할 수 있습니다. prototype을 정의 할때 object initializer를 사용했다면 앞으로도 대부분 첫번째 양식을 선택 하여 작성을 할 것입니다. 이 양식이 보다 간결하고 자연스럽기 때문입니다. 하지만 prototype 혹은 특정 객체를 작성하지 않고서 나중에 getter and setter 메서드를 추가하고자 한다면 두번째 양식만이 가능한 선택입니다. 두번째 양식은 아마도 자바스크립트의 동적 속성을 가장 잘 나타내고 있습니다. 하지만 코드 작성과 읽고 이해하는 부분에 어려움이 있습니다. </p>
+
+<div class="note">
+<p>Firefox 3.0 이전 버전의 경우, getter and setter 메서드들은 DOM 요소들에는 지원되지 않습니다. 이전 버전의 Firefox에서는 아무런 에러 없이 작동하지 않을 것입니다. 이것에 대한 예외가 필요하다면, HTMLElement의 prototype<code>(HTMLElement.prototype.__define[SG]etter__)</code>을 변경하고 예외를 던지는 것이 하나의 방법입니다.</p>
+
+<p>Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. </p>
+</div>
+
+<h4 id="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="en-US/docs/JavaScript/Reference/Global_Objects/Object/defineSetter">Object.defineProperty</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/get" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code></li>
+ <li><code><a href="/en-US/docs/JavaScript/Reference/Operators/set" title="en-US/docs/JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code></li>
+</ul>
+
+<h2 id="프로퍼티의_삭제">프로퍼티의 삭제</h2>
+
+<p>상속 받지 않은 속성은 <code>delete</code> 연산자를 이용하여 제거 할 수 있다. 다음 코드는 어떻게 속성을 제거하는지 보여준다.</p>
+
+<pre class="brush: js">// 새 객체 myobj를 두 개의 속성 a, b 와 함께 생성
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// 속성을 삭제. myobj 에는 속성 b 만 남게 됨.
+delete myobj.a;
+console.log ("a" in myobj) // "false"를 출력
+</pre>
+
+<p><code>var</code> 키워드로 선언하지 않은 전역 변수도 <code>delete</code>를 이용하여 삭제를 할 수 있다:</p>
+
+<pre class="brush: js">g = 17;
+delete g;
+</pre>
+
+<p>더 자세한 정보는 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>를 보면 된다.</p>
+
+<h2 id="객체_간의_비교">객체 간의 비교</h2>
+
+<p>JavaScript 에서는 객체들은 레퍼런스 타입이다. 두 개의 별개 객체들은, 설령 그 속성 값들이 모두 다 동일하다고 하더라도, 절대로 동일하다고 비교(equal)될 수 없다. In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.</p>
+
+<pre class="brush: js">// 속성은 같지만 서로 별개인 두 변수와 두 객체
+var fruit = {name: "apple"};
+var fruitbear = {name: "apple"};
+
+fruit == fruitbear // false 리턴
+fruit === fruitbear // false 리턴</pre>
+
+<pre class="brush: js">// 두 개의 변수이지만 하나의 객체
+var fruit = {name: "apple"};
+var fruitbear = fruit; // fruit 객체 레퍼런스를 fruitbear 에 할당
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear // true 리턴
+fruit === fruitbear // true 리턴
+</pre>
+
+<p>비교 연산자에 대한 상세한 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>를 참고하기 바란다.</p>
+
+<h2 id="추가_검토">추가 검토</h2>
+
+<ul>
+ <li><a class="external" href="http://es5.github.com/#x4.2">ECMAScript 5.1 spec: Language Overview</a></li>
+ <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/javascript-the-core">JavaScript. The core. (Dmitry A. Soshnikov ECMA-262 article series)</a></li>
+</ul>
+
+<div>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
diff --git a/files/ko/web/javascript/reference/global_objects/array/index.html b/files/ko/web/javascript/reference/global_objects/array/index.html
deleted file mode 100644
index 11b705304c..0000000000
--- a/files/ko/web/javascript/reference/global_objects/array/index.html
+++ /dev/null
@@ -1,483 +0,0 @@
----
-title: Array
-slug: Web/JavaScript/Reference/Global_Objects/Array
-tags:
- - Array
- - Example
- - Global Objects
- - JavaScript
- - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array
-browser-compat: javascript.builtins.Array
----
-<div>{{JSRef}}</div>
-
-<p>JavaScript <strong><code>Array</code></strong> 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.</p>
-
-<h2 id="설명">설명</h2>
-
-<p>배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.</p>
-
-<p>배열은 요소 인덱스로 문자열(<a href="https://ko.wikipedia.org/wiki/%EC%97%B0%EA%B4%80_%EB%B0%B0%EC%97%B4">연관 배열</a>)을 사용할 수 없으며 무조건 정수만 허용합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, <a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드">순회 및 변형 작업</a>은 객체 속성에 적용되지 않습니다.</p>
-
-<h3 id="자주_사용하는_연산">자주 사용하는 연산</h3>
-
-<h4 id="배열_만들기">배열 만들기</h4>
-
-<pre class="brush: js">let fruits = ['사과', '바나나']
-
-console.log(fruits.length)
-// 2
-</pre>
-
-<h4 id="인덱스로_배열의_항목에_접근하기">인덱스로 배열의 항목에 접근하기</h4>
-
-<pre class="brush: js">let first = fruits[0]
-// 사과
-
-let last = fruits[fruits.length - 1]
-// 바나나
-</pre>
-
-<h4 id="배열의_항목들을_순환하며_처리하기">배열의 항목들을 순환하며 처리하기</h4>
-
-<pre class="brush: js">fruits.forEach(function (item, index, array) {
- console.log(item, index)
-})
-// 사과 0
-// 바나나 1
-</pre>
-
-<h4 id="배열_끝에_항목_추가하기">배열 끝에 항목 추가하기</h4>
-
-<pre class="brush: js">let newLength = fruits.push('오렌지')
-// ["사과", "바나나", "오렌지"]
-</pre>
-
-<h4 id="배열_끝에서부터_항목_제거하기">배열 끝에서부터 항목 제거하기</h4>
-
-<pre class="brush: js">let last = fruits.pop() // 끝에있던 '오렌지'를 제거
-// ["사과", "바나나"]
-</pre>
-
-<h4 id="배열_앞에서부터_항목_제거하기">배열 앞에서부터 항목 제거하기</h4>
-
-<pre class="brush: js">let first = fruits.shift() // 제일 앞의 '사과'를 제거
-// ["바나나"]
-</pre>
-
-<h4 id="배열_앞에_항목_추가하기">배열 앞에 항목 추가하기</h4>
-
-<pre class="brush: js">let newLength = fruits.unshift('딸기') // 앞에 추가
-// ["딸기", "바나나"]
-</pre>
-
-<h4 id="배열_안_항목의_인덱스_찾기">배열 안 항목의 인덱스 찾기</h4>
-
-<pre class="brush: js">fruits.push('망고')
-// ["딸기", "바나나", "망고"]
-
-let pos = fruits.indexOf("바나나")
-// 1
-</pre>
-
-<h4 id="인덱스_위치에_있는_항목_제거하기">인덱스 위치에 있는 항목 제거하기</h4>
-
-<pre class="brush: js">let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
-
-// ["딸기", "망고"]
-</pre>
-
-<h4 id="인덱스_위치에서부터_여러개의_항목_제거하기">인덱스 위치에서부터 여러개의 항목 제거하기</h4>
-
-<pre class="brush: js">let vegetables = ['양배추', '순무', '무', '당근']
-console.log(vegetables)
-// ["양배추", "순무", "무", "당근"]
-
-let pos = 1
-let n = 2
-
-let removedItems = vegetables.splice(pos, n)
-// 배열에서 항목을 제거하는 방법
-// pos 인덱스부터 n개의 항목을 제거함
-
-console.log(vegetables)
-// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
-
-console.log(removedItems)
-// ["순무", "무"]
-</pre>
-
-<h4 id="배열_복사하기">배열 복사하기</h4>
-
-<pre class="brush: js">let shallowCopy = fruits.slice() // 사본을 만드는 방법
-// ["딸기", "망고"]
-</pre>
-
-<h3 id="배열_요소에_접근하기">배열 요소에 접근하기</h3>
-
-<p>JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.</p>
-
-<p>잘못된 인덱스를 사용하면 <code>undefined</code>를 반환합니다.</p>
-
-<pre class="brush: js">let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
-console.log(arr[0]) // '첫 번재 요소입니다'를 기록
-console.log(arr[1]) // '두 번재 요소입니다'를 기록
-console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록
-</pre>
-
-<p><code>toString</code>이 속성인 것과 마찬가지로(정확히 하자면, <code>toString()</code>은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.</p>
-
-<pre class="brush: js">console.log(arr.0) // 구문 오류
-</pre>
-
-<p>이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.</p>
-
-<p>예를 들어 <code>'3d'</code>라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.</p>
-
-<pre class="brush: js">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
-console.log(years.0) // 구문 오류
-console.log(years[0]) // 정상 작동
-</pre>
-
-<pre class="brush: js">renderer.3d.setTexture(model, 'character.png') // 구문 오류
-renderer['3d'].setTexture(model, 'character.png') // 정상 작동
-</pre>
-
-<p><code>3d</code> 예시에서 <code>'3d'</code>를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수는 있지만(<code>years[2]</code> 대신에 <code>years['2']</code>처럼), 굳이 필요하지는 않습니다.</p>
-
-<p><code>years[2]</code>의 2는 JavaScript 엔진이 암시적인 <code>toString</code> 변환을 사용해 문자열로 변환합니다. 그 결과로서 <code>'2'</code>와 <code>'02'</code>는 <code>years</code> 객체에서 서로 다른 칸을 가리키며, 다음 코드는 <code>true</code>가 될 수 있습니다.</p>
-
-<pre class="brush: js">console.log(years['2'] != years['02']);
-</pre>
-
-<h3 id="length_와_숫자형_속성의_관계"><code>length</code> 와 숫자형 속성의 관계</h3>
-
-<p>JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.</p>
-
-<p>몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.</p>
-
-<p>다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.</p>
-
-<pre class="brush: js">const fruits = []
-fruits.push('banana', 'apple', 'peach')
-
-console.log(fruits.length) // 3
-</pre>
-
-<p>JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.</p>
-
-<pre class="brush: js">fruits[5] = 'mango'
-console.log(fruits[5]) // 'mango'
-console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
-console.log(fruits.length) // 6
-</pre>
-
-<p>{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.</p>
-
-<pre class="brush: js">fruits.length = 10;
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 10
-</pre>
-
-<p>하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.</p>
-
-<pre class="brush: js">fruits.length = 2
-console.log(Object.keys(fruits)) // ['0', '1']
-console.log(fruits.length) // 2
-</pre>
-
-<p>{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.</p>
-
-<h3 id="매치_결과를_이용한_배열_생성">매치 결과를 이용한 배열 생성</h3>
-
-<p>정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.</p>
-
-<pre class="brush: js">// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
-// 일치한 b와 다음 d를 기억하십시오.
-// 대소문자 구분은 무시됩니다.
-
-var myRe = /d(b+)(d)/i;
-var myArray = myRe.exec('cdbBdbsbz');
-</pre>
-
-<p>매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:</p>
-
-<table class="fullwidth-table standard-table">
- <tbody>
- <tr>
- <td class="header">속성/요소</td>
- <td class="header">설명</td>
- <td class="header">예시</td>
- </tr>
- <tr>
- <td><code>input </code> {{ReadOnlyInline}}</td>
- <td>정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다.</td>
- <td><code>"cdbBdbsbz"</code></td>
- </tr>
- <tr>
- <td><code>index </code> {{ReadOnlyInline}}</td>
- <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다.</td>
- <td><code>1</code></td>
- </tr>
- <tr>
- <td><code>[0]</code> {{ReadOnlyInline}}</td>
- <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다.</td>
- <td><code>"dbBd"</code></td>
- </tr>
- <tr>
- <td><code>[1], ...[n] </code> {{ReadOnlyInline}}</td>
- <td>만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다.</td>
- <td><code>[1]: bB</code><br>
- <code>[2]: d</code></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="생성자">생성자</h2>
-
-<dl>
- <dt>{{jsxref("Array.Array", "Array()")}}</dt>
- <dd><code>Array</code> 객체를 생성합니다.</dd>
-</dl>
-
-<h2 id="정적_속성">정적 속성</h2>
-
-<dl>
- <dt><code>Array.length</code></dt>
- <dd>값이 1인 <code>Array</code> 생성자의 길이 속성입니다.</dd>
- <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
- <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd>
-</dl>
-
-<h2 id="정적_메서드">정적 메서드</h2>
-
-<dl>
- <dt>{{jsxref("Array.from()")}}</dt>
- <dd>유사 배열 또는 반복 가능한 객체로부터 새로운 <code>Array</code> 인스턴스를 생성합니다.</dd>
- <dt>{{jsxref("Array.isArray()")}}</dt>
- <dd>만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.</dd>
- <dt>{{jsxref("Array.of()")}}</dt>
- <dd>전달인자의 개수나 데이터 타입에 관계없이 새 <code>Array</code> 인스턴스를 생성합니다.</dd>
-</dl>
-
-<h2 id="Array_인스턴스"><code>Array</code> 인스턴스</h2>
-
-<p>모든 <code>Array</code> 인스턴스는 <code>Array.prototype</code>을 상속합니다. 다른 생성자와 마찬가지로, <code>Array()</code> 생성자의 프로토타입을 수정하면 모든 <code>Array</code> 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 <code>Array</code>를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.</p>
-
-<p>그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript에 기능이 추가</a>될 경우 문제가 될 수 있습니다.</p>
-
-<p>잘 모를 법한 사실: <code>Array.prototype</code>은 그 스스로 <code>Array</code>입니다.</p>
-
-<pre class="brush: js">Array.isArray(Array.prototype) // true</pre>
-
-<h2 id="인스턴스_속성">인스턴스 속성</h2>
-
-<div>
-<dl>
- <dt><code>Array.prototype.constructor</code></dt>
- <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd>
- <dt>{{jsxref("Array.prototype.length")}}</dt>
- <dd>배열의 원소 수를 나타냅니다.</dd>
- <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
- <dd>{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.</dd>
-</dl>
-</div>
-
-<h2 id="인스턴스_메서드">인스턴스 메서드</h2>
-
-<h4 id="변경자_메서드">변경자 메서드</h4>
-
-<div>
-<p>변경자 메서드는 배열을 수정합니다.</p>
-
-<dl>
- <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
- <dd>배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.</dd>
- <dt>{{jsxref("Array.prototype.fill()")}}</dt>
- <dd>배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.</dd>
- <dt>{{jsxref("Array.prototype.pop()")}}</dt>
- <dd>배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.push()")}}</dt>
- <dd>배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
- <dd>배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.</dd>
- <dt>{{jsxref("Array.prototype.shift()")}}</dt>
- <dd>배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.sort()")}}</dt>
- <dd>배열의 요소를 정렬하고 그 배열을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.splice()")}}</dt>
- <dd>배열에서 요소를 추가/삭제합니다.</dd>
- <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
- <dd>배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.</dd>
-</dl>
-</div>
-
-<h4 id="접근자_메서드">접근자 메서드</h4>
-
-<div>
-<p>접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.</p>
-
-<dl>
- <dt>{{jsxref("Array.prototype.at()")}}</dt>
- <dd>주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.</dd>
- <dt>{{jsxref("Array.prototype.concat()")}}</dt>
- <dd>배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.filter()")}}</dt>
- <dd>지정한 콜백의 반환 결과가 <code>true</code>인 요소만 모은 새로운 배열을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.includes()")}}</dt>
- <dd>배열이 주어진 값을 포함하는지 판별해 <code>true</code> 또는 <code>false</code>를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
- <dd>배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.join()")}}</dt>
- <dd>배열의 모든 요소를 문자열로 합칩니다.</dd>
- <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
- <dd>배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.slice()")}}</dt>
- <dd>배열의 일부를 추출한 새 배열을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
- <dd>지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd>
- <dt>{{jsxref("Array.prototype.toString()")}}</dt>
- <dd>배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
- <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
- <dd>배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd>
-</dl>
-</div>
-
-<h4 id="순회_메서드">순회 메서드</h4>
-
-<p>배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 <code>length</code>를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.</p>
-
-<p>요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.</p>
-
-<p>반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.</p>
-
-<div>
-<dl>
- <dt>{{jsxref("Array.prototype.entries()")}}</dt>
- <dd>배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.every()")}}</dt>
- <dd>배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.find()")}}</dt>
- <dd>주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 <code>undefined</code>를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
- <dd>주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 <code>-1</code>를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
- <dd>배열의 각각의 요소에 대해 콜백을 호출합니다.</dd>
- <dt>{{jsxref("Array.prototype.keys()")}}</dt>
- <dd>배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.map()")}}</dt>
- <dd>배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
- <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd>
- <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
- <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd>
- <dt>{{jsxref("Array.prototype.some()")}}</dt>
- <dd>배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.values()")}}</dt>
- <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
- <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
- <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
-</dl>
-</div>
-
-<h2 id="예제">예제</h2>
-
-<h3 id="배열_생성">배열 생성</h3>
-
-<p>아래 예제는 길이 0의 배열 <code>msgArray</code> 을 생성하고, <code>msgArray[0]</code> 와 <code>msgArray[99]</code> 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.</p>
-
-<pre class="brush: js">let msgArray = []
-msgArray[0] = 'Hello'
-msgArray[99] = 'world'
-
-if (msgArray.length === 100) {
- console.log('The length is 100.')
-}</pre>
-
-<h3 id="2차원_배열_생성">2차원 배열 생성</h3>
-
-<p>아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.</p>
-
-<pre class="brush: js">let board = [
- ['R','N','B','Q','K','B','N','R'],
- ['P','P','P','P','P','P','P','P'],
- [' ',' ',' ',' ',' ',' ',' ',' '],
- [' ',' ',' ',' ',' ',' ',' ',' '],
- [' ',' ',' ',' ',' ',' ',' ',' '],
- [' ',' ',' ',' ',' ',' ',' ',' '],
- ['p','p','p','p','p','p','p','p'],
- ['r','n','b','q','k','b','n','r'] ]
-
-console.log(board.join('\n') + '\n\n')
-
-// Move King's Pawn forward 2
-board[4][4] = board[6][4]
-board[6][4] = ' '
-console.log(board.join('\n'))</pre>
-
-<p>결과는 다음과 같습니다.</p>
-
-<pre class="eval">R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
-p,p,p,p,p,p,p,p
-r,n,b,q,k,b,n,r
-
-R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , ,p, , ,
- , , , , , , ,
-p,p,p,p, ,p,p,p
-r,n,b,q,k,b,n,r
-</pre>
-
-<h3 id="배열을_사용하여_일련의_값을_테이블처럼_표시하기">배열을 사용하여 일련의 값을 테이블처럼 표시하기</h3>
-
-<pre class="brush: js">const values = []
-for (let x = 0; x < 10; x++){
- values.push([
- 2 ** x,
- 2 * x ** 2
- ])
-}
-console.table(values)</pre>
-
-<p>결과는 다음과 같습니다.</p>
-
-<pre class="eval line-numbers language-html">0 1 0
-1 2 2
-2 4 8
-3 8 18
-4 16 32
-5 32 50
-6 64 72
-7 128 98
-8 256 128
-9 512 162
-</pre>
-
-<p>(첫번째 열은 (인덱스))</p>
-
-<h2 id="Specifications">명세</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">브라우저 호환성</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="같이_보기">같이 보기</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
- <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
- <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li>
-</ul>
diff --git a/files/ko/web/javascript/reference/global_objects/array/index.md b/files/ko/web/javascript/reference/global_objects/array/index.md
new file mode 100644
index 0000000000..11b705304c
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/array/index.md
@@ -0,0 +1,483 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Global_Objects/Array
+tags:
+ - Array
+ - Example
+ - Global Objects
+ - JavaScript
+ - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+browser-compat: javascript.builtins.Array
+---
+<div>{{JSRef}}</div>
+
+<p>JavaScript <strong><code>Array</code></strong> 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.</p>
+
+<h2 id="설명">설명</h2>
+
+<p>배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.</p>
+
+<p>배열은 요소 인덱스로 문자열(<a href="https://ko.wikipedia.org/wiki/%EC%97%B0%EA%B4%80_%EB%B0%B0%EC%97%B4">연관 배열</a>)을 사용할 수 없으며 무조건 정수만 허용합니다. <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, <a href="/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드">순회 및 변형 작업</a>은 객체 속성에 적용되지 않습니다.</p>
+
+<h3 id="자주_사용하는_연산">자주 사용하는 연산</h3>
+
+<h4 id="배열_만들기">배열 만들기</h4>
+
+<pre class="brush: js">let fruits = ['사과', '바나나']
+
+console.log(fruits.length)
+// 2
+</pre>
+
+<h4 id="인덱스로_배열의_항목에_접근하기">인덱스로 배열의 항목에 접근하기</h4>
+
+<pre class="brush: js">let first = fruits[0]
+// 사과
+
+let last = fruits[fruits.length - 1]
+// 바나나
+</pre>
+
+<h4 id="배열의_항목들을_순환하며_처리하기">배열의 항목들을 순환하며 처리하기</h4>
+
+<pre class="brush: js">fruits.forEach(function (item, index, array) {
+ console.log(item, index)
+})
+// 사과 0
+// 바나나 1
+</pre>
+
+<h4 id="배열_끝에_항목_추가하기">배열 끝에 항목 추가하기</h4>
+
+<pre class="brush: js">let newLength = fruits.push('오렌지')
+// ["사과", "바나나", "오렌지"]
+</pre>
+
+<h4 id="배열_끝에서부터_항목_제거하기">배열 끝에서부터 항목 제거하기</h4>
+
+<pre class="brush: js">let last = fruits.pop() // 끝에있던 '오렌지'를 제거
+// ["사과", "바나나"]
+</pre>
+
+<h4 id="배열_앞에서부터_항목_제거하기">배열 앞에서부터 항목 제거하기</h4>
+
+<pre class="brush: js">let first = fruits.shift() // 제일 앞의 '사과'를 제거
+// ["바나나"]
+</pre>
+
+<h4 id="배열_앞에_항목_추가하기">배열 앞에 항목 추가하기</h4>
+
+<pre class="brush: js">let newLength = fruits.unshift('딸기') // 앞에 추가
+// ["딸기", "바나나"]
+</pre>
+
+<h4 id="배열_안_항목의_인덱스_찾기">배열 안 항목의 인덱스 찾기</h4>
+
+<pre class="brush: js">fruits.push('망고')
+// ["딸기", "바나나", "망고"]
+
+let pos = fruits.indexOf("바나나")
+// 1
+</pre>
+
+<h4 id="인덱스_위치에_있는_항목_제거하기">인덱스 위치에 있는 항목 제거하기</h4>
+
+<pre class="brush: js">let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
+
+// ["딸기", "망고"]
+</pre>
+
+<h4 id="인덱스_위치에서부터_여러개의_항목_제거하기">인덱스 위치에서부터 여러개의 항목 제거하기</h4>
+
+<pre class="brush: js">let vegetables = ['양배추', '순무', '무', '당근']
+console.log(vegetables)
+// ["양배추", "순무", "무", "당근"]
+
+let pos = 1
+let n = 2
+
+let removedItems = vegetables.splice(pos, n)
+// 배열에서 항목을 제거하는 방법
+// pos 인덱스부터 n개의 항목을 제거함
+
+console.log(vegetables)
+// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
+
+console.log(removedItems)
+// ["순무", "무"]
+</pre>
+
+<h4 id="배열_복사하기">배열 복사하기</h4>
+
+<pre class="brush: js">let shallowCopy = fruits.slice() // 사본을 만드는 방법
+// ["딸기", "망고"]
+</pre>
+
+<h3 id="배열_요소에_접근하기">배열 요소에 접근하기</h3>
+
+<p>JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.</p>
+
+<p>잘못된 인덱스를 사용하면 <code>undefined</code>를 반환합니다.</p>
+
+<pre class="brush: js">let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
+console.log(arr[0]) // '첫 번재 요소입니다'를 기록
+console.log(arr[1]) // '두 번재 요소입니다'를 기록
+console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록
+</pre>
+
+<p><code>toString</code>이 속성인 것과 마찬가지로(정확히 하자면, <code>toString()</code>은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.</p>
+
+<pre class="brush: js">console.log(arr.0) // 구문 오류
+</pre>
+
+<p>이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.</p>
+
+<p>예를 들어 <code>'3d'</code>라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.</p>
+
+<pre class="brush: js">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+console.log(years.0) // 구문 오류
+console.log(years[0]) // 정상 작동
+</pre>
+
+<pre class="brush: js">renderer.3d.setTexture(model, 'character.png') // 구문 오류
+renderer['3d'].setTexture(model, 'character.png') // 정상 작동
+</pre>
+
+<p><code>3d</code> 예시에서 <code>'3d'</code>를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수는 있지만(<code>years[2]</code> 대신에 <code>years['2']</code>처럼), 굳이 필요하지는 않습니다.</p>
+
+<p><code>years[2]</code>의 2는 JavaScript 엔진이 암시적인 <code>toString</code> 변환을 사용해 문자열로 변환합니다. 그 결과로서 <code>'2'</code>와 <code>'02'</code>는 <code>years</code> 객체에서 서로 다른 칸을 가리키며, 다음 코드는 <code>true</code>가 될 수 있습니다.</p>
+
+<pre class="brush: js">console.log(years['2'] != years['02']);
+</pre>
+
+<h3 id="length_와_숫자형_속성의_관계"><code>length</code> 와 숫자형 속성의 관계</h3>
+
+<p>JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.</p>
+
+<p>몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.</p>
+
+<p>다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.</p>
+
+<pre class="brush: js">const fruits = []
+fruits.push('banana', 'apple', 'peach')
+
+console.log(fruits.length) // 3
+</pre>
+
+<p>JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.</p>
+
+<pre class="brush: js">fruits[5] = 'mango'
+console.log(fruits[5]) // 'mango'
+console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
+console.log(fruits.length) // 6
+</pre>
+
+<p>{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.</p>
+
+<pre class="brush: js">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+</pre>
+
+<p>하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.</p>
+
+<pre class="brush: js">fruits.length = 2
+console.log(Object.keys(fruits)) // ['0', '1']
+console.log(fruits.length) // 2
+</pre>
+
+<p>{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.</p>
+
+<h3 id="매치_결과를_이용한_배열_생성">매치 결과를 이용한 배열 생성</h3>
+
+<p>정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.</p>
+
+<pre class="brush: js">// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
+// 일치한 b와 다음 d를 기억하십시오.
+// 대소문자 구분은 무시됩니다.
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+</pre>
+
+<p>매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+ <tr>
+ <td class="header">속성/요소</td>
+ <td class="header">설명</td>
+ <td class="header">예시</td>
+ </tr>
+ <tr>
+ <td><code>input </code> {{ReadOnlyInline}}</td>
+ <td>정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다.</td>
+ <td><code>"cdbBdbsbz"</code></td>
+ </tr>
+ <tr>
+ <td><code>index </code> {{ReadOnlyInline}}</td>
+ <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다.</td>
+ <td><code>1</code></td>
+ </tr>
+ <tr>
+ <td><code>[0]</code> {{ReadOnlyInline}}</td>
+ <td>원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다.</td>
+ <td><code>"dbBd"</code></td>
+ </tr>
+ <tr>
+ <td><code>[1], ...[n] </code> {{ReadOnlyInline}}</td>
+ <td>만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다.</td>
+ <td><code>[1]: bB</code><br>
+ <code>[2]: d</code></td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{jsxref("Array.Array", "Array()")}}</dt>
+ <dd><code>Array</code> 객체를 생성합니다.</dd>
+</dl>
+
+<h2 id="정적_속성">정적 속성</h2>
+
+<dl>
+ <dt><code>Array.length</code></dt>
+ <dd>값이 1인 <code>Array</code> 생성자의 길이 속성입니다.</dd>
+ <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
+ <dd>파생 객체를 생성하는데 사용하는 생성자 함수입니다.</dd>
+</dl>
+
+<h2 id="정적_메서드">정적 메서드</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}}</dt>
+ <dd>유사 배열 또는 반복 가능한 객체로부터 새로운 <code>Array</code> 인스턴스를 생성합니다.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.</dd>
+ <dt>{{jsxref("Array.of()")}}</dt>
+ <dd>전달인자의 개수나 데이터 타입에 관계없이 새 <code>Array</code> 인스턴스를 생성합니다.</dd>
+</dl>
+
+<h2 id="Array_인스턴스"><code>Array</code> 인스턴스</h2>
+
+<p>모든 <code>Array</code> 인스턴스는 <code>Array.prototype</code>을 상속합니다. 다른 생성자와 마찬가지로, <code>Array()</code> 생성자의 프로토타입을 수정하면 모든 <code>Array</code> 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 <code>Array</code>를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.</p>
+
+<p>그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript에 기능이 추가</a>될 경우 문제가 될 수 있습니다.</p>
+
+<p>잘 모를 법한 사실: <code>Array.prototype</code>은 그 스스로 <code>Array</code>입니다.</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype) // true</pre>
+
+<h2 id="인스턴스_속성">인스턴스 속성</h2>
+
+<div>
+<dl>
+ <dt><code>Array.prototype.constructor</code></dt>
+ <dd>객체의 프로토타입을 생성하는 함수를 지정합니다.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>배열의 원소 수를 나타냅니다.</dd>
+ <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
+ <dd>{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.</dd>
+</dl>
+</div>
+
+<h2 id="인스턴스_메서드">인스턴스 메서드</h2>
+
+<h4 id="변경자_메서드">변경자 메서드</h4>
+
+<div>
+<p>변경자 메서드는 배열을 수정합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
+ <dd>배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}}</dt>
+ <dd>배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.</dd>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>배열의 요소를 정렬하고 그 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>배열에서 요소를 추가/삭제합니다.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.</dd>
+</dl>
+</div>
+
+<h4 id="접근자_메서드">접근자 메서드</h4>
+
+<div>
+<p>접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.at()")}}</dt>
+ <dd>주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.</dd>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>지정한 콜백의 반환 결과가 <code>true</code>인 요소만 모은 새로운 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}}</dt>
+ <dd>배열이 주어진 값을 포함하는지 판별해 <code>true</code> 또는 <code>false</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>배열의 모든 요소를 문자열로 합칩니다.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 <code>-1</code>을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>배열의 일부를 추출한 새 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.</dd>
+</dl>
+</div>
+
+<h4 id="순회_메서드">순회 메서드</h4>
+
+<p>배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 <code>length</code>를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.</p>
+
+<p>요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.</p>
+
+<p>반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.</p>
+
+<div>
+<dl>
+ <dt>{{jsxref("Array.prototype.entries()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}}</dt>
+ <dd>주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 <code>undefined</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
+ <dd>주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 <code>-1</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>배열의 각각의 요소에 대해 콜백을 호출합니다.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="ko"><span>주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.</span></span></dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 <code>true</code>를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt>
+ <dd>배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.</dd>
+</dl>
+</div>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="배열_생성">배열 생성</h3>
+
+<p>아래 예제는 길이 0의 배열 <code>msgArray</code> 을 생성하고, <code>msgArray[0]</code> 와 <code>msgArray[99]</code> 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.</p>
+
+<pre class="brush: js">let msgArray = []
+msgArray[0] = 'Hello'
+msgArray[99] = 'world'
+
+if (msgArray.length === 100) {
+ console.log('The length is 100.')
+}</pre>
+
+<h3 id="2차원_배열_생성">2차원 배열 생성</h3>
+
+<p>아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.</p>
+
+<pre class="brush: js">let board = [
+ ['R','N','B','Q','K','B','N','R'],
+ ['P','P','P','P','P','P','P','P'],
+ [' ',' ',' ',' ',' ',' ',' ',' '],
+ [' ',' ',' ',' ',' ',' ',' ',' '],
+ [' ',' ',' ',' ',' ',' ',' ',' '],
+ [' ',' ',' ',' ',' ',' ',' ',' '],
+ ['p','p','p','p','p','p','p','p'],
+ ['r','n','b','q','k','b','n','r'] ]
+
+console.log(board.join('\n') + '\n\n')
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4]
+board[6][4] = ' '
+console.log(board.join('\n'))</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<pre class="eval">R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+</pre>
+
+<h3 id="배열을_사용하여_일련의_값을_테이블처럼_표시하기">배열을 사용하여 일련의 값을 테이블처럼 표시하기</h3>
+
+<pre class="brush: js">const values = []
+for (let x = 0; x < 10; x++){
+ values.push([
+ 2 ** x,
+ 2 * x ** 2
+ ])
+}
+console.table(values)</pre>
+
+<p>결과는 다음과 같습니다.</p>
+
+<pre class="eval line-numbers language-html">0 1 0
+1 2 2
+2 4 8
+3 8 18
+4 16 32
+5 32 50
+6 64 72
+7 128 98
+8 256 128
+9 512 162
+</pre>
+
+<p>(첫번째 열은 (인덱스))</p>
+
+<h2 id="Specifications">명세</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">브라우저 호환성</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
+ <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li>
+</ul>
--
cgit v1.2.3-54-g00ecf