recursal/MDN huggingface dataset:
const
=====

**`const` 선언**은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.

시도해보기
-----

구문
--


```js
    const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
```


`nameN`

상수의 이름. 아무 유효한 식별자를 사용할 수 있습니다.

`valueN`

상수의 값. 아무 유효한 표현식이나 가능합니다.

설명
--

이 선언은 선언된 함수에 전역 또는 지역일 수 있는 상수를 만듭니다. 상수 초기자(initializer)가 필요합니다. 즉 선언되는 같은 문에 그 값을 지정해야 합니다(이는 나중에 변경될 수 없는 점을 감안하면 말이 됩니다).

상수는 `let` 문을 사용하여 정의된 변수와 마찬가지로 블록 범위(block-scope)입니다. 상수의 값은 재할당을 통해 바뀔 수 없고 재선언될 수 없습니다.

`let`에 적용한 "일시적 사각 지대"에 관한 모든 고려는, `const`에도 적용합니다.

상수는 같은 범위의 상수 또는 변수와 그 이름을 공유할 수 없습니다.

예제
--

다음 예제는 상수가 어떻게 동작하는지 보입니다. 브라우저 콘솔에서 따라해보세요.


```js
// 주의: 상수 선언에는 대소문자 모두 사용할 수 있지만,
// 일반적인 관습은 모두 대문자를 사용하는 것입니다.

// MY\_FAV를 상수로 정의하고 그 값을 7로 함
const MY\_FAV = 7;

// 에러가 발생함
MY\_FAV = 20;

// 7 출력
console.log("my favorite number is: " + MY\_FAV);

// 상수를 재선언하려는 시도는 오류 발생 - Uncaught SyntaxError: Identifier 'MY\_FAV' has already been declared
const MY\_FAV = 20;

// MY\_FAV라는 이름은 위에서 상수로 예약되어 있어서 역시 실패함.
var MY\_FAV = 20;

// 역시 오류가 발생함
let MY\_FAV = 20;

// 블록 범위의 특성을 아는게 중요
if (MY\_FAV === 7) {
    // 블록 범위로 지정된 MY\_FAV 라는 변수를 만드므로 괜찮습니다
    // (let으로 const 변수가 아닌 블록 범위를 선언하는 것과 똑같이 동작합니다)
    let MY\_FAV = 20;

    // MY\_FAV는 이제 20입니다
    console.log('my favorite number is ' + MY\_FAV);

    // 이 선언은 전역으로 호이스트되고 에러가 발생합니다.
    var MY\_FAV = 20;
}

// MY\_FAV는 여전히 7
console.log('my favorite number is ' + MY\_FAV);

// const 선언시에 초기값을 생략해서 오류 발생
const FOO;

// const는 오브젝트에도 잘 동작합니다
const MY\_OBJECT = {'key': 'value'};

// 오브젝트를 덮어쓰면 오류가 발생합니다
MY\_OBJECT = {'OTHER\_KEY': 'value'};

// 하지만 오브젝트의 키는 보호되지 않습니다.
// 그러므로 아래 문장은 문제없이 실행됩니다
MY\_OBJECT.key = 'otherValue'; // 오브젝트를 변경할 수 없게 하려면 Object.freeze() 를 사용해야 합니다

// 배열에도 똑같이 적용됩니다
const MY\_ARRAY = [];
// 배열에 아이템을 삽입하는 건 가능합니다
MY\_ARRAY.push('A'); // ["A"]
// 하지만 변수에 새로운 배열을 배정하면 에러가 발생합니다
MY\_ARRAY = ['B']
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-let-and-const-declarations |

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

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

같이 보기
-----

* `var`
* `let`
* JavaScript 안내서의 상수
for
===

**`for` 문**은 괄호로 감싸고 세미콜론으로 구분한 세 개의 선택식과, 반복을 수행할 문(주로 블럭문)으로 이루어져 있습니다.

시도해보기
-----

구문
--


```js
for ([initialization]; [condition]; [final-expression])
   statement
```


`initialization`

식(할당식 포함) 또는 변수 선언. 주로 카운터 변수를 초기화할 때 사용합니다. `var` 또는 `let` 키워드를 사용해 새로운 변수를 선언할 수도 있습니다. `var` 키워드로 선언한 변수는 반복문에 제한되지 않습니다. 즉 `for` 문과 같은 범위에 위치합니다. `let` 키워드로 선언한 변수는 반복문의 지역 변수가 됩니다.

식의 결과는 버려집니다.

`condition`

매 반복마다 평가할 식. 평가 결과가 참이라면 `statement`를 실행합니다. 이 식을 넣지 않았을 때 계산 결과는 언제나 참이 됩니다. 계산 결과가 거짓이라면 `for` 문의 바로 다음 식으로 건너 뜁니다.

`final-expression`

매 반복 후 평가할 식. 다음번 `condition` 평가 이전에 발생합니다. 주로 카운터 변수를 증감하거나 바꿀 때 사용합니다.

`statement`

조건의 평가 결과가 참일 때 실행하는 문. 여러 문을 반복 실행하려면 블럭문(`{ ... }`)으로 묶어야 합니다. 아무것도 실행하지 않으려면 공백문 (`;`)을 사용하세요.

예제
--

### `for` 사용하기

다음 `for` 문은 변수 `i`를 선언하고 0으로 초기화하여 시작합니다. `i`가 9보다 작은지를 확인하고 맞으면 명령문을 수행한 후 `i`의 값을 1 높입니다.


```js
for (var i = 0; i < 9; i++) {
  console.log(i);
  // 기타 등등
}
```

### 선택적 식 사용

`for` 반복문의 3개 식은 모두 선택 사항입니다.

예를 들어, 변수를 초기화하려고 `initialization` 블럭을 사용할 필요는 없습니다.


```js
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // 기타 등등
}
```


`initialization` 블럭처럼 `condition` 블럭도 선택 사항입니다. 다만 이 경우, 반복문 본문에 무한 반복을 탈출할 수 있는 장치를 추가해야 합니다.


```js
for (var i = 0; ; i++) {
  console.log(i);
  if (i > 3) break;
  // 기타 등등
}
```


세 가지 모두 생략할 수도 있습니다. 위와 같이 `break` 문을 사용해 반복을 탈출할 수 있도록 추가하고, 변수를 수정해 탈출 조건이 언젠가 참이 되도록 해야 합니다.


```js
var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}
```

### 문 없이 `for` 사용하기

다음 `for` 반복 사이클은 노드의 위치 오프셋을 `final-expression`에서 계산해 문이나 블럭문이 필요하지 않으므로 세미콜론을 사용합니다.


```js
function showOffsetPos(sId) {
  var nLeft = 0,
    nTop = 0;

  for (
    var oItNode = document.getElementById(sId) /\* initialization \*/;
    oItNode /\* condition \*/;
    nLeft += oItNode.offsetLeft,
      nTop += oItNode.offsetTop,
      oItNode = oItNode.offsetParent /\* final-expression \*/
  ); /\* semicolon \*/

  console.log(
    "Offset position of '" +
      sId +
      "' element:\n left: " +
      nLeft +
      "px;\n top: " +
      nTop +
      "px;",
  );
}

/\* Example call: \*/

showOffsetPos("content");

// Output:
// "Offset position of "content" element:
// left: 0px;
// top: 153px;"
```


**참고:** 여기서 쓰인 세미콜론은, JavaScript가 **필수로 요구하는 몇 안되는 세미콜론**입니다. 물론 세미콜론 없이는 반복 사이클 선언의 바로 다음 줄을 반복 본문으로 인식합니다.

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-for-statement |

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

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

참조
--

* 공백문
* `break`
* `continue`
* `while`
* `do...while`
* `for...in`
* `for...of`
function\*
==========

**`function*`** 선언 (끝에 별표가 있는 `function` keyword) 은 *generator function* 을 정의하는데, 이 함수는 `Generator` 객체를 반환합니다.

시도해보기
-----

generator function 은 `GeneratorFunction` 생성자와 `function* expression` 을 사용해서 정의할 수 있습니다.

문법
--


```js
    function\* name([param[, param[, ... param]]]) {
       statements
    }
```


`name`

함수명.

`param`

함수에 전달되는 인수의 이름. 함수는 인수를 255개까지 가질 수 있다.

`statements`

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

설명
--

Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다.

Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 Iterator 객체가 반환됩니다. Iterator의 `next()` 메서드를 호출하면 Generator 함수가 실행되어 **`yield`** 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. **`yield*`** 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.

이후 `next()` 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. `next()` 가 반환하는 객체는 `yield`문이 반환할 값(yielded value)을 나타내는 `value` 속성과, Generator 함수 안의 모든 `yield` 문의 실행 여부를 표시하는 boolean 타입의 `done` 속성을 갖습니다. `next()` 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 `yield` 문을 `next()` 메서드에서 받은 인자값으로 치환하고 그 위치에서 다시 실행하게 됩니다.

예시
--

### 간단한 예제


```js
function\* idMaker() {
  var index = 0;
  while (index < 3) yield index++;
}

var gen = idMaker();

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

### yield\* 를 사용한 예제


```js
function\* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function\* generator(i) {
  yield i;
  yield\* anotherGenerator(i);
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20
```

### Generator 에 인자값을 넘기는 예제


```js
function\* logGenerator() {
  console.log(yield);
  console.log(yield);
  console.log(yield);
}

var gen = logGenerator();

// the first call of next executes from the start of the function
// until the first yield statement
gen.next();
gen.next("pretzel"); // pretzel
gen.next("california"); // california
gen.next("mayonnaise"); // mayonnaise
```

### Generator 는 생성자로서 사용될 수 없다


```js
function\* f() {}
var obj = new f(); // throws "TypeError: f is not a constructor"
```

명세서
---

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

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

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

관련 항목
-----

* `function* expression`
* `GeneratorFunction` object
* The Iterator protocol (en-US)
* `yield`
* `yield*`
* `Function` object
* `function declaration`
* `function expression`
* `Functions and function scope` (en-US)
* Other web resources:
    + Regenerator an ES2015 generator compiler to ES5
    + Forbes Lindesay: Promises and Generators: control flow utopia — JSConf EU 2013
    + Hemanth.HM: The New gen of \*gen(){}
    + Task.js
class
=====

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
**`class` 선언**은 프로토타입 기반 상속을 사용하여, 주어진 이름의 새로운 클래스를 만듭니다.

시도해보기
-----

클래스 표현을 사용하여 클래스를 정의할 수도 있습니다. 표현식과 달리 선언문으로는 같은 클래스를 다시 선언하면 오류가 발생합니다.

구문
--


```js
    class name [extends] {
      // class body
    }
```

설명
--

클래스 본문은 엄격 모드에서 실행됩니다. 생성자 속성은 선택 사항입니다..

클래스 선언은 함수 선언과 달리 호이스팅의 대상이 아닙니다.

예제
--

### 간단한 클래스 선언

다음 예제는 우선 `Polygon` 클래스를 정의하고, `Square`라는 이름의 새로운 클래스가 `Polygon`을 상속합니다. 생성자 내부의 `super()`는 생성자 내에서만, 그리고 `this` 키워드를 사용하기 전에만 쓸 수 있다는 점을 주의하세요.


```js
class Polygon {
  constructor(height, width) {
    this.name = "Polygon";
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = "Square";
  }
}
```


> 
> **Warning:** 같은 클래스를 두 번 선언하려고 시도할 때 클래스 선언문으로 같은 클래스를 두 번 선언하면 오류가 발생합니다.
> 
> 
> 


```js
class Foo {}
class Foo {} // Uncaught SyntaxError: Identifier 'Foo' has already been declared
```


이전에 표현식으로 정의한 경우에도 오류가 발생합니다.


```js
var Foo = class {};
class Foo {} // Uncaught TypeError: Identifier 'Foo' has already been declared
```

명세서
---

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

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

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

참조
--

* `function` 선언문
* `class` 표현식
* 클래스
label
=====

**레이블 구문**은 `break`나 `continue` 구문과 함께 사용할 수 있다. 원하는 식별자로 구문 앞에 레이블을 추가할 수 있다.

> 
> **Note:** 레이블을 붙인 반복문이나 블록가 자주 사용되는 것은 아니다. 반복문으로 점프하는 대신에 함수를 호출할 수도 있다.
> 
> 
> 

문법
--


```js
label:
  statement;
```


`label`

JavaScript에서 사용할 수 있는 식별자면 모두 가능하다.

`statement`

구문. break는 모든 레이블 구문에서 사용될 수 있으며, continue는 반복 레이블 구문에서만 사용할 수 있다.

설명
--

반복문에 레이블을 붙이고, break나 continue 구문을 사용해 반복문의 어느 위치에서 작업을 멈추고 어느 위치에서 다시 수행할지를 알려줄 수 있다.

JavaScript에는 goto 구문이 없다는 것에 주의. break나 continue에서만 레이블을 사용할 수 있다.

strict mode 코드에서 "let"을 레이블 이름으로 사용할 수 없다. `SyntaxError`를 발생시킨다. (let은 허용되지 않는 식별자이다.)

예제
--

### for문에서 레이블 continue 사용하기


```js
var i, j;

loop1: for (i = 0; i < 3; i++) {
  //첫번째 for문은 "loop1" 레이블을 붙였다.
  loop2: for (j = 0; j < 3; j++) {
    //두번째 for문은 "loop2" 레이블을 붙였다.
    if (i === 1 && j === 1) {
      continue loop1;
    }
    console.log("i = " + i + ", j = " + j);
  }
}

// 출력 결과:
// "i = 0, j = 0"
// "i = 0, j = 1"
// "i = 0, j = 2"
// "i = 1, j = 0"
// "i = 2, j = 0"
// "i = 2, j = 1"
// "i = 2, j = 2"
// 다음 두 경우를 어떻게 스킵하는지 주목 : "i = 1, j = 1", "i = 1, j = 2"
```

### 레이블 continue문 사용하기

items, tests 배열을 보면 이 예제는 tests를 통과하는 items의 수를 세고 있다.


```js
var itemsPassed = 0;
var i, j;

top: for (i = 0; i < items.length; i++) {
  for (j = 0; j < tests.length; j++) {
    if (!tests[j].pass(items[i])) {
      continue top;
    }
  }

  itemsPassed++;
}
```

### for문에 레이블 break문 사용하기


```js
var i, j;

loop1: for (i = 0; i < 3; i++) {
  //The first for statement is labeled "loop1"
  loop2: for (j = 0; j < 3; j++) {
    //The second for statement is labeled "loop2"
    if (i === 1 && j === 1) {
      break loop1;
    }
    console.log("i = " + i + ", j = " + j);
  }
}

// Output is:
// "i = 0, j = 0"
// "i = 0, j = 1"
// "i = 0, j = 2"
// "i = 1, j = 0"
// Notice the difference with the previous continue example
```

### 레이블 break문 사용하기

items, tests 배열을 보면, 다음 예제는 items가 tests를 모두 통과하는지 판단한다.


```js
var allPass = true;
var i, j;

top: for (i = 0; items.length; i++)
  for (j = 0; j < tests.length; i++)
    if (!tests[j].pass(items[i])) {
      allPass = false;
      break top;
    }
```

### 레이블 붙인 블록에 break 사용하기

간단한 블록에도 레이블을 사용할 수 있지만, 반복문 아닌 레이블에는 break문만 사용할 수 있다.


```js
foo: {
  console.log("face");
  break foo;
  console.log("this will not be executed");
}
console.log("swap");

// 로그는 이렇게 출력된다:

// "face"
// "swap
```

### 레이블 붙인 함수 선언문

ECMAScript 2015에서, 레이블 붙인 함수 선언문은 web compatibility annex of the specification의 non-strict 모드에서 표준화되어 있다.


```js
L: function F() {}
```


strict mode 에서는 `SyntaxError`를 발생시킨다.


```js
"use strict";
L: function F() {}
// SyntaxError: functions cannot be labelled
```


Generator functions는 strict code도 non-strict code에서도 레이블 붙일 수 없다.


```js
L: function\* F() {}
// SyntaxError: generator functions cannot be labelled
```

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-labelled-statements |

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

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

더 알아보기
------

* `break`
* `continue`
break
=====

**`break` 문**은 현재 반복문, `switch` (en-US) 문, 또는 `label` 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘깁니다.

시도해보기
-----

구문
--


```js
    break [label];
```


`label` Optional

문의 라벨에 연결한 식별자. 반복문이나 `switch` (en-US)에서 사용하는게 아니면 필수로 제공해야 합니다.

설명
--

`break` 문은 프로그램이 label 달린 문에서 빠져나오게 하는 선택사항 label을 포함합니다. `break` 문은 참조되는 label 내에 중첩되어야 합니다. label 달린 문은 어떤 `block` 문이든 될 수 있습니다. 꼭, loop 문을 달 필요가 없습니다.

예제
--

다음 함수는 `i`가 3일 때 `while` loop를 종료하는 break 문이 있고, 그러고는 3 \* `x`값을 반환합니다.


```js
function testBreak(x) {
  var i = 0;

  while (i &#x3C; 6) {
    if (i == 3) {
      break;
    }
    i += 1;
  }

  return i \* x;
}
```


다음 코드는 label 달린 블록이 있는 `break` 문을 사용합니다. `break` 문은 자신이 참조하는 label 내에 중첩되어야 합니다. `inner_block`은 `outer_block`내에 중첩되어야 함을 주의하세요.


```js
outer\_block: {
  inner\_block: {
    console.log("1");
    break outer_block; // inner\_block과 outer\_block 둘다 빠져나옴
    console.log(":-("); // 건너뜀
  }
  console.log("2"); // 건너뜀
}
```


다음 코드는 또한 label 달린 블록이 있는 break 문을 사용하지만 그 `break` 문이 `block_2`를 참조하지만 `block_1` 내에 있기에 구문 오류(Syntax Error)가 발생합니다. `break` 문은 항상 자신이 참조하는 label 내에 중첩되어야 합니다.


```js
block\_1: {
  console.log('1');
  break block_2; // SyntaxError: label을 찾을 수 없음
}

block\_2: {
  console.log('2');
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-break-statement |

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

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

같이 보기
-----

* `continue`
* `label`
* `switch` (en-US)
if...else
=========

**`if` 문**은 지정한 조건이 참인 경우 명령문(statement)을 실행합니다. 조건이 거짓인 경우 또 다른 명령문이 실행 될 수 있습니다.

시도해보기
-----

구문
--


```js
    if (condition)
       statement1
    [else
       statement2]
```


`condition`

참 또는 거짓으로 평가되는 표현식입니다.

`statement1`

 조건이 참으로 평가될 경우 실행되는 문입니다.
 중첩된 if구문을 포함하여 어떤 구문이든 쓸 수 있습니다. 다중구문을 사용할 경우 ({ ... })블럭 구문 으로 그룹화 하고 실행하지 않으려면 빈 구문을 사용합니다.


`statement2`

이 구문은 조건이 거짓일경우 다른 조항이 있을 때 실행되는 구문입니다. 블록 문과 if문의 중첩을 호함한 모든문이 될 수 있습니다.

설명
--

 다중의 if...else 문은 else if 절을 만들기 위해 중첩될 수 있다.
 JavaScript에서는 elseif (하나의 단어) 키워드가 존재하지 않는다.


```js
    if (조건1)
       명령문1
    else if (조건2)
       명령문2
    else if (조건3)
       명령문3
    ...
    else
       명령문N
```


아래 작업한 것을 보면, if문을 중첩 사용하면 들여쓰기된 것이 제대로 보여집니다.


```js
    if (조건1)
       명령문1
    else
       if (조건2)
          명령문2
       else
          if (조건3)
    ...
```


 하나의 절에서 여러개의 명령문들을 실행하려면, 그 명령문들을 그룹화하는 블록 명령문 ({ ... }) 블럭구문을 사용한다.
 일반적으로, 블럭구문을 항상 사용하는 것은 좋은 연습입니다. 특히 중첩된 if 문과 관련되어
 있는 코드안에서 사용하면 더욱 좋습니다.


```js
if (조건) {
  명령문들1;
} else {
  명령문들2;
}
```


원시 불리언 값인 true (참) 과 false (거짓) 을 불리언 객체의 truthiness (참으로 보이는 것) 과 falsiness (거짓으로 보이는 것)으로 혼동하면 안된다. false, undefined, null, 0, NaN, 또는 빈 스트링 ("") 이 아닌 모든 값, 그리고 false 값인 불리언 객체를 포함하는 모든 객체는 조건으로 사용될 때 truthy 로 간주된다. 예:


```js
var b = new Boolean(false);
if (b) // 이 조건은 참으로 보이는 것 (truthy) 이다.
```

예시
--

### `if...else` 사용하기


```js
if (cipher_char === from_char) {
  result = result + to_char;
  x++;
} else {
  result = result + clear_char;
}
```

### `else if` 사용하기

JavaScript에는 elseif 구문이 없다. 그러나, else if 를 사용할 수 있다.


```js
if (x > 5) {
} else if (x > 50) {
} else {
}
```

### 조건식의 값을 지정하기

 조건식을 단순하게 지정하는 것은 좋지 않습니다.
 왜냐하면, 코드를 흘깃 보면 값을 지정한것을 평등한것으로 혼동할 수 있기 때문입니다. 예를들어, 다음코드를 사용하지 마세요:


```js
if (x = y) {
  /\* do the right thing \*/
}
```


당신이 조건식에 값의 지정을 해야할 경우, 일반적인 관행은 그 할당된 것 주위에 추가 괄호를 넣어야 합니다. 예를들면:


```js
if ((x = y)) {
  /\* do the right thing \*/
}
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-if-statement |

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

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

같이 보기
-----

* `block`
* `switch` (en-US)
* 삼항 조건 연산자
while
=====

**`while` 문**은 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.

문법
--


```js
while (condition) {
  statement
}
```


`조건`

반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다. 거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다.

`문장`

조건문이 참일 때만 while문 속의 문장들이 실행된다. 반복문 속에 여러개의 문장을 사용하고 싶다면 중괄호 { } 를 통해 문장들을 하나로 묶어야 한다.

예제
--

다음의 while문은 n이 3보다 작을 때까지 반복한다.


```js
var n = 0;
var x = 0;

while (n < 3) {
  n++;
  x += n;
}
```


반복을 살펴보면, n을 x에 계속 더하게 된다. 그러므로 x와 n 변수는 다음의 값을 갖는다.

* 첫번째 반복; n=1 과 x=1
* 두번째 반복; n=2 과 x=3
* 세번째 반복; n=3 과 x=6

세번째 반복후, n<3 이라는 초건은 더 이상 참이아니가 되므로 반복은 종료된다

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-while-statement |

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

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

See also
--------

* `do...while`
* `for`
continue
========

**`continue`** 문은 현재 또는 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.

시도해보기
-----

구문
--


```js
    continue [label];
```


`label`

명령문의 레이블과 연관된 식별자.

설명
--

`break` 문과 달리 `continue`는 루프의 실행을 완전히 종료하지 않고 `for`, `while`문에서 다음과 같이 동작합니다.

* `while` 루프에서는 다시 조건으로 점프합니다.
* `for` 루프에서는 업데이트 표현식으로 점프합니다.

`continue` 문에는 현재 루프 대신 레이블이 지정된 루프 문의 다음 반복으로 건너 뛰도록하는 선택적 레이블이 포함될 수 있습니다. 이 경우, `continue` 문은 이 레이블 된 명령문 내에 중첩되어야합니다.

예제
--

### Using `continue` with `while`

다음 예제에서는 `i`의 값이 3일 때 실행되는 `continue`문을 포함하는 `while`을 보여줍니다. 따라서 n은 1, 3, 7 및 12 값을 갖습니다.


```js
var i = 0;
var n = 0;

while (i < 5) {
  i++;

  if (i === 3) {
    continue;
  }

  n += i;
}
```

### label과 함께 `continue` 사용하기

다음 예제에서 `checkiandj`라는 문에는 `checkj`라는 문이 있습니다. `continue`가 발생하면 프로그램은 `checkj` 문의 맨 위에서 계속됩니다. `continue`가 발생할 때마다 `checkj`는 조건이 false를 반환 할 때까지 반복합니다. false가 리턴되면 나머지 `checkiandj` 문이 완료됩니다.

`continue`에 `checkiandj` 레이블이 있으면이 프로그램은 `checkiandj` 문 맨 위에서 계속됩니다.

See also `label`.


```js
var i = 0;
var j = 8;

checkiandj: while (i < 4) {
  console.log("i: " + i);
  i += 1;

  checkj: while (j > 4) {
    console.log("j: " + j);
    j -= 1;

    if (j % 2 == 0) continue checkj;
    console.log(j + " is odd.");
  }
  console.log("i = " + i);
  console.log("j = " + j);
}
```


출력:


```js
i: 0

// start checkj
j: 8
7 is odd.
j: 7
j: 6
5 is odd.
j: 5
// end checkj

i = 1
j = 4

i: 1
i = 2
j = 4

i: 2
i = 3
j = 4

i: 3
i = 4
j = 4
```

명세서
---

| Specification |
| --- |
| ECMAScript Language Specification # sec-continue-statement |

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

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

함께 보기
-----

* `break`
* `label`
block
=====

**블록문**(또는 다른 언어에서는 복합문)은 0개 이상의 구문을 묶을 때 사용합니다.
 블록은 한 쌍의 중괄호로 구성하며 선택적으로 레이블을 붙일 수 있습니다.

시도해보기
-----

문법
--

### 블록문


```js
{
  StatementList;
}
```

### 레이블된 블록문


```js
LabelIdentifier: {
  StatementList;
}
```


`StatementList`

블록문 내의 구문.

`LabelIdentifier`

시각적인 구분, 또는 `break`문의 대상으로 쓸 label.

설명
--

 다른 언어에서 블록문은 **복합문**이라고 부르기도 합니다. 블록문을 쓰면 JavaScript가 하나의 문을 기대하는 곳에서 다수의 문을 실행할 수
 있습니다. JavaScript에서 이렇게 문을 묶는건 흔히 쓰이는 기법입니다. 반대 개념으로는 공백문이 있으며, 이는 하나의 구문을 기대하는 곳에 아무것도 제공하지 않는 것입니다.

블록문은 흔히 `if...else`과 `for`문 관련해서 사용됩니다.

예제
--

### 엄격하지 않은 모드에서 변수 또는 함수 선언의 블록 범위 규칙

#### `var` 사용 시

`var`로 선언한 변수는 블록 범위를 **가지지 않습니다**.
 블록 내에서 선언한 변수의 범위는 함수나 스크립트가 되어, 값 할당의 영향이 블록 바깥까지 미칩니다.
 다른 말로는 블록문이 범위를 만들지 않습니다.
 "독립" 블록문도 유효한 구문이긴 하지만, C와 Java의 블록에 기대하는걸 JavaScript에서도 기대하면 안됩니다.
 예를 들어보겠습니다.

 엄격하지 않은 모드에서 `var`로 선언한 변수 혹은 함수 선언에 의해 생성된 변수는 블록 범위를 **가지지 않습니다**.
 블록 내에서 선언한 변수는 이 변수를 포함한 함수나 스크립트까지 범위가 지정되며, 변수의 설정 효과는 블록을 넘어서도 지속됩니다. 즉, 블록문에 범위가 도입되지 않습니다. 예:


```js
var x = 1;
{
  var x = 2;
}
console.log(x); // 콘솔에 2를 출력합니다
```


콘솔 출력 결과는 2입니다. 블록 안의 `var x`과 블록 앞의 `var x` 문과 동일한 범위에 있기 때문입니다.

엄격하지 않은 코드에서는, 블록 내부의 함수 선언이 이상하게 동작합니다. 사용하지 마십시오.

#### 엄격 모드에서 let, const 혹은 함수 선언의 범위 규칙

반면 `let`과 `const`로 선언한 식별자는 블록 범위를 **가집니다**.


```js
let x = 1;
{
  let x = 2;
}
console.log(x); // 1이 콘솔에 찍힙니다.
```


`x = 2`는 선언한 블록으로 범위가 제한됩니다.

`const`도 마찬가지입니다.


```js
const c = 1;
{
  const c = 2;
}
console.log(c); // 1이 콘솔에 찍히며, SyntaxError 예외가 발생하지 않습니다.
```


 블록 내의 `const c = 2`가 `SyntaxError: Identifier 'c' has already been declared`를 던지지 않는 점에 주목하세요. 블록
 범위 안이라 별개의 식별자이기 때문입니다.

 ES2015의 엄격 모드부터, 블록 내의 함수는 해당 블록으로 범위가 제한됩니다. ES2015 이전의
 엄격 모드에서는 블록 레벨 함수를 사용할 수 없었습니다.

명세
--

| Specification |
| --- |
| ECMAScript Language Specification # sec-block |

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

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

같이 보기
-----

* `while`
* `if...else`
* `let`
메서드 정의
======

ECMAScript 2015 를 시작으로, 객체 초기자(initializer)에 메서드 정의를 위한 더 짧은 구문이 도입되었습니다. 이는 메서드 명에 할당된 함수를 위한 단축입니다.

구문
--


```js
    var obj = {
      property( parameters… ) {},
      \*generator( parameters… ) {},
    // 키(속성) 계산값과도 함께:
      [property]( parameters… ) {},
      \*[generator]( parameters… ) {},
    // ES5 getter/setter 구문과 비교해 보세요:
      get property() {},
      set property(value) {}
    };
```

설명
--

단축 구문은 ECMAScript 5에 도입된 getter 및 setter 구문과 비슷합니다.

다음 코드가 주어지면:


```js
var obj = {
  foo: function () {},
  bar: function () {},
};
```


이제 이를 아래로 줄일 수 있습니다:


```js
var obj = {
  foo() {},
  bar() {},
};
```


**주의 :** 단축 구문은 익명(anonymous) 함수 (…`foo: function() {}`… 에서처럼) 대신 유명(named) 함수를 사용합니다. 유명 함수는 함수 본체에서 호출될 수 있습니다 (이는 참조할 식별자가 없기에 익명 함수에게는 불가능합니다). 자세한 사항은, `function` 참조.

### 단축 생성기 메서드

생성기 메서드는 단축 구문을 사용해서도 정의될 수 있습니다. 단축 구문 내 별표(\*)는 생성기 속성명 앞에 와야 함을 주의하세요. 즉, `* g(){}`는 작동하지만 `g *(){}`는 아닙니다.


```js
// 유명 속성 사용 (ES2015 이전)
var obj2 = {
  g: function\* () {
    var index = 0;
    while (true) yield index++;
  },
};

// 단축 구문을 쓰는 같은 객체
var obj2 = {
  \*g() {
    var index = 0;
    while (true) yield index++;
  },
};

var it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1
```

### 메서드 정의는 생성 불가능합니다

모든 메서드 정의는 생성자가 아니고 인스턴스화하려고 하는 경우 `TypeError` 예외가 발생합니다.


```js
var obj = {
  method() {},
};
new obj.method(); // TypeError: obj.method는 생성자가 아닙니다

var obj = {
  \*g() {},
};
new obj.g(); // TypeError: obj.g는 생성자가 아닙니다 (ES2016에서 바뀜)
```

예
-

### 간단한 테스트 사례


```js
var obj = {
  a : "foo",
  b(){ return this.a; }
};
console.log(obj.b()); // "foo"
```

### 속성 계산명

단축 구문은 속성 계산명(computed property name)도 지원합니다.


```js
var bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo" + 2]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2
```

명세서
---

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

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

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

참조
--

* `get`
* `set`
* 어휘 문법 (en-US)