Symbol - JavaScript

Symbol
======

**`Symbol`** 은 생성자가 `symbol` 원시 값을 반환하는 내장 객체입니다. `symbol` 원시 값은 **심볼 값**, 혹은 짧게 **심볼**이라고만 부르며 고유함이 보장됩니다. 심볼은 객체에 속성을 추가할 때 고유한 키를 부여하여 다른 코드와 충돌하지 않도록 할 때 많이 쓰이며, 이렇게 추가한 속성은 일반적인 방법으로는 접근할 수 없으므로 약한 형태의 캡슐화, 혹은 정보 은닉을 제공합니다.

모든 `Symbol()` 호출은 각각 고유한 심볼을 반환하는 것이 보장됩니다. 모든 `Symbol.for("key")` 호출은 주어진 값 `"key"`에 대해 같은 심볼을 반환합니다. `Symbol.for("key")`를 호출했을 때, 주어진 키를 가진 심볼이 전역 심볼 레지스트리에 존재하면 그 심볼을 반환합니다. 그런 심볼이 없으면 새로 생성하고, 전역 심볼 레지스트리에 등록한 후, 반환합니다.

설명
--

새로운 원시 심볼을 생성하려면 `Symbol()`을 호출합니다. 선택적으로 설명 문자열을 제공할 수 있습니다.

```js
const sym1 = Symbol();
const sym2 = Symbol("foo");
const sym3 = Symbol("foo");
```

위 코드는 세 개의 새로운 심볼을 생성합니다. `Symbol("foo")`는 문자열 `"foo"`를 심볼로 변환하는 것이 아니라는 점을 주의하세요. 매번 호출마다 새로운 심볼이 생성됩니다.

```js
Symbol("foo") === Symbol("foo"); // false
```

`new` 연산자를 사용하면 `TypeError`가 발생합니다.

```js
const sym = new Symbol(); // TypeError
```

따라서 개발자가 새로운 심볼 값을 만드는 대신 명시적으로 `Symbol` 래퍼 객체를 생성하는 걸 방지하는데, 일반적으로 다른 원시 데이터 타입들의 래퍼 객체(`new Boolean`, `new String`, `new Number`)는 생성할 수 있다는 점을 생각하면 예상하지 못한 동작일 수도 있습니다.

정말로 `Symbol` 래퍼 객체를 생성해야 하면 `Object()` 함수를 사용할 수 있습니다.

```js
const sym = Symbol("foo");
typeof sym; // "symbol"
const symObj = Object(sym);
typeof symObj; // "object"
```

심볼은 유일하게 참조 동일성(같은 심볼을 두 번 만들 수 없음)을 가지는 원시 데이터 타입이므로 객체와 비슷하게 동작하는 면이 있습니다. 예를 들어, 심볼은 가비지 컬렉션 대상이며 따라서 `WeakMap`, `WeakSet`, `WeakRef` (en-US), `FinalizationRegistry` (en-US) 객체에 저장할 수 있습니다.

전역 심볼 레지스트리의 공유 심볼
------------------

위에서 살펴봤던 `Symbol()` 함수 구문은 프로그램이 종료될 때까지 고유한 채 남는 심볼을 생성합니다. 여러 파일에 걸쳐, 혹은 각자 별도의 전역 스코프를 갖는 렐름까지도 걸쳐서 사용 가능한 심볼을 생성하려면 `Symbol.for()` 메서드와 `Symbol.keyFor()` 메서드를 사용하여 전역 심볼 레지스트리에 심볼을 설정하고 가져올 수 있습니다.

참고로, "전역 심볼 레지스트리"는 설명을 위한 상상의 개념이며 JavaScript 엔진 내의 실제 데이터 구조와는 일치하지 않을 수 있습니다. 이런 레지스트리가 엔진에 존재한다고 해도, 그 내용은 `for()`와 `keyFor()` 메서드를 제외한 다른 JavaScript 코드에서 접근할 수 없습니다.

`Symbol.for(tokenString)` 메서드는 문자열 키를 받아 레지스트리에서 심볼 값을 반환합니다. 반대로 `Symbol.keyFor(symbolValue)` 메서드는 심볼 값을 받아 대응하는 문자열 키를 반환합니다. 서로 반대되는 메서드이므로 아래 코드는 `true`입니다.

```js
Symbol.keyFor(Symbol.for("tokenString")) === "tokenString"; // true
```

등록된 심볼은 아무데서나 임의로 생성될 수 있으므로, 대응되는 문자열 키와 거의 동일하게 동작합니다. 따라서 가비지 컬렉션 대상이 아니며, `WeakMap`, `WeakSet`, `WeakRef` (en-US), `FinalizationRegistry` (en-US) 객체에도 사용할 수 없습니다.

### 잘 알려진 심볼

`Symbol` 생성자의 정적 속성은 모두 스스로가 심볼이며, 그 값은 렐름에 걸쳐 동일합니다. 이 심볼들을 '잘 알려진 심볼'이라고 부르며, JavaScript 내장 작업에서 일종의 "프로토콜"로서 동작합니다. 사용자는 이 심볼들로 언어 동작을 바꿀 수 있습니다. 예를 들어, 생성자 함수에 `Symbol.hasInstance`가 이름인 메서드가 있으면, `instanceof` 연산자는 동작 시 이 메서드를 사용합니다.

잘 알려진 심볼 전의 JavaScript는 일부 내장 작업에 일반적인 속성을 사용했습니다. 예컨대 `JSON.stringify` 함수는 객체의 `toJSON()` 메서드를 사용하고, `String` (en-US) 함수는 객체의 `toString()`과 `valueOf()` 메서드를 사용합니다. 하지만, 언어가 포함하는 작업의 수가 점점 늘어감에 따라, 각각의 작업을 "마법 속성"으로 지정하면 하위 호환성을 깨뜨리고 언어의 동작을 추론하기 어렵게 만들 수 있습니다. 잘 알려진 심볼 덕분에, 보통 문자열 속성만 접근하는 일반적인 코드 입장에서 언어 동작 사용자 지정은 "보이지 않게" 됐습니다.

잘 알려진 심볼은 MDN을 포함한 여러 출처에서 이름 앞에 `@@`를 붙여 구분합니다. 예를 들어 `Symbol.hasInstance`는 `@@hasInstance`처럼 씁니다. 심볼에는 리터럴 형태가 존재하지 않기도 하고, 그렇다고 `Symbol.hasInstance`를 쓰면 다른 별칭으로 같은 심볼을 가리킬 수 있다는 점이 드러나지 않기 때문입니다. `Function.name`과 `"Function"`의 차이와 비슷합니다.

잘 알려진 심볼에는 가비지 컬렉션 가능 여부라는 개념부터가 존재하지 않습니다. 이 심볼들은 `Array.prototype` 등의 내재된 객체처럼 고정된 수가 프로그램의 수명 내내 고유하게 유지되기 때문입니다. 따라서 잘 알려진 심볼들을 `WeakMap`, `WeakSet`, `WeakRef` (en-US), and `FinalizationRegistry` (en-US) 객체에 사용할 수 있습니다.

### 객체의 심볼 속성 찾기

`Object.getOwnPropertySymbols()` 메서드는 심볼 배열을 반환하며, 주어진 객체의 심볼 속성을 찾을 때 사용할 수 있습니다. 참고로 모든 객체는 초기화 시 자체 심볼 속성을 갖지 않으므로, 나중에 심볼 속성을 추가하지 않는 이상 이 메서드가 반환하는 배열은 비어있습니다.

생성자
---

`Symbol()`

새로운 `Symbol` 객체를 생성합니다. `new Symbol()`처럼 쓸 수 없고 함수로만 사용해야 하므로 일반적인 생성자와는 다릅니다.

정적 속성
-----

정적 속성들은 잘 알려진 심볼입니다. 각각의 설명에서는 "`Symbol.hasInstance`는 ... 하는 메서드입니다"와 같은 말을 사용하겠지만, 이건 어떤 객체가 해당 심볼을 이름으로 하는 메서드를 소유하고 있을 때를 의미하는 것이지, 심볼 자체의 값을 설명하는 것이 아님을 주의해 주세요.

`Symbol.asyncIterator` (en-US)

객체의 기본 AsyncIterator를 반환하는 메서드입니다. `for await...of`에서 사용합니다.

`Symbol.hasInstance`

생성자 객체가 어떤 객체를 자신의 인스턴스로 인지하는지 판별하는 메서드입니다. `instanceof`에서 사용합니다.

`Symbol.isConcatSpreadable`

객체를 배열 요소로 평탄화할 수 있는지 나타내는 불리언 값입니다. `Array.prototype.concat()`에서 사용합니다.

`Symbol.iterator`

객체의 기본 순회기를 반환하는 메서드입니다. `for...of`에서 사용합니다.

`Symbol.match` (en-US)

문자열에 일치 판별을 수행하는 메서드입니다. 객체를 정규표현식으로써 사용할 수 있는지 판별할 때도 쓰입니다. `String.prototype.match()`에서 사용합니다.

`Symbol.matchAll` (en-US)

문자열에 대한 정규표현식 일치 결과를 순회하는 순회기를 반환하는 메서드입니다. `String.prototype.matchAll()` (en-US)에서 사용합니다.

`Symbol.replace` (en-US)

문자열에서 일치한 하위 문자열을 대치하는 메서드입니다. `String.prototype.replace()` (en-US)에서 사용합니다.

`Symbol.search`

문자열에서 정규표현식과 일치한 인덱스를 반환하는 메서드입니다. `String.prototype.search()` (en-US)를 반환합니다.

`Symbol.species` (en-US)

파생 객체를 생성할 때 쓰이는 생성자 함수입니다.

`Symbol.split`

정규표현식이 일치한 인덱스에서 문자열을 분할하는 메서드입니다. `String.prototype.split()`에서 사용합니다.

`Symbol.toPrimitive`

객체를 원시 값으로 변환하는 메서드입니다.

`Symbol.toStringTag` (en-US)

객체의 기본 설명으로 사용되는 문자열 값입니다. `Object.prototype.toString()`에서 사용합니다.

`Symbol.unscopables` (en-US)

연관된 객체의 `with` (en-US) 환경 바인딩에서 제외할 속성의 이름들을 자체 속성과 상속 속성으로 가지는 객체 값입니다.

정적 메서드
------

`Symbol.for()`

주어진 `key`를 가진 기존 심볼을 찾아 반환합니다. 그런 심볼이 없으면 새로운 심볼을 생성하고, `key`를 사용해 전역 심볼 레지스트리에 등록합니다.

`Symbol.keyFor()`

전역 심볼 레지스트리에서 주어진 심볼의 키를 반환합니다.

인스턴스 속성
-------

이 속성들은 `Symbol.prototype`에 정의되며 모든 `Symbol` 인스턴스가 공유합니다.

`Symbol.prototype.constructor`

인스턴스 객체를 생성했던 생성자 함수입니다. `Symbol` 인스턴스에서의 초기 값은 `Symbol` 생성자입니다.

`Symbol.prototype.description`

심볼 설명을 담은 읽기 전용 문자열입니다.

`Symbol.prototype[@@toStringTag]`

`@@toStringTag` (en-US) 속성의 초기 값은 문자열 `"Symbol"`. 이 속성은 `Object.prototype.toString()`에서 사용합니다. 하지만 `Symbol`은 자체적으로 `toString()` 메서드도 소유하므로, 심볼을 `thisArg`로 지정해서 `Object.prototype.toString.call()`을 호출하지 않는 이상 이 속성은 사용되지 않습니다.

인스턴스 메서드
--------

`Symbol.prototype.toString()`

심볼 설명을 담은 문자열을 반환합니다. `Object.prototype.toString()` 메서드를 재정의합니다.

`Symbol.prototype.valueOf()` (en-US)

심볼을 반환합니다. `Object.prototype.valueOf()` 메서드를 재정의합니다.

`Symbol.prototype[@@toPrimitive]()`

심볼을 반환합니다.

예제
--

### 심볼에 typeof 연산자 사용하기

`typeof` 연산자는 심볼을 식별하는데 도움이 될 수 있습니다.

```js
typeof Symbol() === "symbol";
typeof Symbol("foo") === "symbol";
typeof Symbol.iterator === "symbol";
```

### 심볼 타입 변환

심볼 변환이 필요할 때 주의해야 할 점들입니다.

* 심볼을 숫자로 변환(`+sym`, `sym | 0`, ...)하려고 하면 `TypeError`가 발생합니다.
* 엄격하지 않은 동등 연산 시, `Object(sym) == sym`은 `true`입니다.
* `Symbol("foo") + "bar"`는 `TypeError`입니다(심볼을 문자열로 변환할 수 없음). 덕분에 심볼에서 새로운 문자열 속성을 만드는 경우를 놓치지 않을 수 있습니다.
* "더 안전한" `String(sym)` 변환은 `Symbol.prototype.toString()` 호출과 같습니다. 하지만 `new String(sym)`은 오류를 던지므로 주의하세요.
### 심볼과 for...in 순회

심볼은 `for...in` 순회에 열거되지 않습니다. 이에 더해 `Object.getOwnPropertyNames()`도 심볼 객체 속성을 반환하지 않습니다. 하지만 `Object.getOwnPropertySymbols()`를 사용하면 심볼 속성들을 찾을 수 있습니다.

```js
const obj = {};

obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";

for (const i in obj) {
  console.log(i);
}
// "c" "d"
```

### 심볼과 JSON.stringify()

`JSON.stringify()`는 심볼 키 속성을 완전히 무시합니다.

```js
JSON.stringify({ [Symbol("foo")]: "foo" });
// '{}'
```

더 자세한 내용은 `JSON.stringify()`를 참고하세요.

### 속성 키로서의 심볼 래퍼 객체

심볼 래퍼 객체를 속성 키로 사용하면, 래퍼 객체는 내부 심볼로 변환됩니다.

```js
const sym = Symbol("foo");
const obj = { [sym]: 1 };
obj[sym]; // 1
obj[Object(sym)]; // still 1
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-symbol-objects |

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

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

같이 보기
-----

* `core-js`의 `Symbol` 폴리필
* `typeof`
* 데이터 타입과 자료구조
* hacks.mozilla.org의 "ES6 In Depth: Symbols"


RegExp - JavaScript

RegExp
======

**`RegExp`** 생성자는 패턴을 사용해 텍스트를 판별할 때 사용합니다.

정규 표현식에 대한 소개는 JavaScript 안내서의 정규 표현식 장을 참고하세요.

설명
--

### 리터럴 표기법과 생성자

`RegExp` 객체는 리터럴 표기법과 생성자로써 생성할 수 있습니다.

* **리터럴 표기법**의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않습니다.
* **생성자 함수**의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용합니다.

다음의 세 표현식은 모두 같은 정규 표현식을 생성합니다.

```js
/ab+c/i;
new RegExp(/ab+c/, "i"); // 리터럴
new RegExp("ab+c", "i"); // 생성자
```

리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일합니다. 정규 표현식이 변하지 않으면 리터럴 표기법을 사용하세요. 예를 들어, 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하면 정규 표현식을 매번 다시 컴파일하지 않습니다.

정규 표현식 객체의 생성자(`new RegExp('ab+c')`)를 사용하면 정규 표현식이 런타임에 컴파일됩니다. 패턴이 변할 가능성이 있거나, 사용자 입력과 같이 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자 함수를 사용하세요.

### 생성자의 플래그

ECMAScript 6부터는 `new RegExp(/ab+c/, 'i')`처럼, 첫 매개변수가 `RegExp`이면서 `flags`를 지정해도 `TypeError` (`"can't supply flags when constructing one RegExp from another"`)가 발생하지 않고, 매개변수로부터 새로운 정규 표현식을 생성합니다.

생성자 함수를 사용할 경우 보통의 문자열 이스케이프 규칙(특수 문자를 문자열에 사용할 때 앞에 역빗금(`\`)을 붙이는 것)을 준수해야 합니다.

예를 들어 다음 두 줄은 동일한 정규 표현식을 생성합니다.

```js
let re = /\w+/;
let re = new RegExp("\\w+");
```

### Perl 형태의 `RegExp` 속성

일부 `RegExp` 속성은 같은 값에 대해 긴 이름과 짧은 (Perl 형태의) 이름 모두 가지고 있습니다. (Perl은 JavaScript가 정규 표현식을 만들 때 참고한 프로그래밍 언어입니다.) 사용하지 않는 `RegExp` 속성 (en-US)을 참고하세요.

생성자
---

`RegExp()`

새로운 `RegExp` 객체를 생성합니다.

정적 속성
-----

`get RegExp[@@species]` (en-US)

파생 객체를 생성할 때 사용하는 생성자입니다.

`RegExp.lastIndex` (en-US)

다음 판별을 시작할 인덱스입니다.

인스턴스 속성
-------

`RegExp.prototype.flags`

`RegExp` 객체의 플래그를 담은 문자열입니다.

`RegExp.prototype.dotAll`

`.`이 줄 바꿈에 일치하는지 여부를 나타냅니다.

`RegExp.prototype.global`

정규 표현식이 문자열 내에서 가능한 모든 경우에 일치하는지, 아니면 최초에 대해서만 일치하는지 나타냅니다.

`RegExp.prototype.ignoreCase`

문자열의 대소문자를 구분하는지 나타냅니다.

`RegExp.prototype.multiline`

여러 줄에 걸쳐 탐색할 것인지 나타냅니다.

`RegExp.prototype.source` (en-US)

패턴을 나타내는 문자열입니다.

`RegExp.prototype.sticky` (en-US)

검색이 접착(sticky)되어있는지 나타냅니다.

`RegExp.prototype.unicode` (en-US)

Unicode 기능의 활성화 여부입니다.

인스턴스 메서드
--------

`RegExp.prototype.compile()` (en-US)

스크립트 실행 중 정규 표현식을 (다시) 컴파일합니다.

`RegExp.prototype.exec()` (en-US)

문자열 매개변수에 대해 검색을 실행합니다.

`RegExp.prototype.test()`

문자열 매개변수에 대해 판별을 실행합니다.

`RegExp.prototype.toString()` (en-US)

객체의 문자열 표현을 반환합니다. `Object.prototype.toString()` 메서드를 재정의합니다.

`RegExp.prototype[@@match]()` (en-US)

주어진 문자열에 대해 일치하는 결과를 반환합니다.

`RegExp.prototype[@@matchAll]()` (en-US)

주어진 문자열에 대해 일치하는 모든 결과를 반환합니다.

`RegExp.prototype[@@replace]()` (en-US)

주어진 문자열 내의 일치를 새로운 문자열로 대치합니다.

`RegExp.prototype[@@search]()` (en-US)

주어진 문자열에 대해 일치하는 인덱스를 반환합니다.

`RegExp.prototype[@@split]()` (en-US)

주어진 문자열을 분할해 배열로 반환합니다.

예제
--

### 정규 표현식을 사용해서 데이터 형식 바꾸기

다음 스크립트에서는 `String` 객체의 `replace()` (en-US) 메서드를 사용하여 *이름 성씨* 형태의 이름을 *성씨, 이름* 형태 바꿔 반환합니다.

대치 문자열에는 `$1`과 `$2`를 사용하여 정규 표현식 패턴의 각 괄호에 일치한 결과를 받아옵니다.

```js
let re = /(\w+)\s(\w+)/;
let str = "John Smith";
let newstr = str.replace(re, "$2, $1");
console.log(newstr);
```

실행 결과는 `"Smith, John"`입니다.

### 정규 표현식을 사용해서 여러 가지 줄 바꿈 문자가 있는 문자열 나누기

기본 줄 바꿈 문자는 플랫폼(Unix, Windows 등)마다 다릅니다. 아래의 분할 스크립트는 모든 플랫폼의 줄 바꿈을 인식합니다.

```js
let text = "Some text\nAnd some more\r\nAnd yet\rThis is the end";
let lines = text.split(/\r\n|\r|\n/);
console.log(lines); // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ]
```

정규 표현식 패턴의 순서를 바꾸면 작동하지 않을 수 있습니다.

### 여러 줄에서 정규 표현식 사용하기

```js
let s = "Please yes\nmake my day!";

s.match(/yes.\*day/);
// Returns null

s.match(/yes[^]\*day/);
// Returns ["yes\nmake my day"]
```

### 접착 플래그와 함께 사용하기

`sticky` (en-US) 플래그는 해당 정규 표현식이 접착 판별, 즉 `RegExp.prototype.lastIndex` (en-US)에서 시작하는 일치만 확인하도록 할 수 있습니다.

```js
let str = "#foo#";
let regex = /foo/y;

regex.lastIndex = 1;
regex.test(str); // true
regex.lastIndex = 5;
regex.test(str); // false (lastIndex is taken into account with sticky flag)
regex.lastIndex; // 0 (reset after match failure)
```

### 접착과 전역 플래그의 차이

접착 플래그 `y`의 일치는 정확히 `lastIndex` 위치에서만 발생할 수 있으나, 전역 플래그 `g`의 경우 `lastIndex` 또는 그 이후에서도 발생할 수 있습니다.

```js
re = /\d/y;
while ((r = re.exec("123 456")))
  console.log(r, "AND re.lastIndex", re.lastIndex);

// [ '1', index: 0, input: '123 456', groups: undefined ] AND re.lastIndex 1
// [ '2', index: 1, input: '123 456', groups: undefined ] AND re.lastIndex 2
// [ '3', index: 2, input: '123 456', groups: undefined ] AND re.lastIndex 3
// ... and no more match.
```

전역 플래그 `g`를 사용했다면, 3개가 아니고 6개 숫자 모두 일치했을 것입니다.

### 정규 표현식과 Unicode 문자

`\w`와 `\W`는 `a`부터 `z`, `A`부터 `Z`, `0`부터 `9` `_` 등의 ASCII 문자에만 일치합니다.

러시아어나 히브리어와 같은 다른 언어의 문자까지 일치하려면 `\uhhhh`(이때 hhhh는 해당 문자의 16진법 Unicode 값) 문법을 사용하세요. 아래 예제에서는 문자열에서 Unicode 문자를 추출합니다.

```js
let text = "Образец text на русском языке";
let regex = /[\u0400-\u04FF]+/g;

let match = regex.exec(text);
console.log(match[0]); // logs 'Образец'
console.log(regex.lastIndex); // logs '7'

let match2 = regex.exec(text);
console.log(match2[0]); // logs 'на' [did not log 'text']
console.log(regex.lastIndex); // logs '15'

// and so on
```

유니코드 속성 이스케이프 (en-US) 기능을 사용해 `\p{scx=Cyrl}`과 같은 간단한 구문으로 이 문제를 해결할 수 있습니다.

### URL에서 서브도메인 추출하기

```js
let url = "http://xxx.domain.com";
console.log(/[^.]+/.exec(url)[0].substr(7)); // logs 'xxx'
```

**참고:** 이 때는 정규표현식보단 URL API (en-US)를 통해 브라우저에 내장된 URL 구문 분석기를 사용하는 것이 좋습니다.

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-regexp-regular-expression-objects |

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

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

같이 보기
-----

* JavaScript 안내서의 정규 표현식 장
* `String.prototype.match()`
* `String.prototype.replace()` (en-US)


isNaN() - JavaScript

isNaN()
=======

**`isNaN()`** 함수는 어떤 값이 `NaN`인지 판별합니다. `isNaN` 함수는 몇몇 혼란스러운 케이스을 가지고 있으므로, ECMAScript 2015에서 추가한 `Number.isNaN()`으로 바꾸는 편이 좋을 수도 있습니다.

시도해보기
-----

구문
--

```js
isNaN(value);
```

### 매개변수

`value`

테스트되는 값.

### 반환 값

주어진 값이 `NaN`이면 `true`, 아니면 `false`.

설명
--

### `isNaN` 함수의 필요성

JavaScript의 다른 모든 값과 달리, `NaN`은 같음 연산(`==`, `===`)을 사용해 판별할 수 없습니다. `NaN == NaN`, `NaN === NaN`은 `false`로 평가되기 때문입니다. 그래서 `NaN`을 판별하는 함수가 필요합니다.

### `NaN` 값의 기원

`NaN` 값은 산술 연산이 **정의되지 않은** 결과 또는 **표현할 수 없는** 결과를 도출하면 생성되며, 반드시 오버플로 조건을 나타내는 것은 아닙니다. 숫자가 아닌 값의 변환을 시도했으나 알맞은 원시 숫자 값이 없는 경우의 결과도 `NaN`입니다.

예를 들어 0을 0으로 나누면 `NaN`이지만, 다른 수를 0으로 나누면 그렇지 않습니다.

### 혼란스러운 특별 케이스 행동

`isNaN` 함수 스펙의 아주 초기 버전 이후로, 숫자 아닌 인수를 위한 행동이 혼란스럽습니다. `isNaN` 함수의 인수가 Number 형이 아닌 경우, 그 값은 먼저 숫자로 강제됩니다. 결과값은 그 뒤에 `NaN`인지 결정하기 위해 테스트됩니다. 따라서 숫자 형으로 강제된 결과 유효한 비 NaN 숫자값(특히 강제될 때 숫자값이 0 또는 1을 주는 빈 문자열 및 불린 원시형)이 되는 비 숫자의 경우, "false" 반환값은 예기치 않을 수 있습니다; 예를 들어 빈 문자열은 분명히 "not a number"입니다. 혼란(confusion)은 용어 "not a number"가 IEEE-754 부동 소수점 값으로 표현된 숫자에 특정 의미가 있다는 사실에서 생깁니다. 함수는 "이 값이, 숫자값으로 강제되는 경우, IEEE-754 'Not A Number' 값인가?"라는 질문에 답하는 것으로 해석되어야 합니다.

ECMAScript (ES2015) 최근 버전은 `Number.isNaN()` 함수를 포함합니다. `Number.isNaN(x)`는 `x`가 `NaN`인지 아닌지 테스트하는 믿을 수 있는 방법이 됩니다. 그러나 `Number.isNaN`으로도, `NaN`의 의미는 정확한 숫자 의미로 남아있고 단순히 "not a number"는 아닙니다. 그 대신에, `Number.isNaN`이 없을 경우에, 식 `(x != x)`은 변수 `x`가 `NaN`인지 아닌지 테스트하는 더 믿을 수 있는 방법입니다, 그 결과는 `isNaN`을 믿을 수 없게 하는 오탐(false positive)의 대상이 아니기에.

당신은 isNaN을 다음과 같이 생각할 수 있습니다:

```js
isNaN = function (value) {
  Number.isNaN(Number(value));
};
```

예제
--

```js
isNaN(NaN); // 참
isNaN(undefined); // 참
isNaN({}); // 참

isNaN(true); // 거짓
isNaN(null); // 거짓
isNaN(37); // 거짓

// 문자열
isNaN("37"); // 거짓: "37"은 NaN이 아닌 숫자 37로 변환됩니다
isNaN("37.37"); // 거짓: "37.37"은 NaN이 아닌 숫자 37.37로 변환됩니다
isNaN("123ABC"); // 참: parseInt("123ABC")는 123이지만 Number("123ABC")는 NaN입니다
isNaN(""); // 거짓: 빈 문자열은 NaN이 아닌 0으로 변환됩니다
isNaN(" "); // 거짓: 공백이 있는 문자열은 NaN이 아닌 0으로 변환됩니다

// dates
isNaN(new Date()); // 거짓
isNaN(new Date().toString()); // 참

// 이것이 허위 양성이고 isNaN이 완전히 신뢰할 수 없는 이유이다.
isNaN("blabla"); // 참: "blabla"는 숫자로 변환됩니다.
// 이것을 숫자로 parsing 하는 것을 실패하고 NaN을 반환한다.
```

### 유용한 특별 케이스 행동

`isNaN()`을 고려한 더 용도 중심 방법이 있습니다: `isNaN(x)`가 `false`를 반환하면, 그 식이 `NaN`을 반환하게 하지 않고 산술 식에 `x`를 쓸 수 있습니다. `true`를 반환하는 경우, `x`는 모든 산술 식이 `NaN`을 반환하게 합니다. 이는 JavaScript에서, `isNaN(x) == true`가 `NaN`을 반환하는 `x - 0`과 동일함(JavaScript에서 `x - 0 == NaN`가 항상 거짓을 반환하여 그것을 테스트할 수 없지만)을 뜻합니다. 실제로, `isNaN(x)`, `isNaN(x - 0)`, `isNaN(Number(x))`, `Number.isNaN(x - 0)` 및 `Number.isNaN(Number(x))`는 항상 같은 값을 반환하며 JavaScript에서 `isNaN(x)`는 그저 이러한 각각의 조건(terms)을 표현하는 가장 짧은 형태입니다.

예를 들어 함수에 인수가 산술 처리 가능한(숫자 "처럼" 쓸 수 있는)지를 테스트하기 위해 사용할 수 있습니다, 그렇지 않은 경우 기본 값 또는 다른 무언가를 제공해야 합니다. 이런 식으로 문맥에 따라 암시적인 값 변환을 제공하는 JavaScript의 다양성(versatility) 전체를 이용케 하는 함수를 가질 수 있습니다.

예시
--

```js
function increment(x) {
  if (isNaN(x)) x = 0;
  return x + 1;
}

// Number.isNaN()과 같은 효과:
function increment(x) {
  if (Number.isNaN(Number(x))) x = 0;
  return x + 1;
}

// 함수의 인수 x에 대해 다음 경우에,
// isNaN(x)는 항상 거짓, x가 실제 숫자가 아닐지라도
// 하지만 산술 식에 그대로
// 사용될 수 있습니다
increment(""); // 1: ""는 0으로 변환됩니다
increment(new String()); // 1: 빈 문자열을 나타내는 String 객체는 0으로 변환됩니다
increment([]); // 1: []는 0으로 변환됩니다
increment(new Array()); // 1: 빈 배열을 나타내는 Array 객체는 0으로 변환됩니다
increment("0"); // 1: "0"은 0으로 변환됩니다
increment("1"); // 2: "1"은 1로 변환됩니다
increment("0.1"); // 1.1: "0.1"은 0.1로 변환됩니다
increment("Infinity"); // Infinity: "Infinity"는 Infinity로 변환됩니다
increment(null); // 1: null은 0으로 변환됩니다
increment(false); // 1: false는 0으로 변환됩니다
increment(true); // 2: true는 1로 변환됩니다
increment(new Date()); // 밀리초로 현재 date/time + 1을 반환합니다

// 함수의 인수 x에 대해 다음 경우에,
// isNaN(x)는 항상 거짓이고 x는 실제로 숫자입니다
increment(-1); // 0
increment(-0.1); // 0.9
increment(0); // 1
increment(1); // 2
increment(2); // 3
// ... 등등 ...
increment(Infinity); // Infinity

// 함수의 인수 x에 대해 다음 경우에,
// isNaN(x)는 항상 참이고 x는 실제로 숫자가 아닙니다,
// 따라서 함수는 인수를 0으로 대체하고 1을 반환합니다
increment(String); // 1
increment(Array); // 1
increment("blabla"); // 1
increment("-blabla"); // 1
increment(0 / 0); // 1
increment("0/0"); // 1
increment(Infinity / Infinity); // 1
increment(NaN); // 1
increment(undefined); // 1
increment(); // 1

// isNaN(x)는 항상 isNaN(Number(x))과 같지만,
// x의 존재는 여기서 필수입니다!
isNaN(x) == isNaN(Number(x)); // x == undefined 포함 x의 어떤 값도 참,
// isNaN(undefined) == true 및 Number(undefined)가 NaN을 반환하기에,
// 하지만 ...
isNaN() == isNaN(Number()); // 거짓, isNaN() == true 및 Number() == 0 때문에
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-isnan-number |

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

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

같이 보기
-----

* `NaN`
* `Number.isNaN()`


Error - JavaScript

Error
=====

`Error` 객체는 런타임 오류가 발생했을 때 던져집니다.
 `Error` 객체를 사용자 지정 예외의 기반 객체로 사용할 수도 있습니다.
 아래 표준 내장 오류 유형을 참고하세요.

설명
--

런타임 오류는 새로운 `Error` 객체를 생성하고 던집니다.

### 오류 유형

 JavaScript에는 일반적인 `Error` 생성자 외에도 여러 개의 중요 오류
 생성자가 존재합니다. 클라이언트측 예외에 대해서는
 제어 흐름과 에러 처리를 참고하세요.

`EvalError`

 전역 함수 `eval()` (en-US)에서 발생하는 오류의 인스턴스를
 생성합니다.

`RangeError`

 숫자 변수나 매개변수가 유효한 범위를 벗어났음을 나타내는 오류 인스턴스를
 생성합니다.

`ReferenceError`

잘못된 참조를 했음을 나타내는 오류 인스턴스를 생성합니다.

`SyntaxError`

`eval()` (en-US)이 코드를 분석하는 중 잘못된 구문을 만났음을
 나타내는 오류 인스턴스를 생성합니다.

`TypeError`

 변수나 매개변수가 유효한 자료형이 아님을 나타내는 오류 인스턴스를
 생성합니다.

`URIError`

`encodeURI()`나 `decodeURl()` 함수에 부적절한 매개변수를 제공했을 때 발생하는 오류의
 인스턴스를 생성합니다.

`AggregateError`

 하나의 동작이 여러 개의 오류 발생시키는 경우(예:
 `Promise.any()` (en-US)) 여러 오류를 하나의 오류로 감싸는 인스턴스를
 만듭니다.

`InternalError`
비표준

 JavaScript 엔진의 내부에서 오류가 발생했음을 나타내는 오류 인스턴스를
 생성합니다.

생성자
---

`Error()`

새로운 `Error` 객체를 만듭니다.

정적 메서드
------

`Error.captureStackTrace()`

 오류 인스턴스의 `stack` (en-US) 속성을 만드는
 비표준 **V8** 함수

인스턴스 속성
-------

`Error.prototype.message`

오류 메시지

`Error.prototype.name`

오류 이름

`Error.prototype.description`

 오류를 설명하기 위한 비표준 마이크로소프트 속성.
 `message`와 비슷합니다.

`Error.prototype.number`

오류 번호를 위한 비표준 마이크로소프트 속성

`Error.prototype.fileName`

해당 오류를 발생시킨 파일의 경로를 표시하기 위한 비표준 Mozilla 속성

`Error.prototype.lineNumber`

해당 오류를 발생시킨 파일의 줄 번호를 표시하기 위한 비표준 Mozilla 속성

`Error.prototype.columnNumber`

해당 오류를 발생시킨 파일의 칸 번호를 표시하기 위한 비표준 Mozilla 속성

`Error.prototype.stack` (en-US)

스택 추적을 위한 비표준 Mozilla 속성

인스턴스 메서드
--------

`Error.prototype.toString()`

 명시된 객체를 표현하기 위한 문자열을 반환합니다.
 `Object.prototype.toString()` 메서드를 오버라이드합니다..

예제
--

### 일반적인 오류 던지기

`Error` 객체를 생성한 후엔 대개 `throw` 키워드를 이용해 던집니다. `try...catch` (en-US) 구문을 이용하여 오류를 처리할 수 있습니다.

```js
try {
  throw new Error("이런!");
} catch (e) {
  alert(e.name + ": " + e.message);
}
```

### 특정 오류 처리하기

 오류의 `constructor` 속성을 이용해
 유형을 판별, 특정 오류만 처리할 수 있습니다. 만약 최신 Javascript 엔진에서
 동작하는 코드를 작성한다면 `instanceof` 키워드를 이용할 수도 있습니다.

```js
try {
  foo.bar();
} catch (e) {
  if (e instanceof EvalError) {
    alert(e.name + ": " + e.message);
  } else if (e instanceof RangeError) {
    alert(e.name + ": " + e.message);
  }
  // ... etc
}
```

### 사용자 정의 에러 타입

`throw new MyError()` 이후 `instanceof MyError`로 직접
 만든 오류를 판별할 수 있도록 `Error`의 파생 오류 정의를
 고려해보세요. 더 깔끔하고 일관적인 오류 처리 코드를 작성할 수
 있습니다. StackOverflow의 "What's a good way to extend Error in JavaScript?"를 방문해 심도 있는 논의를 읽어보세요.

#### ES6 사용자 정의 오류 클래스

**경고:** Babel 버전 7 미만으로 사용자 정의 오류 클래스를 처리하려면 `Object.defineProperty()` 메서드를 사용해 정의해야만 합니다. 그렇지 않으면 오래된 Babel 및 다른 트랜스파일러가 추가 설정 없이 코드를 처리할 수 없습니다.

**참고:** ES2015 클래스를 사용할 때, 일부 브라우저는 `CustomError` 생성자를 스택 트레이스에 포함합니다.

```js
class CustomError extends Error {
  constructor(foo = "bar", ...params) {
    // Pass remaining arguments (including vendor specific ones) to parent constructor
    super(...params);

    // Maintains proper stack trace for where our error was thrown (only available on V8)
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, CustomError);
    }

    // Custom debugging information
    this.foo = foo;
    this.date = new Date();
  }
}

try {
  throw new CustomError("baz", "bazMessage");
} catch (e) {
  console.log(e.foo); //baz
  console.log(e.message); //bazMessage
  console.log(e.stack); //stacktrace
}
```

#### ES5 사용자 정의 오류 객체

 프로토타입 선언을 사용하면 모든 브라우저가 `CustomError` 생성자를
 스택 트레이스에 포함합니다.

```js
function CustomError(foo, message, fileName, lineNumber) {
  var instance = new Error(message, fileName, lineNumber);
  instance.foo = foo;
  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
  if (Error.captureStackTrace) {
    Error.captureStackTrace(instance, CustomError);
  }
  return instance;
}

CustomError.prototype = Object.create(Error.prototype, {
  constructor: {
    value: Error,
    enumerable: false,
    writable: true,
    configurable: true,
  },
});

if (Object.setPrototypeOf) {
  Object.setPrototypeOf(CustomError, Error);
} else {
  CustomError.__proto__ = Error;
}

try {
  throw new CustomError("baz", "bazMessage");
} catch (e) {
  console.log(e.foo); //baz
  console.log(e.message); //bazMessage
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-error-objects |

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

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

같이 보기
-----

* `Error.prototype` (en-US)
* `throw`
* `try...catch` (en-US)


AsyncFunction - JavaScript

AsyncFunction
=============

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

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

* Learn more
* See full compatibility
* Report feedback
**`AsyncFunction`** 생성자는 새로운 `async function` 객체를 만든다. JavaScript에서 모든 비동기 함수는 사실상 AsyncFunction 객체이다.

`AsyncFunction`이 전역변수가 아님에 주의한다. 다음코드를 보면 알 수 있다.

```js
Object.getPrototypeOf(async function () {}).constructor;
```

문법
--

```js
    new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody)
```

### 파라미터

`arg1, arg2, ... argN`

인수의 이름들은 함수내에서 사용되는 이름이다. 이름은 JavaScript 식별자 로 유용한 문자열이거나 컴마로 구분된 문자열 목록이어야 한다. 예를들면 "x","theValue",or"a,b"와 같다.

`functionBody`

함수 정의를 구성하는 JavaScript트 명령문들로 구성된 문자열.

상세설명
----

AsyncFunction 생성자를 통해 만들어진 `async function` 객체는 함수가 만들어질때 분석된다. 이방법에서는 코드가 실행되지 않을 때도 작동하기 때문에 `async function expression` 으로 비동기함수를 정의하고 해당 코드에서 호출할 때보다 비효율적이다.

함수에 전달된 모든 인수들은 전달된 순서대로 함수내에서 인수이름으로 식별자가 생성된 것처럼 다루어진다.

**참고:** **주의:** `AsyncFunction` 생성자로 만들어진 `async functions` 객체는 클로저를 생성 컨텍스트에 만들지 않는다; 이 객체들은 항상 전역 범위에서 생성됩니다.이 객체들을 실행할 때, `AsyncFunction`생성자가 호출된 범위의 변수가 아니라 자신의 지역 변수와 전역 변수에만 액세스 할 수 있습니다.이것은 비동기 함수 표현식을위한 코드와 함께 `eval`을 사용하는 것과 다릅니다.

`AsyncFunction` 생성자를 (`new` 연산자를 사용하지 않고) 함수로 호출하는 것과 생성자로 동작시키는 것은 동일하다.

속성
--

**`AsyncFunction.length`**

`AsyncFunction` 생성자의 `length` 속성(이 값은 1임).

**`AsyncFunction.prototype`**

모든 비동기 함수 객체에 속성을 추가할 수 있도록 함.

**`AsyncFunction.constructor`**

초기값은 `AsyncFunction`임.

**`AsyncFunction.prototype[@@toStringTag]`**

"AsyncFunction"을 반환.

`AsyncFunction 인스턴스`
--------------------

`AsyncFunction` 인스턴스는 `AsyncFunction.prototype` 에서 메소드와 속성을 상속받는다.

여느 생성자에서와 같이 모든 `AsyncFunction` 인스턴스들을 수정할 수 있도록 생성자의 `prototype` 객체를 수정할 수 있다.

예제
--

### `AsyncFunction` 생성자를 통한 비동기 함수 만들기

```js
function resolveAfter2Seconds(x) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

let AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;

let a = new AsyncFunction(
  "a",
  "b",
  "return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);",
);

a(10, 20).then((v) => {
  console.log(v); // 4초 후에 30을 출력
});
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-async-function-objects |

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

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

참고 문서
-----

* `async function function`
* `async function expression`
* `Function`
* `function statement`
* `function expression`
* Functions and function scope (en-US)


RangeError - JavaScript

RangeError
==========

**`RangeError`** 객체는 어떤 값이 집합에 없거나 허용되는 범위가 아닐 때 오류를 나타냅니다.

설명
--

어떤 값을 그 값이 포함되는 범위를 허용하지 않는 함수에 인수로 전달하려 할 때 `RangeError`가 발생합니다.

이 문제는 다음과 같은 경우에 발생할 수 있습니다.

* 허용되는 문자열이 아닌 값을 `String.prototype.normalize()`에 전달하거나,
* `Array` 생성자를 통해 잘못된 길이의 배열을 만드려고 시도하거나,
* 숫자 메서드 `Number.prototype.toExponential()`,
 `Number.prototype.toFixed()` 혹은 `Number.prototype.toPrecision()`에
 나쁜 값을 전달하는 경우.

`RangeError`는 직렬화 가능한 객체이기 때문에,
 `structuredClone()`로 복제하거나
 `postMessage()` (en-US)를 사용하여
 Workers 간에 복사할 수 있습니다.

생성자
---

`RangeError()`

새로운 `RangeError` 객체를 만듭니다.

인스턴스 속성
-------

`RangeError.prototype.message`

오류 메시지. `Error.prototype.message`를 상속되었습니다.

`RangeError.prototype.name`

오류 이름. `Error`로부터 상속되었습니다.

`RangeError.prototype.cause`

에러 원인. `Error`로부터 상속되었습니다..

`RangeError.prototype.fileName`

오류가 발생한 파일 경로. `Error`로부터 상속되었습니다.

`RangeError.prototype.lineNumber`

오류가 발생한 곳의 줄 위치. `Error`로부터 상속되었습니다.

`RangeError.prototype.columnNumber`

오류가 발생한 곳의 열 위치. `Error`로부터 상속되었습니다.

`RangeError.prototype.stack` (en-US)

스택 추적. `Error`로부터 상속되었습니다.

예제
--

### RangeError 사용하기(숫자 값일 경우)

```js
function check(n) {
  if (!(n >= -500 && n <= 500)) {
    throw new RangeError("The argument must be between -500 and 500.");
  }
}
try {
  check(2000);
} catch (error) {
  if (error instanceof RangeError) {
    // Handle the error
  }
}
```

### RangeError 사용하기 (숫자값이 아닐 경우)

```js
function check(value) {
  if (!["apple", "banana", "carrot"].includes(value)) {
    throw new RangeError(
      'The argument must be an "apple", "banana", or "carrot".',
    );
  }
}
try {
  check("cabbage");
} catch (error) {
  if (error instanceof RangeError) {
    // Handle the error
  }
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-rangeerror |

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

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

같이 보기
-----

* `Error`
* `Array`
* `Number.prototype.toExponential()`
* `Number.prototype.toFixed()`
* `Number.prototype.toPrecision()`
* `String.prototype.normalize()`


Generator - JavaScript

Generator
=========

**`Generator`** 객체는 generator function 으로부터 반환되며, 반복 가능한 프로토콜과 반복자 프로토콜을 모두 준수합니다.

Constructor
-----------

이 객체는 바로 인스턴스화할 될 수 없습니다. 대신 제너레이터 함수를 통해 `Generator` 인스턴스를 반환할 수 있습니다.

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

const gen = generator(); // "Generator { }"

console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
```

인스턴스 메서드
--------

`Generator.prototype.next()`

`yield` 표현식을 통해 yield된 값을 반환합니다.

`Generator.prototype.return()`

주어진 값을 반환하고 제너레이터를 종료합니다.

`Generator.prototype.throw()`

제너레이터에 오류를 발생시킵니다. (해당 제너레이터 내에서 오류가 발생한 경우가 아닌 한 제너레이터도 완료)

예제
--

### 무한 제너레이터

제너레이터 함수를 사용하면 값은 필요할 때까지 계산되지 않습니다. 따라서 제너레이터는 잠재적으로 무한한 데이터 구조를 정의할 수 있습니다.

```js
function\* infinite() {
  let index = 0;

  while (true) {
    yield index++;
  }
}

const generator = infinite(); // "Generator { }"

console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
// ...
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-generator-objects |

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

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

같이 보기
-----

* `function*`
* `function*` expression
* `GeneratorFunction`
* 반복자 프로토콜


BigUint64Array - JavaScript

BigUint64Array
==============

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

생성자
---

`BigUint64Array()`

새로운 `BigUint64Array` 객체를 생성합니다.

정적 속성
-----

부모 `TypedArray`에서 정적 속성을 상속합니다.

`BigUint64Array.BYTES_PER_ELEMENT`

요소 크기를 숫자 값으로 반환합니다. `BigUint64Array`의 경우 `8` 입니다.

`BigUint64Array.name`

생성자 이름을 문자열로 반환합니다. `BigUint64Array` 타입의 경우 `"BigUint64Array"`입니다.

정적 메서드
------

부모 `TypedArray`에서 정적 메서드를 상속합니다.

인스턴스 속성
-------

부모 `TypedArray`에서 인스턴스 속성을 상속합니다.

`BigUint64Array.prototype.BYTES_PER_ELEMENT`

요소 크기를 숫자 값으로 반환합니다. `BigUint64Array`의 경우 `8` 입니다.

인스턴스 메서드
--------

부모 `TypedArray`에서 인스턴스 메서드를 상속합니다.

예제
--

### `BigUint64Array`를 생성하기 위한 각기 다른 여러 방법

```js
// 길이로부터 생성
const biguint64 = new BigUint64Array(2);
biguint64[0] = 42n;
console.log(biguint64[0]); // 42n
console.log(biguint64.length); // 2
console.log(biguint64.BYTES\_PER\_ELEMENT); // 8

// 배열로부터 생성
const x = new BigUint64Array([21n, 31n]);
console.log(x[1]); // 31n

// 다른 TypedArray로부터 생성
const y = new BigUint64Array(x);
console.log(y[0]); // 21n

// ArrayBuffer로부터 생성
const buffer = new ArrayBuffer(64);
const z = new BigUint64Array(buffer, 8, 4);
console.log(z.byteOffset); // 8

// 순회로부터 생성
const iterable = (function\* () {
  yield\* [1n, 2n, 3n];
})();
const biguint64FromIterable = new BigUint64Array(iterable);
console.log(biguint64FromIterable);
// BigUint64Array [1n, 2n, 3n]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-typedarray-objects |

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

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

같이 보기
-----

* JavaScript 형식화 배열
* `BigInt64Array`
* `DataView`


decodeURIComponent() - JavaScript

decodeURIComponent()
====================

**`decodeURIComponent()`** 함수는 `encodeURIComponent` 나 비슷한 방법으로 생성된 Uniform Resource Identifier(URI) 컴포넌트를 해독합니다.

시도해보기
-----

구문
--

```js
decodeURIComponent(encodedURI);
```

### 매개변수

`encodedURI`

암호화된 Uniform Resource Identifier(URI) 컴포넌트.

### 반환 값

이스케이프되지 않은 특정 글자들 중 새로운 문자열.

### 예외

잘못 사용되었을 경우 `URIError` ( " malformed URI sequence ") 예외를 발생시킵니다.

설명
--

암호화된 URI 컴포넌트에서 각각의 이스케이프 시퀀스(확장 문자열)를 자신을 나타내는 문자로 바꿉니다.

예제
--

### 키릴문자 URL 컴포넌트의 복호화

```js
decodeURIComponent("JavaScript\_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
// "JavaScript\_шеллы"
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-decodeuricomponent-encodeduricomponent |

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

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

같이 보기
-----

* `decodeURI`
* `encodeURI`
* `encodeURIComponent`


Uint8Array - JavaScript

Uint8Array
==========

**`Uint8Array`** 형식화 배열(TypedArray)은 플랫폼의 바이트 순서를 따르는 8비트 부호 없는 정수의 배열을 나타냅니다.
 배열의 내용은 0으로 초기화됩니다.
 배열이 생성되면 객체의 메서드를 사용하거나 표준 배열 인덱스 구문(즉, 대괄호 표기법 사용)을 사용하여 배열의 요소를 참조할 수 있습니다.

생성자
---

`Uint8Array()`

새로운 `Uint8Array` 객체를 생성합니다.

정적 속성
-----

부모 `TypedArray`에서 정적 속성을 상속합니다.

`Uint8Array.BYTES_PER_ELEMENT`

요소 크기를 숫자 값으로 반환합니다. `Uint8Array`의 경우 `1` 입니다.

`Uint8Array.name`

생성자 이름을 문자열로 반환합니다. `Uint8Array` 타입의 경우 `"Uint8Array"`입니다.

정적 메서드
------

부모 `TypedArray`에서 정적 메서드를 상속합니다.

인스턴스 속성
-------

부모 `TypedArray`에서 인스턴스 속성을 상속합니다.

`Uint8Array.prototype.BYTES_PER_ELEMENT`

요소 크기를 숫자 값으로 반환합니다. `Uint8Array`의 경우 `1` 입니다.

인스턴스 메서드
--------

부모 `TypedArray`에서 인스턴스 메서드를 상속합니다.

예제
--

### Uint8Array을 생성하기 위한 각기 다른 여러 방법

```js
// 길이로부터 생성
const uint8 = new Uint8Array(2);
uint8[0] = 42;
console.log(uint8[0]); // 42
console.log(uint8.length); // 2
console.log(uint8.BYTES\_PER\_ELEMENT); // 1

// 배열로부터
const x = new Uint8Array([21, 31]);
console.log(x[1]); // 31

// 다른 TypedArray로부터
const y = new Uint8Array(x);
console.log(y[0]); // 21

// ArrayBuffer로부터
const buffer = new ArrayBuffer(8);
const z = new Uint8Array(buffer, 1, 4);
console.log(z.byteOffset); // 1

// 순회로부터
const iterable = (function\* () {
  yield\* [1, 2, 3];
})();
const uint8FromIterable = new Uint8Array(iterable);
console.log(uint8FromIterable);
// Uint8Array [1, 2, 3]
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # table-49 |

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

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

같이 보기
-----

* `core-js`에서 `Uint8Array` 폴리필
* JavaScript 형식화 배열
* `ArrayBuffer`
* `DataView`


isFinite() - JavaScript

isFinite()
==========

**`isFinite()`** 전역 함수는 주어진 값이 유한수인지 판별합니다. 필요한 경우 매개변수를 먼저 숫자로 변환합니다.

시도해보기
-----

구문
--

```js
isFinite(testValue);
```

### 매개변수

`testValue`

유한한지 판별할 값.

### 반환 값

`testValue`가 양 또는 음의 `Infinity`, `NaN`, 또는 `undefined`면 `false`, 아니면 `true`.

설명
--

`isFinite()`은 최상위 함수로 어떤 객체와도 연결되지 않았습니다.

숫자가 유한수인지 판별하기 위해 `isFinite()`을 사용할 수 있습니다. `isFinite()`은 주어진 수를 검사해 그 값이 `NaN`, 양의 무한대, 또는 음의 무한대이면 `false`를 반환합니다. 그렇지 않으면 `true`를 반환합니다.

예제
--

### `isFinite()` 사용하기

```js
isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false

isFinite(0); // true
isFinite(2e64); // true
isFinite(910); // true

isFinite(null); // true, would've been false with the
// more robust Number.isFinite(null)

isFinite("0"); // true, would've been false with the
// more robust Number.isFinite("0")
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-isfinite-number |

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

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

같이 보기
-----

* `Number.isFinite()`
* `Number.NaN()`
* `Number.POSITIVE_INFINITY`
* `Number.NEGATIVE_INFINITY`


TypedArray - JavaScript

TypedArray
==========

***TypedArray*** 객체는 이진 데이터 버퍼에 기초하여 배열과 같은 보기를 만들어냅니다.
 하지만 `TypedArray`라는 전역 속성은 존재하지 않으며, 직접 볼 수 있는 `TypedArray` 생성자도 존재하지 않습니다. 대신 아래에 있는 특정 요소 유형에 대한 형식화 배열 생성자를 가지는 다양한 전역 속성을 사용할 수 있습니다. 다음 페이지에서는 모든 유형의 요소를 포함하는 모든 유형의 배열에서 사용할 수 있는 공통 속성과 메서드를 살펴보겠습니다.

시도해보기
-----

설명
--

`TypedArray` 생성자는 모든 `TypedArray` 생성자의 `[[Prototype]]` 역할을 하는 숨겨진 전역입니다.
 이 생성자는 직접 노출되지 않아 전역 `%TypedArray%` 또는 `TypedArray` 속성이 없습니다. 그래서 `Object.getPrototypeOf(Int8Array)` 등을 통해서만 직접 액세스할 수 있습니다. 모든 `TypedArrays` 생성자는 `%TypedArray%` 생성자 함수에서 공통 속성을 상속받고, 모든 형식화 배열의 프로토타입(`TypedArray.prototype`)은 `%TypedArray%.prototype`을 `[[Prototype]]`으로 가지고 있습니다.

`TypedArray`(예: `Int8Array`)의 인스턴스를 생성하거나 배열 버퍼가 내부적으로 메모리에 생성되거나 `ArrayBuffer` 객체가 생성자 인수로 주어지면 이들이 대신 사용됩니다. 버퍼 주소는 인스턴스의 내부 속성으로 저장되며 `%TypedArray%.prototype`의 모든 메서드(예: 값 설정 및 값 가져오기 등)는 해당 배열 버퍼 주소에서 작동합니다.

TypedArray 객체
-------------

| 형식 | 값 범위 | 바이트 크기 | 설명 | Web IDL 형식 | 동일한 C 형식 |
| --- | --- | --- | --- | --- | --- |
| `Int8Array` | -128 to 127 | 1 | 부호 있는 8비트 2의 보수 정수 | `byte` | `int8_t` |
| `Uint8Array` | 0 to 255 | 1 | 부호 없는 8비트 정수 | `octet` | `uint8_t` |
| `Uint8ClampedArray` | 0 to 255 | 1 | 부호 없는 8비트 정수 (고정) | `octet` | `uint8_t` |
| `Int16Array` | -32768 to 32767 | 2 | 부호 있는 16비트 2의 보수 정수 | `short` | `int16_t` |
| `Uint16Array` | 0 to 65535 | 2 | 부호 없는 16비트 정수 | `unsigned short` | `uint16_t` |
| `Int32Array` | -2147483648 to 2147483647 | 4 | 부호 있는 32비트 2의 보수 정수 | `long` | `int32_t` |
| `Uint32Array` | 0 to 4294967295 | 4 | 부호 없는 32비트 정수 | `unsigned long` | `uint32_t` |
| `Float32Array` | `-3.4E38`에서 `3.4E38`. `1.2E-38`은 최초 양수 | 4 | 32비트 IEEE 부동 소수점 숫자 (유효한 7자리 숫자, 예: `1.234567`) | `unrestricted float` | `float` |
| `Float64Array` | `-1.8E308`에서 `1.8E308`. `5E-324`는 최소 양수 | 8 | 64비트 IEEE 부동 소수점 숫자 (유효한 16자리 숫자, 예: `1.23456789012345`) | `unrestricted double` | `double` |
| `BigInt64Array` | -263에서 263 - 1 | 8 | 부호 있는 64비트 2의 보수 정수 | `bigint` | `int64_t (signed long long)` |
| `BigUint64Array` | 0 에서 264 - 1 | 8 | 부호 없는 64비트 정수 | `bigint` | `uint64_t (unsigned long long)` |

생성자
---

이 객체는 직접 인스턴스화할 수 없습니다. 대신 `Int8Array` 또는 `BigInt64Array`와 같은 특정 유형의 배열 인스턴스를 만들 수 있습니다. 이러한 객체에는 모두 생성자에 대한 공통적인 구문이 있습니다.

```js
new TypedArray();
new TypedArray(length);
new TypedArray(typedArray);
new TypedArray(object);

new TypedArray(buffer);
new TypedArray(buffer, byteOffset);
new TypedArray(buffer, byteOffset, length);
```

여기서 *TypedArray* 는 구체적인 유형 중 하나의 생성자입니다.

**참고:** 모든 `TypedArray` 생성자는 `new`로만 생성할 수 있습니다. `new` 없이 호출하려고 하면 `TypeError`가 발생합니다.

매개변수
----

`length`

`length` 인수와 함께 호출되면, `length`에 *`BYTES_PER_ELEMENT`* 바이트를 **곱한** 크기의 0으로 채워진 내부 배열 버퍼가 메모리에 생성됩니다.

`typedArray`

`typedArray` 인수를 사용하여 호출하면, `typedArray`가 새 형식화 배열에 복사됩니다. **non-bigint** `TypedArray`의 경우, `typedArray` 매개변수는 오직 **non**-bigint 종류의 형식화 배열 객체만(예: `Int32Array`) 될 수 있습니다. 마찬가지로 **bigint** `TypedArray`의 경우, `typedArray` 매개변수는 bigint 형식화 배열 종류의 객체(예: `BigInt64Array`)만 될 수 있습니다. `typedArray`의 각 값은 새 배열에 복사되기 전에 해당 생성자의 형식으로 변환됩니다. 새로운 형식화 배열의 길이는 `typedArray` 인수의 길이와 동일합니다.

`object`

`object` 인수를 사용하여 호출하면, `TypedArray.from()` 메서드에서와 같이 새로운 형식화 배열이 생성됩니다.

`buffer`, `byteOffset`,
 `length`

`buffer`와 선택적으로 전달할 수 있는 `byteOffset` 및 `length` 인수가 함께 호출되면, 지정된 `ArrayBuffer`를 보는 새로운 형식화 배열 뷰가 생성됩니다. `byteOffset` 및 `length` 매개변수는 형식화 배열 보기에 의해 노출될 메모리 범위를 지정합니다. 둘 다 생략하면 모든 버퍼가 표시되고, `length`만 생략하면 `buffer`의 나머지 부분이 표시됩니다.

정적 속성
-----

`TypedArray.BYTES_PER_ELEMENT`

`TypedArray` 객체 요소의 크기를 숫자 값으로 반환합니다.

`TypedArray.name`

생성자 이름을 문자열로 반환합니다(예: `"Int8Array"`).

`get TypedArray[@@species]`

파생된 객체를 만드는 데 사용되는 생성자 함수입니다.

`TypedArray`

`TypedArray` 객체의 프로토타입.

정적 메서드
------

`TypedArray.from()` (en-US)

배열과 유사하거나 반복 가능한 객체에서 새 `TypedArray`를 만듭니다. `Array.from()`도 참조하시기 바랍니다.

`TypedArray.of()`

가변 개수의 인수를 사용하여 새 `TypedArray`를 만듭니다. `Array.of()`도 참조하시기 바랍니다.

인스턴스 속성
-------

`TypedArray.prototype.buffer`

형식화 배열이 참조하는 `ArrayBuffer` 반환합니다. 생성 시 고정되는 값으로 **읽기 전용**입니다.

`TypedArray.prototype.byteLength`

형식화 배열의 길이(바이트)를 반환합니다. 생성 시 고정되는 값으로 **읽기 전용**입니다.

`TypedArray.prototype.byteOffset`

`ArrayBuffer`의 시작 부터 형식화 배열의 지정된 오프셋(바이트)을 반환합니다. 생성시 시 고정되는 값으로 **읽기 전용**입니다.

`TypedArray.prototype.length`

형식화 배열에 포함된 요소의 수를 반환합니다. 생성 시 고정되는 값으로 **읽기 전용**입니다.

인스턴스 메서드
--------

`TypedArray.prototype.at()` (en-US)

정수 값으로 해당 인덱스의 항목을 반환합니다. 이 메서드는 마지막 항목부터 접근하는 음의 정수를 허용합니다.

`TypedArray.prototype.copyWithin()` (en-US)

배열 내의 배열 요소 시퀀스를 복사합니다. `Array.prototype.copyWithin()`도 참조하시기 바랍니다.

`TypedArray.prototype.entries()`

배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새 **배열 반복기** 객체를 반환합니다. `Array.prototype.entries()`도 참조하시기 바랍니다.

`TypedArray.prototype.every()`

배열의 모든 요소가 함수에서 제공하는 테스트를 통과하는지 확인합니다. `Array.prototype.every()`도 참조하시기 바랍니다.

`TypedArray.prototype.fill()`

시작 인덱스에서 끝 인덱스까지 배열의 모든 요소를 정적 값으로 채웁니다. `Array.prototype.fill()`도 참조하시기 바랍니다.

`TypedArray.prototype.filter()` (en-US)

제공된 필터링 함수가 `true`를 반환하는 이 배열의 모든 요소를 사용하여 새 배열을 만듭니다. `Array.prototype.filter()`도 참조하시기 바랍니다.

`TypedArray.prototype.find()` (en-US)

제공된 테스트 함수를 충족하는 첫번 째 `element`를 반환하고, 찾지 못하면 `undefined`를 반환합니다. `Array.prototype.find()`도 참조하시기 바랍니다.

`TypedArray.prototype.findIndex()` (en-US)

제공된 테스트 함수를 충족하는 첫 번째 요소의 인덱스 값을 반환하고, 찾지 못한 경우는 `-1`을 반환합니다. `Array.prototype.findIndex()`도 참조하시기 바랍니다.

`TypedArray.prototype.findLast()` (en-US)

제공된 테스트 함수를 충족하는 배열의 마지막 요소 값을 반환하고, 요소가 없으면 `undefined`를 반환합니다. `Array.prototype.findLast()`도 참조하시기 바랍니다.

`TypedArray.prototype.findLastIndex()` (en-US)

제공된 테스트 함수를 충족하는 배열의 마지막 요소의 인덱스를 반환하고, 요소를 찾지 못한 경우는 `-1`을 반환합니다. `Array.prototype.findLastIndex()`도 참조하시기 바랍니다..

`TypedArray.prototype.forEach()`

배열의 각 요소에 대해 함수를 호출합니다. `Array.prototype.forEach()`도 참조하시기 바랍니다.

`TypedArray.prototype.includes()` (en-US)

형식화 배열에 특정 요소가 포함되어 있는지 여부를 결정하여 `true` 또는 `false`를 반환합니다 `Array.prototype.includes()`도 참조하시기 바랍니다.

`TypedArray.prototype.indexOf()`

지정된 값과 동일한 배열 내 요소의 첫 번째(최소) 인덱스를 반환하고, 아무 것도 발견되지 않으면 `-1`을 반환합니다. `Array.prototype.indexOf()`도 참조하시기 바랍니다.

`TypedArray.prototype.join()`

배열의 모든 요소를 문자열로 결합합니다. `Array.prototype.join()`도 참조하시기 바랍니다.

`TypedArray.prototype.keys()`

배열의 각 인덱스에 대한 키를 포함하는 새 배열 반복자를 반환합니다. `Array.prototype.keys()`도 참조하시기 바랍니다.

`TypedArray.prototype.lastIndexOf()` (en-US)

지정된 값과 동일한 배열 내 요소의 마지막(가장 큰) 인덱스를 반환고, 찾지 못한 경우엔 `-1`을 반환합니다. `Array.prototype.lastIndexOf()`도 참조하시기 바랍니다..

`TypedArray.prototype.map()` (en-US)

배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다. `Array.prototype.map()`도 참조하시기 바랍니다.

`TypedArray.prototype.reduce()` (en-US)

누산기와 배열의 각 값(왼쪽에서 오른쪽으로)에 대해 함수를 적용하여 단일 값으로 줄입니다. `Array.prototype.reduce()`도 참조하시기 바랍니다.

`TypedArray.prototype.reduceRight()` (en-US)

누산기와 배열의 각 값(오른쪽에서 왼쪽으로)에 대해 함수를 적용하여 단일 값으로 줄입니다. `Array.prototype.reduceRight()`도 참조하시기 바랍니다.

`TypedArray.prototype.reverse()`

배열 요소의 순서를 뒤집습니다. 첫 번째 요소가 마지막 요소가 되고 마지막 요소가 첫 번째 요소가 됩니다. `Array.prototype.reverse()`도 참조하시기 바랍니다.

`TypedArray.prototype.set()`

형식화 배열에 여러 값을 저장하고 지정된 배열에서 입력 값을 읽습니다.

`TypedArray.prototype.slice()`

배열의 부분을 추출하여 새 배열을 반환합니다. `Array.prototype.slice()`도 참조하시기 바랍니다.

`TypedArray.prototype.some()`

이 배열의 하나 이상의 요소가 제공된 테스트 함수를 충족하는 경우, `true`를 반환합니다. `Array.prototype.some()`도 참조하시기 바랍니다.

`TypedArray.prototype.sort()`

배열의 요소를 정렬하고 배열을 반환합니다. `Array.prototype.sort()`도 참조하시기 바랍니다.

`TypedArray.prototype.subarray()`

주어진 시작 인덱스에서 끝 인덱스 까지의 요소로 만든 새로운 `TypedArray`를 반환합니다.

`TypedArray.prototype.values()`

배열의 각 인덱스에 대한 값을 포함하는 새 **배열 반복기** 객체를 반환합니다.`Array.prototype.values()`도 참조하시기 바랍니다.

`TypedArray.prototype.toLocaleString()` (en-US)

배열 및 해당 요소를 나타내는 지역화된 문자열을 반환합니다. `Array.prototype.toLocaleString()`도 참조하시기 바랍니다.

`TypedArray.prototype.toString()` (en-US)

배열과 해당 요소를 나타내는 문자열을 반환합니다. `Array.prototype.toString()`도 참조하시기 바랍니다.

`TypedArray.prototype[@@iterator]()`

배열의 각 인덱스에 대한 값을 포함하는 새 **배열 반복기** 객체를 반환합니다.

예제
--

속성 접근
-----

 표준 배열 인덱스 구문(즉, 대괄호 표기법 사용)을 사용하여 배열의 요소를 참조할 수 있습니다.
 그러나 형식화 배열에서는 인덱스된 속성을 가져오거나 설정하면 인덱스가 범위를 벗어난 경우에도 프로토타입 체인에서 이 속성을 검색하지 않습니다.
 인덱싱된 속성은 `ArrayBuffer` 참조하고 객체 속성을 절대 확인하지 않습니다.
 모든 객체와 마찬가지로 이름을 지정한 속성은 계속 사용할 수 있습니다.

```js
// 표준 배열 구문을 사용하여 설정 및 가져오기
const int16 = new Int16Array(2);
int16[0] = 42;
console.log(int16[0]); // 42

// 프로토타입의 인덱싱된 속성이 참조되지 않음 (Fx 25)
Int8Array.prototype[20] = "foo";
new Int8Array(32)[20]; // 0
// 범위를 벗어나더라도
Int8Array.prototype[20] = "foo";
new Int8Array(8)[20]; // undefined
// 또는 음수를 사용하더라도
Int8Array.prototype[-1] = "foo";
new Int8Array(8)[-1]; // undefined

// 그래도 이름을 지정한 속성은 허용됨 (Fx 30)
Int8Array.prototype.foo = "bar";
new Int8Array(32).foo; // "bar"
```

### 고정될 수 없음

비어 있지 않은 `TypedArray`는 고정될 수 없습니다. 기본 `ArrayBuffer`가 버퍼의 다른 `TypedArray` 보기를 통해 변경될 수 있기 때문입니다. 이것은 객체가 고정되지 않을것 임을 의미합니다.

```js
const i8 = Int8Array.of(1, 2, 3);
Object.freeze(i8);
// TypeError: Cannot freeze array buffer views with elements
```

### ByteOffset는 반드시 정렬되어야 합니다

`TypedArray`를 `ArrayBuffer`에 대한 보기로 구성할 때 `byteOffset` 인수는 요소 크기에 맞춰 정렬되어야 합니다. 즉, 오프셋은 B`YTES_PER_ELEMENT`의 배수여야 합니다.

```js
const i32 = new Int32Array(new ArrayBuffer(4), 1);
// RangeError: start offset of Int32Array should be a multiple of 4
```

```js
const i32 = new Int32Array(new ArrayBuffer(4), 0);
```

### ByteLength는 반드시 정렬되어야 합니다

`byteOffset` 매개변수와 마찬가지로 `TypedArray`의 생성자에 전달된 `ArrayBuffer`의 `byteLength` 속성은 생성자의 `BYTES_PER_ELEMENT`의 배수여야 합니다.

```js
const i32 = new Int32Array(new ArrayBuffer(3));
// RangeError: byte length of Int32Array should be a multiple of 4
```

```js
const i32 = new Int32Array(new ArrayBuffer(4));
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-typedarray-objects |

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

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

같이 보기
-----

* Polyfill of typed arrays in `core-js`
* JavaScript 형식화 배열
* `ArrayBuffer`
* `DataView`
* TextDecoder (en-US) — 숫자 데이터에서 문자열을 디코딩하는 헬퍼


TypeError - JavaScript

TypeError
=========

**`TypeError`** 객체는 일반적으로 값이 기대하던 자료형이 아니라서 연산을 할 수 없을 때 발생하는 오류를 나타냅니다.

다음과 같은 경우 `TypeError`가 발생할 수 있습니다.

* 함수에 전달된 피연산자 또는 인수가 해당 연산자나 함수가 예상하는 타입과 호환되지 않을 경우
* 변경할 수 없는 값을 수정하려고 할 경우
* 부적절한 방법으로 값을 사용하려고 할 경우

`TypeError`는 직렬화 가능한 객체이기 때문에,
 `structuredClone()`로 복제하거나
 `postMessage()` (en-US)를 사용하여
 Workers 간에 복사할 수 있습니다.

생성자
---

`TypeError()`

새로운 `TypeError` 객체를 생성합니다.

인스턴스 속성
-------

`TypeError.prototype.message`

오류 메시지. `Error`로부터 상속되었습니다.

`TypeError.prototype.name`

오류 이름. `Error`로부터 상속되었습니다.

`TypeError.prototype.cause`

오류 원인. `Error`로부터 상속되었습니다.

`TypeError.prototype.fileName`
비표준

오류가 발생한 파일 경로. `Error`로부터 상속되었습니다.

`TypeError.prototype.lineNumber`
비표준

오류가 발생한 곳의 줄 위치. `Error`로부터 상속되었습니다.

`TypeError.prototype.columnNumber`
비표준

오류가 발생한 곳의 열 위치. `Error`로부터 상속되었습니다.

`TypeError.prototype.stack` (en-US)

스택 추적. `Error`로부터 상속되었습니다.

예제
--

### `TypeError` 오류를 잡아내기

```js
try {
  null.f();
} catch (e) {
  console.log(e instanceof TypeError); // true
  console.log(e.message); // "null has no properties"
  console.log(e.name); // "TypeError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 2
  console.log(e.stack); // "@Scratchpad/2:2:3\n"
}
```

### `TypeError` 오류를 생성하기

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

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-typeerror |

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

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

같이 보기
-----

* `Error`


BigInt64Array - JavaScript

BigInt64Array
=============

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

생성자
---

`BigInt64Array()`

새로운 `BigInt64Array` 객체를 생성합니다.

정적 속성
-----

부모 `TypedArray`에서 정적 속성을 상속합니다.

`BigInt64Array.BYTES_PER_ELEMENT`

요소 크기를 숫자로 반환합니다. `BigInt64Array`의 경우 `8` 입니다.

`BigInt64Array.name`

`BigInt64Array` 타입의 경우 `"BigInt64Array"`입니다.

정적 메서드
------

부모 `TypedArray`에서 정적 메서드를 상속합니다.

인스턴스 속성
-------

부모 `TypedArray`에서 인스턴스 속성을 상속합니다.

`BigInt64Array.prototype.BYTES_PER_ELEMENT`

요소 크기를 숫자로 반환합니다. `BigInt64Array`의 경우 `8` 입니다.

인스턴스 메서드
--------

부모 `TypedArray`에서 인스턴스 메서드를 상속합니다.

예제
--

### `BigInt64Array`을 생성하기 위한 각기 다른 방법

```js
// 길이로부터
const bigint64 = new BigInt64Array(2);
bigint64[0] = 42n;
console.log(bigint64[0]); // 42n
console.log(bigint64.length); // 2
console.log(bigint64.BYTES\_PER\_ELEMENT); // 8

// 배열로부터
const x = new BigInt64Array([21n, 31n]);
console.log(x[1]); // 31n

// 다른 TypedArray로부터
const y = new BigInt64Array(x);
console.log(y[0]); // 21n

// ArrayBuffer로부터
const buffer = new ArrayBuffer(64);
const z = new BigInt64Array(buffer, 8, 4);
console.log(z.byteOffset); // 8

// 순회로부터
const iterable = (function\* () {
  yield\* [1n, 2n, 3n];
})();
const bigint64FromIterable = new BigInt64Array(iterable);
console.log(bigint64FromIterable);
// BigInt64Array [1n, 2n, 3n]
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-typedarray-objects |

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

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

같이 보기
-----

* JavaScript 형식화 배열
* `BigUint64Array`
* `DataView`


SyntaxError - JavaScript

SyntaxError
===========

**`SyntaxError`** 객체는 문법적으로 잘못된 코드를 해석하려고 시도할 때 발생하는 오류를 나타냅니다.
 JavaScript 엔진이 코드를 구문 분석할 때 언어의 구문에 맞지 않는 토큰이나 토큰 순서를 만나면 이 에러를 발생시킵니다.

`SyntaxError`는 직렬화 가능한 객체이므로 `structuredClone()`으로 복제하거나 `postMessage()` (en-US)를 사용하여 Worker 간에 복사할 수 있습니다.

`SyntaxError`는 `Error`의 하위 클래스입니다.

생성자
---

`SyntaxError()`

새로운 `SyntaxError` 객체를 만듭니다.

인스턴스 속성
-------

또한 부모 `Error`에서 인스턴스 속성을 상속합니다.

아래 속성은 `SyntaxError.prototype`에서 정의되었고, 모든 `SyntaxError` 인스턴스애서 공유됩니다.

`SyntaxError.prototype.constructor`

인스턴스 객체를 생성하는 생성자 함수입니다. `SyntaxError` 인스턴스의 경우 초기 값은 `SyntaxError` 생성자입니다.

`SyntaxError.prototype.name`

오류 유형의 이름을 나타냅니다. `SyntaxError.prototype.name`의 경우 초기 값은 `"SyntaxError"`입니다.

인스턴스 메서드
--------

부모 `Error`에서 인스턴스 메서드를 상속합니다.

예제
--

### `SyntaxError` 처리하기

```js
try {
  eval("hoo bar");
} catch (e) {
  console.log(e instanceof SyntaxError); // true
  console.log(e.message);
  console.log(e.name); // "SyntaxError"
  console.log(e.stack); // 오류 스택
}
```

### SyntaxError 생성하기

```js
try {
  throw new SyntaxError("Hello");
} catch (e) {
  console.log(e instanceof SyntaxError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "SyntaxError"
  console.log(e.stack); // 오류 스택
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-syntaxerror |

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

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

같이 보기
-----

* `Error`


Atomics - JavaScript

Atomics
=======

**`Atomics`** 객체는 아토믹 연산(Atomic operation, 원자적 연산)을 정적 메서드로 제공합니다.
 `SharedArrayBuffer` 와 `ArrayBuffer` 객체와 함께 사용됩니다.

설명
--

 아토믹 연산은 `Atomic` 모듈에 설치됩니다. 다른 전역 객체와 달리 `Atomics`는 생성자가 아니기 때문에,
 `new` 연산자와 함께 사용하거나
 `Atomics` 객체를 함수로 호출할 수 없습니다. `Math` 객체처럼 `Atomics`의 모든 속성과
 메서드는 정적입니다.

### 아토믹 연산

 메모리가 공유되면 여러 스레드가 메모리에서 동일한 데이터를 읽고 쓸 수 있습니다.
 아토믹 연산은 예측 가능한 값을 쓰고 읽고, 다음 연산이 시작되기 전에 연산을 완료하여 연산이 중단되지 않도록 합니다.

### Wait와 notify

`wait()`와 `notify()` 메서드는 Linux 퓨텍스(futex)("빠른 사용자 공간 뮤텍스(mutex)")에서 모델링되어
 특정 조건이 참이 될 때까지 기다리는 방법을 제공하며 일반적으로 차단 구문으로 사용됩니다.

정적 속성
-----

`Atomics[@@toStringTag]`

`@@toStringTag` (en-US) 속성의 초기 값은 `"Atomics"` 문자열입니다. 이 속성은 `Object.prototype.toString()`에서 사용됩니다.

정적 메서드
------

`Atomics.add()`

배열의 특정 인덱스에 있던 값에 전달된 값을 추가합니다. 해당 인덱스의 이전 값을 반환합니다.

`Atomics.and()`

전달된 값과 배열의 지정된 인덱스에 있는 값으로 AND 연산을 수행합니다. 해당 인덱스의 이전 값을 반환합니다.

`Atomics.compareExchange()`

배열의 지정된 인덱스 값과 같으면 그곳에 값을 저장합니다. 이전 값을 반환합니다.

`Atomics.exchange()`

배열의 지정된 위치에 전달받은 값을 저장합니다. 이전 값을 반환합니다.

`Atomics.isLockFree(size)`

잠금 또는 atomic 연산을 사용할지 여부를 결정하는 데 사용할 수 있는 최적화 기본 요소입니다. 주어진 요소 크기의 배열에 대한 atomic 연산이 하드웨어 atomic 연산(잠금과 반대)을 사용하여 구현되는 경우 `true`를 반환합니다. 전문가만 사용합니다.

`Atomics.load()`

배열의 지정된 위치에 있는 값을 반환합니다.

`Atomics.notify()`

배열의 지정된 인덱스에서 대기 중인 에이전트에 알립니다. 알림을 받은 에이전트 수를 반환합니다.

`Atomics.or()`

전달된 값과 배열의 지정된 인덱스에 있는 값으로 OR 연산을 수행합니다. 해당 인덱스의 이전 값을 반환합니다.

`Atomics.store()`

배열의 지정된 인덱스에 값을 저장합니다. 값을 반환합니다.

`Atomics.sub()`

배열의 지정된 인덱스에서 값을 뺍니다. 해당 인덱스의 이전 값을 반환합니다.

`Atomics.wait()`

배열의 지정된 인덱스가 여전히 값을 포함하고있고 대기 중이거나 시간 초과됐는지 확인합니다. `"ok"`, `"not-equal"` 또는 `"timed-out"`을 반환합니다. 호출 에이전트에서 대기가 허용되지 않으면 예외가 발생합니다. (대부분의 브라우저는 브라우저의 메인 스레드에서 `wait()`을 허용하지 않습니다.)

`Atomics.waitAsync()`

공유 메모리 위치에서 비동기식으로(즉, `Atomics.wait`와 다르게 차단 없이) 대기하고 `프로미스`를 반환합니다.

`Atomics.xor()`

제공된 값을 사용하여 배열의 지정된 인덱스에 있는 값에 대해 XOR 연산을 수행합니다. 해당 인덱스의 이전 값을 반환합니다.

예제
--

### Atomic 사용하기

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

ta[0]; // 0
ta[0] = 5; // 5

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

Atomics.and(ta, 0, 1); // 17
Atomics.load(ta, 0); // 1

Atomics.compareExchange(ta, 0, 5, 12); // 1
Atomics.load(ta, 0); // 1

Atomics.exchange(ta, 0, 12); // 1
Atomics.load(ta, 0); // 12

Atomics.isLockFree(1); // true
Atomics.isLockFree(2); // true
Atomics.isLockFree(3); // false
Atomics.isLockFree(4); // true

Atomics.or(ta, 0, 1); // 12
Atomics.load(ta, 0); // 13

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

Atomics.sub(ta, 0, 2); // 12
Atomics.load(ta, 0); // 10

Atomics.xor(ta, 0, 1); // 10
Atomics.load(ta, 0); // 11
```

### Waiting과 notifying

`Int32Array`를 공유한다고 했을 때

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

 읽기 스레드는 0이 될 것으로 예상되는 위치 0에서 sleep 상태이며 대기 중입니다. 이것이 사실인 한 계속되지 않습니다.
 그러나 쓰기 스레드가 새 값을 저장하면 쓰기 스레드에서 이를 알리고 새 값을 반환합니다. (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-object |

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

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

같이 보기
-----

* `ArrayBuffer`
* JavaScript 형식화 배열
* 웹 워커
* parlib-simple – 동기화 및 작업 배포 추상화를 제공하는 간단한 라이브러리입니다.
* Shared Memory – a brief tutorial
* A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks


AggregateError - JavaScript

AggregateError
==============

**`AggregateError`** 객체는 다수의 오류가 한 오류로 포장되어야 할 때의 오류를 나타냅니다.
 한 작업에서 여러 개의 오류가 보고될 때 발생하는데, 대표적으로 `Promise.any()` (en-US)에 전달된 모든
 프로미스가 거부되었을 때 발생합니다.

`AggregateError`은 `Error`의 하위 클래스 입니다.

생성자
---

`AggregateError()`

새로운`AggregateError` 객체를 생성합니다.

인스턴스 속성
-------

인스턴스 속성은 부모인 `Error`로부터 상속받습니다.

아래 속성은 `AggregateError.prototype`에 정의되어 있으며 모든 인스턴스 객체와 공유합니다.

`AggregateError.prototype.constructor`

 인스턴스 객체를 생성하는 생성자 함수입니다. `AggregateError` 인스턴스에서 초기 값은
 `AggregateError` 생성자입니다.

`AggregateError.prototype.name`

오류의 유형에 대한 이름을 나타냅니다. `AggregateError.prototype.name`의 초기 값은 `"AggregateError"`입니다.

아래 속성은 `AggregateError` 인스턴스의 자체 속성입니다.

`errors`

집계된 오류를 나타내는 배열입니다.

인스턴스 메서드
--------

인스턴스 메서드는 부모인 `Error`로부터 상속받습니다.

예제
--

### AggregateError 처리하기

```js
Promise.any([Promise.reject(new Error("some error"))]).catch((e) => {
  console.log(e instanceof AggregateError); // true
  console.log(e.message); // "All Promises rejected"
  console.log(e.name); // "AggregateError"
  console.log(e.errors); // [ Error: "some error" ]
});
```

### AggregateError 발생시키기

```js
try {
  throw new AggregateError([new Error("some error")], "Hello");
} catch (e) {
  console.log(e instanceof AggregateError); // true
  console.log(e.message); // "Hello"
  console.log(e.name); // "AggregateError"
  console.log(e.errors); // [ Error: "some error" ]
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-aggregate-error-objects |

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

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

같이 보기
-----

* Polyfill of `AggregateError` in `core-js`
* `Error`
* `Promise.any` (en-US)


Float64Array - JavaScript

Float64Array
============

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

생성자
---

`Float64Array()`

새로운 `Float64Array` 객체를 생성합니다.

정적 속성
-----

부모 `TypedArray`에서 정적 속성을 상속합니다.

`Float64Array.BYTES_PER_ELEMENT`

요소 크기를 숫자로 반환합니다. `Float64Array`의 경우 `8` 입니다.

`Float64Array.name`

생성자 이름을 문자열로 반환합니다. `Float64Array` 타입의 경우 `"Float64Array"`입니다.

정적 메서드
------

부모 `TypedArray`에서 정적 메서드를 상속합니다.

인스턴스 속성
-------

부모 `TypedArray`에서 인스턴스 속성을 상속합니다.

`Float64Array.prototype.BYTES_PER_ELEMENT`

요소 크기를 숫자로 반환합니다. `Float64Array`의 경우 `8` 입니다.

인스턴스 메서드
--------

부모 `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 # table-49 |

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

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

같이 보기
-----

* `core-js`에서 `Float64Array`의 폴리필
* JavaScript 형식화 배열
* `ArrayBuffer`
* `DataView`


SharedArrayBuffer - JavaScript

SharedArrayBuffer
=================

**`SharedArrayBuffer`** 객체는 제네릭, 고정된 길이의 원시 바이너리 데이터 버퍼를 표현하는데 사용됩니다. `ArrayBuffer` 객체와 유사하지만, 공유된 메모리상의 뷰를 생성하는데 사용될 수 있습니다. `ArrayBuffer` 와는 달리, `SharedArrayBuffer` 는 분리될 수 없습니다.

**참고:** Spectre 에대한 응답으로 2018년 1월 5일에 `SharedArrayBuffer` 는 모든 주요 브라우저에서 기본적으로 비활성화되어있음을 참고하세요. Chrome 은 사이트 격리 기능을 사용하여 Spectre 스타일 취약점으로부터 보호될 수 있는 플랫폼상의 v67 에서 이를 다시 활성화하였습니다.

시도해보기
-----

구문
--

```js
new SharedArrayBuffer(length);
```

### 파라미터

`length`

생성할 array buffer 의 바이트 크기.

### 반환 값

크기가 지정된 새로운 `SharedArrayBuffer` 객체입니다. 컨텐츠는 0 으로 초기화됩니다.

설명
--

### 할당 및 메모리 공유

`SharedArrayBuffer` 객체를 사용해 메모리를 하나의 agent(agent 는 웹 페이지의 메인 프로그램 또는 웹 워커 중 하나입니다)와 다른 agent 에서 공유하기 위해, `postMessage` (en-US) 와 structured cloning 이 사용됩니다.

Structured clone 알고리즘은 `SharedArrayBuffer` 와 `SharedArrayBuffer` 상에 맵핑된 `TypedArray` 를 받아들입니다. 이 두 경우에서, `SharedArrayBuffer` 객체는 수신자(receiver)에게 전달되어 수신 agent(예, `ArrayBuffer`)의 새로운 비공개의 SharedArrayBuffer 객체를 생성합니다. 하지만, 두 `SharedArrayBuffer` 에 의해 참조되는 공유 데이터 블록은 같은 블록이며, 부수적인 효과로, 하나의 agent 가 다른 agent 에서 보이게 됩니다.

```js
var sab = new SharedArrayBuffer(1024);
worker.postMessage(sab);
```

### Atomic operation 으로 공유 메모리 수정 및 동기화

공유 메모리는 워커나 메인 스레드에서 동시에 수정 및 생성할 수 있습니다. 시스템(CPU, OS, 브라우저)에따라 변경사항이 전체 컨텍스트로 전파될때까지 약간의 시간이 필요합니다. 동기화를 위해선, atomic 연산이 필요합니다.

### `SharedArrayBuffer` 객체를 사용할 수 있는 API

* `WebGLRenderingContext.bufferData()`
* `WebGLRenderingContext.bufferSubData()` (en-US)
* `WebGL2RenderingContext.getBufferSubData()` (en-US)
### 생성자는 `new` 연산자를 필요로 함

`SharedArrayBuffer` 생성자는 생성될 때, `new` 연산자를 필요로 합니다. `SharedArrayBuffer` 생성자를 new 없이 함수로써 호출하면, `TypeError` 를 일으킬 것 입니다.

```js
var sab = SharedArrayBuffer(1024);
// TypeError: calling a builtin SharedArrayBuffer constructor
// without new is forbidden
```

```js
var sab = new SharedArrayBuffer(1024);
```

속성
--

`SharedArrayBuffer.length`

값이 1인 `SharedArrayBuffer` 생성자의 length 속성입니다.

`SharedArrayBuffer.prototype` (en-US)

모든 `SharedArrayBuffer` 객체에 프로퍼티 추가를 가능하게 해줍니다.

`SharedArrayBuffer` prototype 객체
--------------------------------

모든 `SharedArrayBuffer` 인스턴스는 `SharedArrayBuffer.prototype` (en-US) 를 상속합니다.

### 속성

`SharedArrayBuffer.prototype.byteLength` (en-US)

배열의 크기 (바이트)입니다. 이것은 배열이 구성 될 때 설정되며 변경할 수 없습니다. 읽기 전용입니다.

### 메소드

`SharedArrayBuffer.prototype.slice(begin, end)` (en-US)

Returns a new `SharedArrayBuffer` whose contents are a copy of this `SharedArrayBuffer`'s bytes from `begin`, inclusive, up to `end`, exclusive. `begin` 또는 `end` 중 하나가 음수이면 처음부터가 아니라 배열 끝의 인덱스를 참조합니다.

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-sharedarraybuffer-objects |

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

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

함께 보기
-----

* `Atomics`
* `ArrayBuffer`
* JavaScript 형식화 배열
* Web Workers
* parlib-simple – 동기화 및 작업 분리 추상화를 제공하는 간단한 라이브러리.
* Shared Memory – 간단한 튜토리얼
* A Taste of JavaScript's New Parallel Primitives – Mozilla Hacks


InternalError - JavaScript

InternalError
=============

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

**`InternalError`** 객체는 JavaScript 엔진 내부에서 발생한 오류를 나타냅니다.

다음의 오류 예시의 경우는 일반적으로 어떤 값이 너무 큰 경우입니다.

* "too many switch cases", (swich case의 수가 너무 많음)
* "too many parentheses in regular expression", (정규표현식에 너무 많은 괄호가 있음)
* "array initializer too large", (배열 초기화 값이 너무 큼)
* "too much recursion". (너무 많은 재귀 호출)
생성자
---

`InternalError()` (en-US)

새로운 `InternalError` 객체를 만듭니다.

인스턴스 속성
-------

`InternalError.prototype.message`

오류 메시지. `Error`로부터 상속되었습니다.

`InternalError.prototype.name`

오류 이름. `Error`로부터 상속되었습니다.

`InternalError.prototype.fileName`

오류가 발생한 파일 경로. `Error`로부터 상속되었습니다.

`InternalError.prototype.lineNumber`

오류가 발생한 곳의 줄 번호. `Error`로부터 상속되었습니다.

`InternalError.prototype.columnNumber`

오류가 발생한 행의 열 번호. `Error`로부터 상속되었습니다.

`InternalError.prototype.stack` (en-US)

스택 추적. `Error`로부터 상속되었습니다.

예제
--

### 너무 많은 재귀 호출

이 재귀 함수는 종료 조건에 따라 10번 수행됩니다.

```js
function loop(x) {
  if (x >= 10) {
    // "x >= 10" 는 종료 조건입니다.
    return;
  }
  // 어떤 코드
  loop(x + 1); // 재귀 호출
}
loop(0);
```

이 조건을 매우 높은 값으로 설정하면 작동하지 않습니다:

```js
function loop(x) {
  if (x >= 1000000000000) return;
  // 어떤 코드
  loop(x + 1);
}
loop(0);

// InternalError: too much recursion(너무 많은 재귀 호출)
```

더 많은 정보를 보려면 InternalError: too much recursion(너무 많은 재귀 호출)를 보시길 바랍니다.

명세
--

어떤 표준에도 속하지 않습니다.

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

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

같이 보기
-----

* `Error`
* InternalError: too much recursion(너무 많은 재귀 호출)


Number - JavaScript

Number
======

**`Number`** 는 `37`이나 `-9.25`와 같은 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 객체입니다.
`Number` 생성자는 숫자를 다루기 위해 상수와 메소드를 가지고 있습니다. 다른 타입의 값은 `Number()` 함수를 사용하여 숫자로 바꿀 수 있습니다.

JavaScript `Number` 타입은 Java 혹은 C#의 `double` 타입처럼 IEEE 754 64비트 바이너리 배정 밀도 값입니다. 즉, 분수 값을 나타낼 수 있지만 저장할 수 있는 값에는 몇 가지 제한이 있습니다. `Number`는 소수점 이하 17자리 정도만 유지하며 산술은 반올림의 대상이 됩니다. `Number`가 가질 수 있는 가장 큰 값은 1.8E308 입니다. 그보다 더 큰 값은 특별한 `Number` 상수인 `Infinity`으로 대체됩니다.

JavaScript 코드에서 `37`과 같은 숫자 리터럴은 정수가 아니라 부동 소수점 값입니다. 일상적으로 흔히 사용되는 별도의 정수형은 없습니다. (JavaScript에는 이제 `BigInt` 타입이 있지만 일상적인 사용을 위해 Number를 대체하도록 설계되지 않았습니다. `37`은 여전히 `Number`일 뿐, BigInt가 아닙니다.)

`Number`는 `0b101`, `0o13`, `0x0A`와 같은 리터럴 형식으로 표현될 수도 있습니다. 수에 대해서 더 알아보고 싶으면 어휘 문법 (en-US)를 참조하세요.

설명
--

`Number(value)`처럼 함수로 사용하면 문자열이나 다른 값을 Number 타입으로 변환합니다. 만약 만약 인수를 숫자로 변환할 수 없으면 `NaN`을 리턴합니다.

### 리터럴 구문

```js
123; // 백 이십 삼
123.0; // 동일
123 === 123.0; // 참
```

### 함수 구문

```js
Number("123"); // 숫자 123을 반환
Number("123") === 123; // 참

Number("unicorn"); // NaN
Number(undefined); // NaN
```

Constructor
-----------

`Number()`

새로운 `Number` 값을 생성합니다.

Static properties
-----------------

`Number.EPSILON`

두 개의 표현 가능한 숫자 사이의 최소 간격.

`Number.MAX_SAFE_INTEGER`

JavaScript에서 안전한 최대 정수. (`2^53 - 1`)

`Number.MAX_VALUE`

표현 가능한 가장 큰 양수.

`Number.MIN_SAFE_INTEGER`

JavaScript에서 안전한 최소 정수. (`-(2^53 - 1)`).

`Number.MIN_VALUE`

T표현 가능한 가장 작은 양수. 즉, 0보다 크지만 0에 가장 가까운 양수.

`Number.NaN`

"**N**ot **a** **N**umber"(숫자가 아님)을 나타내는 특별한 값.

`Number.NEGATIVE_INFINITY`

음의 무한대를 나타내는 특수한 값. 오버플로우 시 반환됩니다.

`Number.POSITIVE_INFINITY`

양의 무한대를 나타내는 특수한 값. 오버플로우 시 반환됩니다.

`Number.prototype`

`Number` 객체에 속성을 추가할 수 있습니다.

정적 메소드
------

`Number.isNaN()`

주어진 값이 `NaN`인지 확인합니다.

`Number.isFinite()`

주어진 값이 유한수 인지 확인합니다.

`Number.isInteger()`

주어진 값이 정수인지 확인합니다.

`Number.isSafeInteger()`

주어진 값이 안전한 정수(`-(2^53 - 1)`과 `2^53 - 1` 사이의 정수)인지 확인합니다.

`Number.parseFloat(string)`

전역 객체 `parseFloat()`와 동일한 값입니다.

`Number.parseInt(string, [radix])`

전역 객체 `parseInt()`와 동일한 값입니다.

인스턴스 메소드
--------

`Number.prototype.toExponential(fractionDigits)`

지수 표기법으로 표기된 숫자를 표현하는 문자열을 반환한다

`Number.prototype.toFixed(digits)`

고정 소수점 표기법으로 숫자를 표현하는 문자열을 반환합니다.

`Number.prototype.toLocaleString([locales [, options]])` (en-US)

이 숫자를 해당 언어 방식으로 표현된 문자열을 반환합니다. `Object.prototype.toLocaleString()` 메서드를 재정의합니다.

`Number.prototype.toPrecision(precision)`

고정 소수점 또는 지수 표기법으로 지정된 정밀도로 숫자를 표현하는 문자열을 반환합니다.

`Number.prototype.toString([radix])`

지정한 *기수*("base")에서 지정한 개체를 표현하는 문자열을 반환합니다. `Object.prototype.toString()` 메서드를 재정의합니다.

`Number.prototype.valueOf()`

명시된 객체의 원시 값을 반환합니다. `Object.prototype.valueOf()` 메서드를 재정의합니다.

예제
--

### Number 객체를 사용해 숫자형 변수에 할당

다음 예제에서는 `Number` 객체의 속성을 사용하여, 여러 숫자 변수에 값을 할당합니다:

```js
const biggestNum = Number.MAX\_VALUE;
const smallestNum = Number.MIN\_VALUE;
const infiniteNum = Number.POSITIVE\_INFINITY;
const negInfiniteNum = Number.NEGATIVE\_INFINITY;
const notANum = Number.NaN;
```

### Number의 정수 범위

다음 예제는 Number 객체가 표현할 수 있는 정수의 최소값과 최대값을 보여줍니다. (자세한 내용은 ECMAScript 표준, *6.1.6 The Number Type* 장을 참고하세요.

```js
const biggestInt = Number.MAX\_SAFE\_INTEGER; // (2\*\*53 - 1) => 9007199254740991
const smallestInt = Number.MIN\_SAFE\_INTEGER; // -(2\*\*53 - 1) => -9007199254740991
```

JSON으로 직렬화한 데이터를 읽을 때, 위의 범위를 벗어나는 수는 JSON 분석기의 `Number` 형변환 시 손상될 수 있습니다. 이 때는 String을 대신 사용하는 것도 방법입니다.

`String`를 사용하는 것도 대안입니다.

더 큰 수는 `BigInt` 타입으로 표현할 수 있습니다.

### Number를 사용해 Date 객체 숫자로 변환

다음 예제는 `Number`를 함수로 사용하여 `Date` 객체를 숫자 값으로 변환합니다.

```js
let d = new Date("December 17, 1995 03:24:00");
console.log(Number(d));
```

`819199440000`가 기록됩니다.

### 숫자형 문자열에서 숫자로 변환

```js
Number("123"); // 123
Number("123") === 123; // true
Number("12.3"); // 12.3
Number("12.00"); // 12
Number("123e-1"); // 12.3
Number(""); // 0
Number(null); // 0
Number("0x11"); // 17
Number("0b11"); // 3
Number("0o11"); // 9
Number("foo"); // NaN
Number("100a"); // NaN
Number("-Infinity"); // -Infinity
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-number-objects |

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

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

같이보기
----

* 최신 `Number` 동작(2진수와 8진수를 지원하는)의 폴리필은 `core-js`를 참고하세요
* `NaN`
* `Arithmetic operators`
* `Math` 전역 객체
* 임의 정밀도 정수: `BigInt`


encodeURIComponent() - JavaScript

encodeURIComponent()
====================

**`encodeURIComponent()`** 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)

시도해보기
-----

구문
--

```js
encodeURIComponent(str);
```

### 매개변수

`str`

URI 구성요소.

### 반환 값

주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열.

설명
--

`encodeURIComponent()`는 다음 문자를 **제외**한 문자를 이스케이프 합니다.
```

Not Escaped:

    A-Z a-z 0-9 - _ . ! ~ * ' ( )
```

`encodeURIComponent()`와 `encodeURI()`의 차이는 다음과 같습니다.

```js
var set1 = ";,/?:@&=+$"; // Reserved Characters
var set2 = "-\_.!~\*'()"; // Unescaped Characters
var set3 = "#"; // Number Sign
var set4 = "ABC abc 123"; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -\_.!~\*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -\_.!~\*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
```

상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 `URIError`가 발생합니다.

```js
// high-low pair ok
console.log(encodeURIComponent("\uD800\uDFFF"));

// lone high surrogate throws "URIError: malformed URI sequence"
console.log(encodeURIComponent("\uD800"));

// lone low surrogate throws "URIError: malformed URI sequence"
console.log(encodeURIComponent("\uDFFF"));
```

`encodeURIComponent()`를 사용해, 서버에 `POST`로 요청할 양식 필드를 인코딩 하세요. 입력 중 의도치 않게 생성될 수 있는 HTML 특수 개체 등의 `"&"` 문자를 처리할 수 있습니다.

예를 들어 사용자가 입력한 `"Jack & Jill"`은 `"Jack & Jill"`로 인코딩 됩니다. `encodeURIComponent()`를 사용하지 않았다면 서버가 앰퍼샌드를 새로운 필드의 시작으로 인식할 수 있으므로 데이터의 무결성을 해칠 수 있습니다.

`application/x-www-form-urlencoded`의 스페이스는 `"+"`로 치환되어야 하므로, `encodeURIComponent()`의 결과에 추가로 `"%20"`을 `"+"`로 바꾸세요.

비록 URI의 구분자로서 형식화된 사용처는 없지만, 그럼에도 `!`, `'`, `(`, `)`, `*`을 추가로 예약하는 RFC 3986을 엄격하게 따르려면 아래의 코드를 사용해보세요.

```js
function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()\*]/g, function (c) {
    return "%" + c.charCodeAt(0).toString(16);
  });
}
```

예제
--

다음 예제는 UTF-8 `Content-Disposition` 과`Link` (en-US) 서버 응답 헤더에서 (UTF-8 파일 이름 등의 이유로) 필요한 문자 인코딩 방법을 보입니다.

```js
var fileName = "my file(2).txt";
var header =
  "Content-Disposition: attachment; filename\*=UTF-8''" +
  encodeRFC5987ValueChars(fileName);

console.log(header);
// logs "Content-Disposition: attachment; filename\*=UTF-8''my%20file%282%29.txt"

function encodeRFC5987ValueChars(str) {
  return (
    encodeURIComponent(str)
      // Note that although RFC3986 reserves "!", RFC5987 does not,
      // so we do not need to escape it
      .replace(/['()]/g, escape) // i.e., %27 %28 %29
      .replace(/\\*/g, "%2A")
      // The following are not required for percent-encoding per RFC5987,
      // so we can allow for a little better readability over the wire: |`^
      .replace(/%(?:7C|60|5E)/g, unescape)
  );
}

// here is an alternative to the above function
function encodeRFC5987ValueChars2(str) {
  return (
    encodeURIComponent(str)
      // Note that although RFC3986 reserves "!", RFC5987 does not,
      // so we do not need to escape it
      .replace(/['()\*]/g, (c) => "%" + c.charCodeAt(0).toString(16)) // i.e., %27 %28 %29 %2a (Note that valid encoding of "\*" is %2A
      // which necessitates calling toUpperCase() to properly encode)
      // The following are not required for percent-encoding per RFC5987,
      // so we can allow for a little better readability over the wire: |`^
      .replace(/%(7C|60|5E)/g, (str, hex) =>
        String.fromCharCode(parseInt(hex, 16)),
      )
  );
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-encodeuricomponent-uricomponent |

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

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

같이 보기
-----

* `decodeURI`
* `encodeURI`
* `decodeURIComponent`


Promise - JavaScript

Promise
=======

**`Promise`** 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

**참고:** 이 기능은 Web Worker에서 사용할 수 있습니다

프로미스의 작동 방식과 프로미스 사용 방법에 대해 알아보려면 먼저 프로미스 사용하기을 읽어보세요.

설명
--

`Promise`는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다.

`Promise`는 다음 중 하나의 상태를 가집니다.

* 대기(*pending)*: 이행하지도, 거부하지도 않은 초기 상태.
* 이행(*fulfilled)*: 연산이 성공적으로 완료됨.
* 거부(*rejected)*: 연산이 실패함.

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수도 있습니다. 이행이나 거부될 때, 프로미스의 `then` 메서드에 의해 대기열(큐)에 추가된 처리기들이 호출됩니다. 이미 이행했거나 거부된 프로미스에 처리기를 연결해도 호출되므로, 비동기 연산과 처리기 연결 사이에 경합 조건은 없습니다.

`Promise.prototype.then()` 및 `Promise.prototype.catch()` (en-US) 메서드의 반환 값은 새로운 프로미스이므로 서로 연결할 수 있습니다.

![](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png)

**참고:** 느긋한 평가와 연산 연기를 위한 방법을 프로미스라고 부르는 언어도 여럿 존재합니다(Scheme 등). JavaScript에서의 프로미스는 콜백 함수를 연결할 수 있는, 이미 진행 중인 프로세스를 나타냅니다. 표현식을 느긋하게 평가하려면 `f = () => expression`처럼 매개변수 없는 함수를 사용해 느긋한 표현식을 생성하고, `f()`를 호출해 평가하세요.

**참고:** 프로미스가 대기에서 벗어나 이행 또는 거부된다면 프로미스가 처리(*settled*)됐다고 말합니다. 프로미스와 함께 쓰이는 다른 단어인 '리졸브'(*resolved*)는 프로미스가 처리됐거나, 다른 프로미스의 상태에 맞춰 상태가 '잠김'됐다는 의미입니다. States and fates에서 프로미스 용어에 대한 보다 자세한 설명을 읽을 수 있습니다.

생성자
---

`Promise()`

새로운 `Promise` 객체를 생성합니다. 주로 프로미스를 지원하지 않는 함수를 감쌀 때 사용합니다.

정적 메서드
------

`Promise.all(iterable)`

주어진 모든 프로미스가 이행하거나, 한 프로미스가 거부될 때까지 대기하는 새로운 프로미스를 반환합니다.

반환하는 프로미스가 이행한다면, 매개변수로 제공한 프로미스 각각의 이행 값을 모두 모아놓은 배열로 이행합니다. 배열 요소의 순서는 매개변수에 지정한 프로미스의 순서를 유지합니다.

반환하는 프로미스가 거부된다면, 매개변수의 프로미스 중 거부된 첫 프로미스의 사유를 그대로 사용합니다.

`Promise.allSettled(iterable)`

주어진 모든 프로미스가 처리(이행 또는 거부)될 때까지 대기하는 새로운 프로미스를 반환합니다.

`Promise.allSettled()`가 반환하는 프로미스는 매개변수로 제공한 모든 프로미스 각각의 상태와 값(또는 거부 사유)을 모아놓은 배열로 이행합니다.

`Promise.any(iterable)` (en-US)

주어진 모든 프로미스 중 하나라도 이행하는 순간, 즉시 그 프로미스의 값으로 이행하는 새로운 프로미스를 반환합니다.

`Promise.race(iterable)`

주어진 모든 프로미스 중 하나라도 처리될 때까지 대기하는 프로미스를 반환합니다.

반환하는 프로미스가 이행한다면, 매개변수의 프로미스 중 첫 번째로 이행한 프로미스의 값으로 이행합니다.

반환하는 프로미스가 거부된다면, 매개변수의 프로미스 중 거부된 첫 프로미스의 사유를 그대로 사용합니다.

`Promise.reject(reason)`

주어진 사유로 거부하는 `Promise` 객체를 반환합니다.

`Promise.resolve()`

주어진 값으로 이행하는 `Promise` 객체를 반환합니다. 이때 지정한 값이 `then` 가능한(`then` 메서드를 가지는) 값인 경우, `Promise.resolve()`가 반환하는 프로미스는 `then` 메서드를 "따라가서" 자신의 최종 상태를 결정합니다. 그 외의 경우, 반환된 프로미스는 주어진 값으로 이행합니다.

어떤 값이 프로미스인지 아닌지 알 수 없는 경우, 보통 일일히 두 경우를 나눠서 처리하는 대신 `Promise.resolve()`로 값을 감싸서 항상 프로미스가 되도록 만든 후 작업하는 것이 좋습니다.

인스턴스 메서드
--------

마이크로태스크 안내서를 방문해 프로미스 인스턴스 메서드가 마이크로태스크 큐와 서비스를 이용하는 방법을 알아보세요.

`Promise.prototype.catch()` (en-US)

프로미스에 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행하며 호출되지 않을 경우, 즉 이전 프로미스가 이행하는 경우 이행한 값을 그대로 사용해 이행하는 새로운 프로미스를 반환합니다.

`Promise.prototype.then()`

프로미스에 이행과 거부 처리기 콜백을 추가하고, 콜백이 호출될 경우 그 반환값으로 이행하며 호출되지 않을 경우(`onFulfilled`, `onRejected` 중 상태에 맞는 콜백이 함수가 아닐 경우) 처리된 값과 상태 그대로 처리되는 새로운 프로미스를 반환합니다.

`Promise.prototype.finally()`

프로미스의 이행과 거부 여부에 상관없이 처리될 경우 항상 호출되는 처리기 콜백을 추가하고, 이행한 값 그대로 이행하는 새로운 프로미스를 반환합니다.

예제
--

### 기본 예제

```js
let myFirstPromise = new Promise((resolve, reject) => {
  // 우리가 수행한 비동기 작업이 성공한 경우 resolve(...)를 호출하고, 실패한 경우 reject(...)를 호출합니다.
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout(function () {
    resolve("성공!"); // 와! 문제 없음!
  }, 250);
});

myFirstPromise.then((successMessage) => {
  // successMessage는 위에서 resolve(...) 호출에 제공한 값입니다.
  // 문자열이어야 하는 법은 없지만, 위에서 문자열을 줬으니 아마 문자열일 것입니다.
  console.log("와! " + successMessage);
});
```

### 고급 예제

다음의 작은 예제는 `Promise`의 동작 방식을 보여줍니다. `testPromise()` 함수는 `<button>`을 클릭할 때마다 호출되며, `window.setTimeout()` (en-US)을 사용해 1~3초의 무작위 간격 이후 프로미스 횟수(1부터 시작하는 숫자)로 이행하는 프로미스를 생성합니다. `Promise()` 생성자는 프로미스를 만드는 데 쓰입니다.

프로미스 이행은 `p1.then()`을 사용하는 이행 콜백 세트를 통해 단순히 로그에 남습니다. 약간의 로그를 통해, 함수의 동기 부분이 비동기적 프로미스의 완료와 어떻게 분리되어 있는지 확인할 수 있습니다.

#### HTML

```html
<button id="btn">프로미스 만들기!</button>
<div id="log"></div>
```

#### JavaScript

```js
"use strict";
var promiseCount = 0;

function testPromise() {
  var thisPromiseCount = ++promiseCount;

  var log = document.getElementById("log");
  log.insertAdjacentHTML(
    "beforeend",
    thisPromiseCount + ") 시작 (<small>동기적 코드 시작</small>)<br/>",
  );

  // 새 프로미스 생성 - 프로미스의 생성 순서를 전달하겠다는 약속을 함 (3초 기다린 후)
  var p1 = new Promise(
    // 실행 함수는 프로미스를 이행(resolve)하거나
    // 거부(reject)할 수 있음
    function (resolve, reject) {
      log.insertAdjacentHTML(
        "beforeend",
        thisPromiseCount +
          ") 프로미스 시작 (<small>비동기적 코드 시작</small>)<br/>",
      );
      // setTimeout은 비동기적 코드를 만드는 예제에 불과
      window.setTimeout(
        function () {
          // 프로미스 이행 !
          resolve(thisPromiseCount);
        },
        Math.random() \* 2000 + 1000,
      );
    },
  );

  // 프로미스를 이행했을 때 할 일은 then() 호출로 정의하고,
  // 거부됐을 때 할 일은 catch() 호출로 정의
  p1.then(
    // 이행 값 기록
    function (val) {
      log.insertAdjacentHTML(
        "beforeend",
        val + ") 프로미스 이행 (<small>비동기적 코드 종료</small>)<br/>",
      );
    },
  ).catch(
    // 거부 이유 기록
    function (reason) {
      console.log("여기서 거부된 프로미스(" + reason + ")를 처리하세요.");
    },
  );

  log.insertAdjacentHTML(
    "beforeend",
    thisPromiseCount + ") 프로미스 생성 (<small>동기적 코드 종료</small>)<br/>",
  );
}

if ("Promise" in window) {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", testPromise);
} else {
  log = document.getElementById("log");
  log.innerHTML =
    "Live example not available as your browser doesn't support the <code>Promise<code> interface.";
}
```

이 예제는 버튼을 클릭하면 실행됩니다. `Promise`를 지원하는 브라우저가 필요합니다. 짧은 시간 안에 버튼을 여러 번 클릭하여, 서로 다른 프로미스가 번갈아 이행되는 것을 볼 수도 있습니다.

XHR로 이미지 불러오기
-------------

이미지를 로드하기 위해 `Promise` 및 `XMLHttpRequest`를 사용하는 또 다른 간단한 예는 MDN GitHub js-examples 저장소에서 이용할 수 있습니다. 실제 예를 볼 수도 있습니다. 각 단계에 주석이 붙어있어, 프로미스 및 XHR 구조를 차근차근 따라갈 수 있습니다.

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-promise-objects |

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

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

같이 보기
-----

* `core-js`의 `Promise` 폴리필
* 프로미스 사용하기
* Promises/A+ 명세
* JavaScript Promises: an introduction
* Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript


URIError - JavaScript

URIError
========

**`URIError`** 객체는 전역 URI 핸들링 함수가 잘못된 방식으로 사용되었을 때의 오류를 표현합니다.

생성자
---

`URIError()`

새로운 `URIError` 객체를 만듭니다.

인스턴스 속성
-------

`URIError.prototype.message`

 오류 메시지. 비록 ECMA-262에서 `RangeError`는 반드시 자체 `message` 속성을 제공해야한다고 명시했지만,
 SpiderMonkey는 `Error.prototype.message`를 상속합니다.

`URIError.prototype.name`

오류 이름. `Error`로부터 상속되었습니다.

`URIError.prototype.fileName`

오류가 발생한 파일 경로. `Error`로부터 상속되었습니다.

`URIError.prototype.lineNumber`

오류가 발생한 곳의 줄 위치. `Error`로부터 상속되었습니다.

`URIError.prototype.columnNumber`

오류가 발생한 곳의 열 위치. `Error`로부터 상속되었습니다.

`URIError.prototype.stack` (en-US)

스택 추적. `Error`로부터 상속되었습니다.

예제
--

### URIError 잡아내기

```js
try {
  decodeURIComponent("%");
} catch (e) {
  console.log(e instanceof URIError); // true
  console.log(e.message); // "malformed URI sequence"
  console.log(e.name); // "URIError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 2
  console.log(e.stack); // "@Scratchpad/2:2:3\n"
}
```

### URIError 생성하기

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

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-urierror |

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

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

같이 보기
-----

* `Error`
* `decodeURI()`
* `decodeURIComponent()`
* `encodeURI()`
* `encodeURIComponent()`


Uint32Array - JavaScript

Uint32Array
===========

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

생성자
---

`Uint32Array()`

새로운 `Uint32Array` 객체를 생성합니다.

정적 속성
-----

부모 `TypedArray`에서 정적 속성을 상속합니다.

`Uint32Array.BYTES_PER_ELEMENT`

요소 크기를 숫자로 반환합니다. `Uint32Array`의 경우 `4` 입니다.

`Uint32Array.name`

생성자 이름을 문자열로 반환합니다. `Uint32Array` 타입의 경우 `"Uint32Array"`입니다.

정적 메서드
------

부모 `TypedArray`에서 정적 메서드를 상속합니다.

인스턴스 속성
-------

부모 `TypedArray`에서 인스턴스 속성을 상속합니다.

`Uint32Array.prototype.BYTES_PER_ELEMENT`

요소 크기를 숫자 값으로 반환합니다. `Uint32Array`의 경우 `4`입니다.

인스턴스 메서드
--------

부모 `TypedArray`에서 인스턴스 메서드를 상속합니다.

예제
--

### Uint32Array을 생성하기 위한 각기 다른 여러 방법

```js
// 길이로부터 생성
const uint32 = new Uint32Array(2);
uint32[0] = 42;
console.log(uint32[0]); // 42
console.log(uint32.length); // 2
console.log(uint32.BYTES\_PER\_ELEMENT); // 4

// 배열로부터
const x = new Uint32Array([21, 31]);
console.log(x[1]); // 31

// 다른 TypedArray로부터
const y = new Uint32Array(x);
console.log(y[0]); // 21

// ArrayBuffer로부터
const buffer = new ArrayBuffer(32);
const z = new Uint32Array(buffer, 4, 4);
console.log(z.byteOffset); // 4

// 순회로부터
const iterable = (function\* () {
  yield\* [1, 2, 3];
})();
const uint32FromIterable = new Uint32Array(iterable);
console.log(uint32FromIterable);
// Uint32Array [1, 2, 3]
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # table-49 |

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

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

같이 보기
-----

* `core-js`에서 `Uint32Array` 폴리필
* JavaScript 형식화 배열
* `ArrayBuffer`
* `DataView`


ReferenceError - JavaScript

ReferenceError
==============

**`ReferenceError`** 객체는 현재 범위에서 존재하지 않거나 초기화되지 않은 변수를 참조했을 때 발생하는 에러를 나타냅니다.

`ReferenceError`는 직렬화 가능한 객체이기 때문에, `structuredClone()` 혹은 Workers 사이에서 `postMessage()` (en-US)를 사용하여 복사할 수 있습니다.

생성자
---

`ReferenceError()`

새로운 `ReferenceError` 객체를 생성합니다.

인스턴스 속성
-------

`ReferenceError.prototype.message`

오류 메시지. `Error`에서 상속되었습니다.

`ReferenceError.prototype.name`

오류 이름. `Error`에서 상속되었습니다.

`ReferenceError.prototype.cause`

오류 원인. `Error`에서 상속되었습니다.

`ReferenceError.prototype.fileName`
비표준

오류가 발생한 파일 경로. `Error`에서 상속되었습니다.

`ReferenceError.prototype.lineNumber`
비표준

오류가 발생한 곳의 파일 내 줄 수. `Error`에서 상속되었습니다.

`ReferenceError.prototype.columnNumber`
비표준

오류가 발생한 곳의 줄에서 열 위치. `Error`에서 상속되었습니다..

`ReferenceError.prototype.stack` (en-US)
비표준

스택 추적. `Error`에서 상속되었습니다.

예제
--

### ReferenceError 처리하기

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

### ReferenceError 생성하기

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

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-native-error-types-used-in-this-standard-referenceerror |

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

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

같이 보기
-----

* `Error`


Infinity - JavaScript

Infinity
========

**`Infinity`** 전역 속성은 무한대를 나타내는 숫자 값입니다.

시도해보기
-----

값
-

`Number.POSITIVE_INFINITY`와 동일한 숫자 값입니다.

| Property attributes of `Infinity` |
| --- |
| Writable | 불가능 |
| Enumerable | 불가능 |
| Configurable | 불가능 |

설명
--

`Infinity`는 전역 객체의 속성입니다. 즉, 전역 범위의 변수입니다.

`Infinity`(양의 무한대)는 다른 어떤 수보다 더 큽니다. 수학적인 무한대와는 일부 차이점이 있습니다. `Number.POSITIVE_INFINITY` 문서에서 더 알아보세요.

예제
--

### Infinity 사용하기

```js
console.log(Infinity); /\* Infinity \*/
console.log(Infinity + 1); /\* Infinity \*/
console.log(Math.pow(10, 1000)); /\* Infinity \*/
console.log(Math.log(0)); /\* -Infinity \*/
console.log(1 / Infinity); /\* 0 \*/
console.log(1 / 0); /\* Infinity \*/
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-value-properties-of-the-global-object-infinity |

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

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

같이 보기
-----

* `Number.NEGATIVE_INFINITY`
* `Number.POSITIVE_INFINITY`
* `Number.isFinite`


parseInt() - JavaScript

parseInt()
==========

**`parseInt()`** 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.

시도해보기
-----

구문
--

```js
parseInt(string);
parseInt(string, radix);
```

### 매개변수

`string`

파싱할 값입니다. 문자열이 아닐 경우 `ToString` 추상 연산을 사용해 문자열로 변환합니다. 문자열의 선행 공백은 무시합니다.

`radix` Optional

`string`의 진수를 나타내는 `2`부터 `36`까지의 정수입니다. 주의하세요. 기본 값이 `10`이 **아닙니다!** `Number` 자료형이 아닌 경우 `Number`로 변환합니다.

**경고:** `radix`를 생략할 경우 발생하는 일에 대해서는 아래 설명에서 자세히 알아볼 수 있습니다.

### 반환 값

주어진 `string`에서 파싱한 정수입니다.

다음과 같은 경우에는 `NaN`을 반환합니다.

* `radix`가 2보다 작거나 36보다 큰 경우.
* 공백이 아닌 첫 문자를 숫자로 변환할 수 없는 경우.
설명
--

`parseInt` 함수는 첫 번째 인자를 문자열로 변환하고, 그 값을 파싱하여 정수나 `NaN`을 반환합니다.

`NaN`을 반환할 것이 아니면, `parseInt`는 첫 번째 인자를 지정한 `radix` 진수로 표현한 정수를 반환합니다. 예를 들어 `radix`가 `10`인 경우 10진수, `8`인 경우는 8진수, `16`인 경우 16진수 등등으로 변환합니다.

`radix`가 `10`을 초과하는 경우, 영문 알파벳이 `9`보다 큰 숫자를 나타냅니다. 즉, 16진수에서는 `A`부터 `F`까지를 사용합니다.

만약 `parseInt` 함수가 지정한 `radix`에서의 숫자가 아닌 문자를 마주치는 경우 해당 문자 이전까지의 문자만 사용해 파싱하며 문제의 문자와 그 이후는 모두 무시합니다. `parseInt`는 정수 값을 반환하기 위해 소수점 이하 값을 잘라냅니다. 선행 및 후행 공백은 허용됩니다.

일부 숫자는 `6.022e23`(6.022 × 10^23)처럼 문자열 표현에 `e` 문자를 사용하기 때문에, `parseInt`를 매우 크거나매우 작은 숫자의 소수점 이하 값을 자르기 위해 사용하면 예기치 못한 결과가 발생할 수 있습니다. `parseInt`를 `Math.floor()`의 대체품으로 사용해서는 안됩니다.

`parseInt`는 양의 부호 `+`와 음의 부호 `-`를 인식합니다. 부호 인식은 선후행 공백을 제거한 후 첫 번째 단계로서 수행되며, 부호를 찾을 수 없으면 알고리즘은 다음 단계로 넘어갑니다. 부호를 찾은 경우 부호를 제거하고, 나머지 문자열에 대해 숫자 파싱을 진행합니다.

진수 인자로 지정한 값은 (필요한 경우) 숫자로 변환됩니다. 변환 후의 값이 0, `NaN`, `Infinity` 중 하나(`undefined`는 `NaN`으로 변환)라면 JavaScript는 다음을 가정합니다.

1. 입력 값이 "`0x`" 또는 "`0X`"(0과 대/소문자 X)로 시작하는 경우 `radix`를 `16`으로 간주하여 나머지 문자열을 16진수로 파싱합니다.
2. 입력 값이 그 외의 다른 값으로 시작하면 `radix`는 `10`(10진수)입니다.

이외에 진수 값이 [2, 36]의 범위를 벗어나는 경우 `parseInt`가 `NaN`을 반환합니다.

`NaN` 값은 모든 진수에서 숫자가 아닙니다. `parseInt`의 결과가 `NaN`인지 확인하려면 `isNaN`을 사용하세요. `NaN`을 산술 연산에 사용하면 연산 결과 역시 `NaN`이 됩니다.

숫자를 특정 진수의 문자열 리터럴로 변환하려면 `number.toString(radix)`를 사용하세요.

**경고:** `parseInt`는 `BigInt` 구문을 `Number`로 반환하므로 정확도를 잃습니다. 마지막 `n` 문자를 무시하기 때문입니다.

### 진수 없는 8진수 해석

2021년을 기준으로, 다음 내용은 최근 구현체에 해당하지 않습니다. 주의하세요.

ECMAScript 3부터 이미 권장되지 않았음에도 불구하고, 많은 ECMAScript 3 구현체는 `0`으로 시작하는 숫자형 문자열을 8진수로 해석했습니다. 다음 코드는 8진수 결과를 낼 수도 있고, 10진수 결과를 낼 수도 있었습니다.

```js
parseInt("0e0"); // 0
parseInt("08"); // 0, '8'은 8진수 숫자가 아니기 때문
```

ECMAScript 5 명세는 `parseInt` 구현이 `0`으로 시작하는 문자열을 8진수로 해석하는 것을 금지했습니다. 2021년 시점에선 많은 구현체가 이 동작을 적용했습니다.

```js
parseInt("0e0"); // 0
parseInt("08"); // 8
```

더 엄격한 파싱 함수
-----------

간혹 정수를 파싱할 수 있는 더 엄격한 방법이 필요할 때가 있습니다. 정규표현식이 도움이 될 수 있습니다.

```js
function filterInt(value) {
  if (/^[-+]?(\d+|Infinity)$/.test(value)) {
    return Number(value);
  } else {
    return NaN;
  }
}

console.log(filterInt("421")); // 421
console.log(filterInt("-421")); // -421
console.log(filterInt("+421")); // 421
console.log(filterInt("Infinity")); // Infinity
console.log(filterInt("421e+0")); // NaN
console.log(filterInt("421hop")); // NaN
console.log(filterInt("hop1.61803398875")); // NaN
console.log(filterInt("1.61803398875")); // NaN
```

예제
--

### parseInt 사용하기

다음은 모두 `15`를 반환합니다.

```js
parseInt("0xF", 16);
parseInt("F", 16);
parseInt("17", 8);
parseInt("015", 10); // parseInt('015', 8)이었다면 13을 반환
parseInt(15.99, 10);
parseInt("15,123", 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15 \* 3", 10);
parseInt("15e2", 10);
parseInt("15px", 10);
parseInt("12", 13);
```

다음은 모두 `NaN`을 반환합니다.

```js
parseInt("Hello", 8); // 숫자가 전혀 아님
parseInt("546", 2); // 0과 1을 제외한 숫자는 2진법에서 유효하지 않음
```

다음은 모두 `-15`를 반환합니다.

```js
parseInt("-F", 16);
parseInt("-0F", 16);
parseInt("-0XF", 16);
parseInt(-15.1, 10);
parseInt("-17", 8);
parseInt("-15", 10);
parseInt("-1111", 2);
parseInt("-15e1", 10);
parseInt("-12", 13);
```

다음은 모두 `4`를 반환합니다.

```js
parseInt(4.7, 10);
parseInt(4.7 \* 1e22, 10); // 매우 큰 숫자가 4가 됨
parseInt(0.00000000000434, 10); // 매우 작은 숫자가 4가 됨
```

숫자가 1e+21을 초과하거나 1e-7 미만인 경우 10진수에서 `1`을 반환합니다.

```js
parseInt(0.0000001, 10);
parseInt(0.000000123, 10);
parseInt(1e-7, 10);
parseInt(1000000000000000000000, 10);
parseInt(123000000000000000000000, 10);
parseInt(1e21, 10);
```

다음은 `224`를 반환합니다.

```js
parseInt("0e0", 16);
```

`BigInt` 값은 정확도를 잃습니다.

```js
parseInt("900719925474099267n");
// 900719925474099300
```

`parseInt`는 숫자 구분 기호 (en-US)와 함께 사용할 수 없습니다.

```js
parseInt("123\_456");
// 123
```

진수는 `Number`로 변환합니다.

```js
const obj = {
  valueOf() {
    return 8;
  },
};
parseInt("11", obj); // 9

obj.valueOf = function () {
  return 1;
};
parseInt("11", obj); // NaN

obj.valueOf = function () {
  return Infinity;
};
parseInt("11", obj); // 11
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-parseint-string-radix |

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

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

같이 보기
-----

* `parseFloat()`
* `Number.parseFloat()`
* `Number.parseInt()`
* `isNaN()`
* `Number.toString()`
* `Object.valueOf`


Math - JavaScript

Math
====

**`Math`** 는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다.

`Math`는 `Number` 자료형만 지원하며 `BigInt`와는 사용할 수 없습니다.

설명
--

다른 전역 객체와 달리 `Math`는 생성자가 아닙니다. `Math`의 모든 속성과 메서드는 정적입니다. 파이 상수는 `Math.PI`로 참조할 수 있고, 사인 함수는 매개변수 `x`에 대해 `Math.sin(x)`와 같이 호출할 수 있습니다. 상수는 JavaScript에서 가능한 최대 실수 정밀도로 정의되어 있습니다.

속성
--

`Math.E`

오일러의 상수이며 자연로그의 밑. 약 `2.718`.

`Math.LN2`

`2`의 자연로그. 약 `0.693`.

`Math.LN10`

`10`의 자연로그. 약 `2.303`.

`Math.LOG2E`

밑이 `2`인 로그 E. 약 `1.443`.

`Math.LOG10E`

밑이 `10`인 로그 E. 약 `0.434`.

`Math.PI`

원의 둘레와 지름의 비율. 약 `3.14159`.

`Math.SQRT1_2`

½의 제곱근. 약 `0.707`.

`Math.SQRT2`

`2`의 제곱근. 약 `1.414`.

메서드
---

**참고:** **참고:** 삼각 함수(`sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`)는 매개변수와 반환값 모두 호도법(라디안)을 사용합니다.

라디안 값을 각도 값으로 변환하려면 `(Math.PI / 180)`으로 나누세요. 반대로 각도 값에 곱하면 라디안 값이 됩니다.

**참고:** 많은 수의 `Math` 함수 정확도는 구현에 따라 다를 수 있습니다.

즉, 각 브라우저의 결과가 다를 수 있으며, 서로 같은 JS 엔진이라도 운영체제나 아키텍쳐에 따라서 불일치하는 값을 반환할 수 있습니다.

`Math.abs(x)`

숫자의 절댓값을 반환합니다.

`Math.acos(x)`

숫자의 아크코사인 값을 반환합니다.

`Math.acosh(x)`

숫자의 쌍곡아크코사인 값을 반환합니다.

`Math.asin(x)` (en-US)

숫자의 아크사인 값을 반환합니다.

`Math.asinh(x)` (en-US)

숫자의 쌍곡아크사인 값을 반환합니다.

`Math.atan(x)` (en-US)

숫자의 아크탄젠트 값을 반환합니다.

`Math.atanh(x)` (en-US)

숫자의 쌍곡아크탄젠트 값을 반환합니다.

`Math.atan2(y, x)` (en-US)

인수 몫의 아크탄젠트 값을 반환합니다.

`Math.cbrt(x)`

숫자의 세제곱근을 반환합니다.

`Math.ceil(x)`

인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.

`Math.clz32(x)` (en-US)

주어진 32비트 정수의 선행 0 개수를 반환합니다.

`Math.cos(x)` (en-US)

숫자의 코사인 값을 반환합니다.

`Math.cosh(x)` (en-US)

숫자의 쌍곡코사인 값을 반환합니다.

`Math.exp(x)`

E^x 를 반환합니다. *x*는 인수이며 E 는 오일러 상수(`2.718`...) 또는 자연로그의 밑입니다.

`Math.expm1(x)` (en-US)

`exp(x)`에서 `1`을 뺀 값을 반환합니다.

`Math.floor(x)`

인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다.

`Math.fround(x)`

인수의 가장 가까운 단일 정밀도 표현을 반환합니다.

`Math.hypot([x[, y[, …]]])` (en-US)

인수의 제곱합의 제곱근을 반환합니다.

`Math.imul(x, y)`

두 32비트 정수의 곱을 반환합니다.

`Math.log(x)`

숫자의 자연로그(e를 밑으로 하는 로그, 즉 ln) 값을 반환합니다.

`Math.log1p(x)` (en-US)

숫자 `x`에 대해 `1 + x`의 자연로그(e를 밑으로 하는 로그, ln) 값을 반환합니다.

`Math.log10(x)`

숫자의 밑이 10인 로그를 반환합니다.

`Math.log2(x)`

숫자의 밑이 2인 로그를 반환합니다.

`Math.max([x[, y[, …]]])`

0개 이상의 인수에서 제일 큰 수를 반환합니다.

`Math.min([x[, y[, …]]])`

0개 이상의 인수에서 제일 작은 수를 반환합니다.

`Math.pow(x, y)`

x의 y 제곱을 반환합니다.

`Math.random()`

0과 1 사이의 난수를 반환합니다.

`Math.round(x)`

숫자에서 가장 가까운 정수를 반환합니다.

`Math.sign(x)`

x의 양의 수인지 음의 수인지 나타내는 부호를 반환합니다.

`Math.sin(x)`

숫자의 사인 값을 반환합니다.

`Math.sinh(x)`

숫자의 쌍곡사인 값을 반환합니다.

`Math.sqrt(x)`

숫자의 제곱근을 반환합니다.

`Math.tan(x)`

숫자의 탄젠트 값을 반환합니다.

`Math.tanh(x)`

숫자의 쌍곡탄젠트 값을 반환합니다.

`Math.toSource()`
비표준

문자열 `"Math"`를 반환합니다.

`Math.trunc(x)`

숫자의 정수 부분을 반환합니다.

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-math-object |

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

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

같이 보기
-----

* `Number`


encodeURI() - JavaScript

encodeURI()
===========

**`encodeURI()`** 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나, 둘, 셋, 혹은 네 개의 연속된 이스케이프 문자로 나타냅니다. (두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네 개로 변환됩니다.)

시도해보기
-----

구문
--

```js
encodeURI(URI);
```

### 매개변수

`URI`

완전한 URI.

### 반환 값

주어진 문자열을 URI로서 인코딩한 새로운 문자열.

설명
--

`encodeURI()` 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다. 아래 예제는 "URI 도식"이 포함할 수 있는 모든 부분을 담고 있습니다. 일부 문자가 어떤 방식으로 특별한 의미를 주입하고 있는지 잘 살펴보세요.
```

http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor
```

따라서 `encodeURI()`는 완전한 URI를 형성하는데 필요한 문자는 인코딩 **하지 않습니다**. 또한, 예약된 목적을 가지지는 않지만 URI가 그대로 포함할 수 있는 몇 가지 문자("비예약 표식")도 인코딩 **하지 않습니다**. (RFC 2396을 참고하세요)

`encodeURI()` 는 다음 문자를 **제외**한 문자를 이스케이프 합니다.
```

이스케이프 하지 않는 문자:

    A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
```

`encodeURI()`와 `encodeURIComponent()`의 차이는 다음과 같습니다.

```js
var set1 = ";,/?:@&=+$#"; // 예약 문자
var set2 = "-\_.!~\*'()"; // 비예약 표식
var set3 = "ABC abc 123"; // 알파벳 및 숫자, 공백

console.log(encodeURI(set1)); // ;,/?:@&=+$#
console.log(encodeURI(set2)); // -\_.!~\*'()
console.log(encodeURI(set3)); // ABC%20abc%20123 (공백은 %20으로 인코딩)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -\_.!~\*'()
console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (공백은 %20으로 인코딩)
```

`encodeURI()` 혼자서는 `XMLHttpRequest` 등이 사용할, 적합한 HTTP `GET`과 `POST` 요청을 구성할 수 없습니다. `GET`과 `POST`에서 특별한 문자로 취급하는 `"&"`, `"+"`, `"="`를 인코딩 하지 않기 때문입니다. 그러나 `encodeURIComponent()`는 저 세 문자도 인코딩 대상에 포함합니다.

상위-하위 쌍을 이루지 않은 단일 대리 문자를 인코딩 시도하면 `URIError`가 발생합니다.

```js
// high-low pair ok
console.log(encodeURIComponent("\uD800\uDFFF"));

// lone high surrogate throws "URIError: malformed URI sequence"
console.log(encodeURIComponent("\uD800"));

// lone low surrogate throws "URIError: malformed URI sequence"
console.log(encodeURIComponent("\uDFFF"));
```

또한, URL의 보다 최신 RFC인 RFC3986을 따르고자 한다면, 대괄호가 IPv6 지원을 위해 추가로 예약됨에 따라 `encodeURI()`가 인코딩하지 않으므로 URL을 생성할 때 주의해야 합니다. 다음 예시 코드가 도움이 될 수도 있습니다.

```js
function fixedEncodeURI(str) {
  return encodeURI(str).replace(/%5B/g, "[").replace(/%5D/g, "]");
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-encodeuri-uri |

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

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

같이 보기
-----

* `decodeURI`
* `encodeURIComponent`
* `decodeURIComponent`