Array.prototype.forEach() - JavaScript

Array.prototype.forEach()
=========================

`Array` 인스턴스의 **`forEach()`** 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.

시도해보기
-----

구문
--

```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

배열의 각 요소에 대해 실행할 함수입니다. 반환값은 사용되지 않습니다. 함수는 다음 인수를 사용하여 호출됩니다.

`element`

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

`index`

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

`array`

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

`thisArg` Optional

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

### 반환 값

없음 (`undefined`).

설명
--

`forEach()` 메서드는 순회 메서드입니다. 이 메서드는 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 오름차순 인덱스 순서로 한 번씩 호출합니다. `map()`과 달리 `forEach()`는 항상 `undefined`를 반환하므로 체이닝할 수 없습니다. 일반적인 사례로 체인의 끝에서 배열을 변경하려는 시도가 있습니다.

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

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

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

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

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

예외를 발생시키는 것 외에는 `forEach()` 루프를 중지하거나 중단할 수 있는 방법이 없습니다. 루프를 중지하는 동작이 필요하다면, `forEach()` 메서드는 적절한 도구가 아닐 수 있습니다.

`for`, `for...of`, `for...in`과 같은 반복문을 사용하여 조기 종료를 수행할 수 있습니다. `every()`, `some()`, `find()`, `findIndex()`와 같은 배열 메서드도 추가 순회가 필요하지 않은 경우 즉시 순회를 중지할 수있습니다.

`forEach()`는 동기 함수를 기대하며 프로미스를 기다리지 않습니다. 프로미스(또는 비동기 함수)를 `forEach` 콜백으로 사용할 때는 그 의미를 알고 있어야 합니다.

```js
const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// 순진하게 예상한 출력: 14
// 실제 출력: 0
```

일련의 비동기 연산을 순차적으로 또는 동시에 실행하려면 프로미스 구성을 참조하세요.

예제
--

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

```js
const arraySparse = [1, 3, /\* 빈 슬롯 \*/, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }
```

콜백 함수는 인덱스 2에 있는 빈 요소에 대해 호출되지 않습니다.

### for 루프를 forEach()로 바꾸기

```js
const items = ["item1", "item2", "item3"];
const copyItems = [];

// 전
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// 후
items.forEach((item) => {
  copyItems.push(item);
});
```

### 배열 콘텐츠 출력

**참고:** 배열의 내용을 콘솔에 표시하려면,
 배열의 포멧된 버전을 출력하는 `console.table()`을 사용할 수 있습니다.

다음 예제는 `forEach()`를 사용하는 또다른 접근 방식을 보여줍니다.

다음 코드는 배열의 각 요소를 한 줄씩 기록합니다.

```js
const logArrayElements = (element, index /\*, array \*/) => {
  console.log(`a[${index}] = ${element}`);
};

// 배열에서 해당 위치에 항목이 없으므로
// 인덱스 2가 건너뛰어진 것을 확인할 수 있습니다.
[2, 5, , 9].forEach(logArrayElements);
// 로그:
// a[0] = 2
// a[1] = 5
// a[3] = 9
```

### thisArg 사용하기

다음 (인위적인) 예제는 배열의 각 항목에서 객체의 속성을 업데이트합니다.

```js
class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // 오직 함수 표현식만 자신의 this 바인딩을 가집니다.
    array.forEach(function countEntry(entry) {
      this.sum += entry;
      ++this.count;
    }, this);
  }
}

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum); // 16
```

`thisArg` 매개변수(`this`)는 `forEach()`에 제공되므로 호출될 때마다 콜백에 전달됩니다. 콜백은 이를 `this` 값으로 사용합니다.

**참고:** 콜백 함수를 전달할 때
 화살표 함수 표현식을 사용하는 경우,
 모든 화살표 함수가 이 값을 문법적으로(lexical) 바인딩하므로
 `this` 매개 변수를 생략할 수 있습니다.

### 객체 복사 함수

다음 코드는 주어진 객체의 복사본을 생성합니다.

객체의 복사본을 생성하는 방법에는 여러 가지가 있습니다. 다음은 한 가지 방법일 뿐이며 `Object.*` 유틸리티 함수를 사용하여 `Array.prototype.forEach()`가 어떻게 작동하는지 설명하기 위해 제시된 것입니다.

```js
const copy = (obj) => {
  const copy = Object.create(Object.getPrototypeOf(obj));
  const propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach((name) => {
    const desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  return copy;
};

const obj1 = { a: 1, b: 2 };
const obj2 = copy(obj1); // obj2는 이제 obj1과 같습니다.
```

### 순회 중 배열 변경

다음 예는 `one`, `two`, `four`를 기록합니다.

값 `two`가 포함된 항목에 도달하면, 전체 배열의 첫 번째 항목이 이동되어 나머지 모든 항목이 한 위치 앞으로 이동합니다. 이제 요소 `four`가 배열의 이전 위치에 있으므로 요소 `three`은 건너뛰게 됩니다.

`forEach()`는 순회하기 전에 배열의 복사본을 만들지 않습니다.

```js
const words = ["one", "two", "three", "four"];
words.forEach((word) => {
  console.log(word);
  if (word === "two") {
    words.shift(); //'one'은 배열에서 삭제됩니다.
  }
}); // one // two // four

console.log(words); // ['two', 'three', 'four']
```

### 배열 평탄화

다음 예제는 학습 목적으로만 사용합니다. 내장 메서드를 `Array.prototype.flat()`을 사용하여 배열을 평평하게 만들 수 있습니다.

```js
const flatten = (arr) => {
  const result = [];
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
};

// 사용법
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

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

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

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

명세서
---

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

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

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

같이 보기
-----

* `core-js`의 `Array.prototype.forEach` 폴리필
* 인덱스 기반 컬렉션
* `Array`
* `Array.prototype.find()`
* `Array.prototype.map()`
* `Array.prototype.filter()`
* `Array.prototype.every()`
* `Array.prototype.some()`
* `TypedArray.prototype.forEach()`
* `Map.prototype.forEach()`
* `Set.prototype.forEach()`


Array.prototype.splice() - JavaScript

Array.prototype.splice()
========================

**`splice()`** 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

시도해보기
-----

구문
--

```js
    array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
```

### 매개변수

`start`

 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다.
 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 `array.length - n`번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.

`deleteCount` Optional

 배열에서 제거할 요소의 수입니다.
 `deleteCount`를 생략하거나 값이 `array.length - start`보다 크면 `start`부터의 모든 요소를 제거합니다.
 `deleteCount`가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

`item1, item2, <em>...</em>` Optional

배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 `splice()`는 요소를 제거하기만 합니다.

### 반환 값

제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

설명
--

만약 제거할 요소의 수와 추가할 요소의 수가 다른 경우 배열의 길이는 달라집니다.

예제
--

### 하나도 제거하지 않고, 2번 인덱스에 "drum" 추가

```js
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed
```

### 하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가

```js
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum", "guitar");

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed
```

### 3번 인덱스에서 한 개 요소 제거

```js
var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]
```

### 2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가

```js
var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2, 1, "trumpet");

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]
```

### 0번 인덱스에서 두 개 요소 제거하고 "parrot", "anemone", "blue" 추가

```js
var myFish = ["angel", "clown", "trumpet", "sturgeon"];
var removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]
```

### 2번 인덱스에서 두 개 요소 제거

```js
var myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
var removed = myFish.splice(myFish.length - 3, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]
```

### -2번 인덱스에서 한 개 요소 제거

```js
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]
```

### 2번 인덱스를 포함해서 이후의 모든 요소 제거

```js
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]
```

명세
--

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

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

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

같이 보기
-----

* `push()` / `pop()` — 배열 끝에 요소를 추가하거나 제거
* `unshift()` / `shift()` — 배열 처음에 요소를 추가하거나 제거
* `concat()` — 배열과 배열 또는 값을 합친 새로운 배열 반환


Array.prototype.values() - JavaScript

Array.prototype.values()
========================

**`values()`** 메서드는 배열에서 각 인덱스에 대한 값을 순회하는 *array iterator* 객체를 반환합니다.

시도해보기
-----

구문
--

```js
values()
```

반환 값
----

순회 가능한 새로운 반복자

설명
--

`Array.prototype.values()`는 `Array.prototype[@@iterator]()`의 기본 구현체입니다.

```js
Array.prototype.values === Array.prototype[Symbol.iterator]; // true
```

`values()` 메소드는 희소 배열에서도 유별나게 동작하지 않습니다. 빈 슬롯은 값이 `undefined`인 것처럼 방문합니다.

예제
--

### for...of 루프를 통한 반복

`values()`는 순회 가능한 반복자를 반환하므로, `for...of` 루프를 사용하여 순회할 수 있습니다.

```js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();

for (const letter of iterator) {
  console.log(letter);
} // "a" "b" "c" "d" "e"
```

### next()를 사용한 순회

반환 값도 반복자이므로 `next()` 메서드를 직접 호출할 수 있습니다.

```js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
iterator.next(); // { value: "a", done: false }
iterator.next(); // { value: "b", done: false }
iterator.next(); // { value: "c", done: false }
iterator.next(); // { value: "d", done: false }
iterator.next(); // { value: "e", done: false }
iterator.next(); // { value: undefined, done: true }
console.log(iterator.next().value); // undefined
```

### 반복자 재사용하기

>
> **Warning:** 배열 반복자 객체는 일회용 객체입니다. 재사용하지 마세요.
>
>
>

`values()`에서 반환되는 반복자는 재사용할 수 없습니다. `next().done = true` 또는 `currentIndex > length`, the `for...of` loop ends 그리고 추가적인 순회는 아무 효과가 없습니다.

```js
const arr = ["a", "b", "c", "d", "e"];
const values = arr.values();
for (const letter of values) {
  console.log(letter);
}
// "a" "b" "c" "d" "e"
for (const letter of values) {
  console.log(letter);
}
// undefined
```

`break`문을 사용하여 순회를 조기에 종료하면, 나중에 순회를 다시 이어나가고자 할 때 현재 위치에서 반복자를 다시 사용할 수 있습니다.

```js
const arr = ["a", "b", "c", "d", "e"];
const values = arr.values();
for (const letter of values) {
  console.log(letter);
  if (letter === "b") {
    break;
  }
}
// "a" "b"

for (const letter of values) {
  console.log(letter);
}
// "c" "d" "e"
```

### 순환 중 가변

`values()`에서 반환되는 배열 반복자 객체에는 저장되어 있는 값이 없습니다. 대신 생성에 사용된 배열의 주소를 저장하고 각 순회에서 현재 방문 중인 인덱스를 읽습니다. 따라서 순회 시 출력은 순회할 때의 인덱스에 담겨있는 값에 따라 달라집니다. 배열의 값이 변경되면 배열 반복자 객체의 값도 변경됩니다.

```js
const arr = ["a", "b", "c", "d", "e"];
const iterator = arr.values();
console.log(iterator); // Array Iterator { }
console.log(iterator.next().value); // "a"
arr[1] = "n";
console.log(iterator.next().value); // "n"
```

### 희소 배열 순회하기

`values()`은 빈 슬롯을 마치 `undefined`인 것처럼 방문합니다.

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

명세
--

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

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

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

같이 보기
-----

* Polyfill of `Array.prototype.values` in `core-js`
* `Array.prototype.keys()`
* `Array.prototype.entries()`
* `Array.prototype.forEach()`
* `Array.prototype.every()`
* `Array.prototype.some()`
* A polyfill


Array.prototype.findIndex() - JavaScript

Array.prototype.findIndex()
===========================

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

판별 함수를 만족하는 첫번째 인덱스 대신 값을 반환하는 `find()` 메서드도 참고하세요.

시도해보기
-----

구문
--

```js
findIndex(callbackFn)
findIndex(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

배열의 각 요소마다 실행할 함수입니다. 일치하는 요소가 발견되었음을 나타내는 참인 값을 반환하고 그렇지 않으면 거짓인 값을 반환해야합니다. 함수는 다음과 같은 인수와 함께 호출됩니다.

`element`

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

`index`

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

`array`

`findIndex()` 함수가 호출된 배열입니다.

`thisArg` Optional

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

### 반환 값

 테스트를 통과하는 첫 번째 요소의 인덱스입니다.
 일치하는 요소가 없으면 -1을 반환합니다.

설명
--

`findIndex()`는 반복 메서드입니다. `callbackFn` 함수를 배열의 각 요소에 대해 오름차순 인덱스 순서로 한 번씩 호출하고, `callbackFn`이 참인 값을 반환할 때까지 반복합니다. 그런 다음 `findIndex()`는 해당 요소의 인덱스를 반환하고 배열 반복을 중단합니다. `callbackFn`이 참인 값을 반환하지 않으면 `findIndex()`는 `-1`을 반환합니다.

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

`findIndex()`는 호출된 배열을 변경하지 않지만, `callbackFn`으로 제공된 함수는 변경할 수 있습니다. 그러나 배열의 길이는 `callbackFn`의 첫 번째 호출 "전에" 저장됩니다. 따라서 다음과 같습니다.

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

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

`findIndex()` 메서드는 일반적입니다. `length` 속성과 정수 키 속성을 가진 `this` 값을 기대합니다.

예제
--

### 배열에서 소수의 색인 찾기

다음 예제에서는 배열에서 소수인 첫번째 요소의 인덱스를 찾습니다. 소수가 없으면 -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, 9, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 9, 12].findIndex(isPrime)); // 2 (array[2] is 7)
```

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

희소 배열에서 `undefined`를 검색하고 빈 슬롯의 인덱스를 얻을 수 있습니다.

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

### findIndex()를 배열이 아닌 객체에 호출하기

`findIndex()`는 `this`의 `length` 속성을 읽은 다음 각 정수 인덱스에 액세스합니다.

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

명세서
---

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

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

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

같이 보기
-----

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


Array.prototype.copyWithin() - JavaScript

Array.prototype.copyWithin()
============================

`Array` 인스턴스의 **`copyWithin()`** 메서드는 배열의 일부를 같은 배열의 다른 위치로 얕게 복사하며, 배열의 길이를 수정하지 않고 해당 배열을 반환합니다.

시도해보기
-----

구문
--

```js
copyWithin(target, start)
copyWithin(target, start, end)
```

### 매개변수

`target`

시퀀스를 복사할 0 기반 인덱스로, 정수로 변환됩니다.

* 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
* `target < -array.length`이면, `0`이 사용됩니다.
* `target >= array.length`이면, 아무것도 복사되지 않습니다.
* 정수 변환 후 `target`이 `start` 보디 뒤에 위치하면, `array.length`의 끝부분까지만 복사가 수행됩니다(즉, `copyWithin()`은 배열을 확장하지 않습니다).

`start`

요소 복사를 시작할 0 기반 인덱스로, 정수로 변환됩니다.

* 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
* `target < -array.length`이면, `0`이 사용됩니다.
* `target >= array.length`이면, 아무것도 복사되지 않습니다.

`end` Optional

요소 복사를 끝낼 0 기반 인덱스로, 정수로 변환됩니다. `copyWithin()`은 `end`를 포함하지 않고 `end`전 까지 복사합니다.

* 음수 인덱스는 배열의 끝부터 셉니다. `target < 0`이라면, `target + array.length`이 사용됩니다.
* `target < -array.length`이면, `0`이 사용됩니다.
* `end >= array.length` 이거나 `end`가 생략되면, `array.length`가 사용됩니다. 이는 끝까지 모든 요소를 복사하는 것이 됩니다.
* 정수 변환 후 `end`가 `start`뒤에 위치하면, 아무것도 복사되지 않습니다.

### 반환 값

변경된 배열입니다.

설명
--

`copyWithin()` 메서드는 C와 C++의 `memmove`처럼 작동하며, `Array`의 데이터를 이동하는 고성능 메서드입니다. 이는 특히 같은 이름의 메서드를 가진 `TypedArray` (en-US)에서도 적용됩니다. 시퀀스는 하나의 작업으로 복사와 붙여넣기가 이루어집니다. 복사 붙여넣기 영역이 겹치더라도 붙여넣은 시퀀스는 복사된 값을 갖습니다.

`undefined`를 정수로 변환하면 `0`이 되므로, `start` 매개변수를 생략하면 `0`을 전달하여 전체 배열을 target 위치로 복사하는 것과 동일한 효과가 있습니다. 이는 오른쪽 경계가 잘리고 왼쪽 경계가 복제되는 오른쪽 시프트와 같습니다. 이 동작은 코드를 읽는 사람에게 혼란을 줄 수 있으므로 명시적으로 `0`을 `start`로 전달하는것이 좋습니다.

```js
console.log([1, 2, 3, 4, 5].copyWithin(2));
// [1, 2, 1, 2, 3]; 모든 요소를 오른쪽으로 2칸 이동합니다.
```

`copyWithin()` 메서드는 변경 메서드입니다. `this`의 길이를 변경하진 않지만, 필요한 경우 `this`의 내용을 변경하고, 새 속성을 만들거나 기존 속성을 삭제합니다.

`copyWithin()` 메서드는 빈 슬롯을 보존합니다. 복사할 영역이 희소인 경우, 빈 슬롯의 해당 새 인덱스에 있는 항목은 삭제 (en-US)되고 빈 슬롯이 됩니다.

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

예제
--

### copyWithin() 사용하기

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

console.log([1, 2, 3, 4, 5].copyWithin(0, 3, 4));
// [4, 2, 3, 4, 5]

console.log([1, 2, 3, 4, 5].copyWithin(-2, -3, -1));
// [1, 2, 3, 3, 4]
```

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

`copyWithin()`은 빈 슬롯을 전파합니다.

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

### copyWithin()을 배열이 아닌 객체에 적용하기

`copyWithin()` 메서드는 `this`의 `length` 속성을 읽은 다음 관련된 정수 인덱스를 변경합니다.

```js
const arrayLike = {
  length: 5,
  3: 1,
};
console.log(Array.prototype.copyWithin.call(arrayLike, 0, 3));
// { '0': 1, '3': 1, length: 5 }
console.log(Array.prototype.copyWithin.call(arrayLike, 3, 1));
// { '0': 1, length: 5 }
// 복사된 소스가 빈 슬롯이므로 '3' 속성이 삭제됩니다.
```

명세서
---

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

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

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

같이 보기
-----

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


Array.prototype.filter() - JavaScript

Array.prototype.filter()
========================

`Array` 인스턴스의 `filter()` 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다.

시도해보기
-----

구문
--

```js
filter(callbackFn)
filter(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

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

`element`

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

`index`

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

`array`

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

`thisArg` Optional

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

### 반환 값

주어진 배열의 일부에 대한 얕은 복사본으로, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. 테스트를 통과한 요소가 없으면 빈 배열이 반환됩니다.

설명
--

`filter()` 메서드는 순회 메서드입니다. 이 메서드는 배열의 각 요소에 대해 제공된 `callbackFn` 함수를 한 번씩 호출하고, `callbackFn`이 참 값을 반환하는 모든 값으로 새 배열을 구성합니다. `callbackFn` 테스트를 통과하지 못한 배열 요소는 새 배열에 포함되지 않습니다.

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

`filter()` 메서드는 복사 메서드입니다. 이 메서드는 `this`를 변경하지 않는 대신 원래 배열의 요소와 동일한 요소를 포함하는 얕은 복사본을 반환합니다(일부 필터링 된 요소 제외). 하지만, `callbackFn`으로 제공된 함수는 배열을 변경할 수 있습니다. 그러나 배열의 length는 `callbackFn`을 처음 호출하기 전에 저장된다는 점에 유의하세요. 따라서,

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

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

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

예제
--

### 모든 작은 값 걸러내기

다음 예제는 `filter()`를 사용하여 값이 10 미만인 요소가 모두 제거된 필터링된 배열을 만듭니다.

```js
function isBigEnough(value) {
  return value >= 10;
}

const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// 필터링된 값은 [12, 130, 44]
```

### 배열의 모든 소수 찾기

다음 예제는 배열의 모든 소수를 반환합니다.

```js
const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}

console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]
```

### JSON에서 유효하지 않은 항목 걸러내기

다음 예제는 `filter()`를 사용하여 모든 요소의 `id`가 0이 아닌 숫자인 필터링된 JSON을 생성합니다.

```js
const arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  {},
  { id: null },
  { id: NaN },
  { id: "undefined" },
];

let invalidEntries = 0;

function filterByID(item) {
  if (Number.isFinite(item.id) && item.id !== 0) {
    return true;
  }
  invalidEntries++;
  return false;
}

const arrByID = arr.filter(filterByID);

console.log("필터링된 배열\n", arrByID);
// 필터링된 배열
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]

console.log("유효하지 않은 항목의 수 =", invalidEntries);
// 유효하지 않은 항목의 수 = 5
```

### 배열 검색

다음 예제는 `filter()`를 사용하여 검색 조건에 따라 배열 콘텐츠를 필터링합니다.

```js
const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/\*\*
 \* 검색 조건에 따른 배열 필터링(쿼리)
 \*/
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}

console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']
console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']
```

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

`filter()`는 빈 슬롯을 건너뜁니다.

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

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

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

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

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

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

```js
// 각 단어 수정
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];

const modifiedWords = words.filter((word, index, arr) => {
  arr[index + 1] += " extra";
  return word.length < 6;
});

console.log(modifiedWords);
// 길이 6 아래에 세 단어가 있지만, 수정되었으므로 한 단어가 반환됩니다.
// ["spray"]

// 새 단어 추가
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const appendedWords = words.filter((word, index, arr) => {
  arr.push("new");
  return word.length < 6;
});

console.log(appendedWords);
// 이제 `words` 자체에는 문자 길이가 6자 미만인 단어가 훨씬 더 많음에도 불구하고 조건에 맞는 단어는 3개뿐입니다.
// ["spray" ,"limit" ,"elite"]

// 단어 삭제
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const deleteWords = words.filter((word, index, arr) => {
  arr.pop();
  return word.length < 6;
});

console.log(deleteWords);
// filter가 'elite'에 도달하기도 전에 'words'가 pop되기 때문에 'elite'는 표시되지 않습니다.
// ["spray" ,"limit"]
```

명세서
---

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

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

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

같이 보기
-----

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


Array.prototype.toSorted() - JavaScript

Array.prototype.toSorted()
==========================

`Array`의 **`toSorted()`** 메서드는 `sort()`에 대응되는 복사 메서드입니다. 이 메서드는 요소들을 오름차순으로 정렬한 새로운 배열을 반환합니다.

구문
--

```js
// 함수 없이 사용
toSorted()

// 화살표 함수
toSorted((a, b) => { /\* … \*/ })

// 비교 함수
toSorted(compareFn)

// 인라인 비교 함수
toSorted(function compareFn(a, b) { /\* … \*/ })
```

### 매개변수

`compareFn` Optional

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

`a`

비교할 첫 번째 요소입니다.

`b`

비교할 두 번째 요소입니다.

### 반환 값

요소들을 오름차순으로 정렬한 새로운 배열입니다.

설명
--

`compareFn` 매개변수에 대해 더 알아보려면 `sort()`를 참조하세요.

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

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

예제
--

### 배열 정렬하기

```js
const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']

const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]
```

더 많은 사용 예제는 `sort()`를 참조하세요.

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

빈 슬롯은 `undefined` 값으로 간주되어 정렬됩니다. 빈 슬롯은 항상 배열의 끝으로 정렬되며 `compareFn`은 호출되지 않습니다.

```js
console.log(["a", "c", , "b"].toSorted()); // ['a', 'b', 'c', undefined]
console.log([, undefined, "a", "b"].toSorted()); // ["a", "b", undefined, undefined]
```

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

`toSorted()` 메서드는 `this`의 `length` 속성을 읽습니다. 그런 다음 `0`부터 `length - 1`까지의 범위에 있는 모든 정수 키 속성을 수집하여 정렬하고 새 배열에 씁니다.

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.toSorted.call(arrayLike));
// [4, 5, undefined]
```

명세서
---

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

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

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

같이 보기
-----

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


Array[@@species] - JavaScript

Array[@@species]
================

**`Array[@@species]`** 정적 접근자 속성은 배열 메서드에서 반환 값을 구성하는 데 사용되는 생성자를 반환합니다.

**경고:** `@@species`가 존재하면 임의 코드가 실행될 수 있어 보안 취약점이 발생할 수 있습니다. 또한 특정 최적화를 훨씬 더 어렵게 만듭니다. 엔진 구현자는 이 기능을 제거할지 검토하고 있습니다. 가능하면 이 기능에 의존하지 마십시오. `toReversed()`와 같은 최신 배열 메서드는 `@@species`를 사용하지 않으며, 항상 새 `Array` 기반 클래스 인스턴스를 반환합니다.

구문
--

```js
Array[Symbol.species]
```

### 반환 값

`get @@species`가 호출된 생성자(`this`)의 값입니다. 반환값은 새 배열을 생성하는 배열 메서드에서 반환값을 구성하는 데 사용됩니다.

설명
--

`@@species` 접근자 속성은 `Array` 객체에 대한 기본 생성자를 반환합니다. 하위 클래스 생성자가 이를 재정의하여 생성자 할당을 변경할 수 있습니다. 기본 구현은 기본적으로 다음과 같습니다.

```js
// 설명을 위한 가상의 내부 구현
class Array {
  static get [Symbol.species]() {
    return this;
  }
}
```

이 다형성 구현으로 인해 파생된 하위 클래스의 `@@species`도 기본적으로 생성자 자체를 반환합니다.

```js
class SubArray extends Array {}
SubArray[Symbol.species] === SubArray; // true
```

기존 배열을 변경하지 않고 새 배열 인스턴스를 반환하는 배열 메서드(예: `filter()`, `map()`)를 호출하면, 배열의 `constructor[@@species]`에 접근합니다. 반환된 생성자는 배열 메서드의 반환값을 구성하는 데 사용됩니다. 이렇게 하면 배열 메서드가 배열과 관련이 없는 객체를 반환하도록 만드는 것이 기술적으로 가능합니다.

```js
class NotAnArray {
  constructor(length) {
    this.length = length;
  }
}

const arr = [0, 1, 2];
arr.constructor = { [Symbol.species]: NotAnArray };
arr.map((i) => i); // NotAnArray { '0': 0, '1': 1, '2': 2, length: 3 }
arr.filter((i) => i); // NotAnArray { '0': 1, '1': 2, length: 0 }
arr.concat([1, 2]); // NotAnArray { '0': 0, '1': 1, '2': 2, '3': 1, '4': 2, length: 5 }
```

예제
--

### 일반 객체의 species

`@@species` 속성은 기본 생성자 함수, 즉 `Array`의 `Array` 생성자를 반환합니다.

```js
Array[Symbol.species]; // [Function: Array]
```

### 파생 객체의 species

`MyArray`와 같은 사용자 정의 `Array`의 하위 클래스의 인스턴스에서, `MyArray`의 species는 `MyArray` 생성자입니다. 그러나 파생 클래스 메서드에서 부모 `Array` 객체를 반환하려면 이를 덮어쓰는 것이 좋습니다:

```js
class MyArray extends Array {
  // MyArray species를 부모 Array 생성자로 재설정
  static get [Symbol.species]() {
    return Array;
  }
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-array-@@species |

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

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

같이 보기
-----

* `Array[@@species]` 폴리필과 `core-js`의 영향을 받는 모든 `Array` 메서드에서의 `@@species` 지원
* 인덱스된 컬렉션
* `Array`
* `Symbol.species` (en-US)


Array.prototype.keys() - JavaScript

Array.prototype.keys()
======================

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

시도해보기
-----

구문
--

```js
keys()
```

### 매개변수

없음.

### 반환 값

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

설명
--

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

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

예제
--

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

배열에 실제로 존재하는 키만 포함하는 `Object.keys()`와 달리, `keys()` 반복자는 누락된 속성을 나타내는 빈 공간을 무시하지 않습니다.

```js
const arr = ["a", , "c"];
const sparseKeys = Object.keys(arr);
const denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys); // [0, 1, 2]
```

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

`keys()` 메서드는 `this`의 `length` 속성을 읽은 다음, 0과 `length - 1` 사이의 모든 정수 인덱스를 산출합니다. 실제 인덱스 접근은 발생하지 않습니다.

```js
const arrayLike = {
  length: 3,
};
for (const entry of Array.prototype.keys.call(arrayLike)) {
  console.log(entry);
}
// 0
// 1
// 2
```

명세서
---

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

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

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

같이 보기
-----

* `core-js`의 `Array.prototype.keys` 폴리필
* 인덱스 기반 컬렉션 안내서
* `Array`
* `Array.prototype.entries()`
* `Array.prototype.values()`
* `Array.prototype[@@iterator]()`
* `TypedArray.prototype.keys()`
* 순회 프로토콜


Array.prototype.reverse() - JavaScript

Array.prototype.reverse()
=========================

**`reverse()`** 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.

시도해보기
-----

구문
--

```js
a.reverse();
```

### 반환 값

순서가 반전된 배열.

설명
--

`reverse` 메서드는 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환합니다.

예시
--

### 배열의 요소를 반전하기

다음 예시는 3개의 요소가 든 myArray 배열을 만든 후, 반전시킵니다.

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

a.reverse();
console.log(a); // [3, 2, 1]
```

명세
--

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

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

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

같이 보기
-----

* `Array.prototype.join()`
* `Array.prototype.sort()`
* `TypedArray.prototype.reverse()`


Array.prototype[@@iterator]() - JavaScript

Array.prototype[@@iterator]()
=============================

`Array` 인스턴스의 **`[@@iterator]()`** 메서드는 순회 가능 프로토콜을 구현하며, 배열을 전개 구문이나 `for...of` 루프와 같이 순회 가능을 기대하는 대부분의 구문에서 사용할 수 있도록 합니다. 이 메서드는 배열의 각 인덱스 값을 산출하는 배열 순회자 객체 (en-US)를 반환합니다.

이 속성의 초기 값은 `Array.prototype.values` 속성의 초기 값과 동일한 함수 객체입니다.

시도해보기
-----

구문
--

```js
array[Symbol.iterator]()
```

### 매개변수

없음.

### 반환 값

`Array.prototype.values()`와 동일한 반환 값입니다. 이는 배열의 각 인덱스의 값을 산출하는 새로운 순회 가능 순회자 객체 (en-US)입니다.

예제
--

### for...of 루프를 사용한 순회

이 메서드를 직접 호출할 필요는 거의 없습니다. `@@iterator` 메서드가 있으면 배열을 순회 가능으로 만들 수 있으며, `for...of` 루프와 같은 순회 구문은 이 메서드를 자동으로 호출하여 반복할 순회자를 얻습니다.

#### HTML

```html
<ul id="letterResult"></ul>
```

#### JavaScript

```js
const arr = ["a", "b", "c"];
const letterResult = document.getElementById("letterResult");
for (const letter of arr) {
  const li = document.createElement("li");
  li.textContent = letter;
  letterResult.appendChild(li);
}
```

#### 결과

### 순회자를 수동으로 부르기

반환된 순회자 객체의 `next` 메서드를 수동으로 호출하여 순회 과정을 최대한 제어할 수 있습니다.

```js
const arr = ["a", "b", "c", "d", "e"];
const arrIter = arr[Symbol.iterator]();
console.log(arrIter.next().value); // a
console.log(arrIter.next().value); // b
console.log(arrIter.next().value); // c
console.log(arrIter.next().value); // d
console.log(arrIter.next().value); // e
```

### 동일한 함수로 문자열과 문자열 배열 처리하기

문자열 (en-US)과 배열은 모두 순회 가능 프로토콜을 구현하기 때문에, 범용 함수는 두 입력을 동일한 방식으로 처리하도록 설계할 수 있습니다. 이는 입력이 배열이거나 적어도 해당 메서드가 있는 객체여야 하는 `Array.prototype.values()`를 직접 호출하는 것보다 낫습니다.

```js
function logIterable(it) {
  if (typeof it[Symbol.iterator] !== "function") {
    console.log(it, "is not iterable.");
    return;
  }
  for (const letter of it) {
    console.log(letter);
  }
}

// Array
logIterable(["a", "b", "c"]);
// a
// b
// c

// String
logIterable("abc");
// a
// b
// c

// Number
logIterable(123);
// 123은 순회 가능이 아닙니다.
```

명세서
---

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

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

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

같이 보기
-----

* `core-js`의 `Array.prototype[@@iterator]` 폴리필
* 인덱스된 컬렉션
* `Array`
* `Array.prototype.keys()`
* `Array.prototype.entries()`
* `Array.prototype.values()`
* `TypedArray.prototype[@@iterator]()`
* `String.prototype[@@iterator]()`
* `Symbol.iterator`
* 순회 프로토콜


Array.prototype.push() - JavaScript

Array.prototype.push()
======================

**`push()`** 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.

시도해보기
-----

구문
--

```js
    arr.push(element1[, ...[, elementN]])
```

### 매개변수

`elementN`

배열의 끝에 추가할 요소.

### 반환 값

호출한 배열의 새로운 `length` 속성.

설명
--

`push` 메서드는 배열 끝에 여러 값을 추가합니다.

`push`는 의도적으로 제네릭합니다. 배열을 닯은 객체에 `call()` 또는 `apply()`로 사용될 수 있다. `push` 메서드는 주어진 값을 입력하는 것을 어디에 시작할 것인지를 결정하기 위해 `length` 속성에 의존한다. 만약 `length` 속성이 숫자로 변환 될 수 없다면 인덱스는 0을 사용한다. `length` 가 생성되게 될 경우에 길이 값이 존재하지 않을 가능성을 포함한다.

String(문자열)이 변경할 수 없는 것처럼 비록 이 명령어의 어플리케이션들이 적합하지 않다고 할지라도 단지 원래 배열 같은 객체는 strings이다.

예시
--

### 배열에 엘리먼트를 추가 하기

다음 코드는 두가지 엘리먼트를 포함하는 스포츠 배열을 생성하고 두개의 엘리먼트를 추가 한다. `total` 변수는 추가한 배열의 새 길이 값을 포함한다.

```js
var sports = ["축구", "야구"];
var total = sports.push("미식축구", "수영");

console.log(sports); // ['축구', '야구', '미식축구', '수영']
console.log(total); // 4
```

### 두개의 배열을 합치기

이 예제는 두번째 배열의 모든 엘리먼트를 push 하기 위해 `apply()`를 사용한다.

만약 두번째 배열( 아래 예제에서는 moreVegs )이 매우 클 경우, 이 메소드를 사용하지 말아야 한다. 실제로 한 함수가 사용가능한 매개변수의 최대 개수에는 제한이 있기 때문이다. 더 자세한 사항은 `apply()` 에서 찾아볼 수 있다.

```js
var vegetables = ["설탕당근", "감자"];
var moreVegs = ["셀러리", "홍당무"];

// 첫번째 배열에 두번째 배열을 합친다.
// vegetables.push('셀러리', '홍당무'); 하는 것과 동일하다.
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['설탕당근', '감자', '셀러리', '홍당무']
```

명세
--

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

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

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

같이 보기
-----

* `Array.prototype.pop()`
* `Array.prototype.shift()`
* `Array.prototype.unshift()`
* `Array.prototype.concat()`


Array.prototype.with() - JavaScript

Array.prototype.with()
======================

`Array` 인스턴스의 **`with()`** 메서드는 주어진 인덱스의 값을 변경하기 위해 대괄호 표기법을 사용하는 것의 복사 버전입니다. 이 함수는 지정된 인덱스의 요소가 지정된 값으로 대체된 새 배열을 반환합니다.

구문
--

```js
array.with(index, value)
```

### 매개변수

`index`

배열을 변경할 0 기반 인덱스이며 정수로 변환되는 값입니다.

* 음수 인덱스는 배열의 끝부터 역산합니다 — `index < 0`인 경우 `index + array.length`가 사용됩니다.
* 정규화 후 인덱스가 범위를 벗어나면, `RangeError`가 발생합니다.

`value`

주어진 인덱스에 할당할 값입니다.

### 반환 값

`index`의 요소 값이 `value`로 대체된 새로운 배열.

### 예외

`RangeError`

`index > array.length` 혹은 `index < -array.length` 일때 발생합니다.

설명
--

`with()` 메서드는 배열에서 주어진 인덱스의 값을 변경하여, 주어진 인덱스에 있는 요소가 주어진 값으로 대체된 새 배열을 반환합니다. 원래 배열은 수정되지 않습니다. 이를 통해 조작을 수행하는 동안 배열 메서드를 연속으로 이어서 호출 할 수 있습니다.

`with()` 메서드는 희소 배열을 생성하지 않습니다. 만약 원래 배열이 희소 배열인 경우 빈 슬롯은 새로운 배열에서 `undefined`으로 대체됩니다.

`with()` 메서드는 제네릭 메서드입니다. 이 메서드는 `this` 값에 `length` 속성과 정수 키 속성 만을 필요로 합니다.

예제
--

### 하나의 요소만 변경한채로 새로운 배열을 만들기

```js
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]
```

### 배열 메서드 연속하여 연결하기

`with()` 메서드를 사용하면 배열의 단일 요소를 업데이트한 후 다른 배열 메서드를 적용할 수 있습니다.

```js
const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6).map((x) => x \*\* 2)); // [1, 4, 36, 16, 25]
```

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

`with()` 메서드는 언제나 밀집 배열을 생성합니다.

```js
const arr = [1, , 3, 4, , 6];
console.log(arr.with(0, 2)); // [2, undefined, 3, 4, undefined, 6]
```

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

`with()` 메서드는 `this`의 `length` 속성을 읽습니다. 그리고 `this`의 정수 키 속성을 읽어서 새 배열에 쓰고,
 `value`는 주어진 `index`에 씁니다.

```js
const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.with.call(arrayLike, 0, 1));
// [ 1, undefined, 4 ]
```

명세서
---

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

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

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

같이 보기
-----

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


Array.prototype.some() - JavaScript

Array.prototype.some()
======================

**`some()`** 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 만약 배열에서 주어진 함수가 true을 반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다. 이 메서드는 배열을 변경하지 않습니다.

시도해보기
-----

구문
--

```js
// 화살표 함수
some((element) => { /\* … \*/ })
some((element, index) => { /\* … \*/ })
some((element, index, array) => { /\* … \*/ })

// 콜백 함수
some(callbackFn)
some(callbackFn, thisArg)

// 인라인 콜백 함수
some(function (element) { /\* … \*/ })
some(function (element, index) { /\* … \*/ })
some(function (element, index, array) { /\* … \*/ })
some(function (element, index, array) { /\* … \*/ }, thisArg)
```

### 매개변수

* `callbackFn`
    + : 배열의 각 요소에 대해 실행할 함수. 이 함수는 요소가 시험을 통과하면 참 같은 값을 반환하며, 그렇지 않으면 거짓인 값을 반환합니다.다음의 인자와 함께 함수를 호출합니다.

`element`

처리할 배열 내 현재 요소

`index`

처리할 현재 요소의 인덱스

`array`

`some`을 호출한 배열
* `thisArg` Optional
    + : `callbackFn`을 실행할 때 `this`로 사용하는 값. 반복 메소드를 참고하세요.
### 반환 값

콜백 함수가 적어도 배열 중 하나의 요소에 대해 참인 값을 반환하면 `true`를 반환하며, 그렇지 않으면 `false`를 반환합니다.

설명
--

`some` 메서드는 반복 메서드입니다. 이 메서드는 주어진 `callbackFn`함수가 참 같은 값을 반환할 때까지 배열 안에 있는 각각의 요소마다 한 번씩 호출합니다. 만약 그러한 요소를 찾았으면 `some()` 메서드는 그 즉시 `true`를 반환하며 배열 순회를 멈춥니다. 그렇지 않고 `callbackFn`이 모든 요소에 대해 거짓같은 값을 반환하면 `some()`은 `false`를 반환합니다.

`some()`은 수학에서 존재 한정자와 같은 역할을 합니다. 특히 빈 배열의 경우 모든 조건에 대해 `false`를 반환합니다.

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

`some()`은 호출된 배열의 값을 변경하지 않지만, 제공된 `callbackFn`에서는 가능합니다. 그럼에도 배열의 길이는 `callbackFn`의 첫 실행 이전에 저정된다는 점을 명심하시기 바랍니다.

* `callbackFn`은 `some()` 호출되어 시작할 당시 배열의 초기 길이를 넘어서는 요소는 방문하지 않습니다.
* 이미 방문했던 인덱스를 변경해도 `callbackFn`은 해당 인덱스에 대해 `callbackFn`을 다시 실행하지 않습니다
* 만약 존재하나 아직 방문하지 않은 배열의 요소는 `callbackFn`이 변경시킬 수 있습니다. 이 값은 `callbackFn`이 요소에 방문하는 시점에 `callbackFn`에 넘겨지는 값입니다. 삭제한 (en-US) 요소는 방문하지 않습니다.

`some()` 메서드는 제너릭입니다. `this` 값에 `length` 속성과 정수 키 속성만 있으면 됩니다.

예제
--

### 배열의 요소 테스트

다음 예제는 배열 내 요소 중 하나라도 10보다 큰지 판별합니다.

```js
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
```

### 화살표 함수를 사용한 배열의 요소 테스트

화살표 함수는 같은 테스트에 대해 더 짧은 구문을 제공합니다.

```js
[2, 5, 8, 1, 4].some((x) => x > 10); // false
[12, 5, 8, 1, 4].some((x) => x > 10); // true
```

### 값이 배열 내 존재하는지 확인

`includes()` 메서드의 기능을 모방하기 위해 이 사용자 지정 함수는 요소가 배열에 있는 경우 `true` 반환합니다.

```js
const fruits = ["apple", "banana", "mango", "guava"];

function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}

checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true
```

### 어떠한 값이건 불리언으로 변환

```js
const TRUTHY\_VALUES = [true, "true", 1];

function getBoolean(value) {
  if (typeof value === "string") {
    value = value.toLowerCase().trim();
  }

  return TRUTHY\_VALUES.some((t) => t === value);
}

getBoolean(false); // false
getBoolean("false"); // false
getBoolean(1); // true
getBoolean("true"); // true
```

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

`some()`은 빈 슬롯에 조건자를 실행하지 않습니다.

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

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

`some()` 메서드는 `this`의 `length` 속성을 읽고 객체의 마지막에 도달하거나 `callbackFn`이 `true`를 반환할 때 까지 정수 인덱스로 접근합니다.

```js
const arrayLike = {
  length: 3,
  0: "a",
  1: "b",
  2: "c",
};
console.log(Array.prototype.some.call(arrayLike, (x) => typeof x === "number"));
// false
```

명세
--

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

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

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

같이 보기
-----

* Polyfill of `Array.prototype.some` in `core-js`
* `Array.prototype.every()`
* `Array.prototype.forEach()`
* `Array.prototype.find()`
* `TypedArray.prototype.some()`


Array.prototype.reduceRight() - JavaScript

Array.prototype.reduceRight()
=============================

**`reduceRight()`** 메서드는 누적기에 대해 함수를 적용하고 배열의 각 값 (오른쪽에서 왼쪽으로)은 값을 단일 값으로 줄여야합니다.

시도해보기
-----

왼쪽에서 오른쪽으로 `Array.prototype.reduce()`도 참조하십시오.

구문
--

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

### 매개변수

`callback`

 4 개의 인수를 취하여 배열의 각 값에 대해 실행할 함수입니다.\_ `previousValue`
 \_ : 콜백의 마지막 호출에서 이전에 리턴 된 값 또는 제공된 경우 initialValue. (아래 참조).

`currentValue`

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

`index`

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

`array`

배열 reduce가 호출되었습니다.

`initialValue`

선택 과목. 콜백의 최초의 호출의 최초의 인수로서 사용하는 객체입니다.

### 반환 값

누적 계산의 결과를 반환합니다.

설명
--

`reduceRight는 배열의 구멍을 제외하고 배열에있는 각 요소에 대해 콜백 함수를 한 번 실행합니다.이 인수는 초기 값 (또는 이전 콜백 호출의 값), 현재 요소의 값, 현재 인덱스 및 반복이 일어나는 배열.`

reduceRight 콜백 호출은 다음과 같습니다.

```js
array.reduceRight(function (previousValue, currentValue, index, array) {
  // ...
});
```

함수가 처음 호출 될 때 previousValue 및 currentValue는 두 값 중 하나가 될 수 있습니다. reduceValue에 대한 호출에 initialValue가 제공된 경우 previousValue는 initialValue와 같고 currentValue는 배열의 마지막 값과 같습니다. initialValue가 제공되지 않으면 previousValue는 배열의 마지막 값과 같고 currentValue는 두 번째 - 마지막 값과 같습니다.

배열이 비어 있고 initialValue가 제공되지 않으면 `TypeError`가 발생합니다. 배열에 요소가 1 개만 있어도 (위치에 관계없이) initialValue가 제공되지 않았던 경우, 또는 initialValue가 준비되어 있지만 배열이 비어있는 경우, 콜백을 호출하지 않고 솔로 값이 반환됩니다.

함수의 일부 실행 예제는 다음과 같습니다.

```js
[0, 1, 2, 3, 4].reduceRight(
  function (previousValue, currentValue, index, array) {
    return previousValue + currentValue;
  },
);
```

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

| `previousValue` | `currentValue` | `index` | `array` | return value |  |
| --- | --- | --- | --- | --- | --- |
| first call | `4` | `3` | `3` | `[0, 1, 2, 3, 4]` | `7` |
| second call | `7` | `2` | `2` | `[0, 1, 2, 3, 4]` | `9` |
| third call | `9` | `1` | `1` | `[0, 1, 2, 3, 4]` | `10` |
| fourth call | `10` | `0` | `0` | `[0, 1, 2, 3, 4]` | `10` |

reduceRight에 의해 반환 된 값은 마지막 콜백 호출 (10)의 값이됩니다.

initialValue를 제공하면 결과는 다음과 같습니다.

```js
[0, 1, 2, 3, 4].reduceRight(function (
  previousValue,
 currentValue,
 index,
 array,
) {
  return previousValue + currentValue;
}, 10);
```

| `previousValue` | `currentValue` | `index` | `array` | return value |  |
| --- | --- | --- | --- | --- | --- |
| first call | `10` | `4` | `4` | `[0, 1, 2, 3, 4]` | `14` |
| second call | `14` | `3` | `3` | `[0, 1, 2, 3, 4]` | `17` |
| third call | `17` | `2` | `2` | `[0, 1, 2, 3, 4]` | `19` |
| fourth call | `19` | `1` | `1` | `[0, 1, 2, 3, 4]` | `20` |
| fifth call | `20` | `0` | `0` | `[0, 1, 2, 3, 4]` | `20` |

reduceRight에 의해 이번에 반환 된 값은 물론 20입니다.

예제
--

### 배열 내 모든 값의 합계 구하기

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

### 이중 배열 전개하기

```js
var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduceRight(function (a, b) {
  return a.concat(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]
```

### reduce와 reduceRight의 차이점

```js
var a = ["1", "2", "3", "4", "5"];
var left = a.reduce(function (prev, cur) {
  return prev + cur;
});
var right = a.reduceRight(function (prev, cur) {
  return prev + cur;
});

console.log(left); // "12345"
console.log(right); // "54321"
```

폴리필
---

`reduceRight`는 5 판에서 ECMA-262 표준에 추가되었습니다. 표준의 모든 구현에 존재하지 않을 수도 있습니다. 이 문제를 해결하려면 스크립트 시작 부분에 다음 코드를 삽입하여 reduceRight를 기본적으로 지원하지 않는 구현에서 사용할 수있게하십시오.

```js
// ECMA-262, 5 판, 15.4.4.22의 제작 단계
// 참조 : http://es5.github.io/#x15.4.4.22
if ("function" !== typeof Array.prototype.reduceRight) {
  Array.prototype.reduceRight = function (callback /\*, initialValue\*/) {
    "use strict";
    if (null === this || "undefined" === typeof this) {
      throw new TypeError("Array.prototype.reduce called on null or undefined");
    }
    if ("function" !== typeof callback) {
      throw new TypeError(callback + " is not a function");
    }
    var t = Object(this),
      len = t.length >>> 0,
      k = len - 1,
      value;
    if (arguments.length >= 2) {
      value = arguments[1];
    } else {
      while (k >= 0 && !(k in t)) {
        k--;
      }
      if (k < 0) {
        throw new TypeError("Reduce of empty array with no initial value");
      }
      value = t[k--];
    }
    for (; k >= 0; k--) {
      if (k in t) {
        value = callback(value, t[k], k, t);
      }
    }
    return value;
  };
}
```

명세
--

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

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

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

같이 보기
-----

* `Array.prototype.reduce()`


Array.prototype.find() - JavaScript

Array.prototype.find()
======================

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

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

구문
--

```js
find(callbackFn)
find(callbackFn, thisArg)
```

### 매개변수

`callback`

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

`element`

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

`index`

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

`array`

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

`thisArg` Optional

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

### 반환 값

제공된 테스트 함수를 만족하는 배열의 첫 번째 요소입니다. 테스트 함수를 만족하는 요소가 없으면, `undefined`가 반환됩니다.

설명
--

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

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

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

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

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

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

예제
--

### 배열에서 속성 중 하나로 객체 찾기

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

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
```

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

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

const result = inventory.find(({ name }) => name === "cherries");

console.log(result); // { name: 'cherries', quantity: 5 }
```

### 배열에서 소수 찾기

다음 예제는 배열의 요소 중 소수인 요소를 찾습니다(소수가 없는 경우에는 `undefined`를 반환합니다.).

```js
function isPrime(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, 소수 없음
console.log([4, 5, 8, 12].find(isPrime)); // 5
```

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

희소 배열의 빈 슬롯은 `undefined`와 동일하게 동작합니다.

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

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

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

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

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

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

명세서
---

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

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

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

같이 보기
-----

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


Array.of() - JavaScript

Array.of()
==========

**`Array.of()`** 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새 `Array` 인스턴스를 만듭니다.

`Array.of()`와 `Array` 생성자의 차이는 정수형 인자의 처리 방법에 있습니다. `Array.of(7)`은 하나의 요소 `7`을 가진 배열을 생성하지만 `Array(7)`은 `length` 속성이 7인 빈 배열을 생성합니다.

```js
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]
```

구문
--

```js
    Array.of(element0[, element1[, ...[, elementN]]])
```

### 매개변수

`elementN`

배열을 생성할 때 사용할 요소.

### 반환 값

새로운 `Array` 객체.

설명
--

이 함수는 ECMAScript 2015 표준 일부입니다. 자세한 정보는 `Array.of`, `Array.from` 제안 사항과 `Array.of` 폴리필에서 확인하실 수 있습니다.

예제
--

```js
Array.of(1); // [1]
Array.of(1, 2, 3); // [1, 2, 3]
Array.of(undefined); // [undefined]
```

폴리필
---

아래 코드를 다른 코드 이전에 포함하면 `Array.of`를 지원하지 않는 환경에서도 사용할 수 있습니다.

```js
if (!Array.of) {
  Array.of = function () {
    return Array.prototype.slice.call(arguments);
  };
}
```

명세
--

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

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

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

같이 보기
-----

* `Array`
* `Array.from()`
* `TypedArray.of()`


Array.prototype.includes() - JavaScript

Array.prototype.includes()
==========================

`Array` 인스턴스의 **`includes()`** 메서드는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 적절히 `true` 또는 `false`를 반환합니다.

시도해보기
-----

구문
--

```js
includes(searchElement)
includes(searchElement, fromIndex)
```

### 매개변수

`searchElement`

찾을 값입니다.

`fromIndex` Optional

검색을 시작할 0 기반 인덱스로, 정수로 변환됩니다.

* 음수 인덱스는 배열의 끝부터 거꾸로 셉니다. 즉, `fromIndex < 0`이면, `fromIndex + array.length`가 사용됩니다. 그러나, 이 경우에도 배열은 여전히 앞에서 뒤로 검색됩니다.
* `fromIndex < -array.length`이거나 `fromIndex`가 생략되면, `0`이 사용되어 전체 배열이 검색됩니다.
* `fromIndex >= array.length` 이면, 배열은 검색되지 않고 `false`가 반환됩니다.

### 반환 값

배열(또는 `fromIndex`를 지정했다면, `fromIndex` 인덱스로 표시된 배열의 일부) 내에서 `searchElement` 값이 발견되면 `true` 불리언 값이 반환됩니다.

설명
--

`includes()` 메서드는 SameValueZero 알고리즘을 사용하여 `searchElement`를 배열의 요소와 비교합니다. 0 값은 부호에 관계없이 모두 동일한 것으로 간주됩니다. (즉, `-0`은 `0`과 같지만), `false`는 `0`과 같은 것으로 간주되지 않습니다. `NaN`은 올바르게 검색될 수 있습니다.

희소 배열에 사용할 경우, `include()` 메서드는 빈 슬롯을 `undefined`로 간주하고 순회합니다.

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

예제
--

### includes() 사용하기

```js
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
["1", "2", "3"].includes(3); // false
```

### fromIndex가 배열 길이보다 크거나 같은 경우

`fromIndex`가 배열의 길이보다 크거나 같으면 `false`가 반환됩니다. 배열은 검색되지 않습니다.

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

arr.includes("c", 3); // false
arr.includes("c", 100); // false
```

### 0보다 작은 인덱스 계산

`fromIndex`가 음수라면, 계산된 인덱스가 `searchElement` 검색을 시작할 배열의 위치로 사용되도록 계산됩니다.
 계산된 인덱스가 `0`보다 작거나 같으면 전체 배열에서 검색됩니다.

```js
// 배열 길이는 3
// fromIndex는 -100
// 계산된 인덱스는 3 + (-100) = -97

const arr = ["a", "b", "c"];

arr.includes("a", -100); // true
arr.includes("b", -100); // true
arr.includes("c", -100); // true
arr.includes("a", -2); // false
```

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

희소 배열에서 `undefined`를 검색하면 `true`를 얻을 수 있습니다.

```js
console.log([1, , 3].includes(undefined)); // true
```

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

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

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

명세서
---

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

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

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

같이 보기
-----

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


Array.prototype.shift() - JavaScript

Array.prototype.shift()
=======================

**`shift()`** 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.

시도해보기
-----

구문
--

```js
arr.shift();
```

### 반환 값

배열에서 제거한 요소. 빈 배열의 경우 `undefined` 를 반환합니다.

설명
--

`shift` 메서드는 0번째 위치의 요소를 제거 하고 연이은 나머지 값들의 위치를 한칸 씩 앞으로 당깁니다. 그리고 제거된 값을 반환 합니다. 만약 배열의 `length`가 0이라면 `undefined`를 리턴 합니다.

`shift`는 의도적인 일반형태로써; 이 메서드는 배열과 유사한 형태의 객체에서 호출 하거나 적용 할 수 있습니다. 연속된 일련의 마지막 항목을 나타내는 길이 속성을 가지고 있지 않은 객체의 제로베이스 수치 속성에는 의미 있는 작동을 하지 않을 수 있습니다. (*Objects which do not contain a `length` property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner*.)

예제
--

### 배열에서 한 요소 제거하기

아래 코드는 `myFish` 라는 배열에서 첫번째 요소를 제거 하기 전과 후를 보여 줍니다. 그리고 제거된 요소도 보여줍니다.

```js
var myFish = ["angel", "clown", "mandarin", "surgeon"];

console.log("myFish before: " + myFish);
// "제거전 myFish 배열: angel,clown,mandarin,surgeon"

var shifted = myFish.shift();

console.log("myFish after: " + myFish);
// "제거후 myFish 배열: clown,mandarin,surgeon"

console.log("Removed this element: " + shifted);
// "제거된 배열 요소: angel"
```

### while 반복문 안에서 shift() 사용하기

shift() 메서드는 while 문의 조건으로 사용되기도 합니다. 아래 코드에서는 while 문을 한번 돌 때 마다 배열의 다음 요소를 제거하고, 이는 빈 배열이 될 때까지 반복됩니다.

```js
var names = ["Andrew", "Edward", "Paul", "Chris", "John"];

while ((i = names.shift()) !== undefined) {
  console.log(i);
}
// Andrew, Edward, Paul, Chris, John
```

명세
--

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

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

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

같이 보기
-----

* `Array.prototype.push()`
* `Array.prototype.pop()`
* `Array.prototype.unshift()`


WeakMap.prototype.delete() - JavaScript

WeakMap.prototype.delete()
==========================

**`delete()`** 메서드는 `WeakMap` 객체에서 특정 요소를 제거합니다.

시도해보기
-----

구문
--

```js
delete key;
```

### 매개변수

`key`

`WeakMap` 객체에서 제거할 요소의 키입니다.

### 반환 값

`WeakMap` 겍체의 요소가 성공적으로 제거된 경우 `true`입니다. `WeakMap`에서 키를 찾을 수 없거나 키가 객체가 아닌 경우는 `false`입니다.

예제
--

### delete() 메서드 사용하기

```js
const wm = new WeakMap();
wm.set(window, "foo");

wm.delete(window); // true 반환. 성공적으로 제거됨.

wm.has(window); // false 반환. window 객체는 더이상 WeakMap에 있지않음.
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-weakmap.prototype.delete |

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

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

같이 보기
-----

* `WeakMap`


WeakMap.prototype.get() - JavaScript

WeakMap.prototype.get()
=======================

**`get()`** 메서드는 `WeakMap` 객체에서 특정 요소를 반환합니다.

시도해보기
-----

구문
--

```js
get(key);
```

### 매개변수

`key`

필수로 요구되며,`WeakMap` 객체에서 반환할 요소의 키입니다.

### 반환 값

`WeakMap` 객체의 특정 키와 연결된 요소입니다. 키를 찾을 수 없으면 `undefined`가 반환됩니다.

예제
--

### get() 메서드 사용하기

```js
const wm = new WeakMap();
wm.set(window, "foo");

wm.get(window); // "foo" 반환.
wm.get("baz"); // undefined 반환.
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-weakmap.prototype.get |

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

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

같이 보기
-----

* `WeakMap`
* `WeakMap.set()`
* `WeakMap.has()`


WeakMap.prototype.has() - JavaScript

WeakMap.prototype.has()
=======================

**`has()`** 메서드는 지정된 키를 가진 요소가 `WeakMap` 객체에 존재하는지를 나타내는 불리언 값을 반환합니다.

시도해보기
-----

구문
--

```js
has(key);
```

### 매개변수

`key`

필수로 요구되며, `WeakMap` 객체에서 존재 여부를 테스트할 요소의 키입니다.

### 반환 값

불리언

`WeakMap` 객체에 지정된 키를 가진 요소가 있으면 `true`를 반환하고, 그렇지 않으면 `false`를 반환합니다.

예제
--

### has 메서드 사용하기

```js
const wm = new WeakMap();
wm.set(window, "foo");

wm.has(window); // true 반환
wm.has("baz"); // false 반환
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-weakmap.prototype.has |

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

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

같이 보기
-----

* `WeakMap`
* `WeakMap.prototype.set()`
* `WeakMap.prototype.get()`


WeakMap.prototype.set() - JavaScript

WeakMap.prototype.set()
=======================

**`set()`** 메서드는 지정된 키와 값을 가진 새 요소를 `WeakMap` 객체에 추가합니다.

시도해보기
-----

구문
--

```js
set(key, value);
```

### 매개변수

`key`

필수로 요구되며, 반드시 `object`여야 합니다. `WeakMap` 객체에 추가할 요소의 키입니다.

`value`

필수로 요구되며, 임의의 값입니다. `WeakMap` 객체에 추가할 요소의 값입니다.

### 반환 값

`WeakMap` 객체입니다.

예제
--

### set() 메서드 사용하기

```js
const wm = new WeakMap();
const obj = {};

// WeakMap에 새 요소를 추가합니다
wm.set(obj, "foo").set(window, "bar"); // 체인가능

// WeakMap 요소 업데이트
wm.set(obj, "baz");
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-weakmap.prototype.set |

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

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

같이보기
----

* `WeakMap`
* `WeakMap.prototype.get()`
* `WeakMap.prototype.has()`


BigInt() 생성자 - JavaScript

BigInt() 생성자
============

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

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

* Learn more
* See full compatibility
* Report feedback
**`BigInt()`** 생성자는 `BigInt` 객체를 생성합니다.

구분
--

```js
BigInt(value);
```

### 매개변수

`value`

생성하는 객체에 할당할 숫자 값. 문자열 또는 정수를 사용할 수 있습니다.

**참고:** `BigInt()`는 `new` 연산자와 함께 사용하지 않습니다.

예제
--

```js
BigInt(123);
// 123n
```

명세
--

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

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

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

같이 보기
-----

* `BigInt` 클래스


Atomics.load() - JavaScript

Atomics.load()
==============

**`Atomics.load()`** 정적 메서드는 배열의 지정된 위치의 값을 반환합니다.

시도해보기
-----

구문
--

```js
Atomics.load(typedArray, index)
```

### 매개 변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

값을 불러올 `typedArray`의 인덱스

### 반환 값

주어진 위치(`typedArray[index]`)의 예전 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### `load` 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);

Atomics.add(ta, 0, 12);
Atomics.load(ta, 0); // 12
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.load |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.store()`


Atomics.notify() - JavaScript

Atomics.notify()
================

**`Atomics.notify()`** 정적 메서드는 대기열에서 대기 중인 있는 일부 에이전트에게 알림을 보냅니다.

>
>
> **참조:** 이 작업은 공유된 `Int32Array`에서만 작동합니다.
>  공유되지 않은 `ArrayBuffer` 객체에서는 `0`을 반환합니다.
>
>
>
>

구문
--

```js
Atomics.notify(typedArray, index, count)
```

### 매개변수

`typedArray`

공유된 `Int32Array`.

`index`

깨울 `typedArray`의 위치.

`count` Optional

알림을 보낼 대기 중 에이전트의 숫자. 기본 값은 `+Infinity`입니다.

### 반환 값

* 깨어난 에이전트의 숫자를 반환합니다.
* 공유되지 않은 `ArrayBuffer` 객체가 사용되었을 경우 `0`을 반환합니다.
### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### `notify` 사용하기

공유된 `Int32Array`에서

```js
const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);
```

 읽기 스레드는 0이 될 것으로 예상되는 위치 0에서 대기 중입니다. 이 상태가 유지되는 한 계속 진행되지 않습니다.
 그러나 쓰기 스레드가 새 값을 저장하면 쓰기 스레드에서 알림을 받고 새 값(123)을 반환합니다.

```js
Atomics.wait(int32, 0, 0);
console.log(int32[0]); // 123
```

쓰기 스레드는 새로운 값을 저장하고 쓰기가 완료되면 대기 중인 스레드에 알립니다.

```js
console.log(int32[0]); // 0;
Atomics.store(int32, 0, 123);
Atomics.notify(int32, 0, 1);
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.notify |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.wait()`


Atomics.isLockFree() - JavaScript

Atomics.isLockFree()
====================

**`Atomics.isLockFree()`** 정적 메서드는 지정된 요소 바이트 크기를 가진 유형화 배열에 적용될 때
 `Atomics` 메서드가 잠금을 사용할지 아니면 아토믹 하드웨어 연산을 사용할지 결정하는 데 사용됩니다.
 주어진 크기가 정수 타입의 형식화 배열의 BYTES\_PER\_ELEMENT
 속성 중 하나가 아닌 경우 `false`를 반환합니다.

시도해보기
-----

구문
--

```js
Atomics.isLockFree(size)
```

### 매개변수

`size`

검사할 바이트 크기

### 반환 값

해당 연산이 락이 걸렸는지 여부를 가리키는 `true` 혹은 `false` 값

예제
--

### isLockFree 사용하기

```js
Atomics.isLockFree(1); // true
Atomics.isLockFree(2); // true
Atomics.isLockFree(3); // false
Atomics.isLockFree(4); // true
Atomics.isLockFree(5); // false
Atomics.isLockFree(6); // false
Atomics.isLockFree(7); // false
Atomics.isLockFree(8); // true
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.islockfree |

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

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

같이 보기
-----

* `Atomics`


Atomics.add() - JavaScript

Atomics.add()
=============

**`Atomics.add()`** 정적 메서드는 배열의 지정된 위치에 지정된 값을 추가하고 해당 위치의 이전 값을 반환합니다.
 이 아토믹 연산은 수정된 값 쓰기가 완료되기 전까지 다른 쓰기가 발생하지 않도록 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.add(typedArray, index, value)
```

### 매개변수

`typedArray`

 정수형 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

`value`를 더할 `typedArray`내의 위치.

`value`

더할 숫자.

### 반환 값

주어진 위치의 예전 값(`typedArray[index]`).

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### add() 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);

Atomics.add(ta, 0, 12); // 예전 값인 0을 반환합니다.
Atomics.load(ta, 0); // 12
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.add |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.sub()`


Atomics.compareExchange() - JavaScript

Atomics.compareExchange()
=========================

**`Atomics.compareExchange()`** 정적 메서드는 주어진 예상 값이 이전 값과 같으면 배열의 지정된 위치에서
 지정된 대체 값을 교환합니다. 예상 값이 이전 값과 같을 경우, 배열의 지정된 위치에서 지정된 대체 값을 교환합니다.
 이 메서드는 해당 위치의 이전 값이 해당 위치의 이전 값을 반환합니다. 이 아토믹 연산은 수정된 값이 반환될 때까지 다른 쓰기가
 발생하지 않음을 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.compareExchange(typedArray, index, expectedValue, replacementValue)
```

### 매개변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

값을 불러올 `typedArray`의 인덱스

`expectedValue`

동일성을 확인하기 위한 값

`replacementValue`

교환할 숫자

### 반환 값

주어진 위치(`typedArray[index]`)의 예전 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### compareExchange() 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
ta[0] = 7;
Atomics.compareExchange(ta, 0, 7, 12); // 이전 값 7을 반환합니다
Atomics.load(ta, 0); // 12
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.compareexchange |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.exchange()`


Atomics.and() - JavaScript

Atomics.and()
=============

**`Atomics.and()`** 정적 메서드는 배열의 지정된 위치에서 지정된 값으로 비트 연산 AND를 계산한 후 해당 위치의
 이전 값을 반환합니다. 이 아토믹 연산은 수정된 값이 다시 쓰여질 때까지 다른 쓰기가 발생하지 않도록 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.and(typedArray, index, value)
```

### 매개변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

비트 연산 AND를 계산할 `typedArray`의 인덱스입니다.

`value`

비트 연산 AND와 같이 계산할 숫자입니다.

### 반환 값

주어진 위치(`typedArray[index]`)의 예전 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
설명
--

비트 AND 연산은 `a`와 `b`가 모두 1인 경우에만 1을 산출합니다. AND 연산에 대한 진리 테이블은 다음과 같습니다.

| `a` | `b` | `a & b` |
| --- | --- | --- |
| 0 | 0 | 0 |
| 0 | 1 | 0 |
| 1 | 0 | 0 |
| 1 | 1 | 1 |

예를 들어, `5 & 1`의 비트 연산 AND는 `0001`, 10진수로 1입니다.
```

5  0101
1  0001
   ----
1  0001
```

예제
--

### and() 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
ta[0] = 5;

Atomics.and(ta, 0, 1); // 이전 값인 5를 반환합니다
Atomics.load(ta, 0); // 1
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.and |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.or()`
* `Atomics.xor()`


Atomics.store() - JavaScript

Atomics.store()
===============

**`Atomics.store()`** 정적 메서드는 배열의 지정된 위치에 지정된 값을 저장하고 해당 값을 반환합니다

시도해보기
-----

구문
--

```js
Atomics.store(typedArray, index, value)
```

### 매개 변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

`value`를 저장할 `typedArray`의 인덱스.

`value`

저장할 숫자.

### 반환 값

저장된 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### store() 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);

Atomics.store(ta, 0, 12); // 12
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.store |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.load()`


Atomics.wait() - JavaScript

Atomics.wait()
==============

**`Atomics.wait()`** 정적 메서드는 `Int32Array`의 지정된 위치에 지정된 값이
 여전히 포함되어 있는지 확인합니다. 만약 그러하다면 잠자기 상태로 있으면서 깨우기(wake-up) 알림을 기다리거나 시간이 만료됩니다.
 이 함수는 `"ok"`, `"not-equal"` 또는 `"timed-out"` 문자열을 반환합니다.

>
>
> **Note:** 이 연산은 공유 `Int32Array` 또는 `BigInt64Array`에서만
>  작동하며 메인 스레드에서는 허용되지 않을 수 있습니다.
>  이 메서드의 비차단, 비동기 버전에 대해서는 `Atomics.waitAsync()`를 참조하세요.
>
>
>
>

구문
--

```js
Atomics.wait(typedArray, index, value)
Atomics.wait(typedArray, index, value, timeout)
```

### 매개변수

`typedArray`

공유된 `Int32Array` 혹은 `BigInt64Array`.

`index`

`typedArray`에서의 대기하고 있는 인덱스.

`value`

테스트할 기대값.

`timeout` Optional

대기 시간(밀리초). 시간이 명시되지 않으면 `Infinity`입니다.

### 반환 값

`"ok"`, `"not-equal"` 혹은 `"timed-out"` 문자열

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### wait() 사용하기

공유된 `Int32Array`에서

```js
const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);
```

 읽기 스레드는 0이 될 것으로 예상되는 위치 0에서 잠자기 상태로 대기 중입니다. 이 값이 유지되는 한 계속 진행되지 않습니다.
 그러나 쓰기 스레드가 새 값을 저장하면 쓰기 스레드에서 알림을 받고 새 값(123)을 반환합니다.

```js
Atomics.wait(int32, 0, 0);
console.log(int32[0]); // 123
```

쓰기 스레드는 새 값을 저장하고 쓰기가 완료되면 대기 중인 스레드에 알립니다:

```js
console.log(int32[0]); // 0;
Atomics.store(int32, 0, 123);
Atomics.notify(int32, 0, 1);
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.wait |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.waitAsync()`
* `Atomics.notify()`


Atomics.waitAsync() - JavaScript

Atomics.waitAsync()
===================

**`Atomics.waitAsync()`** 정적 메서드는 공유 메모리 위치에서 비동기적으로 대기하고 `Promise`를 반환합니다.

`Atomics.wait()`와는 다르게, `waitAsync`는 논 블록킹이며 메인 스레드에서 사용할 수 있습니다.

**참고:** 이 작업은 오직 공유된 `Int32Array` 혹은 `BigInt64Array`에서만 동작합니다.

구문
--

```js
Atomics.waitAsync(typedArray, index, value)
Atomics.waitAsync(typedArray, index, value, timeout)
```

### 매개변수

`typedArray`

공유된 `Int32Array` 혹은 `BigInt64Array`.

`index`

`typedArray`에서의 대기하고 있는 인덱스.

`value`

테스트할 기대값.

`timeout` Optional

대기 시간(밀리초). 시간이 명시되지 않으면 `Infinity`입니다.

### 반환 값

다음 속성을 가진 `Object`.

* `async`
    + `value` 속성이 `Promise`인지 아닌지를 나타내는 부울입니다.
* `value`
    + `async`가 `false`이면, `"not-equal"` 또는 `"time-out"`(`timeout` 매개변수가 `0`인 경우에만) 문자열일 수 있습니다.
     `async`가 `true`이면 `"ok"` 또는 `"timed-out"` 문자열 값으로 이행되는 `Promise`가 됩니다. 프로미스는 절대 거부되지 않습니다.
예제
--

### waitAsync() 사용하기

공유된 `Int32Array`에서

```js
const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);
```

읽기 스레드가 0이 될 것으로 예상되는 위치 0에서 대기 중입니다. `result.value`은 프로미스입니다.

```js
const result = Atomics.waitAsync(int32, 0, 0, 1000);
// { async: true, value: Promise {<pending>} }
```

읽기 스레드 또는 다른 스레드에서 메모리 위치 0이 호출되고 이행 결과 `"ok"` 문자열을 확인할 수 있습니다.

```js
Atomics.notify(int32, 0);
// { async: true, value: Promise {<fulfilled>: 'ok'} }
```

`"ok"`으로 확인되지 않는다면 2가지 원인이 있습니다. 첫 번째 원인은 공유 메모리 위치의 값이 예상과 다른 경우인데 이 경우 `value`는 프로미스 대신 `"not-equal"`이 될 됩니다. 두 번째 원인은 시간이 만료(타임아웃)될 경우로 프로미스 결과는 문자열 `"time-out"`입니다.

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.waitasync |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.wait()`
* `Atomics.notify()`


Atomics.exchange() - JavaScript

Atomics.exchange()
==================

**`Atomics.exchange()`** 정적 메서드는 배열의 지정된 위치에 지정된 값을 저장하고 해당 위치의 이전 값을 반환합니다.
 이 아토믹 연산은 이전 값의 읽기와 새 값의 쓰기 사이에 다른 쓰기가 발생하지 않는 것을 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.exchange(typedArray, index, value)
```

### 매개변수

`typedArray`

 정수 타입의 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

`value`를 교환할 `typedArray`의 위치.

`value`

교환할 숫자.

### 반환 값

해당 위치의 예전 값(`typedArray[index]`).

### 예외

* `typedArray`가 허용하는 정수 타입이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 해당 `typedArray`를 벗어나는 경우 `RangeError`가 발생합니다.
예제
--

### exchange() 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
Atomics.exchange(ta, 0, 12); // returns 0, the old value
Atomics.load(ta, 0); // 12
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.exchange |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.compareExchange()`


Atomics.sub() - JavaScript

Atomics.sub()
=============

**`Atomics.sub()`** 정적 메서드는 배열에서 주어진 위치에 주어진 값으로 빼기 연산을 수행하고
 해당 포지션의 기존 값을 반환합니다. 이 아토믹 연산은 수정된 값이 쓰이기 전까지 다른 쓰기 연산이 일어나지 않음을 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.sub(typedArray, index, value)
```

### 매개변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

`value`를 차감할 `typedArray`의 인덱스입니다.

`value`

차감할 값(숫자)입니다.

### 반환 값

주어진 위치(`typedArray[index]`)의 예전 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
예제
--

### sub 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
ta[0] = 48;
Atomics.sub(ta, 0, 12); // 이전 값 48을 반환합니다.
Atomics.load(ta, 0); // 36
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.sub |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.add()`


Atomics.xor() - JavaScript

Atomics.xor()
=============

**`Atomics.xor()`** 정적 메서드는 배열에서 주어진 위치에 주어진 값으로 XOR 비트 연산을 수행하고
 해당 포지션의 기존 값을 반환합니다. 이 아토믹 연산은 수정된 값이 쓰이기 전까지 다른 쓰기 연산이 일어나지 않음을 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.xor(typedArray, index, value)
```

### 매개 변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

비트 연산 XOR를 계산할 `typedArray`의 인덱스입니다.

`value`

비트 연산 XOR와 같이 계산할 숫자입니다.

### 반환 값

주어진 위치(`typedArray[index]`)의 예전 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
설명
--

비트 연산 XOR은 `a`와 `b` 이 다르면 1을 산출합니다. XOR 연산에 대한 진리표는 다음과 같습니다.

| `a` | `b` | `a ^ b` |
| --- | --- | --- |
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |

예를 들어, `5 ^ 1`의 비트 연산 XOR의 값은 `0100`이며 10진수로 4입니다.
```

5  0101
1  0001
   ----
4  0100
```

예제
--

### xor 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
ta[0] = 5;
Atomics.xor(ta, 0, 1); // 이전 값인 5를 반환합니다
Atomics.load(ta, 0); // 4
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.xor |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.and()`
* `Atomics.or()`


Atomics.or() - JavaScript

Atomics.or()
============

**`Atomics.or()`** 정적 메서드는 배열에서 주어진 위치에 주어진 값으로 OR 비트 연산을 수행하고
 해당 포지션의 기존 값을 반환합니다. 이 아토믹 연산은 수정된 값이 쓰이기 전까지 다른 쓰기 연산이 일어나지 않음을 보장합니다.

시도해보기
-----

구문
--

```js
Atomics.or(typedArray, index, value)
```

### 매개변수

`typedArray`

 정수형 형식화 배열. `Int8Array`, `Uint8Array`,
 `Int16Array`, `Uint16Array`, `Int32Array`,
 `Uint32Array`, `BigInt64Array`,
 `BigUint64Array` 중 하나.

`index`

비트 연산 OR를 계산할 `typedArray`의 인덱스입니다.

`value`

비트 연산 OR와 같이 계산할 숫자입니다.

### 반환 값

주어진 위치(`typedArray[index]`)의 예전 값.

### 예외

* `typedArray`가 허용된 정수형이 아닐 경우 `TypeError`가 발생합니다.
* `index`가 `typedArray`의 범위를 벗어날 경우 `RangeError`가 발생합니다.
설명
--

비트 연산 OR은 `a`와 `b` 중 하나라도 1이면 1을 산출합니다. OR 연산에 대한 진리표는 다음과 같습니다.

| `a` | `b` | `a | b` |
| --- | --- | --- |
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 1 |

예를 들어, `5 | 1`의 비트 연산 OR의 값은 `0101`이며 10진수로 5입니다.
```

5  0101
1  0001
   ----
5  0101
```

예제
--

### or 사용하기

```js
const sab = new SharedArrayBuffer(1024);
const ta = new Uint8Array(sab);
ta[0] = 2;

Atomics.or(ta, 0, 1); // 이전 값 2를 반환합니다.
Atomics.load(ta, 0); // 3
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-atomics.or |

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

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

같이 보기
-----

* `Atomics`
* `Atomics.and()`
* `Atomics.xor()`


Float64Array() constructor - JavaScript

Float64Array() constructor
==========================

**`Float64Array`** 형식화 배열(TypedArray) 생성자는 플랫폼의 바이트 순서를 따르는 64비트 부동 소수점(C의
 `double` 데이터 타입에 대응) 배열을 생성합니다. 바이트 순서를 제어해야 하는 경우 대신 `DataView`를
 사용합니다. 배열의 내용은 0으로 초기화됩니다. 배열이 생성되면 객체의 메서드를 사용하거나 표준 배열 인덱스 구문
 (즉, 대괄호 표기법 사용)을 사용하여 배열의 요소를 참조할 수 있습니다.

구문
--

```js
new Float64Array()
new Float64Array(length)
new Float64Array(typedArray)
new Float64Array(object)

new Float64Array(buffer)
new Float64Array(buffer, byteOffset)
new Float64Array(buffer, byteOffset, length)
```

**참고:** `Float64Array()`는 오직 `new`
 로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 `TypeError` 예외가 발생합니다.

### 매개변수

`TypedArray`를 참고하세요.

### 예외

`TypedArray`를 참고하세요.

예제
--

### Float64Array를 생성하기 위한 각기 다른 여러 방법

```js
// 길이로부터 생성
const float64 = new Float64Array(2);
float64[0] = 42;
console.log(float64[0]); // 42
console.log(float64.length); // 2
console.log(float64.BYTES\_PER\_ELEMENT); // 8

// 배열로부터 생성
const x = new Float64Array([21, 31]);
console.log(x[1]); // 31

// 다른 TypedArray로부터 생성
const y = new Float64Array(x);
console.log(y[0]); // 21

// ArrayBuffer로부터 생성
const buffer = new ArrayBuffer(64);
const z = new Float64Array(buffer, 8, 4);
console.log(z.byteOffset); // 8

// 순회로부터 생성
const iterable = (function\* () {
  yield\* [1, 2, 3];
})();
const float64FromIterable = new Float64Array(iterable);
console.log(float64FromIterable);
// Float64Array [1, 2, 3]
```

명세서
---

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

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

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

같이 보기
-----

* `core-js`에서 `Float64Array`의 폴리필
* JavaScript 형식화 배열
* `ArrayBuffer`
* `DataView`


Error.prototype.lineNumber - JavaScript

Error.prototype.lineNumber
==========================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

**`lineNumber`** 속성은 이 오류가 발생한 파일의 행 번호를 포함합니다.

예제
--

### lineNumber 사용하기

```js
var e = new Error("Could not parse input");
throw e;
console.log(e.lineNumber); // 2
```

### 오류 이벤트를 사용하는 또 다른 예제

```js
window.addEventListener("error", function (e) {
  console.log(e.lineNumber); // 5
});
var e = new Error("Could not parse input");
throw e;
```

이는 표준 기능이 아니며 광범위하게 지원되지 않습니다. 아래 브라우저 호환성 표를 참고하십시오.

명세
--

표준의 일부가 아닙니다.

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

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

같이 보기
-----

* `Error.prototype.stack` (en-US)
* `Error.prototype.columnNumber`
* `Error.prototype.fileName`


Error.prototype.message - JavaScript

Error.prototype.message
=======================

**`message`** 속성은 사람이 읽을 수 있는 오류의 설명입니다.

설명
--

이 속성은 오류가 있거나 설정된 경우 오류에 대한 간략한 설명을 포함합니다. SpiderMonkey는 예외적으로 `message` 속성을 광범위하게 사용합니다. `name` 속성과 결합된 `message` 속성은 `Error.prototype.toString()` 메서드에서 오류의 문자열 표현을 생성하는 데 사용됩니다.

기본적으로 `message` 속성은 빈 문자열이지만, `Error` 생성자에 대한 첫 번째 인수로 메시지를 지정하여 인스턴스에 대해 이 동작을 재정의할 수 있습니다.

예제
--

### 사용자 정의 오류 발생시키기

```js
var e = new Error("Could not parse input");
// e.message is 'Could not parse input'
throw e;
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-error.prototype.message |

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

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

같이 보기
-----

* `Error.prototype.name`
* `Error.prototype.toString()`


Error() 생성자 - JavaScript

Error() 생성자
===========

**`Error`** 생성자는 오류 객체를 생성합니다.

구문
--

```js
new Error();
new Error(message);
new Error(message, fileName);
new Error(message, fileName, lineNumber);
```

### 매개변수

`message` Optional

사람이 읽을 수 있는 오류 메시지입니다.

`fileName` Optional
비표준

 생성할 `Error` 객체의 `fileName` 속성으로 설정할 값입니다. 기본 값은
 `Error()` 생성자를 호출한 파일의 이름입니다.

`lineNumber` Optional
비표준

 생성할 `Error` 객체의 `lineNumber` 속성으로 설정할 값입니다. 기본 값은
 `Error()` 생성자를 호출한 줄의 번호입니다.

예제
--

### 생성자 또는 함수 호출

`Error`를 `new` 없이 함수로써 호출한 경우에도 `Error` 객체를
 반환합니다. 따라서 단순히 `Error`를 호출하기만 해도 `new` 키워드를 사용한 것과 같은 결과를
 낳습니다.

```js
// 함수로 호출해도...
const x = Error("함수 호출로 만들기!");

// ...이렇게 생성자로 사용한 것과 같은 결과
const y = new Error('"new" 키워드를 써서 만들기!');
```

명세
--

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

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

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

같이 보기
-----

* `throw`
* `try...catch` (en-US)


Error.prototype.name - JavaScript

Error.prototype.name
====================

**`name`** 속성은 오류 타입을 설명하기 위한 이름을 나타냅니다. 초기값은 "Error"입니다.

설명
--

 기본적으로 `Error` 인스턴스에는 "Error"라는 이름을 갖습니다. `name` 속성과
 `message` 속성은 `Error.prototype.toString()` 메서드에서 오류의 문자열 표현을 생성하는 데
 사용됩니다.

예제
--

### 사용자 정의 에러 발생시키기

```js
var e = new Error("Malformed input"); // e.name은 'Error'

e.name = "ParseError";
throw e;
// e.toString()은 'ParseError: Malformed input'을 반환합니다
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-error.prototype.name |

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

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

같이 보기
-----

* `Error.prototype.message`
* `Error.prototype.toString()`


Error.prototype.columnNumber - JavaScript

Error.prototype.columnNumber
============================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

**`columnNumber`** 속성은 이 오류가 발생한 파일의 행의 열 번호를 포함합니다.

예제
--

### columnNumber 사용하기

```js
var e = new Error("Could not parse input");
throw e;
console.log(e.columnNumber); // 0
```

명세
--

표준의 일부가 아닙니다.

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

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

See also
--------

* `Error.prototype.stack` (en-US)
* `Error.prototype.lineNumber`
* `Error.prototype.fileName`


Error.prototype.cause - JavaScript

Error.prototype.cause
=====================

**`cause`** 속성은 오류의 구체적인 원래 원인을 나타냅니다.

예외를 잡아서 다시 예외를 발생시킬 때 원래 발생한 오류에 접근 할 수 있으면서 보다 구체적인 혹은 유용한 에러 메시지를 추가할때 사용합니다.

값
-

`options.cause` 인자의 `Error()` 생성자에 전달되는 값입니다.

값은 어떤 타입이든 가능합니다. `catch`문의 변수 역시 `Error`라고 확신할 수 없는 것과 마찬가지로 여러분이 처리할 오류의 `cause`에 `Error`가 있다고 가정하지 마시기 바랍니다. 아래의 예제 "오류 원인으로 구조화된 데이터 제공"는 의도적으로 오류가 아닌 것을 `cause`로 제공하는 경우를 보여줍니다.

예제
--

### cause와 함께 오류 재발생시키기

오류를 발견하고 새 메시지로 다시 던지는 것이 유용할 수 있습니다. 이 경우 그림과 같이 새 `Error`에 대한 원래 오류를 생성자에 전달해야 합니다.

```js
try {
  connectToDatabase();
} catch (err) {
  throw new Error("Connecting to database failed.", { cause: err });
}
```

보다 자세한 예제는 Error > Differentiate between similar errors를 참조하세요.

### 오류 원인으로 구조화된 데이터 제공

사람을 위해 쓰인 오류 메시지는 기계 구문 분석에는 적합하지 않을 수 있습니다. 왜냐하면 기계 구문 분석은 단어 변경이나 구두점 변경으로도 기존 분석이 제대로 동작하지 않을 수 있기 때문입니다. 그래서 함수에서 오류를 발생시킬 때, 사람이 읽을 수 있는 오류 메시지의 대안으로 기계 구문 분석을 위해 구조화된 데이터로 원인을 제공할 수 있습니다.

```js
function makeRSA(p, q) {
  if (!Number.isInteger(p) || !Number.isInteger(q)) {
    throw new Error("RSA key generation requires integer inputs.", {
      cause: { code: "NonInteger", values: [p, q] },
    });
  }
  if (!areCoprime(p, q)) {
    throw new Error("RSA key generation requires two co-prime integers.", {
      cause: { code: "NonCoprime", values: [p, q] },
    });
  }
  // rsa algorithm…
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-installerrorcause |

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

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

같이 보기
-----

* `Error.prototype.message`
* `Error.prototype.toString()`


Error.prototype.toString() - JavaScript

Error.prototype.toString()
==========================

**`toString()`** 메서드는 명시된 `Error` 객체를 표현하는 문자열을 반환합니다.

구문
--

```js
toString();
```

### 반환값

명시된 `Error` 객체를 표현하는 문자열.

설명
--

`Error` 객체는 모든 객체가 상속받는 `Object.prototype.toString()` 메서드를 재정의합니다.
 이 의미는 다음과 같습니다(`Object`과 `String`는 그들 만의 원본 값이 있다고 가정합니다):

```js
Error.prototype.toString = function () {
  "use strict";

  var obj = Object(this);
  if (obj !== this) {
    throw new TypeError();
  }

  var name = this.name;
  name = name === undefined ? "Error" : String(name);

  var msg = this.message;
  msg = msg === undefined ? "" : String(msg);

  if (name === "") {
    return msg;
  }
  if (msg === "") {
    return name;
  }

  return name + ": " + msg;
};
```

예제
--

### toString() 사용하기

```js
var e1 = new Error("fatal error");
console.log(e1.toString()); // 'Error: fatal error'

var e2 = new Error("fatal error");
e2.name = undefined;
console.log(e2.toString()); // 'Error: fatal error'

var e3 = new Error("fatal error");
e3.name = "";
console.log(e3.toString()); // 'fatal error'

var e4 = new Error("fatal error");
e4.name = "";
e4.message = undefined;
console.log(e4.toString()); // ''

var e5 = new Error("fatal error");
e5.name = "hello";
e5.message = undefined;
console.log(e5.toString()); // 'hello'
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-error.prototype.tostring |

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

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

같이 보기
-----

* `Error.prototype.toSource()` (en-US)


Error.prototype.fileName - JavaScript

Error.prototype.fileName
========================

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

**`fileName`** 속성은 이 오류가 발생한 파일의 경로를 포함합니다.

설명
--

이 비표준 속성은 이 오류가 발생한 파일의 경로를 포함합니다. 디버거 컨텍스트(예를 들어 Firefox 개발자 도구)에서 호출할 경우, "debugger eval code" 가 반환됩니다.

예제
--

### fileName 사용하기

```js
var e = new Error("Could not parse input");
throw e;
// e.fileName could look like "file:///C:/example.html"
```

명세
--

표준의 일부가 아닙니다.

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

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

같이 보기
-----

* `Error.prototype.stack` (en-US)
* `Error.prototype.columnNumber`
* `Error.prototype.lineNumber`


Map.prototype[@@iterator]() - JavaScript

Map.prototype[@@iterator]()
===========================

`Map` 객체의 **`@@iterator`** 메서드는 반복가능 프로토콜을 구현하여
 전개 구문와 `for...of` 루프같은
 반복이 필요한 대부분의 구문에서 맵을 사용할 수 있게 합니다. 맵의 키-값 쌍을 생성하는 반복자를 반환합니다.

이 속성의 초기 값은 `Map.prototype.entries` 속성의 초기 값과 동일한 함수 객체입니다.

시도해보기
-----

구문
--

```js
map[Symbol.iterator]()
```

### 반환 값

`Map.prototype.entries()`과 동일한 반환 값을 반환합니다. 이는 맵의 키-값 쌍을 생성하는
 새로운 반복자 객체입니다.

예제
--

### for...of 루프를 사용한 반복

 이 메서드를 직접 호출할 필요는 거의 없다는 점을 명심하시기 바랍니다. `@@iterator` 메서드의 존재는 `Map` 객체를
 반복 가능하게 만들고,
 `for...of` 루프와 같은 반복 구문이 자동으로 이 메서드를 호출하여 루프를 도는 반복자를 얻기 위함입니다.

```js
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

for (const entry of myMap) {
  console.log(entry);
}
// ["0", "foo"]
// [1, "bar"]
// [{}, "baz"]

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}
// 0: foo
// 1: bar
// [Object]: baz
```

### 수동으로 반복자 돌리기

반복 프로세스를 최대로 제어하기 위해 반환된 반복자 객체의 `next()` 메서드를 수동으로 호출할 수도 있습니다.

```js
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap[Symbol.iterator]();

console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype-@@iterator |

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

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

같이 보기
-----

* `Map.prototype.entries()`
* `Map.prototype.keys()`
* `Map.prototype.values()`


Map.prototype.size - JavaScript

Map.prototype.size
==================

**`size`** 접근자 속성은 `Map` 객체의 요소 수를 반환합니다.

시도해보기
-----

설명
--

`size` 값은 `Map` 객체에 몇 개의 항목이 있는지 나타내는 정수입니다. `size` 설정 접근자 함수는 `undefined` 이므로
 이 속성을 변경할 수 없습니다.

예제
--

### size 사용하기

```js
const myMap = new Map();
myMap.set("a", "alpha");
myMap.set("b", "beta");
myMap.set("g", "gamma");

console.log(myMap.size); // 3
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-map.prototype.size |

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

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

같이 보기
-----

* `Map`


Map.prototype.keys() - JavaScript

Map.prototype.keys()
====================

**`keys()`** 메서드는 배열에서 각 인덱스의 키를 포함하는 새로운 맵 반복자 (en-US) 객체를 반환합니다.

시도해보기
-----

구문
--

```js
keys()
```

### 반환 값

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

예제
--

### keys() 사용하기

```js
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.keys();

console.log(mapIter.next().value); // "0"
console.log(mapIter.next().value); // 1
console.log(mapIter.next().value); // {}
```

명세서
---

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

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

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

같이 보기
-----

* `Map.prototype.entries()`
* `Map.prototype.values()`


Map.prototype.get() - JavaScript

Map.prototype.get()
===================

**`get()`** 메서드는 `Map` 객체에서 특정 요소를 반환합니다. 만약 주어진 키와 관련된 값이 객체라면 해당 객체에 대한
 참조만 가져오고, 해당 객체에 대한 모든 변경은 `Map` 내에서 효율적으로 수정됩니다.

시도해보기
-----

구문
--

```js
get(key)
```

### 매개변수

`key`

`Map` 객체에서 반환받을 요소의 키

### 반환 값

명시된 키와 연관된 요소 혹은 `Map` 객체에서 해당 키를 찾을 수 없는 경우 `undefined`.

예제
--

### get() 사용하기

```js
const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.get("bar")); // "foo" 를 반환합니다.
console.log(myMap.get("baz")); // undefined 을 반환합니다.
```

### get()을 사용하여 객체에 대한 참조 검색

```js
const arr = [];
const myMap = new Map();
myMap.set("bar", arr);

myMap.get("bar").push("foo");

console.log(arr); // ["foo"]
console.log(myMap.get("bar")); // ["foo"]
```

 맵이 원본 객체에 대한 참조만 보유하고 있다는 것은 해당 객체가 가비지 콜렉션되지 않을 수 있으며 이로 인해 예측하지 못한
 메모리 문제가 일어날 수 있음을 의미합니다. 만약 맵에 저장되어 있는 객체가 원본 객체와 동일한 수명을 가지게 하려면
 `WeakMap`을 고려하시기 바랍니다.

명세서
---

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

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

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

같이 보기
-----

* `Map`
* `Map.prototype.set()`
* `Map.prototype.has()`


Map.prototype.clear() - JavaScript

Map.prototype.clear()
=====================

**`clear()`** 메서드는 `Map` 객체의 모든 요소를 제거합니다.

시도해보기
-----

구문
--

```js
clear()
```

### 반환 값

`undefined`.

예제
--

### clear() 사용하기

```js
const myMap = new Map();
myMap.set("bar", "baz");
myMap.set(1, "foo");

console.log(myMap.size); // 2
console.log(myMap.has("bar")); // true

myMap.clear();

console.log(myMap.size); // 0
console.log(myMap.has("bar")); // false
```

명세서
---

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

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

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

같이 보기
-----

* `Map`


Map.prototype.has() - JavaScript

Map.prototype.has()
===================

**`has()`** 메서드는 주어진 키에 해당하는 요소가 존재 여부를 가리키는 불리언 값을 반환합니다.

시도해보기
-----

구문
--

```js
has(key)
```

### 매개변수

`key`

`Map` 객체에서 존재를 확인할 요소의 키

### 반환 값

만약 주어진 키에 해당하는 요소가 `Map`객체에 존재한다면 `true`, 그렇지 않으면 `false`

예제
--

### has() 사용하기

```js
const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.has("bar")); // true
console.log(myMap.has("baz")); // false
```

명세서
---

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

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

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

같이 보기
-----

* `Map`
* `Map.prototype.set()`
* `Map.prototype.get()`


Map.prototype.delete() - JavaScript

Map.prototype.delete()
======================

**`delete()`** 메서드는 키로 `Map` 객체에서 특정 요소를 제거합니다.

시도해보기
-----

구문
--

```js
delete(key)
```

### 매개 변수

`key`

`Map` 객체에서 제거할 요소의 키

### 반환 값

`Map` 객체에서 요소가 존재하고 제거된 경우 `true`, 그렇지 않고 해당 요소가 존재하지 않으면 `false`를 반환합니다.

예제
--

### delete() 사용하기

```js
const myMap = new Map();
myMap.set("bar", "foo");

console.log(myMap.delete("bar")); // true를 반환합니다. 성공적으로 제거되었습니다.
console.log(myMap.has("bar")); // false를 반환합니다. "bar" 요소는 더 이상 존재하지 않습니다.
```

명세서
---

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

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

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

같이 보기
-----

* `Map`


Map.prototype.entries() - JavaScript

Map.prototype.entries()
=======================

**`entries()`** 메서드는 새 반복자
 객체를 반환합니다. 이 객체에는 `Map` 객체의 각 요소에 대한 `[key, value]` 쌍이 삽입 순서대로 포함됩니다.
 이 특별한 경우, 이 반복자 객체도 반복이 가능하므로 for-of 루프를 사용할 수 있습니다. `[Symbol.iterator]` 프로토콜이
 사용될 경우, 호출될 때 반복자 자체를 반환하는 함수를 반환합니다.

시도해보기
-----

구문
--

```js
entries()
```

### 반환 값

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

예제
--

### entries() 사용하기

```js
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.entries();

console.log(mapIter.next().value); // ["0", "foo"]
console.log(mapIter.next().value); // [1, "bar"]
console.log(mapIter.next().value); // [Object, "baz"]
```

명세서
---

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

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

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

같이 보기
-----

* `Map.prototype.keys()`
* `Map.prototype.values()`


Map.prototype.values() - JavaScript

Map.prototype.values()
======================

**`values()`** 메서드는 배열의 각 아이템의 값을 순회하는 새로운 맵 반복자 (en-US) 객체를 반환합니다.

시도해보기
-----

구문
--

```js
values()
```

### 반환 값

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

예제
--

### values() 사용하기

```js
const myMap = new Map();
myMap.set("0", "foo");
myMap.set(1, "bar");
myMap.set({}, "baz");

const mapIter = myMap.values();

console.log(mapIter.next().value); // "foo"
console.log(mapIter.next().value); // "bar"
console.log(mapIter.next().value); // "baz"
```

명세서
---

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

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

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

같이 보기
-----

* `Map.prototype.entries()`
* `Map.prototype.keys()`


Map.prototype.forEach() - JavaScript

Map.prototype.forEach()
=======================

**`forEach()`** 메서드는 삽입 순서에 따라 `Map` 객체의 각 키/값 쌍마다 한 번씩 제공된 함수를 실행합니다.

시도해보기
-----

구문
--

```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### 매개변수

`callbackFn`

맵의 각 항목에 대해 실행할 함수입니다. 이 함수는 다음 인수를 사용하여 호출됩니다:

`value`

각 반복의 값입니다.

`key`

각 반복의 키입니다.

`map`

반복되는 map입니다.

`thisArg` Optional

`callbackFn`을 실행하고 있을 때 `this`로 사용하는 값.

### 반환 값

`undefined`.

설명
--

`forEach` 메서드는 실제로 존재하는 맵의 각 키에 대해 제공된 `callback`을 한 번씩 실행합니다. 삭제된 키에 대해서는
 호출되지 않습니다. 그러나 값은 존재하지만 `undefined`값일 경우에는 `callback`이 실행됩니다.

`callback`은 **인자 3개**와 함께 호출됩니다.

* 항목의 `value`
* 항목의 `key`
* 순회하고 있는 **`Map` 객체**

`thisArg`가 `forEach`의 매개 변수로 제공되면 호출 시 `this` 값으로 사용하기 위해 `callback`에 전달됩니다.
 그렇지 않으면 `undefined` 값이 `this` 값으로 사용되도록 전달됩니다. `callback`이 궁극적으로 관찰할 수 있는
 `this` 값은 함수가 보는 `this`를 결정하기 위한 일반적인 규칙에 따라 결정됩니다.

`forEach`가 완료되기 전에 삭제했다가 다시 추가한 경우를 제외하고 각 값은 한 번씩 방문합니다. 방문하기 전에 삭제된 값에 대해서는
 `callback`이 호출되지 않습니다. `forEach`가 완료되기 전에 추가된 새 값은 나중에 방문합니다.

예제
--

### Map 객체의 내용을 출력하기

다음 코드는 `Map` 객체에서 각 요소의 내용을 한 줄의 로그로 남깁니다.

```js
function logMapElements(value, key, map) {
  console.log(`map.get('${key}') = ${value}`);
}
new Map([
  ["foo", 3],
  ["bar", {}],
  ["baz", undefined],
]).forEach(logMapElements);
// Logs:
// "map.get('foo') = 3"
// "map.get('bar') = [object Object]"
// "map.get('baz') = undefined"
```

명세서
---

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

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

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

같이 보기
-----

* `Array.prototype.forEach()`
* `Set.prototype.forEach()`


Map.prototype.set() - JavaScript

Map.prototype.set()
===================

**`set()`** 메서드는 `Map` 객체에서 주어진 키와 값을 추가하거나 업데이트합니다.

시도해보기
-----

구문
--

```js
set(key, value)
```

### 매개변수

`key`

`Map` 객체에 추가되는 요소의 키. 이 키는 모든 종류의 JavaScript 타입(모든 원시형 혹은 모든 Javascript 객체)이 될 수 있습니다.

`value`

`Map` 객체에 추가되는 요소의 값. 이 값은 모든 종류의 JavaScript 타입(모든 종류의 원시형 혹은 모든 종류의 Javascript 객체)이 될 수 있습니다.

### 반환 값

`Map` 객체.

예제
--

### set() 사용하기

```js
const myMap = new Map();

// map에 새로운 요소를 추가합니다
myMap.set("bar", "foo");
myMap.set(1, "foobar");

// map에 요소를 업데이트 합니다
myMap.set("bar", "baz");
```

### 연속으로 set() 사용

`set()`메서드는 같은 `Map` 객체를 반환하기 때문에 아래와 같이 연속으로 호출할 수 있습니다.

```js
// Add new elements to the map with chaining.
myMap.set("bar", "foo").set(1, "foobar").set(2, "baz");
```

명세서
---

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

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

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

같이 보기
-----

* `Map`
* `Map.prototype.get()`
* `Map.prototype.has()`


Map() 생성자 - JavaScript

Map() 생성자
=========

**`Map()`** 생성자는 `Map` 객체를 생성합니다.

구문
--

```js
new Map()
new Map(iterable)
```

**참고:** `Map()`은 오직 `new`로만 생성할 수 있습니다. `new` 없이 호출하면 `TypeError`가 발생합니다.

### 매개변수

`iterable` Optional

 하나의 `Array` 혹은 키-값 쌍인 요소를 가진
 반복 가능 객체. (예를 들어
 `[[ 1, 'one' ],[ 2, 'two' ]]`과 같이 2개의 요소를 가진 배열). 각각의 키-값 쌍은 새로운 `Map`에
 추가됩니다.

예제
--

### 새로운 Map 생성하기

```js
const myMap = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"],
]);
```

명세서
---

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

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

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

같이 보기
-----

* A polyfill of `Map` is available in
 `core-js`
* `Set` (en-US)
* `WeakMap`
* `WeakSet`


Uint8ClampedArray() constructor - JavaScript

Uint8ClampedArray() constructor
===============================

**`Uint8ClampedArray`** 형식화 배열(TypedArray) 생성자는 0-255로 고정된 8비트 부호 없는 정수의 배열을
 생성합니다. [0,255] 범위를 벗어나는 값을 지정하면 대신 0 또는 255가 대신 설정됩니다.
 정수가 아닌 값을 지정하면 그 값과 가장 가까운 정수가 설정됩니다. 배열의 내용은 0으로 초기화됩니다. 배열이 생성되면 객체의 메서드를
 사용하거나 표준 배열 인덱스 구문(즉, 대괄호 표기법 사용)을 사용하여 배열의 요소를 참조할 수 있습니다.

구문
--

```js
new Uint8ClampedArray()
new Uint8ClampedArray(length)
new Uint8ClampedArray(typedArray)
new Uint8ClampedArray(object)

new Uint8ClampedArray(buffer)
new Uint8ClampedArray(buffer, byteOffset)
new Uint8ClampedArray(buffer, byteOffset, length)
```

**참고:** `Uint8ClampedArray()`는 오직 `new`로만 생성할 수 있습니다. `new` 없이 호출을 시도하면 `TypeError` 예외가 발생합니다.

### 매개변수

`TypedArray`를 참고하세요.

### 예외

`TypedArray`를 참고하세요.

예제
--

### Uint8ClampedArray 를 생성하기 위한 각기 다른 여러 방법

```js
// 길이로부터 생성
const uintc8 = new Uint8ClampedArray(2);
uintc8[0] = 42;
uintc8[1] = 1337;
console.log(uintc8[0]); // 42
console.log(uintc8[1]); // 255 (clamped)
console.log(uintc8.length); // 2
console.log(uintc8.BYTES\_PER\_ELEMENT); // 1

// 배열로부터 생성
const x = new Uint8ClampedArray([21, 31]);
console.log(x[1]); // 31

// 다른 TypedArray로부터 생성
const y = new Uint8ClampedArray(x);
console.log(y[0]); // 21

// ArrayBuffer로부터 생성
const buffer = new ArrayBuffer(8);
const z = new Uint8ClampedArray(buffer, 1, 4);
console.log(z.byteOffset); // 1

// 순회로부터 생성
const iterable = (function\* () {
  yield\* [1, 2, 3];
})();
const uintc8FromIterable = new Uint8ClampedArray(iterable);
console.log(uintc8FromIterable);
// Uint8ClampedArray [1, 2, 3]
```

명세서
---

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

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

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

같이 보기
-----

* `core-js`에서 `Uint8ClampedArray`의 폴리필
* JavaScript 형식화 배열
* `ArrayBuffer`
* `DataView`