Update Array related docs

3 files changed, 928 insertions, 781 deletions

diff --git a/files/ko/web/javascript/data_structures/index.md b/files/ko/web/javascript/data_structures/index.md
index 884d33c308..4d0f04c39c 100644
--- a/files/ko/web/javascript/data_structures/index.md
+++ b/files/ko/web/javascript/data_structures/index.md
@@ -1,78 +1,73 @@
 ---
-title: 자바스크립트의 자료형
+title: JavaScript의 타입과 자료구조
 slug: Web/JavaScript/Data_structures
+tags:
+  - Beginner
+  - Guide
+  - JavaScript
+  - Types
 translation_of: Web/JavaScript/Data_structures
 ---
+
 {{jsSidebar("More")}}
 
-모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알아본다. 이로써 내장 자료형들로 더 복잡한 자료형을 만드는데 사용할 수 있을 것이다. 가능하다면 다른 언어와도 비교해보자.
+모든 프로그래밍 언어에는 내장된 자료구조가 존재하지만 보통 그 내용은 언어마다 다릅니다. 이 글에서는 JavaScript에서 사용할 수 있는 내장 자료구조와 그 속성에 대해 알아보겠습니다. 그러면 이 자료구조들을 다른 자료구조 개발에 사용할 수 있을 것입니다. 가능하다면 다른 언어와도 비교해보겠습니다.
 
-## 동적 타이핑
+## 동적 타입
 
-자바스크립트는 _느슨한 타입 (loosely typed)_ 언어, 혹은 _동적 (dynamic)_ 언어이다. 그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다. 또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다.
+JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다.
 
 ```js
-var foo = 42;    // foo 는 이제 Number 임
-var foo = "bar"; // foo 는 이제 String 임
-var foo = true;  // foo 는 이제 Boolean 임
+let foo = 42 // foo가 숫자
+foo = 'bar' // foo가 이제 문자열
+foo = true // foo가 이제 불리언
 ```
 
-## 데이터 및 구조 유형
-
-최신 ECMAScript 표준은 9가지 유형을 정의합니다.
-
-- [typeof](/ko/docs/Web/JavaScript/Reference/Operators/typeof) 연산자로 확인되는 6가지 [기본](/ko/docs/Glossary/Primitive) **데이터 유형**:
-
-  - [undefined](/en-US/docs/Glossary/undefined) : `typeof instance === "undefined"`
-  - [Boolean](/en-US/docs/Glossary/Boolean) : `typeof instance === "boolean"`
-  - [Number](/en-US/docs/Glossary/Number) : `typeof instance === "number"`
-  - [String](/en-US/docs/Glossary/String) : `typeof instance === "string"`
-  - [BigInt](/en-US/docs/Glossary/BigInt) : `typeof instance === "bigint"`
-  - [Symbol](/en-US/docs/Glossary/Symbol) : `typeof instance === "symbol"` (ECMAScript 6 에 추가됨)
-
-## **구조 유형**:
+## JavaScript의 타입
 
-  - [Object](/en-US/docs/Glossary/Object) : `typeof instance === "object"`. **데이터 구조**로 사용되는 모든 [생성된](/ko/docs/Learn/JavaScript/Objects#the_constructor) 개체 인스턴스에 대한 데이터가 아닌 특수한 구조 유형: new {{jsxref("Object")}}, new {{jsxref("Array")}}, new {{jsxref("Map")}}, new {{jsxref("Set")}}, new {{jsxref("WeakMap")}}, new {{jsxref("WeakSet")}}, new {{jsxref("Date")}} 그리고 거의 모든 것이 [new keyword](/en-US/docs/Web/JavaScript/Reference/Operators/new) 로 만들어졌습니다;
-  - [Function](/en-US/docs/Glossary/Function) : 비데이터 구조이지만 `typeof` 연산자에도 값이 나옵니다: `typeof instance === "function"`. 모든 Function 생성자는 Object 생성자에서 파생되지만 이것은 단순히 Functions의 특수 축약형입니다.
+JavaScript 언어의 타입은 [원시 값](#원시_값)과 [객체](#객체)로 나뉩니다.
 
-- **Structural Root** Primitive:
+- [원시 값](#원시_값) (언어의 최고 로우레벨에서 직접 표현되는 불변 데이터)
+  - [Boolean 타입](#불리언_타입)
+  - [Null 타입](#null_타입)
+  - [Undefined 타입](#undefined_타입)
+  - [Number 타입](#숫자_타입)
+  - [BigInt 타입](#bigint_타입)
+  - [String 타입](#문자열_타입)
+  - [Symbol 타입](#심볼_타입)
+- [객체](#객체) (속성의 컬렉션)
 
-  - **[null](/en-US/docs/Glossary/Null)** : `typeof instance === "object"`. 값에 대한 추가 사용법이 있는 특수 [기본](/ko/docs/Glossary/Primitive) 유형: 객체가 상속되지 않으면 `null`이 표시됩니다.
+## 원시 값
 
-`typeof` 연산자 사용의 유일한 가치 있는 목적은 데이터 유형을 확인하는 것임을 명심하십시오. `Object`에서 파생된 Structural Type을 확인하려면 항상 `"object"`를 수신하므로 typeof를 사용하는 것은 무의미합니다. 어떤 종류의 객체를 사용하고 있는지 확인하는 적절한 방법은 instanceof 키워드입니다. 그러나 그런 경우에도 오해가 있을 수 있습니다.
-
-우리가 볼 수 있듯이 거의 동일한 undefined와 null을 제외하고 모든 기본 유형의 의미는 분명합니다. 이것은 시간의 개념이 알고리즘의 목적과 엄격하게 연결되어 있기 때문에 발생합니다. 우리는 아직 존재하지 않거나 더 이상 존재하지 않는 것을 의미할 수 있습니다: **undefined**. 그러나 비어 있는 것으로 존재하는 것을 표현하려면 다른 키워드를 발명해야 합니다. 이것이 **null**이 의미하는 것입니다. 구조적 의미의 시작입니다.
-## 기본 타입 (Primitive value)
-
-오브젝트를 제외한 모든 값은 변경 불가능한 값 (immutable value) 이다. 예를 들자면, 특히 C 언어와는 다르게도, 문자열은 불변값 (immutable) 이다. 이런 값을 "primitive values" 라고 일컫는다. 아래의  {{ anch("Strings") }} 장에서 더 자세히 설명할 것이다.
+객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의합니다. 예를 들어 (C 언어와는 달리) 문자열은 불변합니다. 이런 일련의 타입을 "원시 값"이라고 합니다.
 
 ### Boolean 타입
 
-Boolean 은 논리적인 요소를 나타내고, `true` 와 `false` 의 두 가지 값을 가질 수 있다. 세부 사항을 보고싶으면 [Boolean](/ko/docs/Glossary/Boolean)과 {{jsxref("Boolean")}}을 참고하자.
+Boolean 타입은 논리 요소를 나타내며 `true`와 `false` 두 가지의 값을 가질 수 있습니다. {{glossary("Boolean", "불리언")}}과 {{jsxref("Boolean")}}에서 더 자세히 알아보세요.
 
 ### Null 타입
 
-Null 타입은 딱 한 가지 값, `null` 을 가질 수 있다. 더 알아보려면 {{jsxref("null")}} 와 [Null](/ko/docs/Glossary/Null) 을 보라.
+Null 타입은 `null` 하나의 값만 가질 수 있습니다. {{glossary("Null")}}과 {{jsxref("null")}}에서 더 자세히 알아보세요.
 
 ### Undefined 타입
 
-값을 할당하지 않은 변수는 `undefined` 값을 가진다. 더 알아보려면 {{jsxref("undefined")}} 와 [Undefined](/ko/docs/Glossary/undefined) 을 보라.
+값을 할당하지 않은 변수는 `undefined` 값을 가집니다. {{glossary("Undefined")}}와 {{jsxref("undefined")}}에서 더 자세히 알아보세요.
 
 ### Number 타입
 
-ECMAScript에는 **Number** 및 **BigInt**의 두 가지 기본 제공 숫자 유형이 있습니다(아래 참조).
+ECMAScript는 **Number**와 **BigInt** 두 가지의 내장 숫자 타입을 가지고 있습니다. (BigInt는 아래를 보세요)
 
-ECMAScript 표준에 따르면, 숫자의 자료형은 [배정밀도 64비트 형식 IEEE 754 값](https://en.wikipedia.org/wiki/Double-precision_floating-point_format) (-(2^53 -1) 와 2^53 -1 사이의 숫자값) 단 하나만 존재한다. **정수만을 표현하기 위한 특별한 자료형은 없다.** 부동 소수점을 표현할 수 있는 것 말고도, Number 타입은 세 가지 의미있는 몇가지 상징적인 값들도 표현할 수 있다. 이 값에는 `+Infinity`, `-Infinity`, and [`NaN`](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) ("**N**ot a **N**umber")이 있다.
+Number 타입은 [배정밀도 64비트 이진 형식 IEEE 754 값](https://en.wikipedia.org/wiki/Double_precision_floating-point_format)(-(2^53 − 1)부터 2^53 − 1까지의 수)입니다. Number 타입은 부동소수점 숫자 외에도 `+Infinity`, `-Infinity`, {{jsxref("NaN")}}("**N**ot a **N**umber") 세 개의 상징적인 값을 가집니다.
 
-`+/-Infinity` 보다 크거나 작은지 확인하는 용도로 상수값인 {{jsxref("Number.MAX_VALUE")}} 나 {{jsxref("Number.MIN_VALUE")}} 을 사용할 수 있다. 
+{{jsxref("Infinity", "±Infinity")}} 범위 내에서 가능한 가장 크거나 작은 수를 확인하려면 {{jsxref("Number.MAX_VALUE")}}와 {{jsxref("Number.MIN_VALUE")}} 상수를 사용할 수 있습니다.
 
-> **참고:** ECMAScript 2015부터 {{jsxref("Number.isSafeInteger()")}}와 {{jsxref("Number.MAX_SAFE_INTEGER")}} 및 {{jsxref("Number.MIN_SAFE_INTEGER")}}를 사용하여 숫자가 배정밀도 부동 소수점 숫자 범위에 있는지 확인할 수도 있습니다.
+> **참고:** ECMAScript 2015부터는 {{jsxref("Number.isSafeInteger()")}}와 {{jsxref("Number.MAX_SAFE_INTEGER")}} 및 {{jsxref("Number.MIN_SAFE_INTEGER")}}를 사용하여 숫자가 배정밀도 부동 소수점 숫자 범위 안에 있는지 확인할 수도 있습니다.
 >
-> 이 범위를 넘어서면 JavaScript의 정수는 더 이상 안전하지 않으며 값의 배정도 부동 소수점 근사값이 됩니다.
+> 이 범위를 넘어서면 JavaScript의 정수는 더 이상 안전하지 않으며, 그 값의 배정밀도 부동 소수점 근삿값이 됩니다.
 
-Number 타입의 값 중에는 두 가지 방식으로 표현할 수 있는 유일한 값이 있는데, 0 이다. 0 은 -0 이나 +0 으로 표시할 수 있다. ("0" 은 물론 +0 이다.) 
+Number 타입의 값 중 두 가지 방식으로 표현할 수 있는 유일한 값으로 `0`이 있습니다. `0`은 `-0`과 `+0` 둘 다로 표현할 수 있습니다. (`0`은 `+0`의 별칭입니다)
 
-실제로는 이러한 사실은 거의 효력이 없다. 그 예로, `+0 === -0` 은 `true` 이다. 하지만 0으로 나누는 경우 그 차이가 눈에 띌 것이다.
+실제로는 이 사실이 영향을 주는 것은 거의 없습니다. 예컨대 `+0 === -0`은 참입니다. 그러나 0으로 나눌 경우 둘의 차이를 볼 수 있을 것입니다.
 
 ```js
 > 42 / +0
@@ -81,21 +76,21 @@ Infinity
 -Infinity
 ```
 
-숫자가 보통 값만으로 표현되긴 하지만, 자바스크립트는 [몇 가지 이진 연산자](/ko/docs/JavaScript/Reference/Operators/Bitwise_Operators)도 제공한다. 
+숫자는 보통 그 값만으로 표현되긴 하지만, JavaScript는 [이진(비트) 연산자](/ko/docs/Web/JavaScript/Reference/Operators)도 제공합니다.
 
-> **참고:** 이러한 이진 연산자들은 [비트 마스킹(bit masking)](https://en.wikipedia.org/wiki/Mask_%28computing%29) 기법으로 한 숫자 안에 여러 Boolean 값을 저장하는데도 쓸 수 있다. 일반적으로 이런 방법은 나쁜 방법이지만, 자바스크립트에서는 (Boolean 값의 배열이나 Boolean 값들을 이름있는 속성들로 가지는 객체 같은) Boolean 덩어리를 나타낼 다른 방법이 없다. 비트 마스킹은 또한 코드를 이해하고, 읽고, 유지보수하는데에 있어서 좀 더 어렵게 만드는 경향이 있다. 
-
-하지만 이러한 기법은 local storage 의 저장공간이 부족해서 절약하려고 하거나, 네트워크 상에서 각각의 비트를 전송하는 등의 극단적인 상황 같은 굉장히 제한적인 환경에서 필요할 수도 있다. 그래서 비트 마스킹 기법은 크기를 최대한 줄여야하는 상황에서만 사용을 고려해야 한다.
+> **참고:** [비트 마스킹](<https://ko.wikipedia.org/wiki/마스크_(컴퓨팅)>)을 사용해서 하나의 숫자 안에 다수의 불리언 값을 나타낼 때 비트 연산자를 사용할 수 있긴 하지만 이건 보통 나쁜 방법으로 여겨집니다. JavaScript는 일련의 불리언 값들을 나타내는 방법을 (배열이나 불리언 속성 값을 할당한 객체로) 제공합니다. 비트 마스킹은 코드를 읽고, 이해하고, 유지하기 힘들게 만듭니다.
+>
+> 다만 로컬 저장소의 한정된 공간을 활용해야 한다거나, 네트워크의 비트 하나하나가 소중한 극한 상황처럼 제한된 환경에서는 이런 기술이 필요할 수도 있습니다. 비트 마스킹은 용량 최적화의 마지막 수단으로만 고려해야 합니다.
 
-### BigInt type
+### BigInt 타입
 
-[BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt) 타입은 임의 정밀도로 정수를 나타낼 수 있는 자바스크립트의 숫자 원시 형식이다. `BigInt`를 사용하면 `Number`의 정수 한계를 넘어서는 큰 정수도 안전하게 저장 및 연산할 수 있다.
+BigInt 타입은 임의 정밀도로 정수를 나타낼 수 있는 JavaScript 숫자 원시 값입니다. BigInt를 Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산할 수 있습니다.
 
-`BigInt`는 정수 끝에 `n`을 추가하거나 생성자를 호출하여 생성된다.
+BigInt는 정수 끝에 `n`을 추가하거나 생성자를 호출해 생성할 수 있습니다.
 
-`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)를 사용하여 숫자로 증가시킬 수 있는 가장 안전한 값을 얻을 수 있다.
+Number의 안전 한계는 {{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` 밖으로 나가는 정수에서도 예상된 값을 반환하는 것을 보입니다.
 
 ```js
 > const x = 2n ** 53n;
@@ -104,137 +99,246 @@ Infinity
 9007199254740993n
 ```
 
-산술 연산자 `+`, `*`, `-`, `**` 및 `%`를 `BigInt`에서도 사용할 수 있다. `BigInt`는 정확히 `Number`와 같지는 않으나 대략적으로는 같다.
+`+`, `*`, `-`, `**`, `%` 연산자를 Number에 사용하듯 BigInt에서도 사용할 수 있습니다. BigInt는 Number와 엄격하게 같지는 않지만 유사합니다.
 
-`BigInt`는 `if`, `||`, `&&,` `Boolean`, `!`와 같이 `Boolean 타입`으로 변환되는 경우 `Number`처럼 작동한다.
+BigInt는 `if`, `||`, `&&`, `Boolean`, `!`처럼 불리언 변환이 발생하는 곳에서는 `Number`처럼 동작합니다.
 
-`BigInt`는 `Number`로 교체할 수 없으며 [TypeError](/ko/docs/Web/JavaScript/Reference/Global_Objects/TypeError)가 발생한다.
+BigInt는 Number와 혼합해 연산할 수 없으며, 이때 {{jsxref("TypeError")}}가 발생합니다.
 
 ### String 타입
 
-자바스크립트의 {{jsxref("Global_Objects/String", "String")}} 타입은 텍스트 데이터를 나타내는데 사용한다. 이는 16비트 부호없는 정수 값 요소들의 집합이다. String의 각 요소는 String의 위치를 차지한다. 첫 번째 요소는 `0`번 인덱스에 있고, 다음 요소는 `1`번, 그 다음 요소는 2번... 같은 방식이다. String 의 길이는 String이 가지고있는 요소의 갯수이다.
-
-C 같은 언어와는 다르게, 자바스크립트의 문자열은 변경 불가능 (immutable) 하다. 이것은 한 번 문자열이 생성되면, 그 문자열을 수정할 수 없다는걸 의미한다. 그러나 원래 문자열에서 일부가 수정된 다른 문자열을 만드는건 가능하다. 예를 들자면 이렇다.
-
-- 원래 문자열에서 각각의 글자를 추출하거나 [`String.substr()`](/ko/docs/JavaScript/Reference/Global_Objects/String/substr)을 사용해서 만든 부분 문자열
-- 접합 연산자 (`+`) 나 [`String.concat()`](/ko/docs/JavaScript/Reference/Global_Objects/String/concat) 으로 두 문자열을 합친 문자열
-
-#### "문자열의 자료형화"를 조심하라!
-
-문자열을 복잡한 자료형을 표현하는 용도로 쓰는 방법이 꽤나 매력적일 수 있다. 단기적으로 이런 장점들이 있다.
-
-- 접합 연산자로 손쉽게 복잡한 문자열을 만들 수 있다.
-- 문자열은 디버깅이 쉽다 (화면에 출력한 내용이 문자열 변수에 있는 값과 같다)
-- 문자열은 많은 API 에서 사용하는 공통분모이고 ([입력 필드](/ko/docs/DOM/HTMLInputElement), [로컬 스토리지](/ko/docs/Web/API/Web_Storage_API)  값, {{ domxref("XMLHttpRequest") }} 요청에서 `responseText`를 사용할 때 등) 그러다보니 문자열만으로 작업하는게 매혹적일 수 있다.
-
-규칙만 잘 정의해놓는다면, 어떤 자료구조가 되던 문자열로 표시할 수 있다. 그렇다고 해서 이게 좋은 방법이 되는 건 아니다. 예를 들자면, 구분자로 리스트 자료형을 흉내낼 수 있을 것이다 (하지만 자바스크립트의 배열을 사용하는게 더 알맞을 것이다). 불행하게도, 리스트의 요소중에 구분자가 들어있는 요소가 있다면 리스트는 엉망진창이 될 것이다. 물론 탈출 문자 (escape character) 등을 사용하거나 할 수도 있을 것이다. 하지만 이런 것들은 모두 미리 정해놓은 규칙을 필요로 하고, 덕분에 불필요한 관리 부담을 낳는다.
-
-문자열은 텍스트 데이터에만 사용하자. 복잡한 데이터를 나타낼때는, 문자열을 분석해서 적합한 추상화를 선택해 사용하자.
-
-### Symbol 타입
-
-Symbol 은 ECMAScript 6 에서 추가되었다. Symbol은 **유일**하고 **변경 불가능한** (immutable) 기본값 (primitive value) 이다. 또한, 객체 속성의 key 값으로도 사용될 수 있다 (아래를 볼 것). 몇몇 프로그래밍 언어에서는 Symbol을 atom 이라고 부른다. 또, C 언어의 이름있는 열거형 (enum) 과도 비슷하다. 좀 더 자세히 알아보려면, 자바스크립트의  [Symbol](/ko/docs/Glossary/Symbol) 와 {{jsxref("Symbol")}} 객체 래퍼 (wrapper) 를 보라.
-
-## 객체 (Objects)
-
-컴퓨터 과학에서, 객체는 [식별자](/ko/docs/Glossary/Identifier) 로 참조할 수 있는, 메모리에 있는 값이다.
-
-### 속성 (Properties)
-
-자바스크립트에서, 객체는 속성들을 담고있는 가방 (collection) 으로 볼 수 있다. [객체 리터럴 문법 (object literal syntax)](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#object_literals) 으로 제한적으로 몇 가지 속성을 초기화할 수 있고, 그러고 나서 속성들을 추가하거나 제거할 수도 있다. 속성 값은 객체를 포함해 어떠한 자료형도 될 수 있고, 그 덕분에  복잡한 데이터 구조를 형성하는게 가능해진다. 속성은 키 (key) 값으로 식별된다. 키 값은 String 이거나 Symbol 값이다.
-
-두 종류의 객체 속성이 있는데, 이들은 종류에 따라 특성값들을 가질 수 있다. 데이터 (data) 속성과 접근자 (accessor) 속성이 그것이다.
-
-> **Note:** 각 프로퍼티에는 `특성들`이 있다. 특성은 자바스크립트 엔진에서 내부적으로 사용되므로 사용자가 직접 액세스할 수 없다. 그렇기 때문에 속성이 단일 대괄호가 아닌 이중 대괄호로 나열된다.
->
-> 더 알아보려면 [Object.defineProperty()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)를 확인하자.
+JavaScript의 String 타입은 텍스트 데이터를 나타낼 때 사용합니다. String은 16비트 부호 없는 정수 값 "요소"로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지합니다. 첫 번째 요소는 인덱스 `0`에, 그 다음 요소는 인덱스 `1`, 그 다음은 `2`, ...입니다. String의 길이는 그 안의 요소 수와 같습니다.
 
-#### 데이터 속성 (Data property)
+C 언어와 같은 일부 프로그래밍 언어와 달리 JavaScript 문자열은 불변합니다. 즉 문자열을 생성한 후 바꾸는 것은 불가능합니다.
 
-키에 값을 연결하고, 아래와 같은 특성들 (attribute) 이 있다.
+그러나 원본 문자열을 사용해 새로운 문자열을 생성하는 것은 가능합니다. 예를 들어,
 
-|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`|
+- 원본 문자열에서 각각의 문자를 선택하거나 {{jsxref("String.substr()")}}을 사용해 생성한 부분문자열
+- 연결 연산자(`+`)를 사용하거나 {{jsxref("String.concat()")}}을 사용해 두 개의 문자열을 합친 결과물
 
-| Attribute  | Type    | Description                                           |
-| ---------- | ------- | ----------------------------------------------------- |
-| Read-only  | Boolean | ES5의 [[Writable]] 특성으로 변경되었다.           |
-| DontEnum   | Boolean | ES5의 [[Enumerable]] 특성으로 변경되었다.         |
-| DontDelete | Boolean | ES5의 [[Configurable]] 특성으로 변경되었다.       |
+#### "문자열의 타입화"를 조심하라!
 
-#### 접근자 속성 (Accessor property)
+문자열을 사용해 복잡한 데이터를 표현하는 것이 매력적으로 보일지도 모르고, 단기적으로는 다음과 같은 장점이 있습니다.
 
-값을 가져오거나 값을 저장하기 위해 키에 하나 혹은 두 개의 접근자 함수 (`get`, `set`) 연결짓는다. 아래와 같은 특성이 있다.
+- 연결 연산자를 통해 복잡한 문자열을 쉽게 만들 수 있습니다.
+- 문자열은 디버깅이 쉽습니다. (출력 내용이 항상 문자열의 값과 동일)
+- 문자열은 많은 API([입력 칸](/ko/docs/Web/API/HTMLInputElement), [로컬 스토리지](/ko/docs/Web/API/Web_Storage_AP) 값, `responseText`와 함께 사용하는 [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) 등등)의 공통 분모입니다.
 
-| Attribute        | Type                           | Description                                                                                                                                                                                                              | Default value |
-| ---------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
-| [[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)로 루프에서 열거될 수 있다.                                                                                                | `false`       |
-| [[Configurable]] | Boolean                        | 만약 `false`이면, 이 속성은 제거될 수 없고, 데이터 속성을 수정할 수 없다.                                                                                                         | `false`       |
+규칙만 잘 정한다면 어떤 자료구조라도 문자열로 표현할 수 있습니다. 그러나 그게 좋은 방법이 되는 것은 아닙니다. 예컨대, 구분자를 사용하면 (물론 JavaScript 배열이 더 적합하겠지만) 문자열로 리스트를 흉내낼 수도 있을 것입니다. 그러나 구분자를 리스트의 요소로 사용하는 순간 리스트가 망가지고 맙니다. 이제 구분자를 구분하기 위해 이스케이프 문자를 선택하고, 등등... 이 모든 것이 각자의 규칙을 필요로 하고 불필요한 유지보수 부담을 낳습니다.
 
-### "Normal" objects, and functions
+문자열은 텍스트 데이터에만 사용하세요. 복잡한 데이터를 표현해야 할 땐 문자열을 파싱해서 적합한 추상화로 덮으세요.
 
-자바스크립트 오브젝트는 키와 값의 매핑이다. 키는 문자열이고 값은 다른 어떤 값도 될 수 있다. 오브젝트는 [hashmaps](https://en.wikipedia.org/wiki/Hash_table)을 표현하는데 적합하다. 표준이 아닌 [\_\_proto\_\_](/ko/docs/JavaScript/Reference/Global_Objects/Object/proto "__proto__")  슈도 프로퍼티를 사용할 때는 주의하자. 이것을 지원하는 환경에서는 `'__proto__'는 오브젝트의 프로토타입을 의미하므로 이 이름을 키로 사용할 수 없다. 속성을 사용할 수 없다. 문자열의 출처가 분명하지 않을 때(입력 필드의 입력값 등)`주의가 필요하다. [이런 일이 생길 수도 있다](https://productforums.google.com/forum/#!category-topic/docs/documents/0hQWeOvCcHU). 이 때는  [StringMap abstraction](https://code.google.com/p/google-caja/source/browse/trunk/src/com/google/caja/ses/StringMap.js?r=4779) 같은 대안을 사용해보자.함수는 일반 오브젝트에서 호출 가능한 특성을 추가한 오브젝트이다.
-
-### Dates
-
-시간을 나타내려면 [Date utility](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date "en/JavaScript/Reference/Global_Objects/Date")를 사용하자. 최고의 선택이다.
-
-### Arrays
-
-[배열(Arrays](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")) 는 정수키를 가지는 일련의 값들을 표현하기 위한 오브젝트이다. 배열 오브젝트에는 길이를 나타내는 'length'란 속성도 있다. 배열은 Array.prototype을 상속받으므로 배열을 다룰 때 편한 [indexOf](/ko/docs/JavaScript/Reference/Global_Objects/Array/indexOf) (배열에서 값 검색)와 [push](/ko/docs/JavaScript/Reference/Global_Objects/Array/push) (새로운 값 추가) 같은 함수를 사용할 수 있다. 배열은 리스트나 집합을 표현하는데 적합하다.
-
-[Typed Arrays](/ko/docs/Web/JavaScript/Typed_arrays)는 ECMAScript 2015에서 JavaScript의 새로운 기능이며 기본 바이너리 데이터 버퍼의 배열과 유사한 보기를 제공합니다. 다음 표는 동등한 C 데이터 유형을 결정하는 데 도움이 됩니다.
-
-| Type                                     | Value Range                   | Size in bytes | Description                                                                  | Web IDL type          | Equivalent C type               |
-| ---------------------------------------- | ----------------------------- | ------------- | ---------------------------------------------------------------------------- | --------------------- | ------------------------------- |
-| {{jsxref("Int8Array")}}         | `-128` to `127`               | 1             | 8-bit two's complement signed integer                                        | `byte`                | `int8_t`                        |
-| {{jsxref("Uint8Array")}}         | `0` to `255`                  | 1             | 8-bit unsigned integer                                                       | `octet`               | `uint8_t`                       |
-| {{jsxref("Uint8ClampedArray")}} | `0` to `255`                  | 1             | 8-bit unsigned integer (clamped)                                             | `octet`               | `uint8_t`                       |
-| {{jsxref("Int16Array")}}         | `-32768` to `32767`           | 2             | 16-bit two's complement signed integer                                       | `short`               | `int16_t`                       |
-| {{jsxref("Uint16Array")}}         | `0` to `65535`                | 2             | 16-bit unsigned integer                                                      | `unsigned short`      | `uint16_t`                      |
-| {{jsxref("Int32Array")}}         | `-2147483648` to `2147483647` | 4             | 32-bit two's complement signed integer                                       | `long`                | `int32_t`                       |
-| {{jsxref("Uint32Array")}}         | `0` to `4294967295`           | 4             | 32-bit unsigned integer                                                      | `unsigned long`       | `uint32_t`                      |
-| {{jsxref("Float32Array")}}     | `1.2E-38` to `3.4E38`         | 4             | 32-bit IEEE floating point number (7 significant digits e.g., `1.1234567`)   | `unrestricted float`  | `float`                         |
-| {{jsxref("Float64Array")}}     | `5E-324` to `1.8E308`         | 8             | 64-bit IEEE floating point number (16 significant digits e.g., `1.123...15`) | `unrestricted double` | `double`                        |
-| {{jsxref("BigInt64Array")}}     | `-2^63` to `2^63 - 1`         | 8             | 64-bit two's complement signed integer                                       | `bigint`              | `int64_t (signed long long)`    |
-| {{jsxref("BigUint64Array")}}     | `0` to `2^64 - 1`             | 8             | 64-bit unsigned integer                                                      | `bigint`              | `uint64_t (unsigned long long)` |
+### Symbol 타입
 
-### Keyed collections: Maps, Sets, WeakMaps, WeakSets
+Symbol은 **고유**하고 **변경 불가능한** 원시 값이며 객체의 속성(아래를 참고하세요) 키로 사용할 수 있습니다. 어떤 프로그래밍 언어들에선 "아톰"이라고 부르기도 합니다.
 
-표준이 아니지만 ECMAScript 6에서 표준이 될 것 같다.
+[심볼](/ko/docs/Glossary/Symbol)과 {{jsxref("Symbol")}}에서 더 자세히 알아보세요.
 
-이 자료형들에서는 키가 문자열 뿐만 아니라 오브젝트도 될 수 있다. Set은 오브젝트의 집합을 나타내는 반면에 `WeakMaps`와 `Maps`는 오브젝트에 값을 연관시킬 수 있다. `Map`과 `WeakMap`의 차이는 전자는 오브젝트 키를 열거할 수 있다는 것이다. 이것은 가비지 콜렉션에서 이점을 준다.
+## 객체
 
-ECMAScript 5를 이용해서 Map과 Set을 구현할 수 있을 것이다. 그러나 오브젝트는 크기 비교가 안된다는 점 때문에(예를들어 어떤 오브젝트는 다른 오브젝트보다 '작다'라고 할 수 없다) look-up에 소요되는 시간이 선형 시간이지 않을 것이다. 네이티브 구현은(WeakMaps를 포함해서) look-up 시간이 거의 로그 시간에서 상수 시간이다.
+컴퓨터 과학에서의 객체란 [식별자](/ko/docs/Glossary/Identifier)로 참조할 수 있는 메모리 상의 값을 말합니다.
 
-DOM 노드에 데이터를 지정하기 위해서 직접 속성을 지정할 수도 있지만 `data-\*` 속성을 사용할 수도 있다. 여기에는 다른 스크립트도 모두 그 속성에 접근할 수 있다는 나쁜 점이 있다. `Map`과 `WeakMap`은 오브젝트만 사용할 수 있는 개인 데이터를 쉽게 만들 수 있게 해준다.
+### 속성
 
-### Structured data: JSON
+JavaScript에서의 객체는 속성의 컬렉션으로 볼 수 있습니다. [객체 리터럴 구문](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#객체_리터럴)을 사용해 제한적으로 속성을 초기화할 수의 있고, 그 후에 속성을 추가하거나 제거할 수도 있습니다. 속성 값으로는 다른 객체를 포함해 모든 타입을 사용할 수 있으므로 복잡한 자료구조의 구축이 가능합니다. 속성은 '키' 값으로 식별하며, 키 값으로는 {{glossary("String", "문자열 값")}}이나 {{glossary("Symbol", "심볼")}}을 사용할 수 있습니다.
 
-JSON(**J**ava**S**cript **O**bject **N**otation)은 JavaScript에서 파생된 경량 데이터 교환 형식이지만 많은 프로그래밍 언어에서 사용됩니다. JSON은 범용 데이터 구조를 구축합니다.
+객체 속성에는 [데이터 속성](#데이터_속성)과 [접근자 속성](#접근자_속성) 두 종류가 있습니다.
 
-세부사항은 [JSON](/ko/docs/Glossary/JSON) 와 {{jsxref("JSON")}} 를 보세요.
+> **참고:** 각각의 속성에는 다시 '특성'들이 존재합니다. 특성은 JavaScript 엔진이 내부적으로 사용하므로 직접 접근하는 것은 불가능합니다. 따라서 특성은 표기할 때 이중 대괄호로 감싸서 나타냅니다.
+>
+> {{jsxref("Object.defineProperty()")}}에서 더 알아보세요.
+
+#### 데이터 속성
+
+데이터 속성은 키를 값과 연결하며, 다음과 같은 특성을 가집니다.
+
+<table class="standard-table">
+  <caption>
+    데이터 속성의 특성
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">특성</th>
+      <th scope="col">타입</th>
+      <th scope="col">설명</th>
+      <th scope="col">기본 값</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>[[Value]]</td>
+      <td>모든 JavaScript 타입</td>
+      <td>속성에 대한 회수 접근에 반환하는 값입니다.</td>
+      <td><code>undefined</code></td>
+    </tr>
+    <tr>
+      <td>[[Writable]]</td>
+      <td>Boolean</td>
+      <td>
+        <code>false</code>면 속성의 [[Value]]를 바꿀 수 없습니다.
+      </td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td>[[Enumerable]]</td>
+      <td>Boolean</td>
+      <td>
+        <p>
+          <code>true</code>면 속성이
+          <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in"
+             ><code>for...in</code></a
+          >
+          반복문에 노출됩니다.
+          <br />
+          <a
+            href="/ko/docs/Web/JavaScript/Enumerability_and_ownership_of_properties"
+            >열거 가능성과 속성 소유권</a
+          >을 참고하세요.
+        </p>
+      </td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td>[[Configurable]]</td>
+      <td>Boolean</td>
+      <td>
+        <code>false</code>면 속성을 삭제하거나, 접근자 속성으로 변경하거나, [[Value]]와 [[Writable]]을 제외한 특성을 변경할 수 없습니다.
+      </td>
+      <td><code>false</code></td>
+    </tr>
+  </tbody>
+</table>
+
+| 특성       | 타입    | 설명                                       |
+| ---------- | ------- | ------------------------------------------ |
+| Read-only  | Boolean | ES5 [[Writable]] 특성의 반대 값입니다.     |
+| DontEnum   | Boolean | ES5 [[Enumerable]] 특성의 반대 값입니다.   |
+| DontDelete | Boolean | ES5 [[Configurable]] 특성의 반대 값입니다. |
+
+#### 접근자 속성
+
+접근자 속성은 키를 두 개의 접근자 함수(`get`, `set`) 중 하나 이상과 연결하여 값을 가져오거나 저장합니다.
+
+> **참고:** 접근자 '메서드'가 아니라 접근자 '속성'임을 인지하는 것이 중요합니다. JavaScript 객체에도 함수 값을 사용해서 클래스처럼 접근자를 부여할 수 있지만, 그렇다고 그 객체가 클래스로 바뀌는 것은 아닙니다.
+
+접근자 속성은 다음과 같은 특성을 가집니다.
+
+<table class="standard-table">
+  <caption>
+    접근자 속성의 특성
+  </caption>
+  <thead>
+    <tr>
+      <th scope="col">특성</th>
+      <th scope="col">타입</th>
+      <th scope="col">설명</th>
+      <th scope="col">기본 값</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>[[Get]]</td>
+      <td>함수 객체 또는 Undefined</td>
+      <td>
+        값에 대해 접근을 시도하면 매개변수 없이 호출해서 속성 값을 회수합니다.
+        <a href="/ko/docs/Web/JavaScript/Reference/Functions/get"><code>get</code>을 참고하세요.
+      </td>
+      <td><code>undefined</code></td>
+    </tr>
+    <tr>
+      <td>[[Set]]]</td>
+      <td>함수 객체 또는 Undefined</td>
+      <td>
+        값에 대해 변경을 시도하면 변경을 시도한 값을 유일한 매개변수로 사용해 호출합니다.
+        <a href="/ko/docs/Web/JavaScript/Reference/Functions/set"><code>set</code>을 참고하세요.
+      </td>
+      <td><code>undefined</code></td>
+    </tr>
+    <tr>
+      <td>[[Enumerable]]</td>
+      <td>Boolean</td>
+      <td>
+        <p>
+          <code>true</code>면 속성이
+          <a href="/ko/docs/Web/JavaScript/Reference/Statements/for...in"
+             ><code>for...in</code></a
+          >
+          반복문에 노출됩니다.
+        </p>
+      </td>
+      <td><code>false</code></td>
+    </tr>
+    <tr>
+      <td>[[Configurable]]</td>
+      <td>Boolean</td>
+      <td>
+        <code>false</code>면 속성을 삭제하거나 데이터 속성으로 변경할 수 없습니다.
+      </td>
+      <td><code>false</code></td>
+    </tr>
+  </tbody>
+</table>
+
+### "일반" 객체와 함수
+
+JavaScript 객체는 키와 값 사이의 맵핑입니다. 키는 문자열 또는 심볼이고 값은 아무 것이나 가능합니다. 따라서 객체는 자연스럽게 [해시 테이블](https://ko.wikipedia.org/wiki/해시_테이블)에 적합합니다.
+
+함수는 '호출이 가능함'을 제외하면 일반적인 객체입니다.
+
+### 날짜
+
+날짜와 시간을 나타낼 때의 가장 좋은 선택은 JavaScript 내장 [`Date` 유틸리티](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)를 사용하는 것입니다.
+
+### 인덱스 컬렉션: 배열과 형식화 배열
+
+[배열](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array)은 정수 키를 가진 속성과 `length` 속성 사이에 특별한 연관을 지어놓은 일반 객체입니다.
+
+이에 더해, 배열은 `Array.prototype`을 상속하여 배열을 조작할 수 있는, {{jsxref("Array.prototype.indexOf", "indexOf()")}}(배열에서 값 탐색), {{jsxref("Array.prototype.push", "push()")}}(배열에 값 추가) 등 다양하고 편리한 메서드를 제공합니다.
+
+[형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)은 안쪽의 이진 데이터 버퍼에 대해 배열과 같은 뷰를 제공합니다. 다음 표에서 형식화 배열에 대응하는 C 타입을 볼 수 있습니다.
+
+| 타입                            | 값 범위                      | 바이트 크기 | 설명                                                             | Web IDL 타입          | 대응하는 C 타입                 |
+| ------------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------- | --------------------- | ------------------------------- |
+| {{jsxref("Int8Array")}}         | `-128` ~ `127`               | 1           | 8비트 2의 보수 부호 있는 정수                                    | `byte`                | `int8_t`                        |
+| {{jsxref("Uint8Array")}}        | `0` ~ `255`                  | 1           | 8비트 부호 없는 정수                                             | `octet`               | `uint8_t`                       |
+| {{jsxref("Uint8ClampedArray")}} | `0` ~ `255`                  | 1           | 8비트 부호 없는 정수 (클램핑)                                    | `octet`               | `uint8_t`                       |
+| {{jsxref("Int16Array")}}        | `-32768` ~ `32767`           | 2           | 16비트 2의 보수 부호 있는 정수                                   | `short`               | `int16_t`                       |
+| {{jsxref("Uint16Array")}}       | `0` ~ `65535`                | 2           | 16비트 부호 없는 정수                                            | `unsigned short`      | `uint16_t`                      |
+| {{jsxref("Int32Array")}}        | `-2147483648` ~ `2147483647` | 4           | 32비트 2의 보수 부호 있는 정수                                   | `long`                | `int32_t`                       |
+| {{jsxref("Uint32Array")}}       | `0` ~ `4294967295`           | 4           | 32비트 부호 없는 정수                                            | `unsigned long`       | `uint32_t`                      |
+| {{jsxref("Float32Array")}}      | `1.2E-38` ~ `3.4E38`         | 4           | 32비트 IEEE 부동소수점 실수 (7개의 유효숫자, e.g. `1.1234567`)   | `unrestricted float`  | `float`                         |
+| {{jsxref("Float64Array")}}      | `5E-324` ~ `1.8E308`         | 8           | 64비트 IEEE 부동소수점 실수 (16개의 유효숫자, e.g. `1.123...15`) | `unrestricted double` | `double`                        |
+| {{jsxref("BigInt64Array")}}     | `-2^63` ~ `2^63 - 1`         | 8           | 64비트 2의 보수 부호 있는 정수                                   | `bigint`              | `int64_t (signed long long)`    |
+| {{jsxref("BigUint64Array")}}    | `0` ~ `2^64 - 1`             | 8           | 64비트 부호 없는 정수                                            | `bigint`              | `uint64_t (unsigned long long)` |
+
+### 키 컬렉션: Map, Set, WeakMap, WeakSet
+
+키 컬렉션 자료구조는 ECMAScript 6판에 추가됐으며 객체 참조를 키로 가집니다. {{jsxref("Set")}}과 {{jsxref("WeakSet")}}은 객체의 집합을 나타내며 {{jsxref("Map")}}과 {{jsxref("WeakMap")}}은 객체와 값을 연결짓습니다.
+
+`Map`과 `WeakMap`의 차이는 `Map`에서만 객체 키를 열거할 수 있다는 점입니다. 덕분에 `WeakMap`에 대해서는 가비지 컬렉션 최적화를 수행할 수 있습니다.
+
+`Map`과 `Set`은 순수한 ECMAScript 5에서도 구현할 수 있습니다. 그러나 객체를 직접 비교(`<`, "작음" 비교와 같이)할 방법은 없으므로 탐색 성능이 선형(_O(n)_)으로 강제됩니다. 반면 (`WeakMap`을 포함해) 네이티브 구현의 경우 대략 로그 시간(_O(log n)_)에 가까운 성능을 낼 수 있습니다.
+
+보통 DOM 노드에 데이터를 연결할 땐 해당 객체에 직접 속성을 추가하거나 `data-*` 특성을 사용하겠지만, 같은 맥락 아래에서라면 이렇게 추가한 데이터를 모든 스크립트에서 다 사용할 수 있다는 문제가 있습니다. `Map`과 `WeakMap`을 사용하면 비공개 데이터를 객체에 쉽게 바인딩 할 수 있습니다.
+
+### 구조화된 자료: JSON
+
+JSON(**J**ava**S**cript **O**bject **N**otation)은 경량 데이터 교환 형식으로, JavaScript에서 파생됐지만 많은 프로그래밍 언어에서 사용하고 있습니다. JSON은 범용 데이터 구조를 구성합니다.
+
+{{glossary("JSON")}}과 {{jsxref("JSON")}}에서 더 자세히 알아보세요.
 
 ### 표준 라이브러리의 더 많은 객체
 
-JavaScript에는 내장 객체의 표준 라이브러리가 있습니다.
+JavaScript는 내장 객체로 구성된 표준 라이브러리를 포함합니다.
 
-더 많은 객체에 대해 알아보려면 [참조](/ko/docs/Web/JavaScript/Reference/Global_Objects)를  살펴보십시오.
+[참고서](/ko/docs/Web/JavaScript/Reference/Global_Objects)에서 내장 객체들에 대해 알아보세요.
 
-## `typeof` 연산자를 사용하여 유형 결정
+## `typeof` 연산자를 사용한 타입 판별
 
-`typeof` 연산자는 변수의 유형을 찾는 데 도움이 될 수 있습니다.
+`typeof` 연산자를 사용하면 변수의 타입을 알아낼 수 있습니다.
 
-자세한 내용과 edge cases에 대한 정보는 [reference page](/ko/docs/Web/JavaScript/Reference/Operators/typeof)를 참고하세요.
+[참고서](/ko/docs/Web/JavaScript/Reference/Operators/typeof)에서 사용법과 주의사항에 대해 알아보세요.
 
-## 같이보기
+## 같이 보기
 
-- [Nicholas Zakas collection of common data structure and common algorithms in JavaScript.](https://github.com/nzakas/computer-science-in-javascript/)
-- [Search Tre(i)es implemented in JavaScript](https://github.com/monmohan/DataStructures_In_Javascript)
-- [Data Types and Values in the ECMAScript specification](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values)
+- [ECMAScript 명세의 데이터 타입과 값](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values)
diff --git a/files/ko/web/javascript/guide/working_with_objects/index.md b/files/ko/web/javascript/guide/working_with_objects/index.md
index 7dce2677f8..58ddca6998 100644
--- a/files/ko/web/javascript/guide/working_with_objects/index.md
+++ b/files/ko/web/javascript/guide/working_with_objects/index.md
@@ -1,500 +1,515 @@
 ---
-title: Working with objects
+title: 객체로 작업하기
 slug: Web/JavaScript/Guide/Working_with_Objects
+tags:
+  - Beginner
+  - Comparing object
+  - Document
+  - Guide
+  - JavaScript
+  - Object
+  - l10n:priority
 translation_of: Web/JavaScript/Guide/Working_with_Objects
 ---
-<p>자바스크립트는 간단한 객체기반 패러다임 상에서 만들어졌다. 객체는 프로퍼티의 모음이며, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다 . 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티는 메소드라고 불린다. 브라우저 안에 미리 정의 된 객체뿐 아니라 사용자들이 직접 자신만의 객체를 정의할 수도 있다.</p>
+{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
 
-<p class="summary">이 절에서는 객체, 프로퍼티, 함수, 메소드가 어떻게 사용되는지, 그리고 사용자를 위한 새로운 객체를 생성하는 방법을 설명한다</p>
+JavaScript는 간단한 객체 기반 패러다임 위에 만들어졌습니다. 객체는 속성의 컬렉션이고, 속성은 이름('키')과 값 사이의 연결 관계입니다. 속성의 값이 함수인 경우에는 메서드라고 부릅니다. 브라우저 안에 미리 정의된 객체 뿐만 아니라 여러분이 직접 객체를 정의할 수도 있습니다. 이번 장에서는 객체, 속성, 함수, 메서드 사용법과 함께 직접 새로운 객체를 생성하는 법을 알아봅니다.
 
-<h2 id="개요">개요</h2>
+## 객체 개요
 
-<p>자바스크립트에서의 객체는 다른 프로그래밍 언어에서와 비슷하게 현실 세계에서의 사물(objects)과 비교해 볼 수 있다. 자바스크립트에서의 객체의 개념은 실세계상에서의 인식 가능한 사물로 이해할 수 있다.</p>
+JavaScript의 객체는, 다른 프로그래밍 언어에서와 마찬가지로 현실 세계에서 객체(사물)라고 부르는 것과 비교할 수 있습니다. JavaScript 객체의 개념은 현실에서 인식 가능한 사물로 이해가 가능합니다.
 
-<p>객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다. 예를 들어 컵과 비교를 해 본다면 컵은 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(프로퍼티)을 가지고 있다. 비슷하게 자바스크립트의 객체는 그 특징을 결정짓는 여러 프로퍼티를 가진다.</p>
+JavaScript에서 객체는 속성과 타입을 가진 독립적인 개체(entity)입니다. 현실의 컵과 비교해본다면, 컵은 색, 디자인, 무게, 소재 등의 속성을 가진 객체라고 할 수 있습니다. 마찬가지로 JavaScript 객체 역시 특징을 결정짓는 속성을 가질 수 있습니다.
 
-<h2 id="객체와_프로퍼티">객체와 프로퍼티</h2>
+## 객체와 속성
 
-<p><span style="font-size: 14px; line-height: 1.5;">자바스크립트의 객체에는 그와 연관된 프로퍼티가 있다. 프로퍼티는 객체에 붙은 변수(variable)라고 설명할 수 있겠다. 객체의 프로퍼티는 일반 자바스크립의 변수와 기본적으로 똑같은데, 다만 객체에 속해있다는 차이만 있을 뿐이다. 객체의 프로퍼티들이 객체의 특징을 규정한다. 프로퍼티에 접근할 때는 도트(점) 표기법을 사용한다.</span></p>
+JavaScript 객체는 자신과 연관된 속성들을 가집니다. 객체의 속성은 객체에 붙은 변수라고 설명할 수 있겠습니다. 객체의 속성은 일반적인 JavaScript 변수와 똑같은데, 다만 객체에 붙어있다는 점만 다릅니다. 속성에 접근할 땐 간단한 마침표 표기법을 사용합니다.
 
-<pre class="brush: js">objectName.propertyName
-</pre>
+```js
+objectName.propertyName
+```
 
-<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>
+다른 모든 JavaScript 변수와 마찬가지로, 객체의 이름(아마도 그냥 변수)과 속성의 이름 모두 대소문자를 구별합니다. 객체에 속성을 정의하려면 값을 할당하세요. 예를 들기 위해 `myCar`라는 객체를 생성하고, `make`, `model`, `year`라는 이름의 속성을 추가해보겠습니다.
 
-<pre class="brush: js">var myCar = new Object();
+```js
+const 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>
+```js
+const myCar = {
+  make: 'Ford',
+  model: 'Mustang',
+  year: 1969
+};
+```
+
+객체에 할당되지 않은 속성은{{jsxref("undefined")}}입니다. ({{jsxref("null")}}이 아닙니다)
+
+```js
+myCar.color; // undefined
+```
+
+JavaScript의 객체 속성은 대괄호 표기법([속성 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors))을 사용해 접근할 수도 있습니다. 객체를 때때로 '연관 배열'(associative array)이라고 부르기도 하는데, 속성은 자신에 접근할 수 있는 문자열 값과 연관되어 있기 때문입니다. 그러므로 `myCar` 객체의 속성에 아래와 같이 접근할 수도 있을 것입니다.
+
+```js
+myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+```
 
-<p><span style="font-size: 14px; line-height: 1.5;">객체의 프로퍼티 이름은 유효한 자바스크립트 문자열이거나 문자열로 변환이 가능한 것이면 어떤 것이든 가능하며, 심지어 빈 문자열도 된다. 하지만 자바스크립트 식별자(identifier)로 적합하지 않으면 (예 : 하이픈, 빈칸을 포함하거나 숫자로 시작하는 이름), 대괄호를 이용한 표기법으로만 접근이 가능하다. 이 표기법은 프로퍼티 이름이 사전에 미리 결정되지 않고 런타임 시점에 결정되는 경우에 특히 유용하다. 아래의 예를 보자.</span></p>
+객체 속성 이름은 유효한 JavaScript 문자열 혹은 문자열로 변환 가능한 것이면 모두 가능하며, 빈 문자열도 여기 포함됩니다. 그러나 유효한 JavaScript 식별자가 아닌 이름(공백이나 붙임표, 숫자로 시작하는 이름)을 가진 속성은 대괄호 표기법으로만 접근할 수 있습니다. 대괄호 표기법은 속성 이름이 동적으로 정해지는 경우, 즉 런타임 시점까지 알 수 없는 경우 유용합니다. 아래 예제를 살펴보세요.
 
-<pre class="brush: js">var myObj = new Object(),
-    str = "myString",
-    rand = Math.random(),
-    obj = new Object(); // 변수 4개를 콤마를 사용하여 한번에 생성하고 할당.
+```js
+// 네 개의 변수를 쉼표로 구분해서
+// 한 번에 생성하고 할당
+const myObj = new Object(),
+      str = 'myString',
+      rand = Math.random(),
+      obj = new Object();
 
-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";
+myObj.type              = '마침표 구문';
+myObj['date created']   = '공백을 포함한 문자열';
+myObj[str]              = '문자열 값';
+myObj[rand]             = '무작위 수';
+myObj[obj]              = '객체';
+myObj['']               = '빈 문자열까지';
 
 console.log(myObj);
-</pre>
+```
 
-<p><span style="font-size: 14px; line-height: 1.5;">변수에 저장된 문자열을 이용해서도 프로퍼티에 접근할 수 있다.</span></p>
+모든 대괄호 표기법 안의 키는 심볼이 아닌 경우 문자열로 변환되는 점을 기억하세요. JavaScript 객체의 속성 이름(키)은 문자열이나 심볼 뿐이기 때문입니다([클래스 필드 제안서](https://github.com/tc39/proposal-class-fields)로 인해 비공개 속성 이름도 추가되겠지만, 비공개 속성 접근에는 `[]` 형식을 사용하지 않을 것입니다). 예를 들어, 위 코드의 `myObj`에 `obj`를 키로 추가하는 부분에서 JavaScript는 {{jsxref("Object.toString", "obj.toString()")}} 메서드를 호출한 결과 문자열을 새로운 키로 사용합니다.
 
-<div style="width: auto;">
-<pre class="brush: js">var propertyName = "make";
-myCar[propertyName] = "Ford";
+속성 접근은 변수에 저장된 문자열 값으로도 가능합니다.
 
-propertyName = "model";
-myCar[propertyName] = "Mustang";
-</pre>
-</div>
+```js
+let propertyName = 'make';
+myCar[propertyName] = 'Ford';
 
-<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>
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+```
 
-<pre class="brush: js">function showProps(obj, objName) {
-  var result = "";
-  for (var i in obj) {
+대괄호 표기법은 [`for...in`](/ko/docs/Web/JavaScript/Reference/Statements/for...in)과 함께 객체의 열거 가능한 속성을 순회할 때도 사용할 수 있습니다. 아래 함수는 이 방법의 동작 방식을 보이는 예제로, 객체와 객체 이름을 매개변수로 제공하면 객체의 속성들을 출력합니다.
+
+```js
+function showProps(obj, objName) {
+  let result = '';
+  for (let i in obj) {
+    // obj.hasOwnProperty()를 사용해서 객체의 프로토타입 체인에 존재하지 않는 속성을 제외
     if (obj.hasOwnProperty(i)) {
-        result += objName + "." + i + " = " + obj[i] + "\n";
+      result += `${objName}.${i} = ${obj[i]}\n`;
     }
   }
-  return result;
+  console.log(result);
 }
-</pre>
+```
 
-<p><code>showProps(myCar, "myCar")</code> 함수를 호출하면 다음과 같은 문자열을 반환한다.</p>
+`showProps(myCar, 'myCar')`를 호출하면 이렇게 출력됩니다.
 
-<pre>myCar.make = Ford
+```
+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>
+myCar.year = 1969
+```
 
-<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>
+- [for...in](/ko/docs/Web/JavaScript/Reference/Statements/for...in) 반복문. 이 방법은 객체와 객체의 프로토타입 체인에 존재하는 모든 열거 가능한 속성을 순회합니다.
+  이 방법은 객체와 객체의 프로토타입 체인 상의 열거 가능한 모든 프로퍼티를 순회한다.
+- {{jsxref("Object.keys", "Object.keys(o)")}}. 이 방법은 `o` 객체 자신만의(프로토타입 체인을 제외한) 열거 가능한 속성 이름("키")을 배열로 반환합니다.
+- {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}. 이 방법은 `o` 객체 자신만의 모든(열거 불가능하더라도) 속성 이름("키")을 배열로 반환합니다.
 
-<p>ECMAScript 5 이전 버전에서는 객체의 모든 프로퍼티를 나열하는 자체적인 방법이 제공되지 않았다. 하지만 아래 함수를 이용하면 가능하다.</p>
+'숨은' 속성(프로토타입 체인 상의 속성 중, 같은 이름의 속성이 체인에서 앞서 존재해서 가려진 속성)을 나열하는 내장 방법은 없습니다. 그러나 밑의 함수를 사용하면 가능합니다.
 
-<pre class="brush: js">function listAllProperties(o){
-	var objectToInspect;
-	var result = [];
+```js
+function listAllProperties(o) {
+	let objectToInspect = o;
+	let result = [];
 
-	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
-		result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-	}
+  while(objectToInspect !== null) {
+    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+    objectToInspect = Object.getPrototypeOf(objectToInspect)
+  }
 
 	return result;
 }
-</pre>
-
-<p>이 트릭은 객체의 "숨겨진" 프로퍼티를 알아내는 데 유용하다. (숨겨진 프로퍼티란 프로토타입 체인 상의 프로퍼티 중 객체를 통해 접근이 불가능한 것들을 말하는데 동일 이름의 다른 프로퍼티가 프로퍼티 체인 상에서 먼저 존재하는 경우에 발생한다).  만약 접근 가능한 프로퍼티만 나열하고 싶다면 배열에서 중복되는 프로퍼티들을 제거하면 된다.</p>
+```
 
-<h2 id="객체_생성하기">객체 생성하기</h2>
+## 객체 생성하기
 
-<p>자바스크립트에는 미리 정의된 객체가 몇 개 존재한다. 사용자는 여기에 추가적으로 자신의 객체를 생성할 수 있다. 자바스크립트 1.2 부터는 객체 이니셜라이저(initializer) 를 이용하여 객체를 생성할 수 있다. 또 다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 <code style="font-style: normal;">new</code> 연산자를 이용하여 인스턴스를 만들수 있다.</p>
+JavaScript에는 미리 정의된 객체가 여럿 존재합니다. 여기에 더해 여러분만의 객체도 생성할 수 있습니다. 객체 생성에는 [객체 초기자](/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer)를 사용할 수도 있고, 생성자 함수를 정의한 후에 `new` 연산자와 함께 호출해서 객체 인스턴스를 생성할 수도 있습니다.
 
-<p><span style="font-size: 1.71rem; letter-spacing: -0.5px; line-height: 24px;">객체 이니셜라이저</span></p>
+### 객체 초기자 사용하기
 
-<p>생성자 함수를 사용하는 방법 대신, 객체 이니셜라이저를 사용하여 객체를 생성할 수 있다. 이 방식은 때때로 "리터럴 표기에 의한 객체 생성"(creating objects with literal notation) 이라고도 불린다. 객체 이니셜라이저라는 단어는 C++ 에서도 비슷한 의미로 사용된다.</p>
+객체 초기자의 사용은 종종 "리터럴 표기에 의한 객체 생성"이라고 불립니다. "객체 초기자"(Object initializer)라는 단어는 C++에서 사용하는 용어와 같습니다.
 
-<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>
+```js
+const obj = {
+  property_1:   value_1,   // 속성의 값은 식별자일 수도 있고
+  2:            value_2,   // 숫자일 수도 있고
+  // ...,
+  'property n': value_n    // 문자열일 수도 있음
+};
+```
 
-<p>객체 이니셜라이저는 수식이고, 각각의 이니셜라이저가 포함된 구문이 실행될 때 마다 이니셜라이저 수식에 의해 새로운 객체가 하나씩 생성이 된다. 똑같은 이니셜라이저에 의해 생성된 객체라도 서로 별개이며 비교 결과는 동일하지 않음 (not equal) 이 된다. 객체는 마치 <code>new Object()</code> 호출이 실행된 것 처럼 생성이 된다; 즉, 객체 이니셜라이저 수식에 의해 만들어진 객체들은 <code>Object</code>의 인스턴스들이 된다.</p>
+위 코드에서 `obj`는 새로운 객체의 이름이고, 콜론 앞에 위치한 속성 이름은 식별자(이름, 숫자, 스트링 리터럴), 각각의 `value_i`는 속성 이름에 할당할 표현식입니다. `obj`와 할당 구문은 선택 사항으로, 이 객체를 다른 곳에서 참조하지 않아도 되면 변수에 할당할 필요도 없습니다. (명령문을 기대하는 곳에 객체 리터럴을 배치하려면 블록 선언문으로 잘못 읽는 경우가 없도록 괄호로 감싸줄 필요가 있습니다)
 
-<p>다음 문장은 수식<code>cond</code>가 참일 경우 객체를 만들어서 변수 <code>x</code> 에 할당한다:</p>
+객체 초기자는 표현식이며 자신이 속한 선언문이 실행될 때마다 새로운 객체를 생성합니다. 같은 초기자가 생성한 객체끼리라도 구별 가능하며 서로 비교했을 때 거짓을 반환합니다. 초기자가 생성하는 객체는 마치 `new Object()` 호출을 한 것과 같이 생성됩니다. 즉 객체 초기자 표현식의 결과 객체들은 `Object`의 인스턴스입니다.
 
-<pre class="brush: js">if (cond) var x = {hi: "there"};
-</pre>
+다음 선언문은 `cond`가 참일 때만 객체를 생성해서 변수 `x`에 할당합니다.
 
-<p>다음 예제는 <code>myHonda</code>을 생성하고 세개의 속성을 추가한다. <code>engine</code> 속성 역시 자신의 속성들을 가지고 있는 객체이다.</p>
+```js
+let x;
+if (cond) {
+  x = {greeting: '안녕하세요'};
+}
+```
 
-<pre class="brush: js">var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
-</pre>
+다음 예제는 `myHonda`를 세 개의 속성과 함께 생성합니다. `engine` 속성 역시 자신만의 속성을 가진 객체임에 주목하세요.
 
-<p>객체 이니셜라이저를 이용하여 배열을 만들 수 있다. <a href="/ko/docs/Web/JavaScript/Guide/Values%2C_variables%2C_and_literals#Array_literals">array literals</a> 를 참조하기 바란다.</p>
+```js
+const myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+```
 
-<p>JavaScript 1.1 과 그 이전 버전에서는, 객체 이니셜라이저를 사용할 수 없었다. 항상 생성자 함수를 쓰거나 생성 목적으로 제공되는 별도 함수를 사용했어야 했다. <a href="/ko/docs/Web/JavaScript/Guide/Working_with_Objects#Using_a_constructor_function">Using a constructor function</a> 참고.</p>
+객체 초기자로 배열을 생성할 수도 있습니다. [배열 리터럴](/ko/docs/Web/JavaScript/Guide/Grammar_and_types#배열_리터럴)을 참고하세요.
 
-<h3 id="생성자_함수_사용하기">생성자 함수 사용하기</h3>
+### 생성자 함수 사용하기
 
-<p>다른 방법으로는 다음 두 단계에 따라 객체를 생성할 수 있다:</p>
+다른 방법으로, 다음의 두 단계를 통해 객체를 생성할 수 있습니다.
 
-<ol>
- <li>생성자 함수를 작성하여 객체 타입을 정의한다. 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있으므로 따르기를 권장한다.</li>
- <li><code>new</code>를 이용하여 객체의 인스턴스를 생성한다.</li>
-</ol>
+1. 생성자 함수를 작성해서 객체 타입을 정의합니다. 객체 타입 이름의 첫 글자는, 그럴만한 이유로, 대문자로 시작하는 관례가 있습니다.
+2. `new` 연산자를 사용해 객체 인스턴스를 생성합니다.
 
-<p>객체의 타입을 정의하려면 타입의 이름, 속성(프로퍼티), 메소드 등을 기술하는 함수를 하나 만들어야 한다. 예를 들면, 여러분이 자동차를 위한 객체 타입을 만들기 원한다면, 이 객체의 타입의 이름은 <code>car</code>이고, 이 타입은 제조사, 모델, 생산연도를 위한 속성을 포함하길 원할 것이다. 아마도 다음과 같은 함수를 작성하게 될 것이다:</p>
+객체 타입을 정의하려면 타입 이름, 속성, 메서드를 지정하는 함수를 생성하세요. 예를 들어 차량을 표현하기 위한 객체 타입을 정의한다고 합시다. 그러면 객체 타입의 이름은 `Car`가 될 것이고, 브랜드와 모델, 연식 속성이 필요할 것입니다.
 
-<pre class="brush: js">function Car(make, model, year) {
+```js
+function Car(make, model, year) {
   this.make = make;
   this.model = model;
   this.year = year;
 }
-</pre>
+```
 
-<p>함수 인자로 전달 받은 값을 객체의 속성에 할당하기 위해서 <code>this</code>를 사용 한 것에 주목하기 바란다.</p>
+함수에 전달한 값을 객체 속성으로 할당하기 위해 `this`를 사용하는 것에 주목하세요.
 
-<p>이제 다음과 같이 하여 <code>mycar</code>라는 이름의 객체를 생성할 수 있다:</p>
+이제 `mycar` 객체를 생성할 수 있습니다.
 
-<pre class="brush: js">var mycar = new Car("Eagle", "Talon TSi", 1993);
-</pre>
+```js
+var mycar = new Car("Eagle", "Talon TSi", 1993);
+```
 
-<p>이 문장은 <code>mycar</code>를 만들고 특정 값들을 속성으로 할당하고 있다. 이렇게 하면 <code>mycar.make</code>의 값은 문자열 "Eagle" 이 되고, <code>mycar.year</code>는 정수 1993 이 된다.</p>
+이 선언문은 `mycar`를 생성한 후 매개변수로 지정한 값을 속성에 할당합니다. 이후 `mycar.make`는 문자열 "Eagle", `mycar.year`는 정수 1993 등을 가지게 됩니다.
 
-<p><code>new</code>를 이용하면 어떤 갯수의 <code>car</code> 객체도 만들 수 있다. 예를 들면 다음과 같다.</p>
+`new`를 사용한 호출로 몇 개의 `Car` 객체라도 만들 수 있습니다.
 
-<pre class="brush: js">var kenscar = new Car("Nissan", "300ZX", 1992);
-var vpgscar = new Car("Mazda", "Miata", 1990);
-</pre>
+```js
+const kenscar = new Car("Nissan", "300ZX", 1992);
+const vpgscar = new Car("Mazda", "Miata", 1990);
+```
 
-<p>객체는 또 다른 객체를 속성으로 가질 수 있다. 예를 들어 여러분이 <code>person</code> 이라는 객체를 다음과 같이 정의를 했고:</p>
+객체는 다른 객체도 속성으로 가질 수 있습니다. `Person`이라는 객체를 다음과 같이 정의한다고 하겠습니다.
 
-<pre class="brush: js">function Person(name, age, sex) {
+```js
+function Person(name, age, sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
 }
-</pre>
+```
 
-<p>그리고 두 개의 새 <code>person</code> 객체의 인스턴스를 만들었다고 하면:</p>
+두 개의 새로운 `Person` 객체도 인스턴스화 했다고 합시다.
 
-<pre class="brush: js">var rand = new Person("Rand McKinnon", 33, "M");
-var ken = new Person("Ken Jones", 39, "M");
-</pre>
+```js
+const rand = new Person('Rand McKinnon', 33, 'M');
+const ken = new Person('Ken Jones', 39, 'M');
+```
 
-<p><code>car</code>의 정의에 <code>person</code> 객체의 값을 갖는 <code>owner</code> 속성을 추가하도록 수정할 수 있다:</p>
+이제 `Car`의 정의를, `Person` 객체를 갖는 `owner` 속성을 추가하도록 수정할 수 있습니다.
 
-<pre class="brush: js">function Car(make, model, year, owner) {
+```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>
+```js
+const car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+const car2 = new Car('Nissan', '300ZX', 1992, ken);
+```
 
-<p>위 문장은 문자열 리터럴이나 정수를 넘기는 대신 객체 <code>rand</code> 와 <code>ken</code>을 owners를 위한 인자로 전달하고 있다. car2의 소유자 이름을 찾고 싶다면 다음과 같은 속성을 사용할 수 있다.:</p>
+문자열 리터럴이나 정수 값이 아니라 객체 `rand`와 `ken`을 소유자 매개변수로 지정했음을 볼 수 있습니다. 이제 `car2`의 소유자 이름을 알려면 이렇게 속성에 접근합니다.
 
-<pre class="brush: js">car2.owner.name
-</pre>
+```js
+car2.owner.name
+```
 
-<p>이미 정의 된 객체에도 새로운 속성을 추가할 수 있다.</p>
+이미 정의된 객체에도 속성을 추가할 수 있습니다. 예를 들어,
 
-<pre class="brush: js">car1.color = "black";
-</pre>
+```js
+car1.color = 'black';
+```
 
-<p>위 문장은 속성 <code>color</code>를 car1 에 추가하고, 그 값으로는 "black"을 지정하고 있다. 그러나 이것은 다른 객체들에는 영향을 주지 않는다. 새 속성을 해당 타입의 모든 객체들에 다 추가하고 싶다면, 이 속성을 <code>car</code> 객체 타입의 정의에 추가해야 한다.</p>
+위의 코드는 `car1`에 `color` 속성을 추가한 후 값으로 `'black'`을 할당하고 있습니다. 그러나 이 방법은 다른 객체에 영향을 주지 않습니다. 같은 타입의 모든 객체에 값을 추가하려면 `Car` 객체 타입의 정의를 수정해야 합니다.
 
-<h3 id="Object.create_메서드_사용하기">Object.create 메서드 사용하기</h3>
+### `Object.create` 메서드 사용하기
 
-<p>객체는 <code>Object.create</code> 메서드를 이용해서 생성될 수 있다. 이 메서드는 사용할 프로토타입 객체를 사용자가 직접 선택할 수 있기 때문에 상당히 유용하다. (객체 생성시 생성자 함수가 없어도 가능하다). 이 메서드에 대한 더 자세한 정보는 {{jsxref("Object.create()")}} 를 참고하도록 하자.</p>
+{{jsxref("Object.create()")}} 메서드로 객체를 생성할 수도 있습니다. 이 메서드는 생성자 함수 정의 없이도 생성할 객체의 프로토타입을 지정할 수 있으므로 유용할 수도 있습니다.
 
-<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
+```js
+// 동물 속성과 메서드 캡슐화
+const Animal = {
+  type: '무척추동물', // 속성 기본 값
+  displayType: function() {  // 동물 종류를 출력할 메서드
     console.log(this.type);
   }
-}
+};
 
-// Create new animal type called animal1
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
+// animal1이라는 이름의 동물 타입 객체 생성
+const animal1 = Object.create(Animal);
+animal1.displayType(); // 출력: 무척추동물
 
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = "Fishes";
-fish.displayType(); // Output:Fishes</pre>
+// fish라는 이름의 동물 타입 객체 생성
+const fish = Object.create(Animal);
+fish.type = '물고기';
+fish.displayType(); // 출력: 물고기
+```
 
-<h2 id="상속">상속</h2>
+## 상속
 
-<p>JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 <code>prototype</code> 이라는 생성자 객체에서 찾을 수 있다.</p>
+JavaScript의 모든 객체는 적어도 하나의 다른 객체를 상속합니다. 상속 대상 객체를 프로토타입이라고 부르고, 상속한 속성은 생성자의 `prototype` 객체에서 찾을 수 있습니다. [상속과 프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)에서 자세히 알아보세요.
 
-<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>
+이 제한은 (위에서 `Car` 객체 타입으로 했던 것과 같이) 생성자 함수로 객체와 속성을 생성할 때, 그리고 (`myCar.color = 'red'`처럼) 각각의 속성을 명시적으로 정의할 때 모두 해당됩니다. 만약 객체의 속성을 `myCar[5] = '25 mpg'`처럼 인덱스로 정의했으면 이후에 참조할 때도 `myCar[5]`로 해야 합니다.
 
-<p><code>forms</code> 배열과 같이 HTML 로부터 얻어지는 객체들에는 이 규칙이 적용되지 않는다. 숫자를 이용하거나 (이 객체가 문서 상에 존재하는 순서에 따라) 또는 태그의 attribute 이름으로 참조가 가능하다. 예를 들면 HTML 문서에서 두 번째 <code>&lt;FORM&gt;</code> 태그가 "myForm" 이라는 값의 <code>NAME</code> attribute 를 가지고 있다면, 이 form을 <code>document.forms[1]</code> 또는 <code>document.forms["myForm"]</code> 또는 <code>document.myForm</code> 와 같이 접근할 수 있다.</p>
+다만 HTML 요소를 나타내는, `document.forms`와 같은 유사 배열 객체에는 예외로, 문서 상의 순서를 나타내는 인덱스로 접근할 수도 있고 (정의된 경우) 이름으로 접근할 수도 있습니다. 즉 문서의 두 번째 `<form>` 태그가 `name="myForm"` 특성을 가지고 있다면 `document.forms[1]`, `document.forms['myForm']`, `document.forms.myForm` 모두 사용할 수 있습니다.
 
-<h2 id="객체의_프로퍼티_정의">객체의 프로퍼티 정의</h2>
+## 객체 속성 정의하기
 
-<p><code>prototype</code> 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다. 다음 코드에서는 <code>car</code> 타입의 객체 전체에 <code>color</code> 프로퍼티를 추가한 후, <code>car1</code> 인스턴스의 <code>color</code> 프로퍼티에 값을 할당하는 것을 보여준다.</p>
+`prototype` 속성을 사용하면 이전에 정의된 객체 타입에도 속성을 추가할 수 있습니다. 이렇게 정의된 속성은 해당 타입의 모든 인스턴스가 공유합니다. 아래 코드는 모든 `Car` 타입 객체에 `color` 속성을 추가한 후, `car1` 객체에 그 속성의 값을 할당하는 모습입니다.
 
-<pre class="brush: js">Car.prototype.color = null;
+```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>
+[상속과 프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)에서 더 자세한 정보를 알아보세요.
 
-<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>
+메서드(method)는 객체와 연관된 함수, 다른 말로 하자면 객체 속성 중 함수인 것을 말합니다. 메서드는 다른 함수와 똑같이 정의하지만, 객체 속성에 할당한다는 점이 다릅니다. [메서드 정의](/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions)에서 더 자세한 정보를 알아보세요. 메서드의 예시는 다음과 같습니다.
 
-<pre class="brush: js">objectName.methodname = function_name;
+```js
+objectName.methodName = functionName;
 
-var myObj = {
+const myObj = {
   myMethod: function(params) {
-    // ...do something
+    // 뭔가 하기...
+  }
+
+  // 이렇게도  동작해요
+  myOtherMethod(params) {
+    // 뭔가 다른거 하기...
   }
 };
-</pre>
+```
 
-<p>첫번째 줄은 이미 존재하는 <code>objectName</code>이라는 객체에 <code>methodname</code>이라는 이름의 메소드를 추가하는 것이다. <code>function_name</code> 은 메소드로 사용될 함수의 이름이다. 두번째 줄부터는 객체를 정의할 때 메소드를 같이 정의하는 예이다.</p>
+`objectName`은 이미 존재하는 객체, `methodName`은 할당하려는 메서드, `functionname`은 함수의 이름입니다.
 
-<p>그러고 나면 다음과 같이 해당 객체의 문맥(context)에서 메소드를 호출할 수 있다.</p>
+객체의 맥락으로 메서드를 호출하려면 다음과 같이 사용하세요.
 
-<pre class="brush: js">object.methodname(params);
-</pre>
+```js
+object.methodName(params);
+```
 
-<p>객체 생성자 함수에 메소드 정의를 포함시킴으로써 해당 객체 타입의 메소드를 정의할 수 있다. 한 예로 이전에 정의한 car 객체의 프로퍼티를 형식에 맞춰 출력하는 함수를 정의할 수 있는데, 다음과 같다.</p>
+객체 생성자 함수에 메서드 정의를 포함하면 메서드 타입에 메서드를 정의할 수 있습니다. 앞에서 정의했던 `Car` 객체의 속성을 정리해서 출력하는 함수를 정의해봅시다.
 
-<pre class="brush: js">function displayCar() {
-  var result = "A Beautiful " + this.year + " " + this.make
-    + " " + this.model;
-  pretty_print(result);
+```js
+function displayCar() {
+  const result = `아름다운 ${this.year} ${this.make} ${this.model}`;
+  prettyPrint(result);
 }
-</pre>
+```
 
-<p>위에서 <code>pretty_print</code>는 수평 규칙과 문자열을 나타내 주는 함수이다. 여기서 사용한 <code>this</code>는 해당 메소드가 속한 객체를 가리킨다는 점을 기억하자.</p>
+`prettyPrint`는 가로 구분선을 그리고 문자열을 출력하는 함수라고 가정하겠습니다. `this`를 사용해서 메서드가 속한 객체를 참조하는 모습을 확인하세요.
 
-<p>아래와 같은 코드를 <code>car</code>객체의 정의에 추가함으로써 해당 함수를 <code>car</code>객체의 메소드로 만들 수 있다.</p>
+이제 이 함수가 `Car`의 메서드가 되려면 객체 정의에 아래의 코드를 추가하세요.
 
-<pre class="brush: js">this.displayCar = displayCar;
-</pre>
+```js
+this.displayCar = displayCar;
+```
 
-<p>따라서 <code>car객체의 전체 정의는 아래와 같이 됩니다.</code></p>
+따라서 `Car` 정의의 전체 내용은 다음과 같아집니다.
 
-<pre class="brush: js">function Car(make, model, year, owner) {
+```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>
+이제 각각의 객체에 대해 `displayCar` 메서드를 호출할 수 있습니다.
 
-<pre class="brush: js">car1.displayCar();
+```js
+car1.displayCar();
 car2.displayCar();
-</pre>
+```
 
-<h2 id="객체_참조를_위해_this_를_사용하기">객체 참조를 위해 <code>this</code> 를 사용하기</h2>
+## `this`로 객체 참조하기
 
-<p>자바스크립트는 특별한 키워드를 가지고 잇습니다. 바로 <code>this</code>라는 키워드이다. 메서드 내부에서 <code>this 키워드를 사용하게 되면 해당 메서드를 포함한 객체를 가리키게 된다. 예를 들어 특정 객체의 속성값의 상한과 하한 값의 범위에 있는지를 확인하는 validate라는 함수를 아래와 같이 작성한다고 했을 때, </code></p>
+JavaScript에는 [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this)라는 특별한 키워드가 있습니다. `this`를 사용하면 메서드 내에서 현재 객체를 참조할 수 있습니다. 예를 들어 `Manager`and `Intern` 두 객체를 가정해보겠습니다. 각각의 객체는 자신만의 `name`, `age`, `job` 속성을 가집니다. 아래의 `sayHi()` 함수에서 `this.name`에 접근하는 것에 주목하세요. 이 함수를 각각의 객체에 할당한 후 호출하면 `'안녕하세요, 제 이름은'`, 자신의 `name`, 그리고 `'입니다.'`로 구성된 문자열을 출력하게 됩니다.
 
-<pre class="brush: js">function validate(obj, lowval, hival) {
-  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
-    alert("Invalid Value!");
+```js
+const Manager = {
+  name: "John",
+  age: 27,
+  job: "소프트웨어 엔지니어"
+}
+const Intern = {
+  name: "Ben",
+  age: 21,
+  job: "소프트웨어 엔지니어 인턴"
 }
-</pre>
-
-<p><code>validate메서드를 각각의 form 요소들의 onchange 이벤트 핸들러에서 호출할 수 있다. 그 때, 다음 예제처럼 this 키워드를 사용해서 해당 form요소를 인자로 넘길 수 있다. </code></p>
-
-<pre class="brush: html">&lt;input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)"&gt;
-</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">&lt;form name="myForm"&gt;
-&lt;p&gt;&lt;label&gt;Form name:&lt;input type="text" name="text1" value="Beluga"&gt;&lt;/label&gt;
-&lt;p&gt;&lt;input name="button1" type="button" value="Show Form Name"
-     onclick="this.form.text1.value = this.form.name"&gt;
-&lt;/p&gt;
-&lt;/form&gt;</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&gt; var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
-[object Object]
-js&gt; o.a;
-7
-js&gt; o.b;
-8
-js&gt; o.c = 50;
-js&gt; 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>
+function sayHi() {
+  console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`)
+}
 
-<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>
+// 두 객체 모두에 sayHi 함수 추가
+Manager.sayHi = sayHi;
+Intern.sayHi = sayHi;
 
-<p>아래의 자바스크립트 쉡은 이미 정의된 Date 클래스의 모든 인스턴스들에 년도 속성을 추가 하기 위해 getter와 setter 메서드들이 Date 프로토타입을 확장하는 방법을 보여 줍니다. </p>
+Manager.sayHi(); // 안녕하세요, 제 이름은 John 입니다.'
+Intern.sayHi(); // 안녕하세요, 제 이름은 Ben 입니다.'
+```
 
-<p>아래의 구문들은 년도 속성 추가를 위한 getter와 setter메서드를 정의합니다:</p>
+위의 `this`는 자신이 속한 객체를 참조합니다. 이제 나이를 알려주는 문장을 콘솔에 기록하는 함수 `howOldAmI()`를 생성해볼 수 있을 것입니다.
 
-<pre class="brush: js">js&gt; var d = Date.prototype;
-js&gt; Object.defineProperty(d, "year", {
-    get: function() {return this.getFullYear() },
-    set: function(y) { this.setFullYear(y) }
-});
-</pre>
-
-<p>아래의 구문들은 Date객체에서 getter와 setter메서드를 사용하는 법을 보여 줍니다:</p>
+```js
+function howOldAmI() {
+  console.log(`저는 ${this.age}살입니다.`);
+}
+Manager.howOldAmI = howOldAmI;
+Manager.howOldAmI(); // 저는 27살입니다.
+```
 
-<pre class="brush: js">js&gt; var now = new Date;
-js&gt; print(now.year);
-2000
-js&gt; now.year = 2001;
-987617605170
-js&gt; print(now);
-Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+## 접근자와 설정자 정의하기
 
-</pre>
+[접근자](/ko/docs/Web/JavaScript/Reference/Functions/get)는 특정 속성의 값을 반환하는 메서드입니다. [설정자](/ko/docs/Web/JavaScript/Reference/Functions/set)는 특정 속성의 값을 설정하는 메서드입니다. 접근자와 설정자는 속성 추가를 지원하는 객체라면, 사전정의된 코어 객체와 사용자 정의 객체 모두에 추가할 수 있습니다.
 
-<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>
+[객체 초기자](#객체_초기자)를 사용해 접근자와 설정자를 정의하는 경우 필요한 것은, 접근자 메서드 이름 앞에 `get`, 설정자 메서드 이름 앞에 `set`을 붙이는 것 뿐입니다. 물론 모든 접근자 메서드는 아무 매개변수도 받지 않고, 설정자 메서드는 정확히 하나의 매개변수(설정할 값)만 받는다는 제한은 있습니다.
 
-<pre class="brush: js">var o = {
+```js
+const o = {
   a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
+  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>
+console.log(o.a); // 7
+console.log(o.b); // 8 <-- 이 시점에 get b() 메서드 실행
+o.c = 50;         //   <-- 이 시점에 set c(x) 메서드 실행
+console.log(o.a); // 25
+```
 
-<pre class="brush: js">var o = { a:0 }
+여기서 `o` 객체의 속성은 다음과 같습니다.
 
-Object.defineProperties(o, {
-    "b": { get: function () { return this.a + 1; } },
-    "c": { set: function (x) { this.a = x / 2; } }
-});
+- `o.a` — 숫자
+- `o.b` — `o.a`에 1을 더한 값을 반환하는 접근자
+- `o.c` — `o.c`에 설정한 값의 반을 `o.a`에 설정하는 설정자
 
-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>
+다만 객체 리터럴에서 "\[gs]et _property_()"을 사용해 정의한 접근자와 설정자의 함수 이름은 접근자와 설정자의 실제 이름이 아닙니다. `[gs]et propertyName(){ }` 구문이 생긴 모습 때문에 그렇게 보일 수는 있지만요.
 
-<p>당신의 프로그래밍 스타일과 현재 진행 중인 작업에 따라 getter and setter메서드들을 정의할 수 있는 두가지 양식 중 하나를 선택하여 사용할 수 있습니다. prototype을 정의 할때 object initializer를 사용했다면 앞으로도 대부분 첫번째 양식을 선택 하여 작성을 할 것입니다. 이 양식이 보다 간결하고 자연스럽기 때문입니다. 하지만 prototype 혹은 특정 객체를 작성하지 않고서 나중에 getter and setter 메서드를 추가하고자 한다면 두번째 양식만이 가능한 선택입니다.  두번째 양식은 아마도 자바스크립트의 동적 속성을 가장 잘 나타내고 있습니다. 하지만 코드 작성과 읽고 이해하는 부분에 어려움이 있습니다. </p>
+접근자와 설정자는 또한 객체 생성 이후에 {{jsxref("Object.defineProperties()")}} 메서드로 추가할 수 있습니다. 이 메서드의 첫 번째 매개변수는 접근자와 설정자를 추가할 객체고, 두 번째 매개변수는 속성 이름이 추가할 접근자/설정자 이름, 속성 값은 접근자/설정자를 정의하는 객체입니다. 다음은 바로 위 예제에서 정의한 것과 같은 접근자/생성자를 추가하는 코드입니다.
 
-<div class="note">
-<p>Firefox 3.0 이전 버전의 경우, getter and setter 메서드들은 DOM 요소들에는 지원되지 않습니다. 이전 버전의 Firefox에서는 아무런 에러 없이 작동하지 않을 것입니다. 이것에 대한 예외가 필요하다면, HTMLElement의 prototype<code>(HTMLElement.prototype.__define[SG]etter__)</code>을 변경하고 예외를 던지는 것이 하나의 방법입니다.</p>
+```js
+const o = { a: 0 };
 
-<p>Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. </p>
-</div>
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
 
-<h4 id="Defining_getters_and_setters_See_also">추가로 볼 것들 </h4>
+o.c = 10; // 설정자 실행, a 속성에 10 / 2 = 5 할당
+console.log(o.b); // 접근자 실행, a + 1 = 6 반환
+```
 
-<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>
+두 형태 중 선택할 형태는 여러분의 프로그래밍 스타일과 현재 해야 하는 작업에 달렸습니다. 프로토타입을 정의할 때 이미 객체 초기자를 사용 중이라면 아마 대부분 간결함과 자연스러움으로 인해 처음 형태를 선택하게 될 것입니다. 그러나 객체 프토토타입을 따로 작성하지 않은 등의 이유로 나중에 접근자와 설정자를 추가해야 할 필요가 있으면 두 번째가 유일한 방법입니다. 두 번째 방법은 JavaScript의 동적인 모습을 가장 잘 나타내는 표현 중 하나겠지만, 읽거나 이해하기 힘든 코드를 만들기도 합니다.
 
-<h2 id="프로퍼티의_삭제">프로퍼티의 삭제</h2>
+## 속성 삭제
 
-<p>상속 받지 않은 속성은 <code>delete</code> 연산자를 이용하여 제거 할 수 있다. 다음 코드는 어떻게 속성을 제거하는지 보여준다.</p>
+상속한 속성이 아닌 경우 [`delete`](/ko/docs/Web/JavaScript/Reference/Operators/delete) 연산자로 속성을 삭제할 수 있습니다.
 
-<pre class="brush: js">// 새 객체 myobj를 두 개의 속성 a, b 와 함께 생성
-var myobj = new Object;
+```js
+// a와 b 두 속성의 새로운 객체 생성
+const myobj = new Object();
 myobj.a = 5;
 myobj.b = 12;
 
-// 속성을 삭제. myobj 에는 속성 b 만 남게 됨.
+// a 속성을 제거해서 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>
+console.log ('a' in myobj); // 출력: false
+```
 
-<p>더 자세한 정보는 <code><a href="/ko/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>를 보면 된다.</p>
+## 객체 비교
 
-<h2 id="객체_간의_비교">객체 간의 비교</h2>
+JavaScript의 객체는 참조 타입입니다. 두 개의 객체는 서로 같은 속성을 갖더라도, 자신들끼리는 절대 같지 않으며 오직 자기 자신과의 비교만 참을 반환합니다.
 
-<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>
+```js
+// 두 개의 변수, 두 개의 같은 속성을 가진 서로 다른 객체
+const fruit = {name: '사과'};
+const fruitbear = {name: '사과'};
 
-<pre class="brush: js">// 속성은 같지만 서로 별개인 두 변수와 두 객체
-var fruit = {name: "apple"};
-var fruitbear = {name: "apple"};
+fruit == fruitbear; // false 반환
+fruit === fruitbear; // false 반환
+```
 
-fruit == fruitbear // false 리턴
-fruit === fruitbear // false 리턴</pre>
+```js
+// 두 개의 변수, 하나의 객체
+const fruit = {name: '사과'};
+const fruitbear = fruit;  // fruit 객체 참조를 fruitbear에 할당
 
-<pre class="brush: js">// 두 개의 변수이지만 하나의 객체
-var fruit = {name: "apple"};
-var fruitbear = fruit;  // fruit 객체 레퍼런스를 fruitbear 에 할당
+// fruit과 fruitbear가 같은 객체를 가리킴
+fruit == fruitbear; // true 반환
+fruit === fruitbear; // true 반환
 
-// here fruit and fruitbear are pointing to same object
-fruit == fruitbear // true 리턴
-fruit === fruitbear // true 리턴
-</pre>
+fruit.name = '포도';
+console.log(fruitbear); // 출력: { name: "사과" }가 아니라 { name: "포도" }
+```
 
-<p>비교 연산자에 대한 상세한 정보는 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Comparison operators</a>를 참고하기 바란다.</p>
+비교 연산에 대한 더 자세한 정보는 [동일 연산자](/ko/docs/Web/JavaScript/Reference/Operators#동일_연산자)에서 더 알아보세요.
 
-<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>
+- 더 깊게 들어가려면 [JavaScript 객체 모델의 세부 사항](/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model)을 읽어보세요.
+- 객체를 생성하는 다른 방법인 ECMAScript 2015 클래스에 대해 알아보려면 [JavaScript 클래스](/ko/docs/Web/JavaScript/Reference/Classes) 참고서를 방문하세요.
 
-<div>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div>
+{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/index.md b/files/ko/web/javascript/reference/global_objects/array/index.md
index 11b705304c..e5b7f7f218 100644
--- a/files/ko/web/javascript/reference/global_objects/array/index.md
+++ b/files/ko/web/javascript/reference/global_objects/array/index.md
@@ -3,94 +3,105 @@ title: Array
 slug: Web/JavaScript/Reference/Global_Objects/Array
 tags:
   - Array
+  - Class
   - Example
   - Global Objects
   - JavaScript
   - Reference
-translation_of: Web/JavaScript/Reference/Global_Objects/Array
 browser-compat: javascript.builtins.Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
 ---
-<div>{{JSRef}}</div>
+{{JSRef}}
 
-<p>JavaScript <strong><code>Array</code></strong> 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.</p>
+JavaScript **`Array`** 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.
 
-<h2 id="설명">설명</h2>
+## 설명
 
-<p>배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.</p>
+배열은 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖습니다. JavaScript 배열은 길이도, 각 요소의 자료형도 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있고 데이터를 연속적이지 않은 곳에 저장할 수 있으므로, JavaScript 배열은 밀집성을 보장하지 않습니다. 보통 이런 성질들은 편리하지만, 사용하려는 목적에 맞지 않으면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.
 
-<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>
+배열은 ([연관 배열](https://ko.wikipedia.org/wiki/연관_배열)과 달리) 요소 인덱스로 문자열을 사용할 수 없으며 무조건 정수만 허용합니다. [대괄호 구문](/ko/docs/Web/JavaScript/Guide/Working_with_Objects#객체와_속성) 또는 [속성 접근자](/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors)를 사용해 정수가 아닌 키에 접근할 경우 배열의 요소가 아니라 배열의 [객체 속성 컬렉션](/ko/docs/Web/JavaScript/Data_structures#속성)에 연결된 변수를 바라보게 됩니다. [순회 및 변형 작업](/ko/docs/Web/JavaScript/Guide/Indexed_collections#배열_객체의_메서드) 또한 이런 속성에 적용할 수 없습니다.
 
-<h3 id="자주_사용하는_연산">자주 사용하는 연산</h3>
+### 자주 사용하는 연산
 
-<h4 id="배열_만들기">배열 만들기</h4>
+**배열 만들기**
 
-<pre class="brush: js">let fruits = ['사과', '바나나']
+```js
+let fruits = ['사과', '바나나']
 
 console.log(fruits.length)
 // 2
-</pre>
+```
 
-<h4 id="인덱스로_배열의_항목에_접근하기">인덱스로 배열의 항목에 접근하기</h4>
+**인덱스로 배열의 항목에 접근하기**
 
-<pre class="brush: js">let first = fruits[0]
+```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) {
+```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('오렌지')
+```js
+let newLength = fruits.push('오렌지')
 // ["사과", "바나나", "오렌지"]
-</pre>
+```
 
-<h4 id="배열_끝에서부터_항목_제거하기">배열 끝에서부터 항목 제거하기</h4>
+**배열 끝에서부터 항목 제거하기**
 
-<pre class="brush: js">let last = fruits.pop() // 끝에있던 '오렌지'를 제거
+```js
+let last = fruits.pop() // 끝에있던 '오렌지'를 제거
 // ["사과", "바나나"]
-</pre>
+```
 
-<h4 id="배열_앞에서부터_항목_제거하기">배열 앞에서부터 항목 제거하기</h4>
+**배열 앞에서부터 항목 제거하기**
 
-<pre class="brush: js">let first = fruits.shift() // 제일 앞의 '사과'를 제거
+```js
+let first = fruits.shift() // 제일 앞의 '사과'를 제거
 // ["바나나"]
-</pre>
+```
 
-<h4 id="배열_앞에_항목_추가하기">배열 앞에 항목 추가하기</h4>
+**배열 앞에 항목 추가하기**
 
-<pre class="brush: js">let newLength = fruits.unshift('딸기') // 앞에 추가
+```js
+let newLength = fruits.unshift('딸기') // 앞에 추가
 // ["딸기", "바나나"]
-</pre>
+```
 
-<h4 id="배열_안_항목의_인덱스_찾기">배열 안 항목의 인덱스 찾기</h4>
+**배열 안 항목의 인덱스 찾기**
 
-<pre class="brush: js">fruits.push('망고')
+```js
+fruits.push('망고')
 // ["딸기", "바나나", "망고"]
 
 let pos = fruits.indexOf("바나나")
 // 1
-</pre>
+```
 
-<h4 id="인덱스_위치에_있는_항목_제거하기">인덱스 위치에 있는 항목 제거하기</h4>
+**인덱스 위치에 있는 항목 제거하기**
 
-<pre class="brush: js">let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
+```js
+let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
 
 // ["딸기", "망고"]
-</pre>
+```
 
-<h4 id="인덱스_위치에서부터_여러개의_항목_제거하기">인덱스 위치에서부터 여러개의 항목 제거하기</h4>
+**인덱스 위치에서부터 여러개의 항목 제거하기**
 
-<pre class="brush: js">let vegetables = ['양배추', '순무', '무', '당근']
+```js
+let vegetables = ['양배추', '순무', '무', '당근']
 console.log(vegetables)
 // ["양배추", "순무", "무", "당근"]
 
@@ -106,300 +117,315 @@ console.log(vegetables)
 
 console.log(removedItems)
 // ["순무", "무"]
-</pre>
+```
 
-<h4 id="배열_복사하기">배열 복사하기</h4>
+**배열 복사하기**
 
-<pre class="brush: js">let shallowCopy = fruits.slice() // 사본을 만드는 방법
+```js
+let shallowCopySpread = [...fruits]
 // ["딸기", "망고"]
-</pre>
+```
+
+위 코드는 [전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax)을 사용해 배열의 얕은 복사를 만드는 방법입니다. 배열을 복사하는 다른 방법은 아래의 [배열 복사하기](#배열_복사하기)에서 논의합니다.
 
-<h3 id="배열_요소에_접근하기">배열 요소에 접근하기</h3>
+### 배열 요소에 접근하기
 
-<p>JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.</p>
+JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.
 
-<p>잘못된 인덱스를 사용하면 <code>undefined</code>를 반환합니다.</p>
+잘못된 인덱스를 사용하면 `undefined`를 반환합니다.
 
-<pre class="brush: js">let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
+```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>
+`toString`이 속성인 것과 마찬가지로 (정확히 하자면, `toString()`은 메서드입니다) 배열의 요소도 속성입니다. 하지만 배열 요소에 아래 코드처럼 접근하려고 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.
 
-<pre class="brush: js">console.log(arr.0) // 구문 오류
-</pre>
+```js
+console.log(arr.0) // 구문 오류
+```
 
-<p>이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.</p>
+이 현상은 JavaScript 배열과 그 속성에 어떤 특별한 점이 있어서 그런 것이 아닙니다. 모든 JavaScript 속성은 이름이 숫자로 시작할 경우 마침표 표기법으로 접근할 수 없고, 대괄호 표기법을 사용해야 합니다.
 
-<p>예를 들어 <code>'3d'</code>라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.</p>
+예를 들면, 어떤 객체에 `'3d'`라는 이름의 속성이 있다면, 이 속성에 접근할 땐 대괄호 표기법을 사용해야만 합니다.
 
-<pre class="brush: js">let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+```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')     // 구문 오류
+```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>
+`3d` 예시에서 `'3d'`를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 `years[2]` 대신에 `years['2']`를 사용하듯 따옴표로 둘러쌀 수 있습니다. 그러나 굳이 그럴 필요는 없습니다.
 
-<p><code>years[2]</code>의 2는 JavaScript 엔진이 암시적인 <code>toString</code> 변환을 사용해 문자열로 변환합니다. 그 결과로서 <code>'2'</code>와 <code>'02'</code>는 <code>years</code> 객체에서 서로 다른 칸을 가리키며, 다음 코드는 <code>true</code>가 될 수 있습니다.</p>
+`years[2]`의 `2`는 JavaScript 엔진이 암시적인 `toString` 변환을 사용해 문자열로 변환합니다. 그 결과로서 `'2'`와 `'02'`는 `years` 객체에서 서로 다른 칸을 가리키며, 다음 코드는 `true`가 될 수 있습니다.
 
-<pre class="brush: js">console.log(years['2'] != years['02']);
-</pre>
+```js
+console.log(years['2'] != years['02']);
+```
 
-<h3 id="length_와_숫자형_속성의_관계"><code>length</code> 와 숫자형 속성의 관계</h3>
+### 배열 길이와 숫자형 속성의 관계
 
-<p>JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.</p>
+JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.
 
-<p>몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.</p>
+몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참고합니다.
 
-<p>다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.</p>
+다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성을 바꾸는 결과를 낳습니다.
 
-<pre class="brush: js">const fruits = []
-fruits.push('banana', 'apple', 'peach')
+```js
+const fruits = []
+fruits.push('바나나', '사과', '복숭아')
 
 console.log(fruits.length) // 3
-</pre>
+```
 
-<p>JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.</p>
+배열 인덱스로 유효한 속성을 JavaScript 배열에 설정할 때, 그 인덱스가 현재 배열의 경계 바깥에 있는 경우, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.
 
-<pre class="brush: js">fruits[5] = 'mango'
-console.log(fruits[5])           // 'mango'
+```js
+fruits[5] = 'mango'
+console.log(fruits[5])           // '망고'
 console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
 console.log(fruits.length)       // 6
-</pre>
+```
 
-<p>{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.</p>
+{{jsxref("Array.length", "length")}}를 직접 늘려도 요소에 변화는 없습니다.
 
-<pre class="brush: js">fruits.length = 10;
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 10
-</pre>
+```js
+fruits.length = 10
+console.log(fruits)              // ['바나나', '사과', '복숭아', 비어 있음 x 2, '망고', 비어 있음 x 4]
+console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
+console.log(fruits.length)       // 10
+console.log(fruits[8])           // undefined
+```
 
-<p>하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.</p>
+하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소가 지워집니다.
 
-<pre class="brush: js">fruits.length = 2
+```js
+fruits.length = 2
 console.log(Object.keys(fruits)) // ['0', '1']
 console.log(fruits.length)       // 2
-</pre>
+```
+
+{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.
 
-<p>{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.</p>
+### 정규표현식 일치 결과를 이용한 배열 생성
 
-<h3 id="매치_결과를_이용한_배열_생성">매치 결과를 이용한 배열 생성</h3>
+{{jsxref("RegExp")}}와 문자열 사이의 일치 결과는 JavaScript 배열을 반환합니다. 이 배열은 일치 결과에 대한 정보를 포함하는 속성과 요소가 담겨있습니다. {{jsxref("RegExp.exec()")}}, {{jsxref("String.match()")}}의 반환 값에서 이런 배열을 볼 수 있습니다.
 
-<p>정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.</p>
+다음 예제와 표에서 배열의 속성과 요소에 대한 설명을 확인하세요.
 
-<pre class="brush: js">// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
-// 일치한 b와 다음 d를 기억하십시오.
-// 대소문자 구분은 무시됩니다.
+```js
+// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 함
+// 일치한 b와 다음 d를 기억할 것
+// 대소문자 구분 없음
 
-var myRe = /d(b+)(d)/i;
-var myArray = myRe.exec('cdbBdbsbz');
-</pre>
+const myRe = /d(b+)(d)/i
+const myArray = myRe.exec('cdbBdbsbz')
+```
 
-<p>매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:</p>
+반환된 `myArray` 배열의 속성과 요소는 다음과 같습니다.
 
 <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>
+  <tbody>
+    <tr>
+      <th class="header" scope="col">속성/요소</th>
+      <th class="header" scope="col">설명</th>
+      <th class="header" scope="col">예시</th>
+    </tr>
+    <tr>
+      <td><code>input</code><br />{{ReadOnlyInline}}</td>
+      <td>정규표현식 일치 대상이 된 원본 문자열입니다.</td>
+      <td><code>"cdbBdbsbz"</code></td>
+    </tr>
+    <tr>
+      <td><code>index</code><br />{{ReadOnlyInline}}</td>
+      <td>일치가 위치한 원본 문자열에서의 인덱스입니다.</td>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <td><code>[0]</code><br />{{ReadOnlyInline}}</td>
+      <td>마지막으로 일치한 텍스트입니다.</td>
+      <td><code>"dbBd"</code></td>
+    </tr>
+    <tr>
+      <td><code>[1], ...[n]</code><br />{{ReadOnlyInline}}</td>
+      <td>
+        존재할 경우, 정규표현식에서 괄호로 지정한 부분문자열 일치에 대응하는 요소입니다. 가능한 수의 제한은 없습니다.
+      </td>
+      <td>
+        <code>[1]: "bB"<br />[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 = []
+### 배열 복사하기
+
+배열을 새로운 변수에 할당해도 배열이 복사되지는 않습니다. 새로운 변수에는 원본 배열을 가리키는 참조만 할당되며, 원본 배열의 값을 바꾸면 새 변수에서도 그 변경점이 반영됩니다.
+
+```js
+let array1 = [1,2,3]
+let array1Reference = array1;
+array1[1] = 9;
+console.log(array1Reference);
+// Array [1,9,3] - array1의 변화가 array1Reference에도 나타남 - 복사본이 아님
+```
+
+배열의 복사본을 만들기 위해서는 새 배열을 위한 변수를 생성하고, 원본 배열 각각의 원시 요소에 대해서도 새로운 변수를 생성해야 합니다. (변수를 원시 값으로 초기화하면 참조를 할당하지 않고 값을 복사합니다.) JavaScript에서는 이를 위해 다음과 같은 방법을 사용할 수 있습니다.
+
+[전개 구문](/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax):
+
+```js
+let shallowCopySpread = [...fruits]
+// ["Strawberry", "Mango"]
+```
+
+{{jsxref("Array.slice()")}}:
+
+```js
+let shallowCopySlice = fruits.slice()
+// ["Strawberry", "Mango"]
+```
+
+{{jsxref("Array.from()")}}:
+
+```js
+let shallowCopyFrom = Array.from(fruits)
+// ["Strawberry", "Mango"]
+```
+
+위의 세 코드는 모두 '얕은 복사'를 생성합니다. 얕은 복사란 배열의 최상위 요소가 원시 값일 경우 복사하지만, 중첩 배열이나 객체 요소일 경우에는 원본 배열의 요소를 참조하는 것입니다게 됩니다.
+
+모든 요소의 '깊은 복사', 즉 중첩 배열과 객체 요소 또한 동일한 형태로 복사하는 방법 중 하나는 {{jsxref("JSON.stringify()")}}를 사용해 배열을 JSON 문자열로 변환한 후, {{jsxref("JSON.parse()")}}로 다시 배열을 구성하는 것입니다.
+
+```js
+let deepCopy = JSON.parse(JSON.stringify(fruits));
+// ["Strawberry", "Mango"]
+```
+
+## 생성자
+
+- {{jsxref("Array.Array", "Array()")}}
+  - : `Array` 객체를 생성합니다.
+
+## 정적 속성
+
+- {{jsxref("Array.@@species", "get Array[@@species]")}}
+  - : 파생 객체를 생성하는데 사용하는 생성자 함수입니다.
+
+## 정적 메서드
+
+- {{jsxref("Array.from()")}}
+  - : 유사 배열 또는 반복 가능한 객체로부터 새로운 `Array` 인스턴스를 생성합니다.
+- {{jsxref("Array.isArray()")}}
+  - : 만약 매개변수가 배열이면 참을, 아니면 거짓을 반환합니다.
+- {{jsxref("Array.of()")}}
+  - : 매개변수의 수와 자료형에 제한 없이, 지정한 값을 사용해 새 `Array` 인스턴스를 생성합니다.
+
+## 인스턴스 속성
+
+- {{jsxref("Array.prototype.length")}}
+  - : 배열의 원소 수를 나타냅니다.
+- {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+  - : {{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.
+
+## 인스턴스 메서드
+
+- {{jsxref("Array.prototype.at()")}} {{Experimental_Inline}}
+  - : 주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.
+- {{jsxref("Array.prototype.concat()")}}
+  - : 배열과 배열/값 매개변수를 이어붙인 새로운 배열을 반환합니다.
+- {{jsxref("Array.prototype.copyWithin()")}}
+  - : 배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.
+- {{jsxref("Array.prototype.entries()")}}
+  - : 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 배열 반복자 객체를 반환합니다.
+- {{jsxref("Array.prototype.every()")}}
+  - : 배열의 모든 요소가 주어진 판별 함수를 만족할 경우 `true`를 반환합니다.
+- {{jsxref("Array.prototype.fill()")}}
+  - : 배열을 시작 인덱스부터 끝 인덱스까지의 지정한 값으로 채웁니다.
+- {{jsxref("Array.prototype.filter()")}}
+  - : 지정한 필터 함수의 반환 결과가 `true`인 요소만 모아서 새로운 배열을 반환합니다.
+- {{jsxref("Array.prototype.find()")}}
+  - : 주어진 판별 함수를 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 `undefined`를 반환합니다.
+- {{jsxref("Array.prototype.findIndex()")}}
+  - : 주어진 판별 함수를 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 `-1`를 반환합니다.
+- {{jsxref("Array.prototype.flat()")}}
+  - : 배열 내의 모든 중첩 배열을 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 반환합니다.
+- {{jsxref("Array.prototype.flatMap()")}}
+  - : 배열의 모든 요소 각각에 대해 주어진 콜백 함수를 호출하고, 그 반환 값을 모아 새로운 배열을 생성한 후, 모든 중첩 배열을 이어붙여 평탄화해 반환합니다.
+- {{jsxref("Array.prototype.forEach()")}}
+  - : 배열의 각각의 요소에 대해 함수를 호출합니다.
+- {{jsxref("Array.prototype.includes()")}}
+  - : 배열이 주어진 값을 포함하는지 판별해 `true` 또는 `false`를 반환합니다.
+- {{jsxref("Array.prototype.indexOf()")}}
+  - : 배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 `-1`을 반환합니다.
+- {{jsxref("Array.prototype.join()")}}
+  - : 배열의 모든 요소를 문자열로 합칩니다.
+- {{jsxref("Array.prototype.keys()")}}
+  - : 배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.
+- {{jsxref("Array.prototype.lastIndexOf()")}}
+  - : 배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 `-1`을 반환합니다.
+- {{jsxref("Array.prototype.map()")}}
+  - : 배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환 값을 모은 새로운 배열을 반환합니다.
+- {{jsxref("Array.prototype.pop()")}}
+  - : 배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.
+- {{jsxref("Array.prototype.push()")}}
+  - : 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 변경된 `length`를 반환합니다.
+- {{jsxref("Array.prototype.reduce()")}}
+  - : 주어진 콜백 함수를 가산기와 요소 각각에 대해 (왼쪽에서 오른쪽으로) 호출하여 하나의 값으로 줄인 결과를 반환합니다.
+- {{jsxref("Array.prototype.reduceRight()")}}
+  - : 주어진 콜백 함수를 가산기와 요소 각각에 대해 (오른쪽에서 왼쪽으로) 호출하여 하나의 값으로 줄인 결과를 반환합니다.
+- {{jsxref("Array.prototype.reverse()")}}
+  - : 배열의 요소 순서를 뒤집습니다. 즉 첫 번째 요소가 마지막이 되고 마지막이 첫 번째가 됩니다.
+- {{jsxref("Array.prototype.shift()")}}
+  - : 배열에서 첫 번째 요소를 삭제하고, 그 요소를 반환합니다.
+- {{jsxref("Array.prototype.slice()")}}
+  - : 배열의 일부를 추출한 새 배열을 반환합니다.
+- {{jsxref("Array.prototype.some()")}}
+  - : 배열의 어떤 요소가 주어진 판별 함수를 만족할 경우 `true`를 반환합니다.
+- {{jsxref("Array.prototype.sort()")}}
+  - : 배열의 요소를 정렬하고 그 배열을 반환합니다.
+- {{jsxref("Array.prototype.splice()")}}
+  - : 배열에서 요소를 추가하거나 삭제합니다.
+- {{jsxref("Array.prototype.toLocaleString()")}}
+  - : 배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
+- {{jsxref("Array.prototype.toString()")}}
+  - : 배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
+- {{jsxref("Array.prototype.unshift()")}}
+  - : 배열의 앞에 하나 이상의 요소를 추가하고, 배열의 변경된 `length`를 반환합니다.
+- {{jsxref("Array.prototype.values()")}}
+  - : 배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
+- {{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+  - : 배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
+
+## 예제
+
+### 배열 생성
+
+아래 예제에서는 길이 0의 배열 `msgArray` 을 생성하고, `msgArray[0]` 와 `msgArray[99]` 에 값을 할당하여 배열의 길이를 100으로 변경합니다.
+
+```js
+let msgArray = []
 msgArray[0] = 'Hello'
 msgArray[99] = 'world'
 
 if (msgArray.length === 100) {
-  console.log('The length is 100.')
-}</pre>
+  console.log('길이가 100입니다.')
+}
+```
 
-<h3 id="2차원_배열_생성">2차원 배열 생성</h3>
+### 2차원 배열 생성
 
-<p>아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.</p>
+아래의 예제는 2차원 문자열 배열로 체스판을 생성합니다. 첫 번째 이동은 `board[6][4]`의 `'p'`를 `board[4][4]`로 복사하여 이루어집니다. 그 후 이전 위치 `[6][4]`는 빈 공간으로 만듭니다.
 
-<pre class="brush: js">let board = [
+```js
+let board = [
   ['R','N','B','Q','K','B','N','R'],
   ['P','P','P','P','P','P','P','P'],
   [' ',' ',' ',' ',' ',' ',' ',' '],
@@ -411,14 +437,16 @@ if (msgArray.length === 100) {
 
 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>
+console.log(board.join('\n'))
+```
 
-<p>결과는 다음과 같습니다.</p>
+결과는 다음과 같습니다.
 
-<pre class="eval">R,N,B,Q,K,B,N,R
+```
+R,N,B,Q,K,B,N,R
 P,P,P,P,P,P,P,P
  , , , , , , ,
  , , , , , , ,
@@ -435,49 +463,49 @@ 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 &lt; 10; x++){
+```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>
+console.table(values)
+```
+
+결과는 다음과 같습니다.
+
+```
+// 첫 번째 열은 인덱스
+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
+```
+
+## 명세
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">브라우저 호환성</h2>
+## 브라우저 호환성
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<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>
+- JavaScript 안내서:
+  - [객체 속성 인덱싱](/ko/docs/Web/JavaScript/Guide/Working_with_Objects#객체_속성_인덱싱)
+  - [인덱스 컬렉션: `Array` 객체](/ko/docs/Web/JavaScript/Guide/Indexed_collections#array_객체)
+- [형식화 배열](/ko/docs/Web/JavaScript/Typed_arrays)
+- [RangeError: invalid array length](/ko/docs/Web/JavaScript/Reference/Errors/Invalid_array_length)