recursal/MDN huggingface dataset:
더하기 (+)
=======

더하기 연산자(`+`)는 숫자 피연산자의 합을 구하거나, 문자열을 서로 연결합니다.

시도해보기
-----

구문
--


```js
x + y
```

설명
--

`+` 연산자는 숫자 덧셈과 문자열 연결 두 가지 작업을 수행합니다. 계산 시에 먼저 두 개의 피연산자를 원시 타입으로 변환합니다. 그 후에, 두 피연산자의 타입을 확인합니다.

* 만약 한쪽의 피연산자가 문자열인 경우, 나머지 한쪽의 피연산자도 문자열로 변환시킨 뒤 연결합니다.
* 만약 두 피연산자가 모두 BigInt인 경우, BigInt 덧셈을 수행합니다. 만약 한쪽의 피연산자가 BigInt이지만 나머지 한쪽의 피연산자가 BigInt가 아닌 경우, `TypeError`가 발생합니다.
* 그 외의 경우, 두 피연산자를 모두 숫자로 변환시키고, 숫자 덧셈이 수행됩니다.

종종 템플릿 리터럴이나 `String.prototype.concat()`이 문자열 연결과 동일하다고 생각하지만, 그렇지 않습니다. 더하기 연산자는 먼저 `valueOf()`를 호출하여 표현식을 원시 타입으로 변환합니다. 반면에, 템플릿 리터럴과 `concat()`은 먼저 `toString()`을 호출합니다. 만약 표현식에 `@@toPrimitive` 메서드가 있는 경우, 문자열 연결은 `"default"`를 힌트로 사용하고, 템플릿 리터럴은 `"string"`을 사용합니다. 이 차이는 문자열과 원시 표현이 다른 객체에 중요합니다. 예를 들어 `valueOf()` 메서드가 에러를 내는 Temporal 같은 객체가 있습니다.


```js
const t = Temporal.Now.instant();
"" + t; // Throws TypeError
`${t}`; // '2022-07-31T04:48:56.113918308Z'
"".concat(t); // '2022-07-31T04:48:56.113918308Z'
```


문자열 변환을 위해 `"" + x`를 사용하는 것은 좋지 않습니다.

예제
--

### Number 덧셈


```js
// Number + Number -> 덧셈
1 + 2; // 3

// Boolean + Number -> 덧셈
true + 1; // 2

// Boolean + Boolean -> 덧셈
false + false; // 0
```

BigInt 덧셈
---------


```js
// BigInt + BigInt -> 덧셈
1n + 2n; // 3n

// BigInt + Number -> TypeError 발생
1n + 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions

// BigInt와 non-BigInt를 더하기 위해선, 피연산자 중 하나를 변환하십시오.
1n + BigInt(2); // 3n
Number(1n) + 2; // 3
```

### 문자열 연결


```js
// String + String -> 연결
"foo" + "bar"; // "foobar"

// Number + String -> 연결
5 + "foo"; // "5foo"

// String + Boolean -> 연결
"foo" + false; // "foofalse"
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-addition-operator-plus |

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

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

같이 보기
-----

* 빼기 연산자
* 나누기 연산자
* 곱하기 연산자
* 나머지 연산자
* 거듭제곱 연산자
* 증가 연산자
* 감소 연산자
* 단항 부정 연산자
* 단항 플러스 연산자
빼기 (-)
======

빼기 연산자(`-`)는 두 연산자의 차이를 구합니다.

시도해보기
-----

구문
--


```js
x - y;
```

예제
--

### 뺄셈


```js
5 - 3; // 2
3 - 5; // -2
```

### 숫자가 아닌 경우


```js
"foo" - 3; // NaN
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-subtraction-operator-minus |

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

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

같이 보기
-----

* 더하기 연산자
* 나누기 연산자
* 곱하기 연산자
* 나머지 연산자
* 거듭제곱 연산자
* 증가 연산자
* 감소 연산자
* 단항 부정 연산자
* 단항 플러스 연산자
Unsigned 오른쪽 시프트 할당 연산자 (>>>=)
==============================

**unsigned 오른쪽 시프트 할당(`>>>=`)** 연산자는 지정된 수 만큼 unsigned 오른쪽 시프트 연산 (en-US)을 수행하고 그 결과를 왼쪽 피연산자에 할당합니다.

시도해보기
-----

구문
--


```js
x >>>= y
```

설명
--

`x >>>= y` 는 `x = x >>> y`와 같은 의미를 가집니다.

예제
--

### unsigned 오른쪽 시프트 할당 연산자 사용


```js
let a = 5; // (00000000000000000000000000000101)
a >>>= 2; // 1 (00000000000000000000000000000001)

let b = -5; // (-00000000000000000000000000000101)
b >>>= 2; // 1073741822 (00111111111111111111111111111110)

let c = 5n;
c >>>= 2n; // 1n
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

같이 보기
-----

* Assignment operators in the JS guide
* Unsigned 오른쪽 시프트 연산자 (en-US)
나머지 할당 (%=)
===========

나머지 할당 연산자(`%=`)는 오른쪽 피연산자의 값으로 변수를 나눴을 때의 나머지를 다시 변수에 할당합니다.

시도해보기
-----

구문
--


```js
x %= y; // x = x % y
```

예제
--

### 나머지 할당 사용하기


```js
// bar = 5
// 위와 같은 변수를 가정할 때

bar %= 2; // 1
bar %= "foo"; // NaN
bar %= 0; // NaN
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

같이 보기
-----

* JavaScript 안내서의 할당 연산자
* 나머지 연산자
곱하기 할당 (\*=)
============

곱하기 할당 연산자(`*=`)는 오른쪽 피연산자의 값을 변수에 곱한 결과를 다시 변수에 할당합니다.

시도해보기
-----

구문
--


```js
x \*= y; // x = x \* y
```

예제
--

### 곱하기 할당 사용하기


```js
// bar = 5
// 위와 같은 변수를 가정할 때

bar \*= 2; // 10
bar \*= "foo"; // NaN
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

같이 보기
-----

* JavaScript 안내서의 할당 연산자
* 곱하기 연산자
함수 표현식
======

**`function`** 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.

또한 Function 생성자와 함수 선언(function declaration)을 이용해 함수를 정의할 수도 있습니다.

시도해보기
-----

구문
--


```js
    var myFunction = function [name]([param1[, param2[, ..., paramN]]]) { statements };
```


ES2015에서 화살표 함수(arrow functions)를 사용할 수도 있습니다.

### 매개변수

`name`

함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.

`paramN`

함수로 전달되는 인수(argument) 의 이름.

`statements`

함수 몸통을 구성하는 문(statement).

설명
--

함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 function 문 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 *익명* 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 IIFE (즉시 호출되는 함수 표현식)로 사용될 수 있습니다. 더 자세한 정보는 함수 장 참조.

### Function expression 끌어올리기

JavaScript에서 함수 표현식은 `함수 선언`과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.


```js
console.log(notHoisted); // undefined
//even the variable name is hoisted, the definition wasn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};
```

### 유명(named) 함수 표현식

함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. ***이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다***. 이로써 비표준 `arguments.callee` 속성을 사용하는 것을 피할 수도 있습니다.


```js
var math = {
  factit: function factorial(n) {
    console.log(n);
    if (n <= 1) return 1;
    return n \* factorial(n - 1);
  },
};

math.factit(3); //3;2;1;
```


함수가 할당된 변수는 `name` 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 화살표 함수(arrow functions)에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).


```js
var foo = function () {};
foo.name; // "foo"

var foo2 = foo;
foo2.name; // "foo"

var bar = function baz() {};
bar.name; // "baz"

console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // false (errors because baz == undefined)
```

Examples
--------

다음 예제는 이름 없는 함수를 정의하고 그 함수를 `x`에 할당합니다. 함수는 인수의 제곱을 반환합니다:


```js
var x = function (y) {
  return y \* y;
};
```


callback으로 더 자주 사용됩니다:


```js
button.addEventListener("click", function (event) {
  console.log("button is clicked!");
});
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-function-definitions |

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

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

참조
--

* `Arrow functions` (en-US)
* `Functions and function scope` (en-US)
* `Function`
* `function statement`
* `function* statement`
* `function* expression`
* `GeneratorFunction`
* `async function`
* `async function expression`
곱하기 (\*)
========

곱하기 연산자(`*`)는 두 연산자의 곱을 구합니다.

시도해보기
-----

구문
--


```js
x \* y;
```

예제
--

### 곱셈


```js
2 \* 2; // 4
-2 \* 2; // -4
```

### Infinity 곱하기


```js
Infinity \* 0; // NaN
Infinity \* Infinity; // Infinity
```

### 숫자가 아닌 경우


```js
"foo" \* 2; // NaN
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-multiplicative-operators |

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

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

같이 보기
-----

* 더하기 연산자
* 빼기 연산자
* 나누기 연산자
* 나머지 연산자
* 거듭제곱 연산자
* 증가 연산자
* 감소 연산자
* 단항 부정 연산자
* 단항 플러스 연산자
null
====

**`null`** 은 JavaScript의 원시 값 중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다.

시도해보기
-----

구문
--


```js
null;
```

설명
--

`null`은 리터럴로서 `null`이라 씁니다. `null`은 `undefined`과 같이 글로벌 객체의 속성에 대한 식별자가 아닙니다. 대신 `null`은 식별되지 않은 것을 표현합니다. 즉, 변수가 아무런 객체를 가리키지 않음을 표현합니다. API에서는 `null`을 종종 관련된 객체가 존재하지 않을 때 그 객체 대신 사용합니다.


```js
// 정의되지 않고 초기화된 적도 없는 foo
foo; //ReferenceError: foo is not defined

// 존재하지만 값이나 자료형이 존재하지 않는 foo
var foo = null;
foo; //null
```

### `null`과 `undefined`의 차이

`null` 또는 `undefined`를 검사할 때, 동등 연산자(==)와 일치 연산자(===)의 차이를 주의하세요. 동등 연산자는 자료형 변환을 수행합니다.


```js
typeof null; // "object" (하위호환 유지를 위해 "null"이 아님)
typeof undefined; // "undefined"
null === undefined; // false
null == undefined; // true
null === null; // true
null == null; // true
!null; // true
isNaN(1 + null); // false
isNaN(1 + undefined); // true
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-null-value |

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

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

같이 보기
-----

* `undefined`
* `NaN`
* `void` 연산자
await
=====

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
`await`연산자는 `Promise`를 기다리기 위해 사용됩니다. 연산자는 `async function` 내부에서만 사용할 수 있습니다.구문
--


```js
[rv] = await expression;
```


`expression`

`Promise` 혹은 기다릴 어떤 값입니다.

`rv`

`Promise`에 의해 만족되는 값이 반환됩니다. `Promise`가 아닌 경우에는 그 값 자체가 반환됩니다.

설명
--

`await` 문은 `Promise`가 fulfill되거나 `reject` 될 때까지 `async` 함수의 실행을 일시 정지하고, `Promise`가 fulfill되면 `async` 함수를 일시 정지한 부분부터 실행합니다. 이때 `await` 문의 반환값은 `Promise` 에서 fulfill된 값이 됩니다.

만약 `Promise`가 `reject`되면, `await` 문은 `reject`된 값을 `throw`합니다.

`await` 연산자 다음에 나오는 문의 값이 `Promise`가 아니면 해당 값을 resolved Promise로 변환시킵니다.

An `await` can split execution flow, allowing the caller of the `await`'s function to resume execution before the deferred continuation of the `await`'s function. After the `await` defers the continuation of its function, if this is the first `await` executed by the function, immediate execution also continues by returning to the function's caller a pending `Promise` for the completion of the `await`'s function and resuming execution of that caller.

예제
--

만약 `Promise`가 `await`에 넘겨지면, `await`은 `Promise`가 fulfill되기를 기다렸다가, 해당 값을 리턴합니다.


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

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();
```


`Thenable objects` will be fulfilled just the same.


```js
async function f2() {
  const thenable = {
    then: function (resolve, \_reject) {
      resolve("resolved!");
    },
  };
  console.log(await thenable); // resolved!
}

f2();
```


만약 값이 `Promise`가 아니라면, 해당 값은 `resolve`된 `Promise`로 변환되며 이를 기다립니다.


```js
async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();
```


만약 `Promise`가 `reject`되면, `reject`된 값이 `throw`됩니다.


```js
async function f3() {
  try {
    var z = await Promise.reject(30);
  } catch (e) {
    console.log(e); // 30
  }
}
f3();
```


try블럭 없이 rejected `Promise`다루기


```js
var response = await promisedFunction().catch((err) => {
  console.error(err);
});
// response will be undefined if the promise is rejected
```

명세서
---

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

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

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

See also
--------

* `async function`
* `async function expression`
* `AsyncFunction` object
나머지 (%)
=======

나머지 연산자(`%`)는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 구합니다. 부호는 항상 왼쪽 피연산자의 부호를 따릅니다.

시도해보기
-----

구문
--


```js
x % y;
```

예제
--

### 양의 피제수의 나머지


```js
12 % 5; // 2
1 % -2; // 1
1 % 2; // 1
2 % 3; // 2
5.5 % 2; // 1.5
```

### 음의 피제수의 나머지


```js
(-12 % 5) - // -2
  (1 % 2) - // -1
  (4 % 2); // -0
```

### NaN의 나머지


```js
NaN % 2; // NaN
```

### Infinity의 나머지


```js
Infinity % 2; // NaN
Infinity % 0; // NaN
Infinity % Infinity; // NaN
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-multiplicative-operators |

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

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

같이 보기
-----

* 더하기 연산자
* 빼기 연산자
* 나누기 연산자
* 곱하기 연산자
* 거듭제곱 연산자
* 증가 연산자
* 감소 연산자
* 단항 부정 연산자
* 단항 플러스 연산자
거듭제곱 할당 (\*\*=)
===============

거듭제곱 할당 연산자(`**=`)는 오른쪽 피연산자의 값으로 변수를 거듭제곱한 결과를 다시 변수에 할당합니다.

시도해보기
-----

구문
--


```js
x \*\*= y; // x = x \*\* y
```

예제
--

### 거듭제곱 할당 사용하기


```js
// bar = 5
// 위와 같은 변수를 가정할 때

bar \*\*= 2; // 25
bar \*\*= "foo"; // NaN
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-assignment-operators |

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

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

같이 보기
-----

* JavaScript 안내서의 할당 연산자
* 거듭제곱 연산자
yield
=====

`yield` 키워드는 제너레이터 함수 (`function*` 또는 레거시 generator (en-US) 함수)를 중지하거나 재개하는데 사용됩니다.

문법
--


```js
[rv] = yield [expression];
```


`expression`

제너레이터 함수에서 제너레이터 프로토콜을 통해 반환할 값을 정의합니다. 값이 생략되면, `undefined를 반환합니다.`

`rv`

제너레이터 실행을 재개 하기 위해서, optional value을 제너레이터의 `next()` 메서드로 전달하여 반환합니다.

설명
--

`yield 키워드`는 제너레이터 함수의 실행을 중지시키거나 그리고 `yield` 키워드 뒤에오는 표현식[expression]의 값은 제너레이터의 caller로 반환된다. 제너레이터 버전의 `return` 키워드로 생각 할 수 있다.

`yield` 키워드는 실질적으로 value 와 done 이라는 두 개의 속성을 가진 `IteratorResult` 객체를 반환한다. `value` 속성은 `yield` 표현(expression)의 실행 결과를 나타내고, `done` 속성은 제너레이터 함수가 완전히 종료되었는지 여부를 불린(Boolean) 형태로 보여줍니다.

yield 표현식에서 중지되면 ,제너레이터의 next()가 메서드가 호출될 때까지 제너레이터의 코드 실행이 중지된다. 제너레이터의 next()메서드를 호출할 때마다 제너레이터는 실행을 재개하며 그리고 다음의 같은 경우에 진행될 때 실행된다:

* `yield 는` 제너레이터가 한번 멈추게 하고 제너레이터의 새로운 값을 반환한다. 다음번의 next()가 호출된 후, yield 이후에 선언된 코드가 바로 실행된다.
* `throw`는 제네레이터에서 예외를 설정할 때 사용된다. 예외가 발생할 경우 제너레이터의 전체적으로 실행이 중지되고, 그리고 다시 켜는 것이 일반적으로 실행됩니다.
* 제너레이터 함수가 종료가 되었다; 이 경우, 제너레이터 실행이 종료되고 `IteratorResult` 는 `caller` 로 값이 `undefined`이고 done의 값이 true 로 리턴한다.
* `return` 문에 도달했다. 이 경우에는, 이 값이 종료되고 `IteratorResult` 는 `caller` 로 `return` 문에 의해 반환되는 값과 done의 값이 true 로 리턴한다.

만약에 optional value가 제너레이터의 next() 메서드로 전달되면, optional value는 제너레이터의 현재 yield의 연산으로 반환되는 값이 된다.

generator 코드 경로, yield연산자, `Generator.prototype.next()`에 이르기까지 새로운 시작 값을 지정할 수 있는 능력과 제네레이터는 커다란 힘과 제어를 제공한다.

예시
--

다음 코드는 제너레이터 함수의 선언의 예시이다.


```js
function\* foo() {
  var index = 0;
  while (index <= 2)
    // when index reaches 3,
    // yield's done will be true
    // and its value will be undefined;
    yield index++;
}
```


제너레이터 함수가 정의되면 , 아래 코드와 보여지는 것처럼 iterator로 만들어 사용할 수 있다.


```js
var iterator = foo();
console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # prod-YieldExpression |

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

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

See also
--------

* The Iterator protocol (en-US)
* `function*`
* `function* expression`
* `yield*`
나누기 (/)
=======

나누기 연산자(`/`)는 왼쪽 피연산자를 피제수, 오른쪽 피연산자를 제수로 하여 몫을 구합니다.

시도해보기
-----

구문
--


```js
x / y;
```

예제
--

### 기본 나눗셈


```js
1 / 2; // 0.5

Math.floor(3 / 2); // 1

1.0 / 2.0; // 0.5
```

### 0으로 나누기


```js
2.0 / 0; // Infinity

2.0 / 0.0; // Infinity, 0.0 === 0이기 때문

2.0 / -0.0; // -Infinity
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-multiplicative-operators |

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

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

같이 보기
-----

* 더하기 연산자
* 빼기 연산자
* 곱하기 연산자
* 나머지 연산자
* 거듭제곱 연산자
* 증가 연산자
* 감소 연산자
* 단항 부정 연산자
* 단항 플러스 연산자
static
======

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

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

* Learn more
* See full compatibility
* Report feedback
**static** 키워드는 클래스의 정적 메서드를 정의합니다.

시도해보기
-----

문법
--
```

    static methodName() { ... }
```

설명
--

정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.

정적 메서드의 호출
----------

#### 다른 정적 메서드에서의 호출

동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 `this`를 사용할 수 있다.


```js
class StaticMethodCall {
  static staticMethod() {
    return "Static method has been called";
  }
  static anotherStaticMethod() {
    return this.staticMethod() + " from another static method";
  }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'
```

### 클래스 생성자 및 다른 메서드에서의 호출

정적 메서드가 비정적 메서드에서 키워드`this` 를 써서는 직접적인 접근을 할 수 없다. 바른 호출 방법은 클래스 명칭을 쓰거나, 즉 `CLASSNAME.STATIC_METHOD_NAME()` 을 이용하거나 혹은 그 메서드를 생성자의 한 속성으로 부르는 것으로, 즉 `constructor` : `this.constructor.STATIC_METHOD_NAME()`를 이용한다.


```js
class StaticMethodCall {
  constructor() {
    console.log(StaticMethodCall.staticMethod());
    // 'static method has been called.'

    console.log(this.constructor.staticMethod());
    // 'static method has been called.'
  }

  static staticMethod() {
    return "static method has been called.";
  }
}
```

예제
--

아래 예제는 여러가지 내용을 설명합니다.

1. 어떻게 정적 메서드가 클래스에서 구현되는지
2. 클래스의 정적 맴버가 서브클래스화 되는 것을 보여줍니다.
3. 정적 메서드가 어떤 경우에 호출 될 수 있는지와 없는지를 설명합니다.


```js
class Triple {
  static triple(n) {
    n = n || 1; //비트연산이 아니어야 합니다.
    return n \* 3;
  }
}

class BiggerTriple extends Triple {
  static triple(n) {
    return super.triple(n) \* super.triple(n);
  }
}

console.log(Triple.triple()); // 3
console.log(Triple.triple(6)); // 18
console.log(BiggerTriple.triple(3)); // 81
var tp = new Triple();
console.log(BiggerTriple.triple(3)); // 81 (부모의 인스턴스에 영향을 받지 않습니다.)
console.log(tp.triple()); // 'tp.triple은 함수가 아닙니다.'.
console.log(tp.constructor.triple(4)); // 12
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-class-definitions |

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

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

참고
--

* `class` expression
* `class` declaration
* Classes
Class static initialization blocks
==================================

**클래스 정적 초기화 블록**은 필드별 초기화를 사용하는 것보다 더 유연하게 `정적` 속성을 초기화 하는 `클래스`의 특수 기능입니다.

정적 블록을 사용하면 초기화 중에 명령문을 실행할 수 있으며, 이를 통해 `try...catch`를 포함하거나 단일 값에서 여러 필드를 설정하는 초기화 등을 가능하게 합니다.

 초기화는 현재 클래스의 선언 컨텍스트에서 프라이빗 상태에 대한 특별한 권한으로 수행됩니다.
 이는 정적 블록을 사용하여 인스턴스 프라이빗 필드가 있는 클래스와 같은 범위에서 선언된 다른 클래스 또는 함수 간에 정보를 공유할 수도 있음을 의미합니다. (C++의 "friend" 클래스와 유사)

시도해보기
-----

구문
--


```js
static { /\* … \*/ }
```

설명
--

`클래스`는 클래스 본문에 `static {}` 초기화 블록을 얼마든지 가질 수 있습니다.
 이들은 선언된 순서대로 인터리브된 정적 필드 이니셜라이저와 함께 계산됩니다.
 super 클래스의 정적 초기화는 하위 클래스보다 먼저 수행됩니다.

 정적 블록 내부에 선언된 변수의 범위는 해당 블록에 대한 로컬입니다.
 `static {}` 초기화 블록에서 선언된 `var`, `function`, `const` 또는 `let`은 해당 블록에 대해 로컬이므로 블록의 모든 `var` 선언은 호이스트 되지 않습니다.


```js
var y = "외부 y";

class A {
  static field = "내부 y";
  static {
    var y = this.field;
  }
}

// 정적 블록에서 정의된 var는 호이스티되지 않음
console.log(y);
// > '외부 y'
```


 정적 블록 내부의 `this`는 클래스의 생성자 객체를 참조합니다.
 `super.<property>`는 super 클래스의 속성에 액세스하는 데 사용할 수 있습니다.
 그러나 클래스 정적 초기화 블록에서 `super()`를 호출하거나 클래스 생성자 함수의 인수에 접근하려고 시도하는 것은 구문 오류라는 것을 알아두세요.

정적 블록의 범위는 클래스 본문의 lexical scope 내에 중첩되어 클래스의 프라이빗 인스턴스 변수에 접근할 수 있습니다.

정적 초기화 블록에는 데코레이터가 없을 수 있습니다. (클래스 자체는 있을 수 있음)

예제
--

### 다중 블록

 아래 코드는 정적 초기화 블록과 인터리브된 정적 필드 이니셜라이저가 있는 클래스를 보여줍니다.
 출력은 블록과 필드가 실행 순서대로 계산되었음을 보여줍니다.


```js
class MyClass {
  static field1 = console.log("필드1 호출됨");
  static {
    console.log("1번 정적 클래스 블록 호출됨");
  }
  static field2 = console.log("필드2 호출됨");
  static {
    console.log("2번 정적 클래스 블록 호출됨");
  }
}

/\*
> "필드1 호출됨"
> "1번 정적 클래스 블록 호출됨"
> "필드2 호출됨"
> "2번 정적 클래스 블록 호출됨"
\*/
```


super 클래스의 정적 초기화는 하위 클래스보다 먼저 수행됩니다.

### this와 super 사용하기

 정적 블록 내부의 `this`는 클래스의 생성자 객체를 참조합니다.
 이 코드는 퍼블릭 정적 필드에 접근하는 방법을 보여줍니다.


```js
class A {
  static field = "정적 필드";
  static {
    console.log(this.field);
  }
}
```


`super.property`는 `static` 블록 내에서 super 클래스의 속성을 참조하는 데 사용할 수 있습니다.
 여기에는 아래와 같이 정적 속성이 포함됩니다.


```js
class A {
  static fieldA = "A.fieldA";
}
class B extends A {
  static {
    console.log(super.fieldA);
    // 'A.fieldA'
  }
}
```

### 프라이빗 필드에 접근하기

아래의 예제는 클래스 외부의 객체에서 클래스의 프라이빗 객체에 대한 액세스 권한을 부여하는 방법을 보여줍니다. (v8.dev blog 블로그의 예제).


```js
let getDPrivateField;

class D {
  #privateField;
  constructor(v) {
    this.#privateField = v;
  }
  static {
    getDPrivateField = (d) => d.#privateField;
  }
}

getDPrivateField(new D("private"));
// > private
```

### 제2의 해결책

ES13 이전에는 정적 초기화를 수행하기 위해 다른 속성 다음에 호출되는 정적 메서드를 사용하거나 클래스 외부에 있는 초기화 메서드를 사용하는 복잡한 초기화를 진행했습니다.

두 경우 모두 접근 방식이 우아하지않고 클래스의 프라이빗 메서드에 대한 접근 권한을 부여하는것이 아니었습니다.

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # prod-ClassStaticBlock |

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

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

같이 보기
-----

* Class static initialization blocks (v8.dev blog)
* ES2022 feature: class static initialization blocks (2ality.com blog)
* Classes
* `super()`
* Object.prototype.constructor
extends
=======

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

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

* Learn more
* See full compatibility
* Report feedback
**`extends`** 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용됩니다.

시도해보기
-----

구문
--
```

    class ChildClass extends ParentClass { ... }
```

설명
--

`extends` 키워드는 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있습니다.

확장( 클래스)의 `.prototype`은 `Object` 또는 `null`이어야 합니다.

예
-

### `extends` 사용하기

첫 번째 예는 `Polygon` 클래스로부터 `Square` 클래스를 만듭니다. 이 예는 live demo (source)에서 발췌했습니다.


```js
class Square extends Polygon {
  constructor(length) {
    // 여기서, length와 함께 부모 클래스의 생성자를 호출
    // Polygon의 너비 및 높이가 제공됨
    super(length, length);
    // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를
    // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다.
    this.name = "Square";
  }

  get area() {
    return this.height \* this.width;
  }

  set area(value) {
    this.area = value;
  }
}
```

### 내장 객체에 `extends` 사용하기

이 예제는 내장 객체 `Date`를 확장합니다. 이 예제는 live demo (source)에서 발췌했습니다.


```js
class myDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ];
    return (
      this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear()
    );
  }
}
```

### `null` 확장

`null`에서 확장은 prototype 객체가 `Object.prototype` (en-US)으로부터 상속받지 않은 것을 제외하면 보통 클래스처럼 동작합니다.


```js
class nullExtends extends null {
  constructor() {}
}

Object.getPrototypeOf(nullExtends); // Function.prototype
Object.getPrototypeOf(nullExtends.prototype); // null
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-class-definitions |

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

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

참조
--

* Classes
* super