Generator.prototype.next() - JavaScript

Generator.prototype.next()
==========================

**`next()`** 메서드는 `done`과 `value` 속성을 가지는 객체를 반환 합니다. `next` 메서드에 매개변수를 제공하여 값을 제너레이터로 보낼 수도 있습니다.

구문
--

```js
generatorObject.next(value);
```

### 매개변수

`value`

제너레이터로 보낼 값입니다.

값은 `yield` 식의 결과로 할당됩니다. 예를 들어 `variable = yield 식`에서 `.next()` 함수에 전달된 값은 `variable`에 할당됩니다.

### 반환 값

두 개의 속성을 가진 `객체`이고, 이 속성은 다음과 같습니다.

`done` (boolean)

반복자가 반복 시퀀스의 끝을 지난 경우 `true`입니다. 이 경우 `value`는 선택적으로 반복자의 *반환 값*을 지정합니다.

반복자가 시퀀스에서 다음 값을 생성할 수 있는 경우 `false`입니다. 이는 `done` 속성을 완전히 지정하지 않는 것과 같습니다.

`value`

제너레이터가 생성하거나 반환한 모든 JavaScript 값입니다.

예제
--

### next() 사용하기

다음 예제에서는 간단한 제너레이터와 `next` 메서드가 반환하는 객체를 보여 줍니다.

```js
function\* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const g = gen(); // "Generator { }"
g.next(); // "Object { value: 1, done: false }"
g.next(); // "Object { value: 2, done: false }"
g.next(); // "Object { value: 3, done: false }"
g.next(); // "Object { value: undefined, done: true }"
```

### 리스트와 함께 next() 사용하기

이 예제에서 `getPage`는 리스트를 받아 `pageSize` 크기의 청크로 "페이지 나누기"를 수행합니다. `next`를 호출할 때마다 그러한 청크가 하나 생성됩니다.

```js
function\* getPage(pageSize = 1, list) {
  let output = [];
  let index = 0;

  while (index < list.length) {
    output = [];
    for (let i = index; i < index + pageSize; i++) {
      if (list[i]) {
        output.push(list[i]);
      }
    }

    yield output;
    index += pageSize;
  }
}

list = [1, 2, 3, 4, 5, 6, 7, 8];
let page = getPage(3, list); // Generator { }

page.next(); // Object {value: (3) [1, 2, 3], done: false}
page.next(); // Object {value: (3) [4, 5, 6], done: false}
page.next(); // Object {value: (2) [7, 8], done: false}
page.next(); // Object {value: undefined, done: true}
```

### 제너레이터에 값 보내기

이 예제에서는 값과 함께 `next`를 호출합니다.

**참고:** 제너레이터가 처음에는 아무것도 생성하지 않았기 때문에 첫 번째 호출에서 기록되는 것은 없습니다.

```js
function\* gen() {
  while (true) {
    let value = yield null;
    console.log(value);
  }
}

const g = gen();
g.next(1);
// "{ value: null, done: false }"
g.next(2);
// 2
// "{ value: null, done: false }"
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-generator.prototype.next |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `function*`
* 반복자와 제너레이터


ReferenceError() 생성자 - JavaScript

ReferenceError() 생성자
====================

**`ReferenceError`** 객체는 존재하지 않는 변수를 참조할 때의 에러를 의미합니다.

구문
--

```js
new ReferenceError()
new ReferenceError(message)
new ReferenceError(message, options)
new ReferenceError(message, fileName)
new ReferenceError(message, fileName, lineNumber)
ReferenceError()
ReferenceError(message)
ReferenceError(message, options)
ReferenceError(message, fileName)
ReferenceError(message, fileName, lineNumber)
```

>
> **Note:** `ReferenceError()` 는 `new`와 같이 호출될 때도 있고 아닐 때도 있습니다. 두 방법 모두 새로운 `ReferenceError` 인스턴스를 생성합니다.
>
>
>

### 매개변수

`message` Optional

이 오류에 대한 사람이 읽을 수 있는 설명.

`options` Optional

아래 속성을 가진 객체

`cause` Optional

오류의 특정 원인을 나타내는 속성을 가리킵니다. 보다 구체적이거나 유용한 오류 메시지와 함께 오류를 처리했다가 다시 발생했을 때 이 속성을 사용하여 원래 오류를 전달할 수 있습니다.

`fileName` Optional
비표준

이 예외의 원인이 된 코드가 있는 파일 이름

`lineNumber` Optional
비표준

이 예외의 원인이 코드의 줄 수

예제
--

### ReferenceError 처리하기

```js
try {
  let a = undefinedVariable;
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message); // "undefinedVariable is not defined"
  console.log(e.name); // "ReferenceError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 6
  console.log(e.stack); // "@Scratchpad/2:2:7\n"
}
```

### ReferenceError 생성하기

```js
try {
  throw new ReferenceError("Hello", "someFile.js", 10);
} catch (e) {
  console.log(e instanceof ReferenceError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "ReferenceError"
  console.log(e.fileName); // "someFile.js"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
  console.log(e.stack); // "@Scratchpad/2:2:9\n"
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-nativeerror-constructors |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Error`


Array.prototype.lastIndexOf() - JavaScript

Array.prototype.lastIndexOf()
=============================

`Array` 인스턴스의 `lastIndexOf()` 메서드는 배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나, 해당 요소가 없으면 `-1`을 반환합니다. 배열은 `fromIndex`에서 시작하여 역방향으로 검색됩니다.

시도해보기
-----

구문
--

```js
lastIndexOf(searchElement)
lastIndexOf(searchElement, fromIndex)
```

### 매개변수

`searchElement`

배열에서 찾을 요소.

`fromIndex` Optional

역방향 검색을 시작하는 0부터 시작하는 인덱스로, 정수로 변환됩니다.

* 음수 인덱스는 배열 끝에서부터 다시 계산됩니다. 만약 `fromIndex < 0` 이라면, `fromIndex + array.length`가 사용됩니다.
* `fromIndex < -array.length`인 경우, 배열을 검색하지 않고 `-1`을 반환합니다. 개념적으로 배열이 시작되기 전 존재하지 않는 위치에서 시작해 그곳에서부터 거꾸로 가는 것이라고 생각하면 됩니다. 도중에 배열 요소가 없으므로 `searchElement`를 찾을 수 없습니다.
* `fromIndex >= array.length` 또는 `fromIndex`를 생략하면, `array.length - 1`이 사용되어 전체 배열을 검색하게 됩니다. 개념적으로 배열 끝 너머 존재하지 않는 위치에서 시작하고 그곳에서부터 거꾸로 가는 것이라고 생각하면 됩니다. 결국 배열의 실제 끝 위치에 도달하고, 이 지점에서 실제 배열 요소를 통해 역순 검색을 시작합니다.

### 반환 값

배열에 있는 `searchElement`의 마지막 인덱스입니다. 찾을 수 없으면 `-1`입니다.

설명
--

`lastIndexOf()` 메서드는 엄격한 동등성 (en-US)(`===` 연산자에서 사용하는 것과 동일한 알고리즘)을 사용하여 `searchElement`를 배열 요소와 비교합니다. 두 개의 `NaN` 값은 동일한 것으로 비교되지 않으므로 `searchElement`가 `NaN`인 경우, `lastIndexOf()`는 항상 `-1`을 반환합니다.

예제
--

### lastIndexOf() 사용하기

다음 예제에서는 `lastIndexOf()`를 사용하여 배열에서 값을 찾습니다.

```js
const numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2); // 3
numbers.lastIndexOf(7); // -1
numbers.lastIndexOf(2, 3); // 3
numbers.lastIndexOf(2, 2); // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3
```

`NaN`을 찾기위해 `lastIndexOf()`을 사용할 수 없습니다.

```js
const array = [NaN];
array.lastIndexOf(NaN); // -1
```

### 요소의 모든 위치 찾기

다음 예제에서는 `lastIndexOf`를 사용하여 주어진 배열에 있는 요소의 모든 인덱스를 찾고, 발견된 요소를 다른 배열에 추가하기 위해 `push()`를 사용합니다.

```js
const indices = [];
const array = ["a", "b", "a", "c", "a", "d"];
const element = "a";
let idx = array.lastIndexOf(element);
while (idx !== -1) {
  indices.push(idx);
  idx = idx > 0 ? array.lastIndexOf(element, idx - 1) : -1;
}

console.log(indices);
// [4, 2, 0]
```

여기서는 `idx === 0`인 경우를 별도로 처리해야 합니다. 요소가 배열의 첫 번째 요소인 경우 `fromIndex` 매개변수에 관계없이 항상 검색되기 때문입니다. 이는 `indexOf()` 메서드와 다릅니다.

### 희소 배열에 lastIndexOf() 사용하기

배열의 빈 슬롯을 검색하기 위해 `lastIndexOf()`를 사용할 수 없습니다.

```js
console.log([1, , 3].lastIndexOf(undefined)); // -1
```

### 배열이 아닌 객체에 lastIndexOf() 사용하기

`lastIndexOf()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음이 아닌 정수인 각 속성에 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 2,
  3: 5, // length가 3 이므로 lastIndexOf()에서 무시됩니다.
};
console.log(Array.prototype.lastIndexOf.call(arrayLike, 2));
// 2
console.log(Array.prototype.lastIndexOf.call(arrayLike, 5));
// -1
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.lastindexof |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.lastIndexOf` 폴리필
* 인덱스 기반 컬렉션 안내서
* `Array`
* `Array.prototype.findIndex()`
* `Array.prototype.findLastIndex()`
* `Array.prototype.indexOf()`
* `TypedArray.prototype.lastIndexOf()` (en-US)
* `String.prototype.lastIndexOf()`


Array.prototype.reduce() - JavaScript

Array.prototype.reduce()
========================

**`reduce()`** 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

시도해보기
-----

**리듀서** 함수는 네 개의 인자를 가집니다.

1. 누산기 (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

구문
--

```js
    arr.reduce(callback[, initialValue])
```

### 매개변수

`callback`

 배열의 각 요소에 대해 실행할 함수.
 다음 네 가지 인수를 받습니다.

`accumulator`

누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 `initialValue`를 제공한 경우에는 `initialValue`의 값입니다.

`currentValue`

처리할 현재 요소.

`currentIndex` Optional

처리할 현재 요소의 인덱스. `initialValue`를 제공한 경우 0, 아니면 1부터 시작합니다.

`array` Optional

`reduce()`를 호출한 배열.

`initialValue` Optional

`callback`의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 `reduce()`를 호출하면 오류가 발생합니다.

### 반환 값

누적 계산의 결과 값.

설명
--

`reduce()`는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 `callback` 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:

* `accumulator`
* `currentValue`
* `currentIndex`
* `array`

콜백의 최초 호출 때 `accumulator`와 `currentValue`는 다음 두 가지 값 중 하나를 가질 수 있습니다. 만약 `reduce()` 함수 호출에서 `initialValue`를 제공한 경우, `accumulator`는 `initialValue`와 같고 `currentValue`는 배열의 첫 번째 값과 같습니다. `initialValue`를 제공하지 않았다면, `accumulator`는 배열의 첫 번째 값과 같고 `currentValue`는 두 번째와 같습니다.

**참고:** `initialValue`를 제공하지 않으면, `reduce()`는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뜁니다. `initialValue`를 제공하면 인덱스 0에서 시작합니다.

배열이 비어있는데 `initialValue`도 제공하지 않으면 `TypeError`가 발생합니다. 배열의 요소가 (위치와 관계없이) 하나 뿐이면서 `initialValue`를 제공되지 않은 경우, 또는 `initialValue`는 주어졌으나 배열이 빈 경우엔 그 단독 값을 `callback` 호출 없이 반환합니다.

다음의 예제처럼 `initialValue`을 제공하지 않으면 출력 가능한 형식이 세 가지이므로, 보통 초기값을 주는 것이 더 안전합니다.

```js
var maxCallback = (acc, cur) => Math.max(acc.x, cur.x);
var maxCallback2 = (max, cur) => Math.max(max, cur);

// initialValue 없이 reduce()
[{ x: 22 }, { x: 42 }].reduce(maxCallback); // 42
[{ x: 22 }].reduce(maxCallback); // { x: 22 }
[].reduce(maxCallback); // TypeError

// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함
[{ x: 22 }, { x: 42 }].map((el) => el.x).reduce(maxCallback2, -Infinity);
```

### `reduce()` 작동 방식

다음의 예제를 생각해 봅시다.

```js
[0, 1, 2, 3, 4].reduce(
  function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
  },
);
```

콜백은 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.

| `callback` | `accumulator` | `currentValue` | `currentIndex` | `array` | 반환 값 |
| --- | --- | --- | --- | --- | --- |
| 1번째 호출 | `0` | `1` | `1` | `[0, 1, 2, 3, 4]` | `1` |
| 2번째 호출 | `1` | `2` | `2` | `[0, 1, 2, 3, 4]` | `3` |
| 3번째 호출 | `3` | `3` | `3` | `[0, 1, 2, 3, 4]` | `6` |
| 4번째 호출 | `6` | `4` | `4` | `[0, 1, 2, 3, 4]` | `10` |

`reduce()`가 반환하는 값으로는 마지막 콜백 호출의 반환값(`10`)을 사용합니다.

완전한 함수 대신에 화살표 함수를 제공할 수도 있습니다. 아래 코드는 위의 코드와 같은 결과를 반환합니다.

```js
[0, 1, 2, 3, 4].reduce((prev, curr) => prev + curr);
```

`reduce()`의 두 번째 인수로 초기값을 제공하는 경우, 결과는 다음과 같습니다:

```js
[0, 1, 2, 3, 4].reduce(function (
  accumulator,
 currentValue,
 currentIndex,
 array,
) {
  return accumulator + currentValue;
}, 10);
```

|  | `accumulator` | `currentValue` | `currentIndex` | `array` | 반환값 |
| --- | --- | --- | --- | --- | --- |
| 1번째 호출 | `10` | `0` | `0` | `[0, 1, 2, 3, 4]` | `10` |
| 2번째 호출 | `10` | `1` | `1` | `[0, 1, 2, 3, 4]` | `11` |
| 3번째 호출 | `11` | `2` | `2` | `[0, 1, 2, 3, 4]` | `13` |
| 4번째 호출 | `13` | `3` | `3` | `[0, 1, 2, 3, 4]` | `16` |
| 5번째 호출 | `16` | `4` | `4` | `[0, 1, 2, 3, 4]` | `20` |

이 때 `reduce()`가 결과로 반환하는 값은 `20`입니다.

예제
--

### 배열의 모든 값 합산

```js
var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6
```

화살표 함수로도 작성할 수 있습니다.

```js
var total = [0, 1, 2, 3].reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0,
);
```

### 객체 배열에서의 값 합산

객체로 이루어진 배열에 들어 있는 값을 합산하기 위해서는 **반드시** 초기값을 주어 각 항목이 여러분의 함수를 거치도록 해야 합니다.

```js
var initialValue = 0;
var sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce(function (
  accumulator,
 currentValue,
) {
  return accumulator + currentValue.x;
}, initialValue);

console.log(sum); // logs 6
```

화살표 함수(arrow function)로도 작성할 수 있습니다:

```js
var initialValue = 0;
var sum = [{ x: 1 }, { x: 2 }, { x: 3 }].reduce(
  (accumulator, currentValue) => accumulator + currentValue.x,
  initialValue,
);

console.log(sum); // logs 6
```

### 중첩 배열 펼치기

```js
var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduce(function (accumulator, currentValue) {
  return accumulator.concat(currentValue);
}, []);
// 펼친 결과: [0, 1, 2, 3, 4, 5]
```

화살표 함수로도 작성할 수 있습니다:

```js
var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
```

### 객체 내의 값 인스턴스 개수 세기

```js
var names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
```

### 속성으로 객체 분류하기

```js
var people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, "age");
// groupedPeople is:
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }
```

### 확장 연산자와 초기값을 이용하여 객체로 이루어진 배열에 담긴 배열 연결하기

```js
// friends - an array of objects
// where object field "books" - list of favorite books
var friends = [
  {
    name: "Anna",
    books: ["Bible", "Harry Potter"],
    age: 21,
  },
  {
    name: "Bob",
    books: ["War and peace", "Romeo and Juliet"],
    age: 26,
  },
  {
    name: "Alice",
    books: ["The Lord of the Rings", "The Shining"],
    age: 18,
  },
];

// allbooks - list which will contain all friends' books +
// additional list contained in initialValue
var allbooks = friends.reduce(
  function (accumulator, currentValue) {
    return [...accumulator, ...currentValue.books];
  },
  ["Alphabet"],
);

// allbooks = [
// 'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
// 'Romeo and Juliet', 'The Lord of the Rings',
// 'The Shining'
// ]
```

### 배열의 중복 항목 제거

**참고:** 참고: `Set` (en-US)과 `Array.from()`을 사용할 수 있는 환경이라면, `let orderedArray = Array.from(new Set(myArray));`를 사용해 중복 요소를 제거할 수도 있습니다.

```js
let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
  const length = accumulator.length;
  if (length === 0 || accumulator[length - 1] !== current) {
    accumulator.push(current);
  }
  return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]
```

### 프로미스를 순차적으로 실행하기

```js
/\*\*
 \* Runs promises from array of functions that can return promises
 \* in chained manner
 \*
 \* @param {array} arr - promise arr
 \* @return {Object} promise object
 \*/
function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input),
  );
}

// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a \* 5);
  });
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a \* 2);
  });
}

// function 3 - will be wrapped in a resolved promise by .then()
function f3(a) {
  return a \* 3;
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a \* 4);
  });
}

const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, 10).then(console.log); // 1200
```

### 함수 구성을 위한 파이프 함수

```js
// Building-blocks to use for composition
const double = (x) => x + x;
const triple = (x) => 3 \* x;
const quadruple = (x) => 4 \* x;

// Function composition enabling pipe functionality
const pipe =
  (...functions) =>
  (input) =>
    functions.reduce((acc, fn) => fn(acc), input);

// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

// Usage
multiply6(6); // 36
multiply9(9); // 81
multiply16(16); // 256
multiply24(10); // 240
```

### `reduce()`로 `map()` 작성

```js
if (!Array.prototype.mapUsingReduce) {
  Array.prototype.mapUsingReduce = function (callback, thisArg) {
    return this.reduce(function (mappedArray, currentValue, index, array) {
      mappedArray[index] = callback.call(thisArg, currentValue, index, array);
      return mappedArray;
    }, []);
  };
}

[1, 2, , 3].mapUsingReduce(
  (currentValue, index, array) => currentValue + index + array.length,
); // [5, 7, , 10]
```

폴리필
---

```js
// ECMA-262의 진행 단계, 5판(Edition), 15.4.4.21
// 참조: http://es5.github.io/#x15.4.4.21
// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
if (!Array.prototype.reduce) {
  Object.defineProperty(Array.prototype, "reduce", {
    value: function (callback /\*, initialValue\*/) {
      if (this === null) {
        throw new TypeError(
          "Array.prototype.reduce " + "called on null or undefined",
        );
      }
      if (typeof callback !== "function") {
        throw new TypeError(callback + " is not a function");
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // Steps 3, 4, 5, 6, 7
      var k = 0;
      var value;

      if (arguments.length >= 2) {
        value = arguments[1];
      } else {
        while (k < len && !(k in o)) {
          k++;
        }

        // 3. If len is 0 and initialValue is not present,
        // throw a TypeError exception.
        if (k >= len) {
          throw new TypeError(
            "Reduce of empty array " + "with no initial value",
          );
        }
        value = o[k++];
      }

      // 8. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kPresent be ? HasProperty(O, Pk).
        // c. If kPresent is true, then
        // i. Let kValue be ? Get(O, Pk).
        // ii. Let accumulator be ? Call(
        // callbackfn, undefined,
        // « accumulator, kValue, k, O »).
        if (k in o) {
          value = callback(value, o[k], k, o);
        }

        // d. Increase k by 1.
        k++;
      }

      // 9. Return accumulator.
      return value;
    },
  });
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.reduce |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.reduceRight()`


Array() 생성자 - JavaScript

Array() 생성자
===========

**`Array()`** 생성자는 새로운 `Array` 객체를 생성할 때 사용합니다.

구문
--

```js
new Array()
new Array(element0)
new Array(element0, element1)
new Array(element0, element1, /\* …, \*/ elementN)
new Array(arrayLength)

Array()
Array(element0)
Array(element0, element1)
Array(element0, element1, /\* …, \*/ elementN)
Array(arrayLength)
```

**참고:** `Array()`는 `new`를 붙이거나 붙이지 않고 호출할 수 있습니다. 둘 다 새 `Array` 인스턴스를 생성합니다.

### 매개변수

`elementN`

JavaScript 배열은 주어진 요소로 초기화되지만, 단일 인수가 `Array` 생성자에 전달되고, 그 인수가 숫자인 경우는 예외입니다(아래 `arrayLength` 매개변수 참조). 이 특수한 경우는 대괄호 구문으로 만들어진 배열 리터럴이 아닌 `Array` 생성자로 만들어진 JavaScript 배열에만 적용된다는 점에 유의하세요.

`arrayLength`

`Array` 생성자에 전달된 유일한 인수가 0에서 232 - 1(포함) 사이의 정수인 경우, `length` 속성이 해당 숫자로 설정된 새 JavaScript 배열을 반환합니다(**참고:** 이는 실제 `undefined` 값을 가진 슬롯이 아닌 `arrayLength` 길이의 빈 슬롯 배열을 의미합니다. 희소 배열참조).

### 예외

`RangeError`

숫자인 인자(`arrayLength`)가 하나뿐이지만, 그 값이 정수가 아니거나 0에서 232 - 1 (포함) 사이가 아닌 경우 발생합니다.

예제
--

### 배열 리터럴 표기법

배열은 리터럴 표기법 (en-US)으로 생성할 수도 있습니다.

```js
const fruits = ["사과", "바나나"];

console.log(fruits.length); // 2
console.log(fruits[0]); // "사과"
```

### 단일 매개변수 배열 생성자

 단일 숫자 매개변수가 있는 생성자를 사용하여 배열을 만들 수 있습니다.
 배열은 `length` 속성이 해당 숫자로 설정되어 생성되며, 배열 요소는 빈 슬롯입니다.

```js
const arrayEmpty = new Array(2);

console.log(arrayEmpty.length); // 2
console.log(arrayEmpty[0]); // undefined이지만, 사실 빈 슬롯입니다.
console.log(0 in arrayEmpty); // false
console.log(1 in arrayEmpty); // false
```

```js
const arrayOfOne = new Array("2"); // 숫자 2가 아니라 문자열 "2"

console.log(arrayOfOne.length); // 1
console.log(arrayOfOne[0]); // "2"
```

### 복수 매개변수 배열 생성자

생성자에 두 개 이상의 매개변수를 제공한 경우, 매개변수를 원소로 하는 새로운 `Array`를 생성합니다.

```js
const fruits = new Array("사과", "바나나");

console.log(fruits.length); // 2
console.log(fruits[0]); // "사과"
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array-constructor |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 인덱스된 컬렉션
* `Array`


Array.prototype.toReversed() - JavaScript

Array.prototype.toReversed()
============================

`Array` 인스턴스의 **`toReversed()`** 메서드는 `reverse()`에 대응되는 복사 메서드입니다. 이 메서드는 요소들을 반대로 뒤집은 새로운 배열을 반환합니다.

구문
--

```js
toReversed()
```

### 반환 값

역순으로 정렬된 새로운 배열을 반환합니다.

설명
--

`toReversed()` 메서드는 호출한 배열 객체의 요소를 반대로 변경하고 새로운 배열을 반환합니다.

희소 배열에서 사용할 때, `toReversed()` 메서드는 빈 슬롯을 `undefined` 값으로 간주하고 반복합니다.

`toReversed()` 메서드는 일반화되어 있습니다. `this` 값이 `length` 속성과 정수로 키가 지정된 속성을 가지고 있다고 기대합니다.

예제
--

### 배열의 요소를 반대로 뒤집기

다음 예제는 세 개의 요소를 가진 `items` 배열을 생성하고, 이를 반대로 뒤집은 새로운 배열을 생성합니다. `items` 배열은 변경되지 않습니다.

```js
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
```

### 희소 배열에서 toReversed() 사용하기

`toReversed()`의 반환 값은 절대 희소 배열이 아닙니다. 빈 슬롯은 반환된 배열에서 `undefined`가 됩니다.

```js
console.log([1, , 3].toReversed()); // [3, undefined, 1]
console.log([1, , 3, 4].toReversed()); // [4, 3, undefined, 1]
```

### 배열이 아닌 객체에서 toReversed() 호출하기

`toReversed()` 메서드는 `this`의 `length` 속성을 읽습니다. 그런 다음 `length - 1`과 `0` 사이의 각 인덱스를 내림차순으로 방문하고, 원래 배열의 해당 인덱스의 값을 새 배열의 해당 인덱스에 추가합니다.

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  2: 4,
};
console.log(Array.prototype.toReversed.call(arrayLike));
// [4, undefined, undefined]
// '0'번과 '1'번 인덱스가 없기 때문에 undefined가 됩니다.
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.toreversed |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Polyfill of `Array.prototype.toReversed` in `core-js`
* `Array.prototype.reverse()`
* `Array.prototype.toSorted()`
* `Array.prototype.toSpliced()`
* `Array.prototype.with()`
* `TypedArray.prototype.toReversed()` (en-US)


Array.prototype.at() - JavaScript

Array.prototype.at()
====================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`Array` 인스턴스의 **`at()`** 메서드는 정숫값을 받아 해당 인덱스에 있는 항목을 반환하며, 양수와 음수를 사용할 수 있습니다. 음의 정수는 배열의 마지막 항목부터 거슬러 셉니다.

시도해보기
-----

구문
--

```js
at(index)
```

### 매개변수

`index`

반환할 배열 요소의 0부터 시작하는 인덱스로, 정수로 변환됩니다. 음수 인덱스는 배열 끝부터 거슬러 셉니다. `index < 0`인 경우, `index + array.length`로 접근합니다.

### 반환 값

주어진 인덱스와 일치하는 배열의 요소입니다. `index < -array.length` 또는 `index >= array.length`인 경우, 해당 속성에 접근하지 않고 항상 `undefined`를 반환합니다.

설명
--

인덱스가 음수가 아니라면, `at()` 메서드는 대괄호 표기법과 동일합니다. 예를 들어, `array[0]`과 `array.at(0)`은 모두 배열의 첫 번째 항목을 반환합니다. 그러나 배열의 끝에서부터 요소를 계산할 땐 Python이나 R처럼 `array[-1]`을 사용할 수 없습니다. 대괄호 안의 모든 값은 문자 그대로 문자열 속성으로 처리되므로 `array["-1"]`을 읽게 됩니다. 이는 배열 인덱스가 아닌 일반 문자열 속성입니다.

일반적인 방법은 `length`에 접근하고, 그로부터 인덱스를 계산하는 것입니다(예: `array[array.length - 1]`). `at()` 메서드는 상대 인덱싱을 허용하므로 이를 `array.at(-1)`로 단축할 수 있습니다.

`at()` 메서드는 범용적입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.

예제
--

### 배열의 끝 값 반환

아래 예제는 주어진 배열에서 맨 마지막에 위치한 값을 반환하는 함수를 정의합니다.

```js
// 몇 가지 요소가 있는 배열
const cart = ["사과", "바나나", "배"];

// 주어진 배열의 마지막 요소를 반환하는 함수
function returnLast(arr) {
  return arr.at(-1);
}

// 'cart' 배열에서 마지막 요소를 가져옴
const item1 = returnLast(cart);
console.log(item1); // '배'

// 'cart'배열에 요소를 추가
cart.push("오렌지");
const item2 = returnLast(cart);
console.log(item2); // '오렌지'
```

### 메서드 비교

아래 예제에서는 `Array`의 뒤에서 두 번째 요소를 가져오는 서로 다른 방법을 비교합니다. 모든 방법이 유효하긴 하지만 `at()` 메서드의 간결성과 가독성을 확인할 수 있습니다.

```js
// 몇 가지 요소가 있는 배열
const colors = ["빨강", "초록", "파랑"];

// length 속성 사용
const lengthWay = colors[colors.length - 2];
console.log(lengthWay); // '초록'

// slice() 메서드 사용. 배열을 반환하는 것에 유의
const sliceWay = colors.slice(-2, -1);
console.log(sliceWay[0]); // '초록'

// at() 메서드 사용
const atWay = colors.at(-2);
console.log(atWay); // '초록'
```

### 배열이 아닌 객체에서 at() 호출

`at()` 메서드는 `this`의 `length` 속성을 읽고 접근할 인덱스를 계산합니다.

```js
const arrayLike = {
  length: 2,
  0: "a",
  1: "b",
  2: "c", // length가 2이므로 at()은 이 값을 무시합니다.
};
console.log(Array.prototype.at.call(arrayLike, 0)); // "a"
console.log(Array.prototype.at.call(arrayLike, 2)); // undefined
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.at |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.at` 폴리필
* 인텍스 된 컬렉션
* `Array`
* `Array.prototype.findIndex()`
* `Array.prototype.indexOf()`
* `TypedArray.prototype.at()` (en-US)
* `String.prototype.at()`


Array.prototype.sort() - JavaScript

Array.prototype.sort()
======================

**`sort()`** 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.

시도해보기
-----

구문
--

```js
arr.sort([compareFunction]);
```

### 매개변수

`compareFunction` Optional

정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬됩니다.

### 반환 값

정렬한 배열. 원 배열이 정렬되는 것에 유의하세요. 복사본이 만들어지는 것이 아닙니다.

설명
--

`compareFunction`이 제공되지 않으면 요소를 문자열로 변환하고 유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬됩니다. 예를 들어 "바나나"는 "체리"앞에옵니다. 숫자 정렬에서는 9가 80보다 앞에 오지만 숫자는 문자열로 변환되기 때문에 "80"은 유니 코드 순서에서 "9"앞에옵니다.

`compareFunction`이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다. a와 b가 비교되는 두 요소라면,

* `compareFunction(a, b)`이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
* `compareFunction(a, b)`이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다.
* `compareFunction(a, b)`이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.
* `compareFunction(a, b)`은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

따라서 compare 함수의 형식은 다음과 같습니다.

```js
function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}
```

문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺄 수 있습니다. 다음 함수는 배열을 오름차순으로 정렬합니다 (Infinity 및 NaN이 포함되어 있지 않은 경우).

```js
function compareNumbers(a, b) {
  return a - b;
}
```

sort 메소드는 함수식 (및 클로저)와 함께 편리하게 사용할 수 있습니다.

```js
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function (a, b) {
  return a - b;
});
console.log(numbers);

// [1, 2, 3, 4, 5]
```

개체는 해당 속성 중 하나의 값을 기준으로 정렬 할 수 있습니다.

```js
var items = [
  { name: "Edward", value: 21 },
  { name: "Sharpe", value: 37 },
  { name: "And", value: 45 },
  { name: "The", value: -12 },
  { name: "Magnetic", value: 13 },
  { name: "Zeros", value: 37 },
];

// value 기준으로 정렬
items.sort(function (a, b) {
  if (a.value > b.value) {
    return 1;
  }
  if (a.value < b.value) {
    return -1;
  }
  // a must be equal to b
  return 0;
});

// name 기준으로 정렬
items.sort(function (a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // 이름이 같을 경우
  return 0;
});
```

예제
--

### 배열 만들기, 표시 및 정렬

다음 예제에서는 네 개의 배열을 만들고 원래 배열을 표시 한 다음 정렬 된 배열을 표시합니다. 숫자 배열은 비교 함수없이 정렬 된 다음 비교 함수로 정렬됩니다.

```js
var stringArray = ["Blue", "Humpback", "Beluga"];
var numericStringArray = ["80", "9", "700"];
var numberArray = [40, 1, 5, 200];
var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];

function compareNumbers(a, b) {
  return a - b;
}

console.log("stringArray:", stringArray.join());
console.log("Sorted:", stringArray.sort());

console.log("numberArray:", numberArray.join());
console.log("Sorted without a compare function:", numberArray.sort());
console.log("Sorted with compareNumbers:", numberArray.sort(compareNumbers));

console.log("numericStringArray:", numericStringArray.join());
console.log("Sorted without a compare function:", numericStringArray.sort());
console.log(
  "Sorted with compareNumbers:",
  numericStringArray.sort(compareNumbers),
);

console.log("mixedNumericArray:", mixedNumericArray.join());
console.log("Sorted without a compare function:", mixedNumericArray.sort());
console.log(
  "Sorted with compareNumbers:",
  mixedNumericArray.sort(compareNumbers),
);
```

이 예제는 다음 출력을 생성합니다. 결과가 보여 주듯이 비교 함수가 사용되면 숫자는 숫자 또는 숫자 문자열인지 여부에 관계없이 올바르게 정렬됩니다.
```

    stringArray: Blue,Humpback,Beluga
    Sorted: Beluga,Blue,Humpback

    numberArray: 40,1,5,200
    Sorted without a compare function: 1,200,40,5
    Sorted with compareNumbers: 1,5,40,200

    numericStringArray: 80,9,700
    Sorted without a compare function: 700,80,9
    Sorted with compareNumbers: 9,80,700

    mixedNumericArray: 80,9,700,40,1,5,200
    Sorted without a compare function: 1,200,40,5,700,80,9
    Sorted with compareNumbers: 1,5,9,40,80,200,700
```

### 비 ASCII 문자 정렬

ASCII 이외의 문자, 즉 악센트 부호가있는 문자 (e, é, è, a, ä 등)가있는 문자열을 정렬하려면 영어가 아닌 다른 언어의 문자열에 `String.localeCompare`를 사용하십시오. 이 함수는 해당 문자를 비교하여 올바른 순서로 나타낼 수 있습니다.

```js
var items = ["réservé", "premier", "cliché", "communiqué", "café", "adieu"];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']
```

### map을 사용한 정렬

`compareFunction`은 배열 내의 요소마다 여러 번 호출될 수 있습니다. 이러한 `compareFunction`의 성질에 따라, 높은 오버헤드가 발생할 수도 있습니다. `compareFunction`이 복잡해지고, 정렬할 요소가 많아질 경우, map을 사용한 정렬을 고려해보는 것이 좋습니다. 이 방법은 임시 배열을 하나 만들어서 여기에 실제 정렬에 사용할 값만을 뽑아서 넣어서 이를 정렬하고, 그 결과를 이용해서 실제 정렬을 하는 것입니다.

```js
// 소트 할 배열
var list = ["Delta", "alpha", "CHARLIE", "bravo"];

// 임시 배열은 위치 및 정렬 값이있는 객체를 보유합니다.
var mapped = list.map(function (el, i) {
  return { index: i, value: el.toLowerCase() };
});

// 축소 치를 포함한 매핑 된 배열의 소트
mapped.sort(function (a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;
});

// 결과 순서를 위한 컨테이너
var result = mapped.map(function (el) {
  return list[el.index];
});
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.sort |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.reverse()`
* `String.prototype.localeCompare()`


Array.prototype.flat() - JavaScript

Array.prototype.flat()
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
`Array` 인스턴스의 **`flat()`** 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다.

시도해보기
-----

구문
--

```js
flat()
flat(depth)
```

### 매개변수

`depth` Optional

 중첩된 배열 구조를 얼마나 깊이 평탄화 할지를 지정하는 깊이 수준입니다.
 기본값은 1입니다.

### 반환 값

하위 배열 요소가 연결된 새 배열입니다.

설명
--

`flat()` 메서드는 복사 메서드입니다. 이 메서드는 `this`를 변경하지 않는 대신 원래 배열의 요소와 동일한 요소를 포함하는 얕은 복사본을 반환합니다.

`flat()` 메서드는 평탄화할 배열이 희소 배열인 경우 빈 슬롯을 무시합니다. 예를 들어 `depth`가 1이면, 루트 배열과 중첩 배열의 첫 번째 수준에 있는 빈 슬롯은 모두 무시되지만 중첩된 배열의 빈 슬롯은 배열 자체와 함께 보존됩니다.

`flat()` 메서드는 범용입니다. `this`에는 length 속성과 정수 키 속성만 있을 것으로 예상합니다. 그러나 요소를 평탄화하려면 해당 요소는 배열이어야 합니다.

예제
--

### 중첩 배열 평탄화

```js
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

### 희소 배열에 flat() 사용하기

`flat()` 메서드는 배열의 빈 슬롯을 제거합니다.

```js
const arr5 = [1, 2, , 4, 5];
console.log(arr5.flat()); // [1, 2, 4, 5]

const array = [1, , 3, ["a", , "c"]];
console.log(array.flat()); // [ 1, 3, "a", "c" ]

const array2 = [1, , 3, ["a", , ["d", , "e"]]];
console.log(array2.flat()); // [ 1, 3, "a", ["d", empty, "e"] ]
console.log(array2.flat(2)); // [ 1, 3, "a", "d", "e"]
```

### 배열이 아닌 객체에서 flat() 호출

`flat()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수인 속성에 각각 접근합니다. 요소가 배열이 아니면, 요소는 결괏값에 직접 추가됩니다. 요소가 배열인 경우 `depth` 매개변수에 따라 평탄화됩니다.

```js
const arrayLike = {
  length: 3,
  0: [1, 2],
  // 유사 배열은 평탄화되지 않습니다.
  1: { length: 2, 0: 3, 1: 4 },
  2: 5,
  3: 3, // length가 3이므로 flat()에서 무시됩니다.
};
console.log(Array.prototype.flat.call(arrayLike));
// [ 1, 2, { '0': 3, '1': 4, length: 2 }, 5 ]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.flat |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.flat` 폴리필
* 인덱스 기반 컬렉션
* `Array`
* `Array.prototype.concat()`
* `Array.prototype.flatMap()`
* `Array.prototype.map()`
* `Array.prototype.reduce()`


Array.fromAsync() - JavaScript

Array.fromAsync()
=================

**`Array.fromAsync()`** 정적 메서드는 비동기 순회 가능, 순회 가능, 또는 유사 배열 객체에서 얕게 복사된 새로운 `Array` 인스턴스를 만듭니다.

구문
--

```js
Array.fromAsync(arrayLike)
Array.fromAsync(arrayLike, mapFn)
Array.fromAsync(arrayLike, mapFn, thisArg)
```

### 매개변수

`arrayLike`

배열로 변환할 비동기 순회 가능, 순회 가능, 또는 유사 배열 객체입니다.

`mapFn` Optional

배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수로 먼저 전달되고, (await된 후) `mapFn`의 반환 값이 대신 배열에 추가됩니다. 이 함수는 다음 인수를 사용하여 호출됩니다.

`element`

배열에서 처리 중인 현재 요소입니다. 모든 요소가 먼저 await 되므로, 절대 then을 사용할 수 있는 값이 될 수 없습니다.

`index`

배열에서 처리 중인 현재 요소의 인덱스입니다.

`thisArg` Optional

`mapFn`을 실행할 때 `this` 값으로 사용할 값입니다.

### 반환 값

이행 값이 새 `Array` 인스턴스인 새로운 `Promise`입니다.

설명
--

`Array.fromAsync()`은 다음으로부터 배열을 만들 수 있습니다.

* 비동기 순회 가능 객체(`ReadableStream`와 `AsyncGenerator` (en-US) 같은 객체). 또는, 객체가 비동기 순회 가능이 아니라면,
* 순회 가능 객체(`Map`과 `Set` (en-US) 같은 객체). 또는, 객체가 순회 가능이 아니라면
* 유사 배열 객체(`length` 속성과 인덱스된 요소가 있는 객체).

`Array.fromAsync()`는 `for await...of`와 매우 유사한 방식으로 비동기 순회 가능을 순회합니다. `Array.fromAsync()`는 다음을 제외하고 동작 측면에서 `Array.from()`과 거의 동일합니다.

* `Array.fromAsync()`는 비동기 순회 가능 객체를 처리합니다.
* `Array.fromAsync()`는 배열 인스턴스에 이행하는 `Promise`를 반환합니다.
* 비동기 순회 가능 객체로 `Array.fromAsync()`를 호출하면 배열에 추가할 각 요소가 먼저 await됩니다.
* `mapFn`이 제공되면, 그 입력과 출력이 내부적으로 await 됩니다.

`Array.fromAsync()`와 `Promise.all()`은 모두 프로미스의 순회 가능을 배열의 프로미스로 변환할 수 있습니다. 하지만 두 가지 중요한 차이점이 있습니다.

* `Array.fromAsync()`는 객체에서 yield된 각 값을 순차적으로 await 합니다. `Promise.all()`은 모든 값을 동시에 await 합니다.
* `Array.fromAsync()`는 순회 가능을 지연(lazy) 순회하고, 현재 값이 확정될 때까지 다음 값을 가져오지 않습니다. `Promise.all()`은 모든 값을 미리 가져오고 모두 await 합니다.
예제
--

### 비동기 순회 가능에서 배열 만들기

```js
const asyncIterable = (async function\* () {
  for (let i = 0; i < 5; i++) {
    await new Promise((resolve) => setTimeout(resolve, 10 \* i));
    yield i;
  }
})();

Array.fromAsync(asyncIterable).then((array) => console.log(array));
// [0, 1, 2, 3, 4]
```

### 동기 순회 가능에서 배열 만들기

```js
Array.fromAsync(
  new Map([
    [1, 2],
    [3, 4],
  ]),
).then((array) => console.log(array));
// [[1, 2], [3, 4]]
```

### 프로미스를 yield하는 동기 순회 가능에서 배열 만들기

```js
Array.fromAsync(
  new Set([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]),
).then((array) => console.log(array));
// [1, 2, 3]
```

### 프로미스 유사 배열 객체에서 배열 만들기

```js
Array.fromAsync({
  length: 3,
  0: Promise.resolve(1),
  1: Promise.resolve(2),
  2: Promise.resolve(3),
}).then((array) => console.log(array));
// [1, 2, 3]
```

### mapFn 사용하기

`mapFn`의 입력과 출력은 모두 `Array.fromAsync()`에서 내부적으로 await 됩니다.

```js
function delayedValue(v) {
  return new Promise((resolve) => setTimeout(() => resolve(v), 100));
}

Array.fromAsync(
  [delayedValue(1), delayedValue(2), delayedValue(3)],
  (element) => delayedValue(element \* 2),
).then((array) => console.log(array));
// [2, 4, 6]
```

### Promise.all()과 비교하기

`Array.fromAsync()`는 객체에서 yield 각 값을 순차적으로 await 합니다. `Promise.all()`은 모든 값을 동시에 await 합니다.

```js
function\* makeAsyncIterable() {
  for (let i = 0; i < 5; i++) {
    yield new Promise((resolve) => setTimeout(resolve, 100));
  }
}

(async () => {
  console.time("Array.fromAsync() 시간");
  await Array.fromAsync(makeAsyncIterable());
  console.timeEnd("Array.fromAsync() 시간");
  // Array.fromAsync() 시간: 503.610ms

  console.time("Promise.all() 시간");
  await Promise.all(makeAsyncIterable());
  console.timeEnd("Promise.all() 시간");
  // Promise.all() 시간: 101.728ms
})();
```

### 동기 순회 가능에 대한 오류 처리 없음

`for await...of`의 경우와 마찬가지로, 순회되는 객체가 동기 순회 가능이고, 순회하는 동안 오류가 발생하면, 기본 반복자의 `return()` 메서드가 호출되지 않으므로 반복자가 종료되지 않습니다.

```js
function\* generatorWithRejectedPromises() {
  try {
    yield 0;
    yield Promise.reject(3);
  } finally {
    console.log("finally 호출");
  }
}

(async () => {
  try {
    await Array.fromAsync(generatorWithRejectedPromises());
  } catch (e) {
    console.log(e, "잡음");
  }
})();
// 3 잡음
// "finally 호출" 메시지 없음
```

반복자를 종료해야 하는 경우, `for...of` 루프를 대신 사용하고, 각 값을 직접 await 해야 합니다.

```js
(async () => {
  const arr = [];
  try {
    for (const val of generatorWithRejectedPromises()) {
      arr.push(await val);
    }
  } catch (e) {
    console.log(e, "잡음");
  }
})();
// finally 호출
// 3 잡음
```

명세서
---

| Specification |
| --- |
| ES Array.fromAsync (2022) # sec-array.fromAsync |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.fromAsync` 폴리필
* 인덱스 기반 컬렉션 안내서
* `Array`
* `Array()`
* `Array.of()`
* `Array.from()`
* `for await...of`


Array.prototype.flatMap() - JavaScript

Array.prototype.flatMap()
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
`Array` 인스턴스의 **`flatMap()`** 메서드는 배열의 각 요소에 주어진 콜백 함수를 적용한 다음 그 결과를 한 단계씩 평탄화하여 형성된 새 배열을 반환합니다. 이 메서드는 `map()` 뒤에 깊이 1의 `flat()`을 붙이는 것(`arr.map(...args).flat()`)과 동일하지만, 두 메서드를 따로 호출하는 것보다 약간 더 효율적입니다.

시도해보기
-----

구문
--

```js
flatMap(callbackFn)
flatMap(callbackFn, thisArg)
```

### 매개변수

`callback`

배열의 각 요소에 대해 실행할 함수입니다. 새 배열의 새 요소를 포함하는 배열을 반환하거나, 새 배열에 추가할 배열이 아닌 단일 값을 반환해야 합니다. 이 함수는 다음 인수를 사용하여 호출됩니다.

`element`

배열에서 처리 중인 현재 요소.

`index`

배열에서 처리 중인 현재 요소의 인덱스.

`array`

`flatMap()`이 호출된 배열.

`thisArg` Optional

`callbackFn`을 실행할 때 `this`로 사용할 값입니다. 순회 메서드를 참조하세요.

### 반환 값

각 요소가 콜백 함수의 결과이고, 깊이 1로 평탄화된 새 배열입니다.

설명
--

`flatMap()` 메서드는 순회 메서드입니다. 콜백 함수에 대한 자세한 설명은 `Array.prototype.map()`을 참조하세요. `flatMap()` 메서드는 각 요소에 대해 새로운 배열 요소를 생성하고, 결과 배열을 연결하여 새로운 배열을 형성하는 `map(callbackFn, thisArg)` 뒤에 `flat(1)`이 붙은 것과 동일합니다.

`flatMap()` 메서드는 범용입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다. 그러나 `callbackFn`에서 반환되는 값은 반드시 배열이어야 평탄화할 수 있습니다.

### 대안

#### 사전 할당 및 명시적 순회

```js
const arr = [1, 2, 3, 4];

arr.flatMap((x) => [x, x \* 2]);
// 는 다음과 같습니다.
const n = arr.length;
const acc = new Array(n \* 2);
for (let i = 0; i < n; i++) {
  const x = arr[i];
  acc[i \* 2] = x;
  acc[i \* 2 + 1] = x \* 2;
}
// [1, 2, 2, 4, 3, 6, 4, 8]
```

이 특별한 경우는 가비지 컬렉션을해야 하는 임시 배열을 생성하고, 반환 배열의 크기를 자주 조정할 필요가 없기 때문에, `flatMap` 접근 방식이 for-loop 접근 방식보다 느리다는 점에 유의해야합니다. 그러나 유연성과 가독성이 필요한 경우에는 flatMap이 여전히 올바른 솔루션일 수 있습니다.

예제
--

### map()과 flatMap()

```js
const arr1 = [1, 2, 3, 4];

arr1.map((x) => [x \* 2]);
// [[2], [4], [6], [8]]

arr1.flatMap((x) => [x \* 2]);
// [2, 4, 6, 8]

// 오직 한 단계만 평탄화됩니다.
arr1.flatMap((x) => [[x \* 2]]);
// [[2], [4], [6], [8]]
```

위의 예제는 map을 사용해도 가능하겠지만, 다음은 `flatMap()`의 사용법을 더 잘 보여주는 예제입니다.

문장 목록에서 단어 목록을 생성해 보겠습니다.

```js
const arr1 = ["it's Sunny in", "", "California"];

arr1.map((x) => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap((x) => x.split(" "));
// ["it's","Sunny","in", "", "California"]
```

출력 목록 길이는 입력 목록 길이와 다를 수 있다는 점에 유의하세요.

### map() 도중 항목을 추가 및 제거하는 경우

`flatMap`은 `map` 도중에 항목을 추가하고 제거(항목 수 수정) 하는 방법으로 사용할 수 있습니다. 즉, 항상 일대일이 아닌 각 입력 항목을 개별적으로 처리하여 여러 항목을 여러 항목에 매핑할 수 있습니다. 이런 의미에서 filter의 반대 개념처럼 작동합니다.
 항목을 유지하려면 1 요소 배열을, 항목을 추가하려면 다중 요소 배열을, 항목을 제거하려면 0 요소 배열을 반환합니다.

```js
// 음수를 모두 제거하고
// 홀수를 짝수와 1로 분할한다고 가정해 보겠습니다.
const a = [5, 4, -3, 20, 17, -33, -4, 18];
// |\ \ x | | \ x x |
// [4,1, 4, 20, 16, 1, 18]

const result = a.flatMap((n) => {
  if (n < 0) {
    return [];
  }
  return n % 2 === 0 ? [n] : [n - 1, 1];
});
console.log(result); // [4, 1, 4, 20, 16, 1, 18]
```

### 희소 배열에 flatMap() 사용하기

`flat()`은 반환된 배열의 빈 슬롯을 무시하는 반면, `map()`은 소스 배열의 빈 슬롯에 대해 호출하지 않기 때문에 `callbackFn`은 호출되지 않습니다.

`map()`은 반환된 배열의 빈 슬롯을 무시하는 반면, `flat()`은 반환된 배열의 빈 슬롯을 무시하기 때문에 소스 배열의 빈 슬롯에 대해서는 `callbackFn`이 호출되지 않습니다.

```js
console.log([1, 2, , 4, 5].flatMap((x) => [x, x \* 2])); // [1, 2, 2, 4, 4, 8, 5, 10]
console.log([1, 2, 3, 4].flatMap((x) => [, x \* 2])); // [2, 4, 6, 8]
```

### 배열이 아닌 객체에 flatMap() 사용하기

`flatMap()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수인 각 속성에 접근합니다. 콜백 함수의 반환값이 배열이 아닌 경우, 반환값은 항상 결과 배열에 바로 추가됩니다.

```js
const arrayLike = {
  length: 3,
  0: 1,
  1: 2,
  2: 3,
  3: 4, // length가 3이므로 flatMap()에 의해 무시됩니다.
};
console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x \* 2]));
// [1, 2, 2, 4, 3, 6]

// 콜백에서 반환된 유사 배열은 평탄화되지 않습니다.
console.log(
  Array.prototype.flatMap.call(arrayLike, (x) => ({
    length: 1,
    0: x,
  })),
);
// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.flatmap |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.flatMap` 폴리필
* 인덱스 기반 컬렉션
* `Array`
* `Array.prototype.concat()`
* `Array.prototype.flat()`
* `Array.prototype.map()`
* `Array.prototype.reduce()`


Array.from() - JavaScript

Array.from()
============

**`Array.from()`** 정적 메서드는 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 `Array` 인스턴스를 생성합니다.

시도해보기
-----

구문
--

```js
Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)
```

### 매개변수

`arrayLike`

배열로 변환할 순회 가능 또는 유사 배열 객체입니다.

`mapFn`Optional

배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고, `mapFn`의 반환 값이 대신 배열에 추가됩니다. 이 함수는 다음 인수를 사용하여 호출됩니다.

`element`

배열에서 처리 중인 현재 요소.

`index`

배열에서 처리 중인 현재 요소의 인덱스.

`thisArg`Optional

`mapFn` 실행 시에 `this`로 사용할 값입니다.

### 반환 값

새로운 `Array` 인스턴스입니다.

설명
--

다음과 같은 경우에 `Array.from()`을 사용하면 `Array`를 만들 수 있습니다.

* 순회 가능 객체(`Map`, `Set` (en-US)과 같은 객체)인 경우. 또는 객체가 순회 가능이 아니라면,
* 유사 배열 객체(`length` 속성과 인덱싱된 요소가 있는 객체).

순회 가능이 아니거나 유사 배열이 아닌 일반 객체를 배열로 변환하려면(속성 키, 값 또는 둘을 모두 열거하여) `Object.keys()`, `Object.values()`, 또는 `Object.entries()`를 사용해야 합니다. 비동기 순회 가능을 배열로 변환하려면 `Array.fromAsync()`를 사용합니다.

`Array.from()`은 희소 배열을 생성하지 않습니다. `arrayLike` 객체에 일부 인덱스 속성이 누락된 경우, 새 배열에서 해당 속성은 `undefined`가 됩니다.

`Array.from()`에는 생성되는 배열의 각 요소에 대해 함수를 실행할 수 있는 `map()`과 비슷한 선택적 매개변수 `mapFn`이 있습니다. 좀 더 명확하게 설명하자면, `Array.from(obj, mapFn, thisArg)`는 중간 배열을 생성하지 않는다는 점과 배열이 아직 생성 중이기 때문에 전체 배열 없이 두 개의 인수(`element`, `index`)만 받는다는 점을 제외하면 `Array.from(obj).map(mapFn, thisArg)`과 동일한 결과를 가져옵니다.

**참고:** 이 동작은 형식화 배열에서 더 중요한데, 중간 배열에는 적절한 형식에 맞게 잘린 값이 있어야 하기 때문입니다. `Array.from()`은 `TypedArray.from()` (en-US)과 동일한 동작을 하도록 구현되었습니다.

`Array.from()` 메서드는 범용 팩토리 메서드입니다. 예를 들어, `Array`의 하위 클래스가 `from()` 메서드를 상속하는 경우, 상속된 `from()` 메서드는 `Array` 인스턴스 대신 하위 클래스의 새 인스턴스를 반환합니다. 실제로 `this` 값은 새 배열의 길이를 나타내는 단일 인수를 받는 모든 생성자 함수가 될 수 있습니다. 순회 가능이 `arrayLike`로 전달되면 인수 없이 생성자가 호출되고, 배열형 객체가 전달되면 배열형 객체의 정규화된 length를 사용하여 생성자가 호출됩니다. 최종 `length`는 순회가 완료되면 다시 설정됩니다. `this` 값이 생성자 함수가 아닌 경우, 일반 `Array` 생성자가 대신 사용됩니다.

예제
--

### String으로 배열 만들기

```js
Array.from("foo");
// [ "f", "o", "o" ]
```

### Set으로 배열 만들기

```js
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]
```

### Map으로 배열 만들기

```js
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];
```

### NodeList로 배열 만들기

```js
// DOM 요소의 속성을 기반으로 배열 만들기
const images = document.querySelectorAll("img");
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith("http://"));
```

### 유사 배열 객체로 베열 만들기 (arguments)

```js
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]
```

### 화살표 함수와 Array.from() 사용하기

```js
// 화살표 함수를 map 함수로 사용하여 요소 조작
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// 숫자 시퀀스 생성하기
// 배열의 각 위치가 `undefined`로 초기화되므로
// 아래 'v'의 값은 `undefined`가 됩니다.
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]
```

### 시퀀스 생성기 (range)

```js
// 시퀀스 생성기 함수 (Clojure, PHP 등에선 "range"라고도 함)
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (\_, i) => start + i \* step);

// 0..4 범위의 숫자 생성하기
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// 두 단계씩 1...10 범위의 숫자 생성
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// 시퀀스로 정렬되는 것을 활용하여 `Array.from`으로 알파벳을 생성하기
range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) =>
  String.fromCharCode(x),
);
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
```

### 배열이 아닌 생성자에 from() 호출하기

`from()` 메서드는 새 배열의 `length`를 나타내는 단일 인수를 받아들이는 모든 생성자 함수에서 호출할 수 있습니다.

```js
function NotArray(len) {
  console.log("NotArray called with length", len);
}

// 순회 가능
console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));
// NotArray는 length가 undefined인 상태로 호출됩니다.
// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }

// 유사 배열
console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
// NotArray는 length가 1인 상태로 호출됩니다.
// NotArray { '0': 'foo', length: 1 }
```

`this` 값이 생성자가 아닌 경우, 일반 `Array` 객체가 반환됩니다.

```js
console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.from |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.from` 폴리필
* 인덱스 기반 컬렉션 안내서
* `Array`
* `Array()`
* `Array.of()`
* `Array.fromAsync()`
* `Array.prototype.map()`
* `TypedArray.from()` (en-US)


Array.isArray() - JavaScript

Array.isArray()
===============

**`Array.isArray()`** 메서드는 인자가 `Array`인지 판별합니다.

```js
Array.isArray([1, 2, 3]); // true
Array.isArray({ foo: 123 }); // false
Array.isArray("foobar"); // false
Array.isArray(undefined); // false
```

구문
--

```js
Array.isArray(obj);
```

### 매개변수

`obj`

검사할 객체.

### 반환 값

객체가 `Array`라면 `true`, 아니라면 `false`.

설명
--

객체가 `Array`라면 `true`를 반환하고, 아니라면 `false`를 반환합니다.

자세한 정보는 "Determining with absolute accuracy whether or not a JavaScript object is an array"(JavaScript 객체가 배열인지 정확히 판별하는 방법) 문서를 참조하세요.

예제
--

```js
// 모두 true 반환
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array("a", "b", "c", "d"));
Array.isArray(new Array(3));
// Array.prototype은 스스로도 배열입니다
Array.isArray(Array.prototype);

// 모두 false 반환
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray("Array");
Array.isArray(true);
Array.isArray(false);
Array.isArray({ \_\_proto\_\_: Array.prototype });
```

### `instanceof` vs `isArray`

`Array` 객체를 판별할 때, `Array.isArray`는 `iframe`을 통해서도 작동하기 때문에 `instanceof` 보다 적합합니다.

```js
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length - 1].Array;
var arr = new xArray(1, 2, 3); // [1,2,3]

// 올바른 Array 판별
Array.isArray(arr); // true
// iframe을 통해서 작동하지 않기 때문에 올바르지 않은 방법
arr instanceof Array; // false
```

폴리필
---

아래 코드를 실행하면 지원하지 않는 환경에서도 `Array.isArray()`를 사용할 수 있습니다.

```js
if (!Array.isArray) {
  Array.isArray = function (arg) {
    return Object.prototype.toString.call(arg) === "[object Array]";
  };
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.isarray |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참고
--

* `Array`


Array.prototype.entries() - JavaScript

Array.prototype.entries()
=========================

`Array` 인스턴스의 **`entries()`** 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새 배열 반복자 (en-US) 객체를 반환합니다.

시도해보기
-----

구문
--

```js
entries()
```

### 매개변수

없음.

### 반환 값

새 순회 가능 반복자 객체 (en-US).

설명
--

희소 배열이 사용되는 경우, `entries()` 메서드는 빈 슬롯에 `undefined`값이 있는것 처럼 순회합니다.

`entries()` 메서드는 범용입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.

예시
--

### 인덱스와 요소 순회하기

```js
const a = ["a", "b", "c"];

for (const [index, element] of a.entries()) {
  console.log(index, element);
}

// 0 'a'
// 1 'b'
// 2 'c'
```

### for...of 루프 사용하기

```js
const array = ["a", "b", "c"];
const arrayEntries = array.entries();

for (const element of arrayEntries) {
  console.log(element);
}

// [0, 'a']
// [1, 'b']
// [2, 'c']
```

### 희소 배열 순회하기

`entries()`는 빈 슬롯을 `undefined`인 것처럼 접근합니다.

```js
for (const element of [, "a"].entries()) {
  console.log(element);
}
// [0, undefined]
// [1, 'a']
```

### entries()를 배열이 아닌 객체에서 사용하기

`entries()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수 속성에 각각 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: "d", // length가 3이므로 entries()에서 무시됩니다.
};
for (const entry of Array.prototype.entries.call(arrayLike)) {
  console.log(entry);
}
// [ 0, 'a' ]
// [ 1, 'b' ]
// [ 2, 'c' ]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.entries |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.entries` 폴리필
* 인덱스된 컬렉션
* `Array`
* `Array.prototype.keys()`
* `Array.prototype.values()`
* `Array.prototype[@@iterator]()`
* `TypedArray.prototype.entries()`
* Iteration protocols


Array.prototype.map() - JavaScript

Array.prototype.map()
=====================

**`map()`** 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

시도해보기
-----

구문
--

```js
    arr.map(callback(currentValue[, index[, array]])[, thisArg])
```

### 매개변수

`callback`

 새로운 배열 요소를 생성하는 함수.
 다음 세 가지 인수를 가집니다.

`currentValue`

처리할 현재 요소.

`index` Optional

처리할 현재 요소의 인덱스.

`array` Optional

`map()`을 호출한 배열.

`thisArg` Optional

`callback`을 실행할 때 `this`로 사용되는 값.

### 반환 값

배열의 각 요소에 대해 실행한 `callback`의 결과를 모은 새로운 배열.

설명
--

`map`은 `callback` 함수를 **각각의 요소에 대해 한번씩** 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. `callback` 함수는 (`undefined`도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.

`callback` 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 `map`을 호출한 원본 배열 3개의 인수를 전달받습니다.

`thisArg` 매개변수가 `map`에 전달된 경우 `callback` 함수의 `this`값으로 사용됩니다. 그 외의 경우 `undefined`값이 `this` 값으로 사용됩니다. `callback` 함수에서 최종적으로 볼 수 있는 `this` 값은 함수 내 `this`를 정하는 일반적인 규칙에 따라 결정됩니다.

`map`은 호출한 배열의 값을 변형하지 않습니다. 단, `callback` 함수에 의해서 변형될 수는 있습니다.

`map`이 처리할 요소의 범위는 첫 `callback`을 호출하기 전에 정해집니다. `map`이 시작한 이후 배열에 추가되는 요소들은 `callback`을 호출하지 않습니다. 배열에 존재하는 요소들의 값이 바뀐 경우 `map`이 방문하는 시점의 값이 `callback`에 전달됩니다. `map`이 시작되고, 방문하기 전에 삭제된 요소들은 방문하지 않습니다.

명세서에 정의된 알고리즘으로 인해 `map`을 호출한 배열의 중간이 비어있는 경우, 결과 배열 또한 동일한 인덱스를 빈 값으로 유지합니다.

예제
--

### 배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기

다음 코드는 숫자의 배열을 받아 각 숫자들의 제곱근이 들어있는 새로운 배열을 만듭니다.

```js
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]
```

### `map`을 활용해 배열 속 객체를 재구성하기

다음 코드는 오브젝트의 배열을 받아 각 오브젝트를 다른 형태으로 재구성해 새로운 배열을 만듭니다.

```js
var kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

var reformattedArray = kvArray.map(function (obj) {
  var rObj = {};
  rObj[obj.key] = obj.value;
  return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 그대로
// [{key:1, value:10},
// {key:2, value:20},
// {key:3, value: 30}]
```

### 인자를 받는 함수를 사용하여 숫자 배열 재구성하기

다음 코드는 인자가 한개인 함수를 이용하여 map이 어떻게 동작하는지 나타냅니다. 인자인 배열과 안의 요소들은 map을 통해 순회하면서 원본 배열로 부터 자동으로 할당됩니다.

```js
var numbers = [1, 4, 9];
var doubles = numbers.map(function (num) {
  return num \* 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]
```

### `map`을 포괄적으로 사용하기

아래 예제는 `String`에 map을 사용해서 각 문자의 ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법을 보여줍니다.

```js
var map = Array.prototype.map;
var a = map.call("Hello World", function (x) {
  return x.charCodeAt(0);
});
// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
```

### `map`을 포괄적으로 사용하기 (`querySelectorAll`)

아래 예제는 `querySelectorAll`을 사용해서 수집된 객체들을 순회 처리하는 법을 보여줍니다. 이번 경우 체크한 옵션 박스를 콘솔에 프린트합니다.

```js
var elems = document.querySelectorAll("select option:checked");
var values = [].map.call(elems, function (obj) {
  return obj.value;
});
```

더 쉬운 방법은 `Array.from()`을 사용하는 것입니다.

### 까다로운 사례

(참고한 블로그 포스트)

`map`에 하나의 인자(순회하는 원소)만 받는 콜백을 사용하는 경우가 많습니다. 그러나 어떤 함수는 대개 하나의 인자로 호출하지만 두 개 이상의 인자를 사용하는 경우도 있습니다. 이로 인해 어떤 경우 혼란스러울 수도 있습니다.

```js
// 아래 라인을 보시면...
["1", "2", "3"].map(parseInt);
// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
// 그러나 실제 결과는 [1, NaN, NaN] 입니다.

// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다.
// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다.
// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다.
// 배열의 값, 값의 인덱스, 그리고 배열
// 세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아닙니다.
// 따라서 혼란스러운 결과를 도출할 수 있습니다. 자세한 내용은 블로그 포스트를 참고하시길 바랍니다.

function returnInt(element) {
  return parseInt(element, 10);
}

["1", "2", "3"].map(returnInt); // [1, 2, 3]
// 실제 결과가 예상한 대로 배열의 숫자와 같습니다.

// 위와 같지만 더 간단한 화살표 표현식
["1", "2", "3"].map((str) => parseInt(str));

// 더 간단하게 해결할 수 있는 방법
["1", "2", "3"].map(Number); // [1, 2, 3]
// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다.
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]
```

폴리필
---

`map`은 ECMA-262 표준 제5판에 추가됐습니다. 따라서 어떤 표준 구현체에서는 사용할 수 없을 수도 있습니다. 다른 모든 코드 이전에 아래 코드를 포함하면 지원하지 않는 플랫폼에서도 `map`을 사용할 수 있습니다. 아래 알고리즘은 `Object`, `TypeError`, `Array`가 변형되지 않고, `callback.call`의 계산 값이 원래의 `Function.prototype.call()`과 같은 경우 ECMA-262 제5판이 명시한 것과 동일합니다.

```js
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {
  Array.prototype.map = function (callback, thisArg) {
    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. Let O be the result of calling ToObject passing the |this|
    // value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal
    // method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + " is not a function");
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len)
    // where Array is the standard built-in constructor with that name and
    // len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k < len
    while (k < len) {
      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      // This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal
      // method of O with argument Pk.
      // This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {
        // i. Let kValue be the result of calling the Get internal
        // method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal
        // method of callback with T as the this value and argument
        // list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        // Writable: true,
        // Enumerable: true,
        // Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        // value: mappedValue,
        // writable: true,
        // enumerable: true,
        // configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.map |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.forEach()`
* `Map` 객체
* `Array.from()`


Array.prototype.slice() - JavaScript

Array.prototype.slice()
=======================

**`slice()`** 메서드는 어떤 배열의 `begin` 부터 `end` 까지(`end` 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

시도해보기
-----

구문
--

```js
    arr.slice([begin[, end]])
```

### 매개변수

`begin` Optional

 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다.
 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. `slice(-2)` 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.
 `begin`이 `undefined`인 경우에는, 0번 인덱스부터 `slice` 합니다.
 `begin`이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다.

`end` Optional

 추출을 종료 할 0 기준 인덱스입니다. `slice` 는 `end` 인덱스를 제외하고 추출합니다.
 예를 들어, `slice(1,4)`는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.
 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. 예를들어 `slice(2,-1)` 는 세번째부터 끝에서 두번째 요소까지 추출합니다.
 `end`가 생략되면 `slice()`는 배열의 끝까지(`arr.length`) 추출합니다.

만약 `end` 값이 배열의 길이보다 크다면, `slice()`는 배열의 끝까지(`arr.length`) 추출합니다.

### 반환 값

추출한 요소를 포함한 새로운 배열.

설명
--

`slice()`는 원본을 대체하지 않습니다. 원본 배열에서 요소의 얕은 복사본을 반환합니다. 원본 배열의 요소는 다음과 같이 반환 된 배열에 복사됩니다:

* 객체 참조(및 실제 객체가 아님)의 경우, `slice()`는 객체 참조를 새 배열로 복사합니다. 원본 배열과 새 배열은 모두 동일한 객체를 참조합니다. 참조 된 객체가 변경되면 변경 내용은 새 배열과 원래 배열 모두에서 볼 수 있습니다.
* `String` 및 `Number` 객체가 아닌 문자열과 숫자의 경우 `slice()`는 문자열과 숫자를 새 배열에 복사합니다. 한 배열에서 문자열이나 숫자를 변경해도 다른 배열에는 영향을 주지 않습니다.

새 요소를 두 배열 중 하나에 추가해도 다른 배열은 영향을 받지 않습니다.

예제
--

### 기존 배열의 일부 반환

```js
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']
```

### `slice` 사용하기

다음 예제에서 `slice()`는 `myCar`에서 `newCar`라는 새 배열을 만듭니다. 두 가지 모두 `myHonda` 객체에 대한 참조를 포함합니다. `myHonda`의 색상이 자주색으로 변경되면 두 배열 모두 변경 사항을 반영합니다.

```js
// Using slice, create newCar from myCar.
let myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } };
let myCar = [myHonda, 2, "cherry condition", "purchased 1997"];
let newCar = myCar.slice(0, 2);

// Display the values of myCar, newCar, and the color of myHonda
// referenced from both arrays.
console.log("myCar = " + JSON.stringify(myCar));
console.log("newCar = " + JSON.stringify(newCar));
console.log("myCar[0].color = " + myCar[0].color);
console.log("newCar[0].color = " + newCar[0].color);

// Change the color of myHonda.
myHonda.color = "purple";
console.log("The new color of my Honda is " + myHonda.color);

// Display the color of myHonda referenced from both arrays.
console.log("myCar[0].color = " + myCar[0].color);
console.log("newCar[0].color = " + newCar[0].color);
```

스크립트를 실행하면 다음과 같은 기록을 남깁니다.

```js
    myCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2,
             'cherry condition', 'purchased 1997']
    newCar = [{color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}, 2]
    myCar[0].color = red
    newCar[0].color = red
    The new color of my Honda is purple
    myCar[0].color = purple
    newCar[0].color = purple
```

### 배열형 객체

`slice()` 메서드를 호출하여 배열형 객체와 콜렉션을 새로운 `Array`로 변환할 수 있습니다. 단순히 `Function.prototype.bind()`를 사용해 객체에 `slice()`를 바인딩 하면 됩니다. 대표적인 "배열형 객체"의 예시는 함수 내의 `arguments`입니다.

```js
function list() {
  return Array.prototype.slice.call(arguments);
}

let list1 = list(1, 2, 3); // [1, 2, 3]
```

`Function.prototype.call()` 메서드를 사용해서도 바인딩을 할 수 있으며, `Array.prototype.slice.call` 대신 더 짧게 `[].slice.call`로 작성할 수도 있습니다.

아무튼, 다음과 같이 `bind()`를 사용해 줄일 수 있습니다.

```js
let unboundSlice = Array.prototype.slice;
let slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}

let list1 = list(1, 2, 3); // [1, 2, 3]
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.slice |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.splice()`
* `Function.prototype.call()`
* `Function.prototype.bind()`


Array.prototype.concat() - JavaScript

Array.prototype.concat()
========================

`Array` 인스턴스의 **`concat()`** 메서드는 두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환합니다.

시도해보기
-----

구문
--

```js
concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, /\* …, \*/ valueN)
```

### 매개변수

`valueN` Optional

 새 배열로 연결할 배열 및/또는 값입니다. 모든 `valueN` 매개변수가 생략된 경우,
 `concat`은 호출된 기존 배열의 얕은 복사본을 반환합니다. 자세한 내용은 아래 설명을 참조하세요.

### 반환값

새로운 `Array` 객체.

설명
--

`concat` 메서드는 새 배열을 만듭니다. 먼저 배열은 호출된 객체의 요소로 채워집니다. 그런 다음, 각 인자의 값이 배열에 연결됩니다. 일반 객체나 원시 값의 경우, 인자 자체가 최종 배열의 요소가 되고, `Symbol.isConcatSpreadable` 속성이 참 값으로 설정된 배열 또는 유사 배열 객체인 경우, 인자의 각 요소가 최종 배열에 독립적으로 추가됩니다. `concat` 메서드는 중첩된 배열 인자로 재귀하지 않습니다.

`concat()` 메서드는 복사 메서드입니다. 이 메서드는 이 배열 또는 인자로 제공된 배열을 변경하지 않는 대신, 원래 배열의 요소와 동일한 요소를 포함하는 얕은 복사본을 반환합니다.

`concat()` 메서드는 소스 배열 중 하나라도 희소 배열이 있다면 배열의 빈 슬롯을 보존합니다.

`concat()` 메서드는 범용 메서드입니다. `this` 값은 다른 인자와 동일한 방식으로 처리됩니다(객체로 먼저 변환된다는 점을 제외하면). 즉, 일반 객체는 결과 배열 바로 앞에 붙고, `@@isConcatSpreadable`이 참인 유사 배열 객체는 결과 배열에 전개됩니다.

예제
--

### 두 배열 연결

다음 예제는 두 배열을 연결합니다.

```js
const letters = ["a", "b", "c"];
const numbers = [1, 2, 3];

const alphaNumeric = letters.concat(numbers);
console.log(alphaNumeric);
// 결과는 ['a', 'b', 'c', 1, 2, 3]
```

### 세 배열 연결

다음 예제는 세 배열을 연결합니다.

```js
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers);
// 결과는 [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

### 값을 배열에 연결

다음 코드는 세 개의 값을 배열에 연결합니다.

```js
const letters = ["a", "b", "c"];

const alphaNumeric = letters.concat(1, [2, 3]);

console.log(alphaNumeric);
// 결과는 ['a', 'b', 'c', 1, 2, 3]
```

### 중첩된 배열 연결

다음 코드는 중첩된 배열을 연결하고 참조 유지를 설명합니다.

```js
const num1 = [[1]];
const num2 = [2, [3]];

const numbers = num1.concat(num2);

console.log(numbers);
// 결과는 [[1], 2, [3]]

// num1의 첫 번째 요소를 수정합니다.
num1[0].push(4);

console.log(numbers);
// 결과는 [[1, 4], 2, [3]]
```

### Symbol.isConcatSpreadable을 이용하여 유사 배열 객체 연결

`concat`은 기본적으로 모든 유사 배열 객체를 배열로 취급하지 않으며, `Symbol.isConcatSpreadable`이 참인 값(예: `true`)으로 설정된 경우에만 배열로 취급합니다.

```js
const obj1 = { 0: 1, 1: 2, 2: 3, length: 3 };
const obj2 = { 0: 1, 1: 2, 2: 3, length: 3, [Symbol.isConcatSpreadable]: true };
console.log([0].concat(obj1, obj2));
// [ 0, { '0': 1, '1': 2, '2': 3, length: 3 }, 1, 2, 3 ]
```

### 희소 배열에 concat() 사용

소스 배열 중 하나라도 희소 배열이 있으면, 결과 배열도 희소 배열이 됩니다.

```js
console.log([1, , 3].concat([4, 5])); // [1, empty, 3, 4, 5]
console.log([1, 2].concat([3, , 5])); // [1, 2, 3, empty, 5]
```

### 배열이 아닌 객체에 concat() 사용

`this` 값이 배열이 아닌 경우, `this`를 객체로 변환된 다음 `concat()`의 인자와 동일한 방식으로 처리합니다. 이 경우 반환 값은 항상 중첩이 없는 새 배열입니다.

```js
console.log(Array.prototype.concat.call({}, 1, 2, 3)); // [{}, 1, 2, 3]
console.log(Array.prototype.concat.call(1, 2, 3)); // [ [Number: 1], 2, 3 ]
const arrayLike = {
  [Symbol.isConcatSpreadable]: true,
  length: 2,
  0: 1,
  1: 2,
  2: 99, // length가 2이므로 concat()에서 무시됨
};
console.log(Array.prototype.concat.call(arrayLike, 3, 4)); // [1, 2, 3, 4]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.concat |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Symbol.isConcatSpreadable` 지원과 같은 최신 동작을 수정하고 구현한 `core-js`의 `Array.prototype.concat` 폴리필
* 인덱스된 컬렉션
* `Array`
* `Array.prototype.push()`
* `Array.prototype.unshift()`
* `Array.prototype.splice()`
* `String.prototype.concat()`
* `Symbol.isConcatSpreadable`


Array.prototype[@@unscopables] - JavaScript

Array.prototype[@@unscopables]
==============================

`Array.prototype`의 **`@@unscopable`** 데이터 속성은 모든 `Array` 인스턴스에서 공유됩니다. 여기에는 ES2015 버전 이전에는 ECMAScript 표준에 포함되지 않았고, `with` (en-US) 문 바인딩을 위해 무시되는 속성 이름이 포함되어 있습니다.

값
-

아래에 있는 속성 이름과 해당 값이 `true`로 설정된 널 프로토타입 객체입니다.

| Property attributes of `Array.prototype[@@unscopables]` |
| --- |
| Writable | 불가능 |
| Enumerable | 불가능 |
| Configurable | 가능 |

설명
--

`with` 문 바인딩 목적으로 무시되는 기본 `Array` 속성은 다음과 같습니다.

* `at()`
* `copyWithin()`
* `entries()`
* `fill()`
* `find()`
* `findIndex()`
* `findLast()`
* `findLastIndex()`
* `flat()`
* `flatMap()`
* `includes()`
* `keys()`
* `toReversed()`
* `toSorted()`
* `toSpliced()`
* `values()`

`Array.prototype[@@unscopables]`는 위의 모든 속성 이름과 `true` 값만 포함하는 빈 객체입니다. 이 객체의 프로토타입은 `null`이므로 실수로 `toString`과 같은 `Object.prototype` 속성은 범위 지정이 불가능해지지 않으며, `with` 문 내의 `toString()`은 배열에서 계속 호출됩니다.

객체에 범위 지정 불가능 속성을 설정하는 방법은 `Symbol.unscopables` (en-US)를 참조하세요.

예제
--

아래의 `keys.push('something')` 호출이 ECMAScript 2015 이전에 작성된 코드에 있다고 가정해 보겠습니다.

```js
var keys = [];

with (Array.prototype) {
  keys.push("something");
}
```

ECMAScript 2015에 `Array.prototype.keys()` 메서드가 도입되었을 때, `@@unscopables` 데이터 속성이 함께 도입되지 않았다면, JavaScript 런타임이 `keys`를 예제 코드에 정의된 `keys` 배열이 아닌 `Array.prototype.keys()` 메서드로 해석하기 때문에 해당 `keys.push('something')` 호출이 중단될 수 있었습니다.

따라서 `Array.prototype`에 대한 `@@unscopables` 데이터 속성을 사용하면 ECMAScript 2015에 도입된 `Array` 속성이 `with` 문 바인딩 목적으로 무시되므로 ECMAScript 2015 이전에 작성된 코드가 중단되지 않고 예상대로 계속 작동할 수 있습니다.

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype-@@unscopables |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype[@@unscopables]` 폴리필
* 인덱스된 콜렉션
* `Array`
* `with` (en-US)
* `Symbol.unscopables` (en-US)


Array.prototype.fill() - JavaScript

Array.prototype.fill()
======================

`Array` 인스턴스의 **`fill()`** 메서드는 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경합니다. 그리고 수정된 배열을 반환합니다.

시도해보기
-----

구문
--

```js
fill(value)
fill(value, start)
fill(value, start, end)
```

### 매개변수

`value`

배열을 채울 값입니다. 배열의 모든 요소는 정확히 이 값이 될 것입니다. `value`가 객체인 경우, 배열의 각 슬롯은 해당 객체를 참조합니다.

`start` Optional

채우기를 시작할 0 기반 인덱스로, 정수로 변환됩니다.

* 음수 인덱스는 배열의 끝부터 거꾸로 셉니다. `start < 0`인 경우, `start + array.length`가 사용됩니다.
* `start < -array.length` 또는 `start`가 생략된 경우, `0`이 사용됩니다.
* `start >= array.length`이면, 아무 인덱스도 채워지지 않습니다.

`end` Optional

채우기를 끝낼 0 기반 인덱스로, 정수로 변환됩니다. `fill()`은 `end`까지 채우며, `end`는 포함하지 않습니다.

* 음수 인덱스는 배열의 끝부터 거꾸로 셉니다. `end < 0`인 경우, `end + array.length`가 사용됩니다.
* `end < -array.length` 이면, `0`이 사용됩니다.
* `end >= array.length` 이거나 `end`가 생략된 경우, `array.length`가 사용되어 끝까지 모든 인덱스가 채워집니다.
* `end`가 정수로 변환된 후, `after`보다 앞에 위치하면, 아무 인덱스도 채워지지 않습니다.

### 반환 값

`value`로 채워진 변경된 배열입니다.

설명
--

`fill()` 메서드는 변경 메서드입니다. 이 메서드는 `this`의 length는 변경하지 않지만, `this`의 내용은 변경합니다.

`fill()` 메서드는 희소 배열의 빈 슬롯도 `value`로 채웁니다.

`fill()` 메서드는 범용입니다. `this` 값에는 `length` 속성만 있을 것으로 예상합니다. 문자열도 유사 배열이지만, 문자열은 불변이므로 이 메서드를 적용하기에는 적합하지 않습니다.

**참고:** 빈 배열(`length = 0`)에 `Array.prototype.fill()`을 사용하면 배열에 수정할 내용이 없으므로 배열이 수정되지 않습니다.
 배열을 선언할 때 `Array.prototype.fill()`을 사용하려면 배열의 길이가 0이 아닌지 확인하세요.
 예제를 참조하십시오.

예제
--

### fill() 사용하기

```js
console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

// 배열의 각 슬롯이 참조하는 단일 객체
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
```

### fill()을 사용하여 전체 1 행렬로 만들기

이 예제는 Octave 또는 MATLAB의 `ones()` 함수와 같이 전체 1 행렬을 만드는 방법을 보여줍니다.

```js
const arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(4).fill(1); // 크기가 4이고, 1로 채워진 배열 생성
}
arr[0][0] = 10;
console.log(arr[0][0]); // 10
console.log(arr[1][0]); // 1
console.log(arr[2][0]); // 1
```

### fill()을 사용하여 빈 배열 채우기

이 예제는 모든 요소를 특정 값으로 설정하여 배열을 채우는 방법을 보여줍니다. `end` 매개변수는 지정할 필요가 없습니다.

```js
const tempGirls = Array(5).fill("girl", 0);
```

이 배열은 처음에 인덱스가 할당되지 않은 희소 배열이었습니다. 그래도 `fill()`은 여전히 이 배열을 채울 수 있습니다.

### 배열이 아닌 객체에서 fill() 호출하기

`fill()` 메서드는 `this`의 `length` 속성을 읽고 `start`부터 `end`까지 각 정수 키 속성 값을 설정합니다.

```js
const arrayLike = { length: 2 };
console.log(Array.prototype.fill.call(arrayLike, 1));
// { '0': 1, '1': 1, length: 2 }
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.fill |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.fill` 폴리필
* 인덱스된 컬렉션
* `Array`
* `TypedArray.prototype.fill()`


Array.prototype.join() - JavaScript

Array.prototype.join()
======================

`Array` 인스턴스의 **`Join()`** 메서드는 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환합니다. 배열에 항목이 하나만 있는 경우, 해당 항목은 구분 기호를 사용하지 않고 반환됩니다.

시도해보기
-----

구문
--

```js
join()
join(separator)
```

### 매개변수

`separator` Optional

배열의 인접한 요소의 각 쌍을 구분하는 문자열입니다. 생략되면 배열 요소는 쉼표(",")로 구분됩니다.

### 반환 값

배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 `arr.length` 가 `0`이라면, 빈 문자열을 반환합니다.

설명
--

문자열로 변환된 모든 배열 요소가 하나의 문자열로 결합됩니다. 요소가 `undefined`, `null`인 경우, "null" 또는 "undefine" 문자열 대신 빈 문자열로 변환됩니다.

`Array.prototype.toString()`는 `join` 메서드를 내부적으로 인수 없이 호출합니다. 배열 인스턴스의 `join`을 재정의하면 해당 `toString` 동작도 재정의됩니다.

`Array.prototype.join`은 다른 배열을 포함하여 재귀적으로 각 요소를 문자열로 변환합니다. `Array.prototype.toString`(`join()` 호출과 같음)에서 반환된 문자열에는 구분 기호가 없기 때문에 중첩된 배열은 평탄화된 것처럼 보입니다. 첫 번째 수준의 구분 기호만 제어할 수 있으며, 더 깊은 수준에서는 항상 기본 쉼표를 사용합니다.

```js
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

console.log(matrix.join()); // 1,2,3,4,5,6,7,8,9
console.log(matrix.join(";")); // 1,2,3;4,5,6;7,8,9
```

배열이 순환 배열(자체 요소를 포함)인 경우, 브라우저는 순환 참조를 무시하여 무한 재귀를 방지합니다.

```js
const arr = [];
arr.push(1, [3, arr, 4], 2);
console.log(arr.join(";")); // 1;3,,4;2
```

희소 배열에 사용되는 경우, `join()` 메서드는 빈 슬롯의 값이 `undefined`인 것처럼 반복합니다.

`join()` 메서드는 범용 메서드입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상됩니다.

예제
--

### 네 가지 다른 방법으로 배열 연결하기

다음 예제에서는 세 개의 요소가 있는 배열 `a`를 만든 다음, 기본 구분 기호, 쉼표와 공백, 그리고 더하기와 빈 문자열을 사용하여 배열을 네 번 연결합니다.

```js
const a = ["바람", "물", "불"];
a.join(); // '바람,물,불'
a.join(", "); // '바람, 물, 불'
a.join(" + "); // '바람 + 물 + 불'
a.join(""); // '바람물불'
```

### 희소 배열에 join() 사용하기

`join()`은 빈 슬롯을 `undefined`와 같이 처리하고 추가 구분 기호를 생성합니다.

```js
console.log([1, , 3].join()); // '1,,3'
console.log([1, undefined, 3].join()); // '1,,3'
```

### 배열이 아닌 객체에서 join() 호출하기

`join` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음이 아닌 정수인 각 속성에 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // length가 3 이므로 join()에서 무시됨.
};
console.log(Array.prototype.join.call(arrayLike));
// 2,3,4
console.log(Array.prototype.join.call(arrayLike, "."));
// 2.3.4
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.join |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.join` 폴리필
* 인덱스 기반 컬렉션 안내서
* `Array`
* `Array.prototype.toString()`
* `TypedArray.prototype.join()`
* `String.prototype.split()`


Array.length - JavaScript

Array.length
============

`Array` 인스턴스의 **`length`** 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다. **`length`** 속성에 값을 설정할 경우 배열의 길이를 변경합니다.

시도해보기
-----

설명
--

`length` 속성의 값은 양의 정수이며 2^32 미만의 값을 가집니다.

```js
var namelistA = new Array(4294967296); // 2의 32제곱 = 4294967296
var namelistC = new Array(-100); // 음수

console.log(namelistA.length); // RangeError: Invalid array length
console.log(namelistC.length); // RangeError: Invalid array length

var namelistB = [];
namelistB.length = Math.pow(2, 32) - 1; // 길이를 2의 32제곱 미만으로 설정
console.log(namelistB.length);

// 4294967295
```

아무 때나 `length` 속성에 값을 설정해 배열을 절단할 수 있습니다. `length` 속성으로 배열의 길이를 늘리면 실제 원소의 수가 증가합니다. 예를 들어 길이가 2인 배열의 `length`를 3으로 설정한다면 마지막에 `undefined`가 추가돼 총 3개의 요소를 갖게 됩니다.

```js
var arr = [1, 2, 3];
printEntries(arr);

arr.length = 5; // set array length to 5 while currently 3.
printEntries(arr);

function printEntries(arr) {
  var length = arr.length;
  for (var i = 0; i < length; i++) {
    console.log(arr[i]);
  }
  console.log("=== printed ===");
}

// 1
// 2
// 3
// === printed ===
// 1
// 2
// 3
// undefined
// undefined
// === printed ===
```

그러나 `length` 속성의 값이 꼭 배열에 정의된 원소의 수를 나타내진 않습니다. `length`와 숫자형 속성의 관계를 참고하세요.

| Property attributes of `Array.length` |
| --- |
| Writable | 가능 |
| Enumerable | 불가능 |
| Configurable | 불가능 |

예제
--

### 배열 순회

다음 예제는 `numbers` 배열을 length 속성의 크기만큼 순회합니다. 각 원소의 값은 두 배가 됩니다.

```js
var numbers = [1, 2, 3, 4, 5];
var length = numbers.length;
for (var i = 0; i < length; i++) {
  numbers[i] \*= 2;
}
// numbers is now [2, 4, 6, 8, 10]
```

### 배열 단축

다음 예제는 `numbers` 배열의 현재 길이가 3보다 클 경우 3으로 줄입니다.

```js
var numbers = [1, 2, 3, 4, 5];

if (numbers.length > 3) {
  numbers.length = 3;
}

console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-properties-of-array-instances-length |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array`


Array.prototype.every() - JavaScript

Array.prototype.every()
=======================

`Array` 인스턴스의 **`every()`** 메서드는 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다. 이 메서드는 불리언 값을 반환합니다.

시도해보기
-----

구문
--

```js
every(callbackFn)
every(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

배열의 각 요소에 대해 실행할 함수입니다. 요소가 테스트를 통과하면 참 값을 반환하고, 그렇지 않으면 거짓 값을 반환해야 합니다. 함수는 다음 인자를 사용하여 호출됩니다.

`element`

배열에서 처리되는 현재 요소.

`index`

처리되는 현재 요소의 인덱스.

`array`

`every()`를 호출한 배열.

`thisArg` Optional

`callbackFn`을 실행할 때 `this`로 사용하는 값. 순회 메서드를 참조하세요.

### 반환 값

`callbackFn`이 모든 배열 요소에 대해 참 값을 반환하면 `true`입니다. 그렇지 않으면 `false`입니다.

설명
--

`every()` 메서드는 순회 메서드입니다. 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출하고, `callbackFn`이 거짓 값을 반환할 때까지 호출을 반복합니다. 거짓 요소가 발견되면 `every()`는 즉시 `false`를 반환하고 배열 순회를 중지합니다. 그렇지 않고 `callbackFn`이 모든 요소에 대해 참 값을 반환하면, `every()`는 `true`를 반환합니다.

`every`는 수학의 "모든 ~에 대해(for all)" 양화사처럼 작동합니다. 특별히 빈 배열은 `true`를 반환합니다. (빈 집합의 모든 요소가 주어진 조건을 만족하는 것은 공허 참입니다.)

`callbackFn`은 값이 할당된 배열의 인덱스에 대해서만 호출됩니다. 희소 배열의 빈 슬롯에는 호출되지 않습니다.

`every()`는 호출되는 배열을 변경하지 않지만, `callbackFn`으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 length는 `callbackFn`을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서,

* `callbackFn`은 `every()` 호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소를 방문하지 않습니다.
* 이미 방문한 인덱스를 변경해도 `callbackFn`이 다시 호출되지 않습니다.
* 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. 삭제된 (en-US) 요소는 방문되지 않습니다.

**경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).

`every()` 메서드는 범용입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.

예제
--

### 모든 배열 요소의 크기 테스트

다음 예제는 배열의 모든 요소가 9보다 더 큰지 테스트합니다.

```js
function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
```

### 한 배열이 다른 배열의 부분 집합인지 확인

다음 예제는 배열의 모든 요소가 다른 배열에 존재하는지 테스트합니다.

```js
const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));

console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false
```

### 희소 배열에 every() 사용하기

`every()` 는 빈 슬롯에 콜백 함수를 실행하지 않습니다.

```js
console.log([1, , 3].every((x) => x !== undefined)); // true
console.log([2, , 2].every((x) => x === 2)); // true
```

### 초기 배열에 영향주기(수정, 추가, 삭제)

다음 예제는 배열이 수정되었을 때 `every` 메서드의 동작을 테스트합니다.

```js
// ---------
// 항목 수정
// ---------
let arr = [1, 2, 3, 4];
arr.every((elem, index, arr) => {
  arr[index + 1]--;
  console.log(`[${arr}][${index}] -> ${elem}`);
  return elem < 2;
});

// 루프는 3번 순회하지만,
// 수정이 없었다면 2번만 순회했을 것입니다.
//
// 첫 번째 순회: [1,1,3,4][0] -> 1
// 두 번째 순회: [1,1,2,4][1] -> 1
// 세 번째 순회: [1,1,2,3][2] -> 2

// ---------
// 항목 추가
// ---------
arr = [1, 2, 3];
arr.every((elem, index, arr) => {
  arr.push("new");
  console.log(`[${arr}][${index}] -> ${elem}`);
  return elem < 4;
});

// 새로운 요소가 추가된 후에도 3번만 순회합니다.
//
// 첫 번째 순회: [1, 2, 3, new][0] -> 1
// 두 번째 순회: [1, 2, 3, new, new][1] -> 2
// 세 번째 순회: [1, 2, 3, new, new, new][2] -> 3

// ---------
// 항목 삭제
// ---------
arr = [1, 2, 3, 4];
arr.every((elem, index, arr) => {
  arr.pop();
  console.log(`[${arr}][${index}] -> ${elem}`);
  return elem < 4;
});

// 기존 요소가 `pop()` 되어 2번만 순회합니다.
//
// 첫 번째 순회: [1,2,3][0] -> 1
// 두 번째 순회: [1,2][1] -> 2
```

### 배열이 아닌 객체에서 every() 호출하기

`every()` 메서드는 `this`의 `length` 속성을 읽은 다음, `length`보다 작은 음수가 아닌 정수 키의 각 속성에 모두 접근하거나 `callbackFn`이 `false`를 반환할 때까지 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
  3: 345, // length가 3이므로 every()에 의해 무시됩니다.
};
console.log(
  Array.prototype.every.call(arrayLike, (x) => typeof x === "string"),
); // true
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.every |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.every` 폴리필
* 인덱스된 컬렉션
* `Array`
* `Array.prototype.forEach()`
* `Array.prototype.some()`
* `Array.prototype.find()`
* `TypedArray.prototype.every()`


Array.prototype.findLastIndex() - JavaScript

Array.prototype.findLastIndex()
===============================

**`findLastIndex()`** 메서드는 배열을 역순으로 순회하며 주어진 판별 함수를 만족하는 만족하는 배열의 첫번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

인덱스 대신 판별함수를 만족하는 마지막 값을 반환하는`findLast()`메서드도 참고하세요.

시도해보기
-----

구문
--

```js
findLastIndex(callbackFn)
findLastIndex(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 매칭된 요소가 발견되었음을 나타내기 위해 참 값을 반환해야하며, 그렇지 않으면 거짓 값을 반환해야 합니다. 이 함수는 다음과 같은 인수와 함께 호출됩니다.

`element`

배열에서 처리중인 현재 요소입니다.

`index`

배열에서 처리중인 현재 요소의 인덱스입니다.

`array`

`findLastIndex()`가 호출된 배열입니다.

`thisArg` Optional

`callbackFn`을 실행할 때 this로 사용할 객체입니다. 자세한 내용은 반복적인 메소드(iterative methods)를 참조합니다.

### 반환 값

 테스트를 통과하는 배열에서 마지막 요소(가장 높은 인덱스)의 인덱스입니다.
 만약 매칭되는 요소가 없다면 -1을 반환합니다.

설명
--

`findLastIndex()` 메서드는 반복적인 메소드(iterative methods)입니다. 이 메서드는 배열의 각 요소마다 제공된 `callbackFn` 함수를 역순으로 한 번씩 호출하며, `callbackFn`이 참 값을 반환할 때까지 반복합니다. 참 값이 반환되면 `findLastIndex()`는 해당 요소의 인덱스를 반환하고 배열 반복을 중단합니다. 만약 `callbackFn`이 참 값을 반환하지 않으면, `findLastIndex()`는 `-1`을 반환합니다.

`callbackFn`는 배열의 *모든* 인덱스에 대해 호출됩니다. 할당된 값이 있는 인덱스뿐만 아니라 희소 배열(sparse arrays)의 비어있는 슬롯도 `undefined`와 동일하게 동작합니다.

`findLastIndex()` 메서드는 호출된 배열을 변경하지 않지만, 인자로 제공된 `callbackFn`은 변경할 수 있습니다. 그러나, 배열의 길이는 `callbackFn`의 첫 호출 *이전에* 저장됨에 유의합니다. 따라서 다음과 같이 동작합니다.

* `callbackFn`은 `findLastIndex()`가 호출된 이후 배열에 추가된 요소에 방문하지 않습니다.
* 이미 방문한 인덱스의 변경은 `callbackFn`을 다시 호출하지 않습니다.
* `callbackFn`에 의해 아직 방문되지 않은 배열의 기존 요소가 변경되면, `callbackFn`에 전달되는 값은 해당 요소가 방문되었을 때의 값이 됩니다. 삭제된 (en-US) 요소는 마치 `undefined`인 것처럼 방문됩니다.

**경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드로 이어지는 경우가 많으며, 일반적으로 피해야 할 것입니다 (특별한 경우를 제외하고).

`findLastIndex()` 메서드는 일반적인(generic) 메서드입니다. 이는 `this` 값이 `length` 속성과 정수 키 속성을 가지고 있는 것만을 요구합니다.

예제
--

### 배열에서 마지막 소수의 인덱스 찾기

다음 예제는 배열에서 마지막으로 나오는 소수(prime number)의 인덱스를 반환하며, 소수가 없는 경우 `-1`을 반환합니다.

```js
function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log([4, 6, 8, 12].findLastIndex(isPrime)); // -1, not found
console.log([4, 5, 7, 8, 9, 11, 12].findLastIndex(isPrime)); // 5
```

### 희소 배열에서 findLastIndex() 사용

희소 배열에서 `undefined`를 찾아 빈 슬롯의 인덱스를 알아낼 수 있습니다.

```js
console.log([1, , 3].findLastIndex((x) => x === undefined)); // 1
```

### 배열이 아닌 객체에서 findLastIndex() 사용

`findLastIndex()` 메서드는 `this`의 `length` 속성을 읽은 다음 각 정수 인덱스에 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: 2,
  1: 7.3,
  2: 4,
};
console.log(
  Array.prototype.findLastIndex.call(arrayLike, (x) => Number.isInteger(x)),
); // 2
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.findlastindex |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Polyfill of `Array.prototype.findIndex` in `core-js`
* `Array`
* `Array.prototype.find()`
* `Array.prototype.findIndex()`
* `Array.prototype.findLast()`
* `Array.prototype.indexOf()`
* `Array.prototype.lastIndexOf()`
* `TypedArray.prototype.findLastIndex()` (en-US)


Array.prototype.findLast() - JavaScript

Array.prototype.findLast()
==========================

`Array` 인스턴스의 **`findLast()`** 메서드는 배열을 역순으로 순회하며 제공된 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 테스트 함수를 만족하는 요소가 없으면 `undefined`가 반환됩니다.

* 일치하는 첫 번째 요소를 찾으려면 `find()`를 사용하세요.
* 배열에서 마지막으로 일치하는 요소의 인덱스를 찾으려면 `findLastIndex()`를 사용하세요.
* 값의 인덱스를 찾으려면 `indexOf()`를 사용하세요.
 (`findIndex()`와 비슷하지만, 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다.)
* 값이 배열에 존재하는지 확인하려면 `includes()`를 사용합니다.
 이 역시 테스트 함수를 사용하는 것 대신 각 요소가 값과 동일한지 확인합니다.
* 제공된 테스트 함수를 만족하는 요소가 있는지 찾아야 하는 경우, `some()`을 사용하세요.
시도해보기
-----

구문
--

```js
findLast(callbackFn)
findLast(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 참 값을 반환하고, 그렇지 않으면 거짓 값을 반환해야 합니다. 함수는 다음 인수를 사용하여 호출됩니다.

`element`

배열에서 현재 처리되고 있는 요소.

`index`

배열에서 현재 처리되고 있는 요소의 인덱스.

`array`

`findLast()`가 호출된 배열.

`thisArg` Optional

`callbackFn`을 실행할 때 `this`로 사용할 값입니다. 순회 메서드를 참조하세요.

### 반환 값

제공된 테스트 함수를 만족하는 가장 높은 인덱스 값을 가진 배열의 요소 값. 일치하는 요소를 찾을 수 없으면 `undefined`를 반환합니다.

설명
--

`findlast()` 메서드는 순회 메서드입니다. 이 메서드는 `callbackFn`이 참 값을 반환할 때까지, 내림차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출합니다. 그런 다음 `findlast()`는 해당 요소를 반환하고 배열 순회를 중지합니다. `callbackFn`이 참 값을 반환하지 않으면, `findlast()`는 `undefined`를 반환합니다.

`callbackFn`은 값이 할당된 인덱스뿐만 아니라 배열의 모든 인덱스에 대해 호출됩니다. 희소 배열의 빈 슬롯은 `undefined`와 동일하게 동작합니다.

`findlast()`는 호출되는 배열을 변경하지 않지만, `callbackFn`으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 length는 `callbackFn`을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서,

* `callbackFn`은 `findlast()` 호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소는 방문하지 않습니다.
* 이미 방문한 인덱스를 변경해도 `callbackFn`이 해당 인덱스에 대해 다시 호출되지 않습니다.
* 배열의 아직 방문하지 않은 기존 요소가 `callbackFn`에 의해 변경되는 경우, `callbackFn`에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다. 삭제된 (en-US) 요소는 `undefined`가 있는것 처럼 방문됩니다.

**경고:** 위에서 설명한 종류의 동시 수정은 이해하기 어려운 코드를 만드는 경우가 많으므로 일반적으로 지양해야 합니다(특별한 경우 제외).

`find()` 메서드는 범용입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.

예제
--

### 배열에서 요소 속성을 기준으로 일치하는 마지막 객체 찾기

이 예제는 배열 요소의 속성을 기반으로 테스트를 만드는 방법을 보여줍니다.

```js
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "fish", quantity: 1 },
  { name: "cherries", quantity: 5 },
];

// inventory의 재고가 부족하면 true를 반환합니다.
function isNotEnough(item) {
  return item.quantity < 2;
}

console.log(inventory.findLast(isNotEnough));
// { name: "fish", quantity: 1 }
```

#### 화살표 함수와 구조 분해 사용

이전 예제는 화살표 함수와 구조 분해 할당을 사용하여 작성할 수 있습니다.

```js
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "fish", quantity: 1 },
  { name: "cherries", quantity: 5 },
];

const result = inventory.findLast(({ quantity }) => quantity < 2);

console.log(result);
// { name: "fish", quantity: 1 }
```

### 배열에서 마지막 소수 찾기

다음 예제는 배열의 마지막 요소 중 소수인 요소를 반환하거나, 소수가 없는 경우 `undefined`를 반환합니다.

```js
function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log([4, 6, 8, 12].findLast(isPrime)); // undefined, 찾지 못함
console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11
```

### 희소 배열에서 findLast() 사용

희소 배열의 빈 슬롯은 방문되며, `undefined`와 동일하게 취급됩니다.

```js
// 2, 3, 4 인덱스에 요소가 없는 배열로 선언
const array = [0, 1, , , , 5, 6];

// 값이 있는 요소만이 아닌 모든 인덱스를 표시합니다.
array.findLast((value, index) => {
  console.log(`방문 인덱스: ${index} 값: ${value}`);
});
// 방문 인덱스: 6 값: 6
// 방문 인덱스: 5 값: 5
// 방문 인덱스: 4 값: undefined
// 방문 인덱스: 3 값: undefined
// 방문 인덱스: 2 값: undefined
// 방문 인덱스: 1 값: 1
// 방문 인덱스: 0 값: 0

// 삭제된 요소를 포함하여 모든 인덱스를 표시합니다.
array.findLast((value, index) => {
  // 첫 번째 순회에서 요소 5 삭제
  if (index === 6) {
    console.log(`값이 ${array[5]}인 array[5] 삭제`);
    delete array[5];
  }
  // 요소 5가 삭제되어도 여전히 방문됩니다.
  console.log(`방문 인덱스: ${index} 값: ${value}`);
});
// 값이 5인 array[5] 삭제
// 방문 인덱스: 6 값: 6
// 방문 인덱스: 5 값: undefined
// 방문 인덱스: 4 값: undefined
// 방문 인덱스: 3 값: undefined
// 방문 인덱스: 2 값: undefined
// 방문 인덱스: 1 값: 1
// 방문 인덱스: 0 값: 0
```

### 배열이 아닌 객체에서 findLast() 호출

`findlast()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수인 각 속성에 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: 2,
  1: 7.3,
  2: 4,
  3: 3, // length가 3이므로 findlast()에서 무시됩니다.
};
console.log(
  Array.prototype.findLast.call(arrayLike, (x) => Number.isInteger(x)),
); // 4
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.findlast |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.findLast` 폴리필
* 인덱스 기반 컬렉션
* `Array`
* `Array.prototype.find()`
* `Array.prototype.findIndex()`
* `Array.prototype.findLastIndex()`
* `Array.prototype.includes()`
* `Array.prototype.filter()`
* `Array.prototype.every()`
* `Array.prototype.some()`
* `TypedArray.prototype.findLast()` (en-US)


Array.prototype.pop() - JavaScript

Array.prototype.pop()
=====================

**`pop()`** 메서드는 배열에서 **마지막** 요소를 제거하고 그 요소를 반환합니다.

시도해보기
-----

구문
--

```js
arr.pop();
```

### 반환 값

배열에서 제거한 요소. 빈 배열의 경우 `undefined` 를 반환합니다.

설명
--

`pop` 메서드는 배열에서 마지막 요소를 제거하여 그 값을 호출자(caller)에게 반환합니다.

`pop`은 일부러 일반(generic)입니다; 이 메서드는 배열을 닮은 객체에 호출 또는 적용될 수 있습니다. 0부터 시작하는 일련의 연속되는 숫자 속성 내 마지막을 반영하는 `length` 속성을 포함하지 않는 객체는 어떤 의미 있는 방식으로도 행동하지 않을 수 있습니다.

빈 배열에 `pop()`을 호출하면, `undefined`를 반환합니다.

예제
--

### 배열의 마지막 요소 제거

다음 코드는 요소 넷을 포함하는 `myFish` 배열을 생성하고 그 마지막 요소를 제거합니다.

```js
var myFish = ["angel", "clown", "mandarin", "sturgeon"];

var popped = myFish.pop();

console.log(myFish); // ['angel', 'clown', 'mandarin' ]

console.log(popped); // 'sturgeon'
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.pop |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.push()`
* `Array.prototype.shift()`
* `Array.prototype.unshift()`
* `Array.prototype.splice()`


Array.prototype.toSpliced() - JavaScript

Array.prototype.toSpliced()
===========================

`Array`의 **`toSpliced()`** 메서드는 `splice()`에 대응되는 복사 메서드입니다. 이 메서드는 주어진 인덱스에서 일부 요소가 제거되거나 교체된 새로운 배열을 반환합니다.

구문
--

```js
toSpliced(start)
toSpliced(start, deleteCount)
toSpliced(start, deleteCount, item1)
toSpliced(start, deleteCount, item1, item2)
toSpliced(start, deleteCount, item1, item2, /\* …, \*/ itemN)
```

### 매개변수

`start`

배열은 0부터 시작하는 인덱스로 변경되며, 정수로 변환됩니다..

* 음수 인덱스는 배열의 끝에서부터 카운트됩니다. 만약 `start < 0` 인 경우, `start + array.length`가 적용됩니다.
* `start < -array.length`이거나 `start`가 생략된 경우, `0`이 적용됩니다.
* `start >= array.length`인 경우 요소는 삭제되지 않지만, 메서드는 요소를 추가하는 추가 함수처럼 작동합니다.

`deleteCount` Optional

`start`에서부터 제거할 배열의 요소의 개수를 나타내는 수입니다.

만약 `deleteCount`가 생략되거나, `deleteCount`가 `start` 인덱스 뒤의 요소의 개수보다 크거나 같으면 배열의 시작부터 끝까지 모든 요소가 삭제됩니다. 그러나 `itemN` 매개변수를 전달하려면 `Infinity`를 `deleteCount`로 전달하여 `start` 인덱스 뒤의 모든 요소를 삭제해야 합니다. 왜냐하면 `undefined`는 0으로 변환되기 때문입니다.

`deleteCount`가 `0`이거나 음수라면, 요소가 제거되지 않습니다. 이 경우 새 요소를 하나 이상 지정해야 합니다. (아래 참조).

`item1`, …, `itemN` Optional

`start` 부터 시작하여 배열에 추가할 요소입니다.

만약 명확한 요소를 지정하지 않으면, `toSpliced()`는 배열에서 요소만 제거합니다.

### 반환 값

`start` 전의 모든 요소, `item1`, `item2`, …, `itemN` 및 `start + deleteCount` 이후 모든 요소로 구성된 새로운 배열입니다.

설명
--

`splice()`와 비슷한 `toSpliced()`메서드는 여러 작업을 한 번에 수행합니다. 지정한 인덱스에서 시작하여 배열에서 지정한 수의 요소를 제거한 다음 동일한 인덱스에 지정된 요소를 삽입합니다. 그러나 원래 배열을 수정하는 대신 새로운 배열을 반환합니다. 따라서 삭제된 요소는 이 메서드에서 반환되지 않습니다.

`toSpliced()` 메서드는 절대 희소 배열을 생성하지 않습니다. 만약 배열이 비어있다면 빈 슬롯은 새로운 배열에서 `undefined`로 대체됩니다.

`toSpliced()`메서드는 제네릭입니다. `this`값에는 `length`속성과 정수 키 속성만 있을 것으로 예상합니다.

예시
--

### 요소의 삭제, 추가 및 교체하기

`toSpliced()`를 사용하면 배열의 요소를 삭제, 추가 및 교체할 수 있으며, `slice()` 나 `concat()`를 사용하는 것 보다 더 효율적으로 새 배열을 만들 수 있습니다.

```js
const months = ["Jan", "Mar", "Apr", "May"];

// 인덱스 1에 요소 추가
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]

// 인덱스 2부터 2개의 요소 삭제
const months3 = months2.toSpliced(2, 2);
console.log(months3); // ["Jan", "Feb", "May"]

// 인덱스 1의 한 요소를 두 개의 새로운 요소로 교체
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
console.log(months4); // ["Jan", "Feb", "Mar", "May"]

// 원래 배열은 수정되지 않음
console.log(months); // ["Jan", "Mar", "Apr", "May"]
```

### 희소 배열에서 toSpliced() 사용하기

`toSpliced()`메서드는 항상 밀집 배열을 생성합니다.

```js
const arr = [1, , 3, 4, , 6];
console.log(arr.toSpliced(1, 2)); // [1, 4, undefined, 6]
```

### 배열이 아닌 객체에서 toSpliced() 호출하기

`toSpliced()`메서드는 `this`속성의 `length`를 읽습니다. 그런 다음 필요한 정수 키 속성을 읽고 이를 새로운 배열에 작성합니다.

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.toSpliced.call(arrayLike, 0, 1, 2, 3));
// [2, 3, undefined, 4]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.tospliced |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Polyfill of `Array.prototype.toSpliced` in `core-js`
* `Array.prototype.splice()`
* `Array.prototype.toReversed()`
* `Array.prototype.toSorted()`
* `Array.prototype.with()`


Array.prototype.unshift() - JavaScript

Array.prototype.unshift()
=========================

**`unshift()`** 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.

시도해보기
-----

구문
--

```js
arr.unshift([...elementN]);
```

### 매개변수

`elementN`

배열 맨 앞에 추가할 요소.

### 반환 값

메서드를 호출한 배열의 새로운 `length` 속성.

설명
--

`unshift` 메서드는 배열 형태의 객체 시작점에 주어진 값을 삽입합니다.

`unshift`는 제네릭하도록 설계되었으며, 배열 형태를 가진 객체가 호출하거나 객체에 적용할 수 있습니다. `length` 속성을 가지지 않고, 대신 마지막 요소를 0부터 시작하는 순차적 인덱스로만 나타내는 객체에서는 의도한 것과 다르게 행동할 수 있습니다.

예제
--

```js
var arr = [1, 2];

arr.unshift(0); // result of call is 3, the new array length
// arr is [0, 1, 2]

arr.unshift(-2, -1); // = 5
// arr is [-2, -1, 0, 1, 2]

arr.unshift([-3]);
// arr is [[-3], -2, -1, 0, 1, 2]
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.unshift |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.push()`
* `Array.prototype.pop()`
* `Array.prototype.shift()`
* `Array.prototype.concat()`


Array.prototype.indexOf() - JavaScript

Array.prototype.indexOf()
=========================

`Array` 인스턴스의 **`indexOf()`** 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다.

시도해보기
-----

구문
--

```js
indexOf(searchElement)
indexOf(searchElement, fromIndex)
```

### 매개변수

`searchElement`

배열에서 위치를 찾을 요소입니다.

`fromIndex` Optional

검색을 시작할 0 기반 인덱스로, 정수로 변환됩니다.

* 음수 인덱스는 배열의 끝부터 거꾸로 셉니다. 즉, `fromIndex < 0`이면, `fromIndex + array.length`가 사용됩니다. 그러나, 이 경우에도 배열은 여전히 앞에서 뒤로 검색됩니다.
* `fromIndex < -array.length`이거나 `fromIndex`가 생략되면, `0`이 사용되어 전체 배열이 검색됩니다.
* `fromIndex >= array.length` 이면, 배열은 검색되지 않고 `-1`이 반환됩니다.

### 반환 값

배열에서 `searchElement`의 첫 번째 인덱스이고, 찾을 수 없으면 `-1`입니다.

설명
--

`indexOf()` 메서드는 엄격한 동등성 (en-US)을 사용하여 배열의 요소와 `searchElement`를 비교합니다(`===` 연산자가 사용하는 것과 동일한 알고리즘). `NaN` 값은 절대 동일하게 비교되지 않으므로, `searchElement`가 `NaN`인 경우 `indexOf()`는 항상 `-1`을 반환합니다.

`indexOf()` 메서드는 희소 배열의 빈 슬롯을 건너뜁니다.

`indexOf()` 메서드는 범용입니다. `this` 값에는 `length` 속성과 정수 키 속성만 있을 것으로 예상합니다.

예제
--

### indexOf() 사용하기

다음 예제는 `indexOf()`를 사용하여 배열에서 값을 찾습니다.

```js
const array = [2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1
array.indexOf(9, 2); // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0
```

`indexOf()`를 사용하여 `NaN`을 검색할 수 없습니다.

```js
const array = [NaN];
array.indexOf(NaN); // -1
```

### 요소가 나타난 모든 위치 찾기

```js
const indices = [];
const array = ["a", "b", "a", "c", "a", "d"];
const element = "a";
let idx = array.indexOf(element);
while (idx !== -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]
```

### 배열에 요소가 있는지 확인하고 배열 업데이트하기

```js
function updateVegetablesCollection(veggies, veggie) {
  if (veggies.indexOf(veggie) === -1) {
    veggies.push(veggie);
    console.log(`새로운 veggies 컬력션은 ${veggies}`);
  } else {
    console.log(`${veggie}는 이미 veggies 컬렉션에 존재합니다.`);
  }
}

const veggies = ["potato", "tomato", "chillies", "green-pepper"];

updateVegetablesCollection(veggies, "spinach");
// 새로운 veggies 컬력션은 potato,tomato,chillies,green-pepper,spinach
updateVegetablesCollection(veggies, "spinach");
// spinach는 이미 veggies 컬렉션에 존재합니다.
```

### 희소배열에 indexOf() 사용하기

`indexOf()`를 사용하여 희소 배열에서 빈 슬롯을 검색할 수 없습니다.

```js
console.log([1, , 3].indexOf(undefined)); // -1
```

### 배열이 아닌 객체에서 indexOf() 호출하기

`indexOf()` 메서드는 `this`의 `length` 속성을 읽은 다음 키가 `length`보다 작은 음수가 아닌 정수인 각 속성에 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // length가 3이므로 indexOf()에서 무시됩니다.
};
console.log(Array.prototype.indexOf.call(arrayLike, 2));
// 0
console.log(Array.prototype.indexOf.call(arrayLike, 5));
// -1
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.indexof |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `core-js`의 `Array.prototype.indexOf` 폴리필
* 인덱스 기반 컬렉션 안내서
* `Array`
* `Array.prototype.findIndex()`
* `Array.prototype.findLastIndex()`
* `Array.prototype.lastIndexOf()`
* `TypedArray.prototype.indexOf()`
* `String.prototype.indexOf()`


Array.prototype.toLocaleString() - JavaScript

Array.prototype.toLocaleString()
================================

**`toLocaleString()`** 메서드는 배열의 요소를 나타내는 문자열을 반환합니다. 요소는 `toLocaleString` 메서드를 사용하여 문자열로 변환되고 이 문자열은 locale 고유 문자열(가령 쉼표 ",")에 의해 분리됩니다.

시도해보기
-----

구문
--

```js
    arr.toLocaleString([locales[, options]]);
```

### 매개변수

`locales` Optional

A string with a BCP 47 language tag, or an array of such strings. For the general form and interpretation of the `locales` argument, see the `Intl` (en-US) page.

`options` Optional

An object with configuration properties, for numbers see `Number.prototype.toLocaleString()` (en-US), and for dates see `Date.prototype.toLocaleString()`.

### 반환 값

배열의 요소를 표현하는 문자열.

설명
--

배열의 요소는 `toLocaleString` 메서드를 사용하여 문자열로 변환됩니다:

* `Object`: `Object.prototype.toLocaleString()`
* `Number`: `Number.prototype.toLocaleString()` (en-US)
* `Date`: `Date.prototype.toLocaleString()`
예제
--

### `toLocaleString` 사용

```js
var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];

var str = myArr.toLocaleString();

console.log(str);
// '1337,6.12.2013 19:37:35,foo' 출력(log)
// Europe/Berlin 시간대로 German (de-DE) locale에서 실행하는 경우
```

폴리필
---

```js
// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
if (!Array.prototype.toLocaleString) {
  Object.defineProperty(Array.prototype, "toLocaleString", {
    value: function (locales, options) {
      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var a = Object(this);

      // 2. Let len be ? ToLength(? Get(A, "length")).
      var len = a.length >>> 0;

      // 3. Let separator be the String value for the
      // list-separator String appropriate for the
      // host environment's current locale (this is
      // derived in an implementation-defined way).
      // NOTE: In this case, we will use a comma
      var separator = ",";

      // 4. If len is zero, return the empty String.
      if (len === 0) {
        return "";
      }

      // 5. Let firstElement be ? Get(A, "0").
      var firstElement = a[0];
      // 6. If firstElement is undefined or null, then
      // a.Let R be the empty String.
      // 7. Else,
      // a. Let R be ?
      // ToString(?
      // Invoke(
      // firstElement,
      // "toLocaleString",
      // « locales, options »
      // )
      // )
      var r =
        firstElement == null
          ? ""
          : firstElement.toLocaleString(locales, options);

      // 8. Let k be 1.
      var k = 1;

      // 9. Repeat, while k < len
      while (k < len) {
        // a. Let S be a String value produced by
        // concatenating R and separator.
        var s = r + separator;

        // b. Let nextElement be ? Get(A, ToString(k)).
        var nextElement = a[k];

        // c. If nextElement is undefined or null, then
        // i. Let R be the empty String.
        // d. Else,
        // i. Let R be ?
        // ToString(?
        // Invoke(
        // nextElement,
        // "toLocaleString",
        // « locales, options »
        // )
        // )
        r =
          nextElement == null
            ? ""
            : nextElement.toLocaleString(locales, options);

        // e. Let R be a String value produced by
        // concatenating S and R.
        r = s + r;

        // f. Increase k by 1.
        k++;
      }

      // 10. Return R.
      return r;
    },
  });
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.tolocalestring |
| ECMAScript Internationalization API Specification # sup-array.prototype.tolocalestring |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.toString()`
* `Intl` (en-US)
* `Object.prototype.toLocaleString()`
* `Number.prototype.toLocaleString()` (en-US)
* `Date.prototype.toLocaleString()`


Array.prototype.toString() - JavaScript

Array.prototype.toString()
==========================

**`toString()`** 메서드는 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다.

시도해보기
-----

구문
--

```js
arr.toString();
```

### 반환 값

배열을 표현하는 문자열을 반환합니다.

설명
--

`Array` 객체는 `Object`의 `toString` 메서드를 재정의(override)합니다. Array 객체에 대해, `toString` 메서드는 배열을 합쳐(join) 쉼표로 구분된 각 배열 요소를 포함하는 문자열 하나를 반환합니다. 예를 들어, 다음 코드는 배열을 생성하며 그 배열을 문자열로 변환하기 위해 `toString`을 사용합니다.

```js
var monthNames = ["Jan", "Feb", "Mar", "Apr"];
var myVar = monthNames.toString(); // 'Jan,Feb,Mar,Apr'을 myVar에 할당.
```

JavaScript는 배열이 텍스트 값으로 표현되거나 배열이 문자열 연결(concatenation)에 참조될 때 자동으로 `toString` 메서드를 호출합니다.

### ECMAScript 5 의미

JavaScript 1.8.5 (Firefox 4)부터, ECMAScript 제5판 의미(semantics)와 일치하는 `toString()` 메서드는 일반(generic) 메서드이므로 모든 객체에 사용될 수 있습니다. 객체가 `join()` 메서드가 있는 경우, 호출되어 그 값이 반환됩니다. 그렇지 않으면 `Object.prototype.toString()`가 호출되어 그 결과값이 반환됩니다.

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-array.prototype.tostring |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `Array.prototype.join()`
* `Object.prototype.toSource()` (en-US)