recursal/MDN huggingface dataset:
설정자
===

**`set`** 구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩합니다.

시도해보기
-----

구문
--


```js
{set prop(val) { . . . }}
{set [expression](val) { . . . }}
```

### 매개변수

`prop`

주어진 함수를 바인딩할 속성 이름.

`val`

`prop`에 할당을 시도한 값.

`expression`

ECMAScript 2015 이후, 주어진 함수를 바인딩할 속성 이름을 구하는 표현식을 사용할 수도 있습니다.

설명
--

JavaScript의 설정자(*setter*)를 사용하면 지정한 속성 값의 변경을 시도할 때마다 함수를 호출할 수 있습니다. 설정자는 보통 접근자(*getter*)와 함께 '유사 속성'을 정의할 때 사용합니다. 어떤 속성에 설정자를 바인딩하는 동시에, 해당 속성이 값도 가지도록 할 수는 없습니다.

`set` 구문을 이용할 때는 다음 사항을 주의하세요.

* 설정자의 식별자는 숫자나 문자열일 수 있습니다.
* 설정자 함수는 최대 한 개의 매개변수만 가질 수 있습니다.
* 객체 리터럴에서, 같은 속성 키에 다수의 설정자를 바인딩할 수 없습니다.

```js
{
  set x() { }, set x() { }
}
```

* 객체 리터럴에서, 설정자는 데이터 속성과 같은 키를 사용할 수 없습니다.

```js
{
  x: ..., set x() { }
}
```

예제
--

### 객체 초기자에서 새로운 객체의 설정자 정의하기

다음 예제는 객체 `language`에 유사 속성 `current`를 생성합니다. `current`에 값을 할당하면, 해당 값을 `log` 속성에 저장합니다.


```js
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: [],
};

language.current = "EN";
console.log(language.log); // ['EN']

language.current = "FA";
console.log(language.log); // ['EN', 'FA']
```


`current`의 값은 정의하지 않았으므로, 할당이 아니라 접근을 시도하면 `undefined`만 반환하는 것에 주의하세요.

### `delete` 연산자로 설정자 제거하기

접근자를 삭제하려면 간단히 `delete` (en-US) 연산자를 사용하세요.


```js
delete language.current;
```

### `defineProperty`를 이용해 이미 존재하는 객체에 설정자 정의하기

이미 존재하는 객체에 설정자를 추가하려면 `Object.defineProperty()`를 사용하세요.


```js
const o = { a: 0 };

Object.defineProperty(o, "b", {
  set: function (x) {
    this.a = x / 2;
  },
});

o.b = 10;
// 설정자 실행, a 속성에 10 / 2 = 5 할당

console.log(o.a);
// 5
```

### 계산된 속성 이름 사용하기


```js
const expr = "foo";

const obj = {
  baz: "bar",
  set [expr](v) {
    this.baz = v;
  },
};

console.log(obj.baz);
// "bar"

obj.foo = "baz";
// run the setter

console.log(obj.baz);
// "baz"
```

명세
--

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

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

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

See also
--------

* 접근자
* `delete` (en-US)
* `Object.defineProperty()`
* `Object.prototype.__defineGetter__()`
* `Object.prototype.__defineSetter__()` (en-US)
* JavaScript 안내서의 접근자와 설정자 정의하기
arguments[@@iterator]()
=======================

**`@@iterator`** 속성의 초기값은 `Array.prototype.values` 속성의 초기값과 같은 함수 객체입니다.

구문
--
```

arguments[Symbol.iterator]()
```

예제
--

### `for...of` 반복문을 사용한 반복


```js
function f() {
  // 브라우저가 for...of 반복문과
  // for 반복문 안의 let 범위의 변수를 지원해야 합니다.
  for (let letter of arguments) {
    console.log(letter);
  }
}
f("w", "y", "k", "o", "p");
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-createunmappedargumentsobject |
| ECMAScript Language Specification # sec-createmappedargumentsobject |

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

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

같이 보기
-----

* `Array.prototype.values()`
arguments.length
================

**`arguments.length`** 속성은 함수에 전달된 인수의 수를 포함하고 있습니다.

구문
--
```

    arguments.length
```

설명
--

arguments.length 속성은 실제로 함수에 전달된 arguments 의 수를 제공합니다. 이것은 정의된 매개변수의 수보다 작을 수도 클 수도 있습니다. (`Function.length` 보기).

예제
--

### `arguments.length` 사용하기

이 예시에서는 둘 또는 그 이상의 수를 더할 수 있는 함수를 정의합니다.


```js
function adder(base /\*, n2, ... \*/) {
  base = Number(base);
  for (var i = 1; i < arguments.length; i++) {
    base += Number(arguments[i]);
  }
  return base;
}
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-arguments-exotic-objects |

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

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

같이 보기
-----

* `Function`
* `Function.length`
쉼표 연산자
======

**쉼표 연산자**는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환합니다.

시도해보기
-----

구문
--


```js
    expr1, expr2, expr3...
```

### 매개변수

`expr1`, `expr2, expr3...`

아무 표현식.

설명
--

단일 표현식을 요구하는 곳에 복수의 표현식을 사용하고 싶을 때 쉼표 연산자를 사용할 수 있습니다. 가장 흔히 사용되는 곳은 `for` 반복문에 다수의 매개변수를 제공할 때입니다.

쉼표 연산자는 배열, 객체, 함수의 매개변수와 호출 인수에서 사용하는 쉼표와는 전혀 다릅니다.

예제
--

`a`를 한 행에 10개의 요소를 가진 2차원 배열이라고 가정할 때, 아래 예제는 쉼표 연산자를 사용해 한 번에 `i`는 증가시키고 `j`는 감소시킵니다.

다음 코드는 2차원 배열의 대각선에 위치하는 요소의 값을 출력합니다.


```js
for (let i = 0, j = 9; i <= 9; i++, j--) {
  console.log(`a[${i}][${j}] = ${a[i][j]}`);
}
```


쉼표 연산자를 할당에 사용하면, 할당 연산이 표현식에 포함되지 않아 예상한 결과와는 다소 다를 수 있습니다. 다음 예제에서, `a`는 `b = 3`의 값(3)을 할당받지만, `c = 4` 표현식 역시 평가되어 콘솔에 기록됩니다. 연산자 우선순위와 결합성 때문입니다.


```js
var a, b, c;

(a = b = 3), (c = 4); // 콘솔에는 4를 반환
console.log(a); // 3 (제일 왼쪽)

var x, y, z;

x = ((y = 5), (z = 6)); // 콘솔에는 6을 반환
console.log(x); // 6 (제일 오른쪽)
```

### 연산 후 반환

쉼표 연산자를 사용하는 다른 방법은 값을 반환하기 전에 연산을 수행하는 것입니다. 쉼표 연산자는 마지막 표현식의 평가 결과만 반환하지만, 이전 피연산자에 대해서도 평가는 수행하므로 다음과 같은 코드를 작성할 수 있습니다.


```js
function myFunc() {
  var x = 0;

  return (x += 1), x; // ++x 와 같은 효과
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-comma-operator |

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

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

같이 보기
-----

* `for` 반복문
논리적 AND (&&)
============

**논리적 AND (`&&`)** (논리적 연결) 연산자는 모든 불리언 피연산자가 `true`가 되었을 때 해당 피연산자의 집합은`true`가
 됩니다.

 보다 일반적으로 왼쪽에서 오른쪽으로 평가할 때 연산자는 처음으로 만나는 거짓 같은 피연산자의
 값을 반환합니다. 혹은 모두 참 같은 값이라면 마지막 피연산자의 값을 반환합니다.

시도해보기
-----

구문
--


```js
expr1 && expr2
```

설명
--

 논리적 AND (`&&`)은 피연산자를 왼쪽에서 오른쪽으로 평가하면서 첫 거짓 같은 피연산자를
 만나면 즉시 그 값을 반환합니다. 만약 모든 값이 참 같은 값이라면 마지막 피연산자의 값이
 반환됩니다.

 만약 어떤 값이 `true`로 변환 가능하다면 그 값은 소위 참 같은 값(truthy)이라
 합니다. 만약 어떤 값이 `false`로 변환 가능하다면 그 값은 소위 거짓 같은 값(falsy)
 이라고 합니다.

거짓으로 변환될 수 있는 표현식의 예제는 아래와 같습니다.

* `false`;
* `null`;
* `NaN`;
* `0`;
* 빈 문자열 (`""` or `''` or ````);
* `undefined`.

AND 연산자는 불리언이 아닌 값을 보존하고 다음과 같이 반환합니다.


```js
result = "" && "foo"; // result 에 ""(빈 문자열)이 할당됩니다
result = 2 && 0; // result 에 0 이 할당됩니다
result = "foo" && 4; // result 에 4 가 할당됩니다.
```


`&&` 연산자는 불리언이 아닌 피연산자와 함께 사용할 수 있지만, 반환 값은 항상 원시형 불리언으로
 변환할 수 있기 때문에 불리언 연산자로 간주합니다. 반환값이나 어떠한 일반적인 표현식을 명시적으로 해당 불리언 값으로 변환하려면 이중
 `NOT 연산자`를 사용하거나
 `Boolean` 생성자를 사용하시기 바랍니다.

### 단락 평가

 논리적 AND 표현식은 단락(short-circuit, 혹은 단축) 연산자입니다. 각 피연산자는 불리언으로 변환되므로, 어떤 변환이
 `false`로 판별되면 AND 연산자는 그 즉시 멈추고 거짓으로 판별된 피연산자의 원래의 값을 반환합니다. 나머지 피연산자는
 평가하지 **않습니다**.

아래 유사 코드를 고려해보세요.
```

(some falsy expression) && expr
```


 첫 번째 피연산자 `(some falsy expression)`은 거짓 같은 값으로 평가되기
 때문에, `expr` 부분은 **절대 평가되지 않습니다**. 만약 `expr`이 함수라면 해당 함수는 절대 실행되지 않습니다.

아래 예제를 참고하세요.


```js
function A() {
  console.log("called A");
  return false;
}
function B() {
  console.log("called B");
  return true;
}

console.log(A() && B());
// 함수 A를 호춣했기 때문에 "called A" 로그가 콘솔에 남습니다.
// && 은 false 를 평가해서 (함수 A는 false를 반한합니다) false이 콘솔에 로깅됩니다.
// AND 연산자는 단락 평가가 가능하기 때문에 함수 B를 무시합니다.
```

### 연산자 우선순위

 AND 연산자는 OR 연산자보다 높은 우선 순위를 가지며, 이는 `&&` 연산자가 `||` 연산자보다 먼저 실행된다는 것을 의미합니다.
 (연산자 우선순위참고).


```js
true || (false && false); // returns true
true && (false || false); // returns false
2 === 3 || (4 < 0 && 1 === 1); // returns false
```

예제
--

### AND 사용하기

다음 코드는 `&&`(논리적 AND) 연산자의 예를 보여줍니다.


```js
a1 = true && true; // t && t returns true
a2 = true && false; // t && f returns false
a3 = false && true; // f && t returns false
a4 = false && 3 === 4; // f && f returns false
a5 = "Cat" && "Dog"; // t && t returns "Dog"
a6 = false && "Cat"; // f && t returns false
a7 = "Cat" && false; // t && f returns false
a8 = "" && false; // f && f returns ""
a9 = false && ""; // f && f returns false
```

### 불리언을 위한 변환 규칙

#### AND를 OR로 변환하기

**불리언**을 포함하는 아래 연산은


```js
bCondition1 && bCondition2;
```


언제나 아래와 같습니다.


```js
!(!bCondition1 || !bCondition2);
```


#### OR을 AND로 변환하기

**불리언**을 포함하는 다음 연산은


```js
bCondition1 || bCondition2;
```


언제나 아래와 같습니다.


```js
!(!bCondition1 && !bCondition2);
```

### 중첩된 괄호 제거

논리적 표현식은 왼쪽에서 오른쪽으로 평가되기 때문에 특정 규칙을 따르는 경우 복잡한 식에서 괄호를 제거할 수 있습니다.

**불리언**을 포함하는 다음 복합적 연산은


```js
bCondition1 || (bCondition2 && bCondition3);
```


언제나 다음과 같습니다.


```js
bCondition1 || (bCondition2 && bCondition3);
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # prod-LogicalANDExpression |

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

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

같이 보기
-----

* `Boolean`
* Truthy
* Falsy
더하기 할당 (+=)
===========

 더하기 할당 연산자(`+=`)는 오른쪽 피연산자의 값을 변수에 더한 결과를 다시 변수에 할당합니다. 두 피연산자의
 타입이 더하기 할당 연산자의 동작을 결정하며, 덧셈 또는 문자열 연결이 가능합니다.

시도해보기
-----

구문
--


```js
x += y; // x = x + y
```

예제
--

### 더하기 할당 사용하기


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

// Number + Number -> 덧셈
bar += 2; // 7

// Boolean + Number -> 덧셈
baz += 1; // 2

// Boolean + Boolean -> 덧셈
baz += false; // 1

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

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

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

명세
--

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

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

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

같이 보기
-----

* JavaScript 안내서의 할당 연산자
* 더하기 연산자
class 식
=======

**class 표현식**은 ECMAScript 2015 (ES6)에서 클래스를 정의하는 한 방법입니다. function 식과 비슷하게, class 식은 기명(named) 또는 익명(unnamed)일 수 있습니다. 기명인 경우, 클래스명은 클래스 본체(body)에서만 지역(local)입니다. JavaScript 클래스는 프로토타입(원형) 기반 상속을 사용합니다.

시도해보기
-----

구문
--


```js
    var MyClass = class [className] [extends] {
      // class body
    };
```

설명
--

class 식은 class 문과 구문이 비슷합니다. 그러나, class 식의 경우 클래스명("binding identifier")을 생략할 수 있는데 class 문으로는 할 수 없습니다.

class 문과 같이, class 식의 본체는 엄격 모드에서 실행됩니다.

예제
--

### 간단한 class 식

이게 바로 변수 "Foo"를 사용하여 참조할 수 있는 간단한 익명 class 식입니다.


```js
var Foo = class {
  constructor() {}
  bar() {
    return "Hello World!";
  }
};

var instance = new Foo();
instance.bar(); // "Hello World!"
Foo.name; // ""
```

### Named class 식

당신이 클래스 몸통 내에서 현재 클래스를 참조하고 싶다면, 유명 class 식을 만들 수 있습니다. 이 이름은 오직 class 식 자체 범위에서만 볼 수 있습니다.


```js
var Foo = class NamedFoo {
  constructor() {}
  whoIsThere() {
    return NamedFoo.name;
  }
};
var bar = new Foo();
bar.whoIsThere(); // "NamedFoo"
NamedFoo.name; // ReferenceError: NamedFoo가 정의되지 않음
Foo.name; // "NamedFoo"
```

명세
--

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

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

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

같이 보기
-----

* `function` 식
* `class` 문
* Classes
빼기 할당 (-=)
==========

빼기 할당 연산자(`-=`)는 오른쪽 피연산자의 값을 변수에서 뺀 결과를 다시 변수에 할당합니다.

시도해보기
-----

구문
--


```js
x -= y; // x = x - y
```

예제
--

### 빼기 할당 사용하기


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

bar -= 2; // 3
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 안내서의 할당 연산자
* 빼기 연산자
async function 표현식
==================

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
**`async function`** 키워드는 표현식 내에서 `async` 함수를 정의하기 위해 사용됩니다.

또한 async function statement을 사용하여 async 함수를 정의할 수 있습니다.

문법
--


```js
  async function (param0) {
    statements
  }

  async function (param0, param1) {
    statements
  }

  async function (param0, param1, /\* ... \*/ paramN) {
    statements
  }

  async function name(param0) {
    statements
  }

  async function name(param0, param1) {
    statements
  }

  async function name(param0, param1, /\* ... \*/ paramN) {
    statements
  }
```


arrow functions를 사용해도 됩니다.


```js
async (param) => expression;

async (param1, param2, ...paramN) => {
  statements;
};
```

### 인수

`name`

함수 이름. 생략가능하며 이경우함수는 *anonymous* 형식임 이름은 함수 몸체에 대해 지역적으로 사용.

`paramN`

함수에 전달될 인수의 이름.

`statements`

함수 몸체를 구성하는 명령문들.

설명
--

`async function` 표현식은 ``async function` 선언` 문법과 유사하며, 거의 동일합니다. `async function` 표현식과 `async function` 선언문의 주요 차이점은 익명함수로써의 사용 여부로, `async function` 표현식은 함수 이름을 생략하면 익명함수를 만듭니다. `async function` 표현식은 IIFE(즉시실행함수)로 사용할 수 있습니다. `functions`문서를 참고하세요.

예제
--

### 간단한 예시


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

// async function 표현식을 변수에 할당
const add = async function (x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
};

add(10).then((v) => {
  console.log(v); // 4초 뒤에 60 출력
});

// async function 표현식을 IIFE로 사용
(async function (x) {
  const p1 = resolveAfter2Seconds(20);
  const p2 = resolveAfter2Seconds(30);
  return x + (await p1) + (await p2);
})(10).then((v) => {
  console.log(v); // 2초 뒤에 60 출력
});
```

명세
--

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

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

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

같이 보기
-----

* `async function`
* `AsyncFunction` object
* `await`
async function\* 표현식
====================

**`async function*`** 키워드는 표현식 내부에서 비동기 제너레이터 함수를 정의하는데 사용됩니다.

시도해보기
-----

구문
--


```js
async function\* (param0) {
  statements
}
async function\* (param0, param1) {
  statements
}
async function\* (param0, param1, /\* … ,\*/ paramN) {
  statements
}

async function\* name(param0) {
  statements
}
async function\* name(param0, param1) {
  statements
}
async function\* name(param0, param1, /\* … ,\*/ paramN) {
  statements
}
```

### 매개변수

`name` Optional

함수 이름입니다. 익명 함수의 경우 생략할 수 있습니다. 이름은 함수 본문 내에서만 유효합니다.

`paramN` Optional

함수에 전달되는 인수의 이름입니다. 함수는 최대 255개의 인수를 가질 수 있습니다.

`statements` Optional

함수 본문을 구성하는 구문입니다.

설명
--

`async function*` 표현식은 async function\* statement (en-US)과 상당히 유사하며 문법도 거의 동일합니다. 둘의 큰 차이점은 함수 이름인데, `async function*` 표현식에서는 함수 이름을 생략해 익명 비동기 제너레이터 함수를 만들 수 있습니다. 더 자세한 내용은 `함수`에 대한 챕터를 참고하세요.

예제
--

### async function\* 사용하기

다음 예제는 이름이 없는 비동기 제너레이터 함수를 정의하고 `x`에 할당한 후, 인수를 제곱한 값을 반환합니다.


```js
const x = async function\* (y) {
  yield Promise.resolve(y \* y);
};
x(6)
  .next()
  .then((res) => console.log(res.value)); // 36
```

명세
--

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

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

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

같이 보기
-----

* `async function*` (en-US) statement
* `AsyncGeneratorFunction` (en-US) object
* 이터레이션 프로토콜
* `GeneratorFunction` object
* `yield`
* `yield*`
* `Function` object
* Functions
나누기 할당 (/=)
===========

나누기 할당 연산자(`/=`)는 오른쪽 피연산자의 값으로 변수를 나눈 결과를 다시 변수에 할당합니다.

시도해보기
-----

구문
--


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

예제
--

### 나누기 할당 사용하기


```js
// bar = 5
// 위와 같은 변수를 가정하고, 아래의 모든 연산을 순서대로 실행할 때

bar /= 2; // 2.5
bar /= 2; // 1.25
bar /= 0; // Infinity
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 안내서의 할당 연산자
* 나누기 연산자
단항 부정 (-)
=========

단항 부정 연산자(`-`)는 피연산자 앞에 위치하며, 피연산자의 부호를 부정합니다. 즉 양수는 음수로, 음수는 양수로 바꿉니다.

시도해보기
-----

구문
--


```js
-x;
```

예제
--

### 숫자 부정하기


```js
const x = 3;
const y = -x;

// y = -3
// x = 3
```

### 숫자가 아닌 값을 부정하기

단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환할 수 있습니다.


```js
const x = "4";
const y = -x;

// y = -4
```

명세
--

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

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

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

같이 보기
-----

* 더하기 연산자
* 빼기 연산자
* 나누기 연산자
* 곱하기 연산자
* 나머지 연산자
* 지수 연산자
* 증가 연산자
* 감소 연산자
* 단항 더하기 연산자
왼쪽 시프트 할당 연산자 (<<=)
===================

**왼쪽 시프트 할당 (`<<=`)** 연산자는 지정된 비트 수 만큼 왼쪽으로 비트를 이동시키고 그 결과를 변수에 반영합니다.

시도해보기
-----

구문
--


```js
x <<= y // x = x << y
```

예제
--

### 왼쪽 시프트 할당하기


```js
let a = 5;
// 00000000000000000000000000000101
a <<= 2; // 20
// 00000000000000000000000000010100
```

명세
--

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

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

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

같이 보기
-----

* JavaScript 가이드에서 할당 연산자
* 왼쪽 시프트 연산자
속성 접근자
======

**속성 접근자**는 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다.

시도해보기
-----

구문
--


```js
object.property;
object["property"];
```

설명
--

객체는 속성의 이름을 키로 사용하는 연관 배열(다른 이름으로는 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다. 보통 객체의 속성을 메서드와 구별해서 말하곤 하지만, 서로의 차이는 관례에 불과합니다. 메서드는 호출할 수 있는 속성일 뿐으로, 속성의 값이 `Function`을 가리키는 참조라면 그 속성을 메서드라고 합니다.

속성에 접근하는 법은 점 표기법과 괄호 표기법 두 가지가 있습니다.

### 점 표기법


```js
get = object.property;
object.property = set;
```


이 코드에서, `property`는 유효한 JavaScript 식별자여야합니다. 따라서 `object.$1`은 유효하지만 `object.1`은 아닙니다.


```js
document.createElement("pre");
```


여기서는 "createElement"라는 이름을 가진 메서드를 `document`에서 찾아 호출하고 있습니다.

소숫점 없는 숫자 리터럴의 메서드를 호출하고 싶으면, 메서드의 접근자 앞에 공백을 한 칸 추가해 점이 소숫점으로 인식되지 않도록 해야 합니다.


```js
(77).toExponential();
// or
(77).toExponential();
// or
(77).toExponential();
// or
(77).toExponential();
// or
(77.0).toExponential();
// because 77. === 77.0, no ambiguity
```

### 괄호 표기법


```js
get = object[property_name];
object[property_name] = set;
```


괄호 표기법에서는 `property_name` 으로 문자열이나 `Symbol`을 사용할 수 있습니다. 문자열은 유효한 식별자가 아니어도 괜찮습니다. "`1foo`", "`!bar!`", 심지어 " "(공백)도 가능합니다.


```js
document["createElement"]("pre");
```


이 코드는 점 표기법의 예시와 동일합니다.

괄호 앞에 공백이 올 수도 있습니다.


```js
document["createElement"]("pre");
```

### 속성 이름

속성의 이름은 문자열이나 `Symbol`입니다. 숫자 등의 다른 자료형은 문자열로 변환됩니다.


```js
var object = {};
object["1"] = "value";
console.log(object[1]);
```


위 코드의 `1`은 `'1'`로 변환되므로, 출력 결과는 "value"입니다.


```js
var foo = { unique\_prop: 1 },
  bar = { unique\_prop: 2 },
  object = {};
object[foo] = "value";
console.log(object[bar]);
```


위의 코드 역시 `foo`와 `bar`가 같은 문자열(SpiderMonkey JavaScript 엔진에서는 문자열 "`['object Object']`")로 변환되므로, 출력 결과는 동일하게 "value"입니다.

### 메서드 바인딩

메서드는 해당 메서드의 객체에 바인딩되지 않습니다. 특히 `this`는 메서드 내에 고정되지 않으므로 `this`가 항상 현재 메서드를 포함하는 객체를 참조하는건 아닙니다. 대신, `this`는 함수 호출 방식에 따라 "전달"됩니다. 메서드 바인딩을 참고하세요.

### `eval()` 주의사항

JavaScript 초심자로써는 괄호 표기법을 사용할 수 있는 장소에 `eval()` (en-US)을 남용하기 쉽습니다. 간혹 스크립트에서 다음과 같은 구문을 찾아볼 수 있습니다.


```js
x = eval("document.forms.form\_name.elements." + strFormControl + ".value");
```


`eval()`은 느리고, 가능하다면 최대한 피해야 합니다. 또한, `strFormControl`은 유효한 식별자여야 하지만, 폼 컨트롤의 ID나 이름은 식별자가 아닐 수도 있습니다. 따라서 괄호 표기법을 대신 사용하는 것이 좋습니다.


```js
x = document.forms["form\_name"].elements[strFormControl].value;
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-property-accessors |

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

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

같이 보기
-----

* `Object`
* `Object.defineProperty()`
비트 NOT (~)
==========

비트 NOT 연산자(`~`)는 피연산자의 비트를 반전시킵니다. 다른 비트 연산자와 마찬가지로 피연산자를 32비트 정수로 변환합니다.

시도해보기
-----

구문
--
```

~a
```

설명
--

피연산자는 32비트 정수로 변환되며 일련의 비트(0과 1)로 표현됩니다. 32비트를 넘어가는 숫자는 최상위 비트를 기준으로 하여 삭제합니다. 예를 들어 다음과 같은 32비트 이상인 정수는 32비트 정수로 변환됩니다.
```

Before: 11100110111110100000000000000110000000000001
After:              10100000000000000110000000000001
```


피연산자의 각 비트는 반전됩니다.

`NOT` 연산에 대한 진리표는 다음과 같습니다.

| a | NOT a |
| --- | --- |
| 0 | 1 |
| 1 | 0 |


```js
 9 (base 10) = 00000000000000000000000000001001 (base 2)
               --------------------------------
~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
```


32비트 정수 피연산자는 2의 보수에 따라 반전됩니다. 즉, 최상위 비트는 음수인 정수를 표현하는 데 사용합니다.

어떤 수 `x`에 대해 NOT 비트 연산을 하면 `-(x + 1)`의 결과를 도출합니다. 예를 들면 `~-5`는 `4`로 계산됩니다.

32비트 표현을 사용하기 때문에 `~-1`과 `~4294967295` (232 - 1) 의 결과가 둘 다 `0`으로 계산되는 점을 유의해주세요.

예제
--

### 비트 NOT 연산 사용하기


```js
~0; // -1
~-1; // 0
~1; // -2
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-bitwise-not-operator |

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

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

같이 보기
-----

* 비트 연산자
왼쪽 시프트 (<<)
===========

**왼쪽 시프트 (`<<`)** 연산자는 첫 번째 피연산자를 명시된 비트 수(32의 나머지)만큼 왼쪽으로 이동합니다. 왼쪽으로 이동된 초과 비트는 폐기됩니다. 오른쪽은 움직인 비트 수 만큼 0비트로 채워집니다.

시도해보기
-----

구문
--


```js
a << b
```

설명
--

이 연산자는 첫 번째 피연산자를 명시한 비트 수만큼 왼쪽으로 이동합니다. 왼쪽으로 이동된 초과 비트는 폐기됩니다. 오른쪽은 움직인 비트 수 만큼 0 비트로 채워집니다.

예를 들어, `9 << 2`은 36이 도출됩니다.
```

     9 (10진수): 00000000000000000000000000001001 (2진수)
                  --------------------------------
9 << 2 (10진수): 00000000000000000000000000100100 (2진수) = 36 (10진수)
```


 임의의 숫자 `x`를 왼쪽으로 `y`비트 단위로 이동하면 `x * 2 ** y`입니다. 그래서 예를 들어
 `9 << 3`은 `9 * (2 ** 3) = 9 * (8) = 72`으로 해석됩니다.

왼쪽 피연산자는 32비트 정수로 변환됩니다. 즉, 부동 소수점 숫자는 잘리고 32비트 경계 내에 있지 않은 숫자는 오버플로우/언더플로우됩니다.

 오른쪽 피연산자는 부호 없는 32비트 정수로 변환된 다음 32 나머지 연산의 값을 가져오므로 실제 시프트 오프셋은 항상 0에서 31 사이의
 양의 정수입니다. 예를 들어, `100 << 32`는 `100 << 0`과 동일(이 결과값은 `100`입니다)합니다. 32 나머지 연산은
 0이기 때문입니다.

예제
--

### 왼쪽 시프트 사용하기


```js
9 << 3; // 72
// 9 \* (2 \*\* 3) = 9 \* (8) = 72
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-left-shift-operator |

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

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

같이 보기
-----

* JavaScript에서 비트 연산자 가이드
* 왼쪽 시프트 할당 연산자
function\* expression
=====================

**`function*`** keyword 는 표현식 내에서 generator function 을 정의합니다.

시도해보기
-----

Syntax
------


```js
    function\* [name]([param1[, param2[, ..., paramN]]]) {
       statements
    }
```

### Parameters

`name`

함수명. 생략하면, 익명 함수가 됩니다. 함수명은 함수내에만 한정됩니다.

`paramN`

함수에 전달되는 인수의 이름. 함수는 최대 255 개의 인수를 가질 수 있습니다.

`statements`

함수의 본체를 구성하는 구문들.

Description
-----------

`function*` expression 은 `function* statement` 과 매우 유사하고 형식도 같습니다. `function*` expression 과 `function*` statement 의 주요한 차이점은 함수명으로, *`function*`* expressions 에서는 익명 함수로 만들기 위해 함수명이 생략될 수 있습니다.보다 자세한 내용은 functions 을 참조하십시오.

Examples
--------

아래의 예제는 이름이 없는 generator function 을 정의하고 이를 x 에 할당합니다. function 은 인자로 들어온 값의 제곱을 생산(yield)합니다.


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

명세서
---

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

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

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

See also
--------

* `function* statement`
* `GeneratorFunction` object
* The Iterator protocol (en-US)
* `yield`
* `yield*`
* `Function` object
* `function statement`
* `function expression`
* `Functions and function scope` (en-US)
단항 더하기 (+)
==========

단항 더하기 연산자(`+`)는 피연산자 앞에 위치하며 피연산자를 평가하지만, 만약 피연산자가 숫자가 아니라면 숫자로 변환을 시도합니다.

시도해보기
-----

구문
--


```js
+x;
```

설명
--

 단항 부정 (`-`)도 숫자가 아닌 값을 변환할 수 있지만, 단항 더하기는
 어떤 것을 숫자로 변환하는 가장 빠르고 선호하는 방법입니다. 왜냐하면 숫자에 대해 다른 연산을 수행하지 않기 때문입니다.
 정수와 실수의 문자열 표현뿐 아니라 문자열이 아닌 값인 `true`, `false` 및 `null` 또한 변환할 수 있습니다.
 10진수 및 16진수(`0x` 접두사) 형식의 정수 모두 지원됩니다. 음수도 지원됩니다(16진수 제외).
 BigInt 값에 연산자를 사용하면 TypeError가 발생합니다. 특정 값을 구문 분석할 수 없으면 `NaN`으로 평가됩니다.

예제
--

### 숫자에 사용하기


```js
const x = 1;
const y = -1;

console.log(+x);
// 1
console.log(+y);
// -1
```

### 숫자가 아닌 값에 사용하기


```js
+true; // 1
+false; // 0
+null; // 0
+function (val) {
  return val;
}; // NaN
+1n; // TypeError 발생: BigInt 값을 숫자로 변경할 수 없습니다
```

명세
--

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

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

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

같이 보기
-----

* 더하기 연산자
* 빼기 연산자
* 나누기 연산자
* 곱하기 연산자
* 나머지 연산자
* 지수 연산자
* 증가 연산자
* 감소 연산자
* 단항 부정 연산자