1. 브라우저의 동작원리

브라우저의 핵심 기능

• 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)를 받아 브라우저에 표시하는 것
  • 서버로부터 HTML, CSS, javaScript, 이미지 파일 등을 응답 받는다.
  • HTML, css파일은 렌더링 엔진의 HTML 파서와 CSS파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 렌더 트리를 기반으로 웹페이지를 화면에 그린다.
  • 자바스크립트 엔진을 통해 자바스크립트를 처리한다.
    • HTML 파서가 Script태그를 DOM 생성 프로세를 중지하고 자바스크립트 코드를 실행하기 위해 자바스크립트 엔진으로 제어 권한을 넘긴다.
    • 자바스크립트엔진은 Script의 src속성에서 가리키는 자바스크립트 파일을 로드하고 파싱하여 실행한다.
    • 실행이 종료되면 HTML 파서가 제어 권한이 넘어가고 다시 DOM 생성 프로세스가 시작된다.

브라우저의 특성

• 브라우저는 동기(Synchronous)적으로 HTML, CSS, JavaScript를 처리한다.
  • 위에서 보면 알 수 있듰이 script태그를 만나면 JavaScript를 처리하기 전까지 DOM생성 프로세스가 중단된다.
  • 그러므로 웹의 뷰 로딩이 늦어지지 않게 Script를 처리하는 방법을 알고 있으면 좋다.
    • Script를 Body요소의 가장 아래에 위치시킨다.
    • Script태그에 async, defer 키워드를 추가한다.
    • Script에서 작동시킬 주요 로직을 EventHandler를 이용하여 HTML파싱을 다 한 이후에 불러와 실행시킨다.

2. 자바스크립트의 기본 문법

변수

• 목적
  • 어떠한 값을 할당하여 변수 이름을 통해 그 값을 참조하기 위해 사용한다.
  • 변수 이름을 통해 변수에 할당 한 값의 의미를 알 수 있다.
• 원리
  • 변수는 메모리 상의 주소를 기억하는 저장소이다. 즉, 메모리 주소에 접근하기 위해 사람이 이해 할 수 있는 언어로 지정한 식별자(Identifier)이다.
• 사용법
  • 변수 이름 앞에 var, const, let을 사용하고 이후 할당 연산자 = 을 통해 값을 할당 할 수 있다.
    예시:

    let myAge = 28;
     const myName = 'kimJeongBin';
     var speedOfLight = 300000; 

값

• 값은 프로그램에 의해 조작 될 수 있는 대상, 다양한 방법으로 생성할 수 있으며 대표적인 방법으로 리터럴 표기법 (literal notation)이 있다.
• 데이터 타입(Data Type)
  • 프로그래밍 언어에서 사용할 수 있는 값의 종류
  • 자바스크립트는 C / Java와 다르게 변수를 선언 할 때 변수에 할당 할 값의 데이터 타입을 미리 지정하지 않는다. 즉, 자바스크립트는 동적 타이핑이 적용되었다.
  • 자바스크립트는 아래와 같이 총 7가지 데이터 타입이 있다.
  • 원시타입 (Primitive Data Type)
    • number
    • string
    • boolean
    • null
    • undefined
    • symbol
  • 객체 타입 (Object data type)
    - object
• 리터럴(literal)
  • 소스코드 안에서 직접 만들어 낸 상수 값 자체, 값을 구성하는 최소 단위
  • 숫자, 문자열, 불리언과 같은 원시 타입의 리터럴은 다양한 연산자의 피연산자가 되어 하나의 값으로 평가될 수 있다
    • 숫자 리터럴

    10.5
     4.2

    • 문자열 리터럴

    'hello'
     'world!'

    • Boolean 리터럴

    true
    false

    • null 리터럴

    null

    • undefined 리터럴

    undefined

    • 객체 리터럴

    { name: 'Lee', gender: 'male' }

    • 배열 리터럴

    [1,2,3]

    • 정규표현식 리터럴

    /ab+c/

    • 함수 리터럴

    function() { return 5;}

연산자

• 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(Operand)라 한다.
• 연산 종류
  • 산술 연산자

      var area = 5 * 4;

  • 문자열 연결 연산자

      var str = 'My name is ' + 'Kim';

  • 할당 연산자

      var color = 'red';

  • 비교 연산자

      var foo = 3 > 5;

  • 논리 연산자

      var bar = (5 > 3) && (2 < 4);

  • 타입 연산자

      var type = typeof 'Hi'; // "string"

  • 인스턴스 생성 연산자

      var tody = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900

• 암묵적 타입 강제 변환을 통해 연산을 수행한다.

   var foo = 1 + '10'; // '110'
    var bar = 1 * '10'; // 10

키워드

• 수행할 동작을 규정한 것이다.
• 키워드 종류는 아래에 나와있는 것 말고도 많다.
  var: 새로운 변수를 생성하는 동작을 규정
  function: 새로운 함수를 생성하는 동작을 규정
  return: 함수 종료 및 값을 반환하는 동작을 규정
  while: 반복문을 생성하는 동작을 규정
  break: 반복문을 탈출 하는 동작을 규정

주석

• 프로그램의 의미나 프로그램 외 사용자가 알아두면 좋을 정보(예: 저작권)등을 나타내기 위해 사용한다.
• 주석을 사용하지 않고도 의미를 알 수 있는 프로그램이 최선이다.
• 주석은 해석기가 무시하며 실행되지 않는다.

문

• 프로그램을 이루는 명령을 각각 문(statement)이라 한다.
• 리터럴, 연산자(Operator), 표현식(Expression), 키워드(Keyword) 등으로 구성되며 세미콜론으로 끝내는 관습이 있다. 자바스크립트에서는 세미콜론이 필수가 아니다.
• 문은 위에서 아래로 순서대로 실행된다.
  • 실행 순서는 조건문, 반복문에 의해 흐름제어 된다. 함수 호출에 의해서도 바뀔 수 있다.
• var을 사용시 block-level-scope가 유효하지 않고 function-level-scope가 유효하다.
  • let, const는 block-level-scope, function-level-scopr모두 유효하다.

표현식

• 하나의 값으로 평가(Evaluation)될 수 있는 식을 말한다.
• 값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가(Evaluation)된다.
• 표현식은 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있다.
• 예시

  5             // 5
  5 * 10        // 50
  5 * 10 > 10   // true
  (5 * 10 > 10) && (5 * 10 < 100)  // true
  

문과 표현식의 비교

• 문(Statement)이 마침표로 끝나는 하나의 완전한 문장(Sentence)이라고 한다면 표현식은 문을 구성하는 요소이다.
• 표현식은 그자체로 하나의 문이 될 수도 있다. (예: 할당문)

함수

• 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다.
• 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.
• 다음과 같이 선언 할 수 있다.

  function square(number) {
    return number * number;
  }

• 다음과 같이 호출 할 수 있다.

  square(2);

• 함수를 사용하면 코드의 재사용성을 높일 수 있다.

객체

• 자바스크립트는 객체(object) 기반의 스크립트 언어이다.
  • 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다.
  • 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.
• 자바스크립트 객체는 key(이름)와 value(값) 으로 구성된 프로퍼티(property) 및 메소드(method)의 집합이다.
  • 프로퍼티의 value(값)으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.
  • 데이터와 함수를 모두 객체안에 종속시켜 하나의 단위로 구조 할 수 있어 객체는 유용하다.
• 자바스크립트 객체는 객체지향 상속을 '프로토타입'을 통해 구현했다. 객체는 객체의 '프로토타입'으로부터 프로퍼티와 메소드를 상속 받는다.

배열

• 배열(array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.
• 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다.

단어

• 동적타이핑: 변수의 타입이 할당된 값의 데이터 타입에 의해 결정 되는 것
• 피연산자: 연산의 대상이 되는 값
• method: 객체의 프로퍼티 값이 함수일 경우 해당 프로퍼티를 method라고 한다.

3. 데이터타입과 변수

• 데이터 타입의 존재 이유
  • 메모리에 값을 저장하기 위해서는 확보해야 할 메모리 공간을 알아야하고 데이터 타입을 확보해야 할 메모리 공간을 나누는 기준으로 사용 한다.

데이터 타입

• 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말한다.

• 데이터 타입이 컴퓨터와 개발자에게 알려주는 것

  • 데이터를 메모리에 저장할 때 확보해야 하는 메모리 공간의 크기
  • 할당할 수 있는 유효한 값에 대한 정보
  • 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할 지에 대한 정보

• 자바스크립트에는 7개의 데이터 타입이 있다. 위에 다루었으므로 생략한다.

• 원시 타입 (Primitive Data Type)

  • 원시 타입의 값은 변경 불가능한 값(immutable value)이다.

  • 원시 타입의 값은 pass-by-value(값에 의한 전달)이다.

  • number

    • 자바스크립트는 number라는 하나의 숫자 타입만 존재한다.
    • 배정밀도 64비트 부동소수점 형을 따른다.(double-precision 64-bit floating-point format : -(2^53 - 1) 와 2^53 - 1 사이의 숫자값)
    • 정수 데이터 타입은 없다.
    • 예시, 2, 8, 16진수도 10진수와 동일하게 배정밀도 64비트 부동소수점 형을 따라 저장되기 때문에 참조시 10진수로 해석된다.

    var integer = 10;        // 정수
    var double = 10.12;      // 실수
    var negative = -20;      // 음의 정수
    var binary = 0b01000001; // 2진수
    var octal = 0o101;       // 8진수
    var hex = 0x41;          // 16진수

    • 3가지 특별한 값이 있다.
      • Infinity: 양의 무한대
      • -Infinity: 음의 무한대
      • NaN: 산술 연산 불가Not-a-Number)

  • string

    • 텍스트 데이터를 나타내는데 사용한다.
    • 문자열은 0개 이상의 16bit 유니코드 문자(UTF-16) 들의 집합으로 대부분의 전세계의 문자를 표현할 수 있다. 문자열은 작은 따옴표(‘’) 또는 큰 따옴표(“”) 안에 텍스트를 넣어 생성한다.
    • 문자열에서 각 문자를 str[0]과 같이 참조 할 수 있다. 하지만 오직 읽을 수만 있고 변경 할 수는 없다.

  • boolean

    • 불리언(boolean) 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.
    • 조건문에서 자주 사용된다.
    • 조건문에서 null, 비어있는 문자열, undefined, 숫자 0은 false로 간주된다.

  • undefined

    • undefined 타입의 값은 undefined가 유일하다.
    • 선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.
    • 변수 선언에 의해 확보된 메모리 공간에 원래 있던 Garbage value를 자바스크립트 엔진이 undefined로 초기화 하기 때문이다.
    • 만일 개발자가 스스로 값이 없다라는 걸 명시하고 싶다면 undefined보다는 null을 할당한다.

  • null

    • null 타입의 값은 null이 유일하다.
    • 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다. 이는 변수가 기억하는 메모리 어드레스의 참조 정보를 제거하는 것을 의미하며 자바스크립트 엔진은 누구도 참조하지 않는 메모리 영역에 대해 가비지 콜렉션을 수행할 것이다.

  • symbol
    - 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입이다.
    - 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다.
    - 심볼은 Symbol 함수를 호출해 생성한다. 이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.

    // 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
     var key = Symbol('key');
     console.log(typeof key); // symbol

• 객체 타입 (Object type, Reference type)

  • 원시 타입(Primitives)을 제외한 나머지 값들(배열, 함수, 정규표현식 등)은 모두 객체이다.
  • 객체는 pass-by-reference(참조에 의한 전달) 방식으로 전달된다.

변수

• 데이터에 고유의 이름인 식별자(identifier)를 명시한 것이다. 식별자를 변수명이라 하고 변수로 참조할 수 있는 데이터를 변수값이라 한다.

  • 식별자는 어떤 대상을 유일하게 식별할 수 있는 이름을 말한다. 식별자에는 변수명, 함수명, 프로퍼티명, 클래스명 등이 있다.

• 변수 이름 짓기 규칙

  • 반드시 영문자(특수문자 제외), underscore ( _ ), 또는 달러 기호($)로 시작하여야 한다.
  • 이어지는 문자에는 숫자(0~9)도 사용할 수 있다.
    -자바스크립트는 대/소문자를 구별하므로 사용할 수 있는 문자는 “A” ~ “Z” (대문자)와 “a” ~ “z” (소문자)이다.

• 선언만 되어 있는 변수는 undefined로 초기값을 갖는다.

• 선언하지 않은 변수에 접근하면 ReferenceError가 발생한다.

• 변수의 중복 선언

  • var 키워드로 선언한 변수는 중복 선언이 가능하다.

• 변수 호이스팅 (Variable Hoistin)

  • var 키워드를 사용하여 선언하면 해당 선언문이 해당 변수의 scope의 선두로 옮겨진 것처럼 동작하는 특성이다.
  • var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한 번에 이루어진다.

• 변수 생성 단계

  • 선언 단계(Declaration phase)
    • 변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
  • 초기화 단계(Initialization phase)
    • 변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.
  • 할당 단계(Assignment phase)
    • undefined로 초기화된 변수에 실제값을 할당한다.

• var 키워드로 선언된 변수의 문제점

  • 함수 레벨 스코프(Function-level scope)

    • 전역 변수의 남발
    • for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.

  • var 키워드 생략 허용

    • 의도하지 않은 변수의 전역화

  • 중복 선언 허용

    • 의도하지 않은 변수값 변경

  • 변수 호이스팅

    • 변수를 선언하기 전에 참조가 가능하다.

단어

• 정적 타입(Static/ Strong Type): 변수의 데이터 타입이 변수 선언 시 미리 타입 지정(Type - annotation)해주는 값에 따라 정해지는 것을 정적 타입이라 한다. C, Java등이 해당된다.
• 가비지 콜렉션: 값이 할당되었던 메모리 영역중에서 필요없게 된 영역을 해제하는 것

4. 연산자

표현식과 연산자

• 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말한다.
• 평가(evaluation)되어 하나의 값을 만든다. 즉, 표현식은 하나의 값으로 평가될 수 있는 문이다.
• 표현식의 종류
  • 리터럴 표현식 (예: 10)
  • 식별자 표현식 (예: sum)
  • 연산자 표현식 (예: 10 + 20)
  • 함수/메소드 호출 표현식 (예: square())

문과 표현식

• 문(statement)은 자바스크립트 엔진에게 내리는 명령이다.
• 문의 종류
  • 선언문 (예: var x;)
  • 할당문 (예: x = 5;)
  • 함수 선언문 (예: function foo () {})
  • 조건문 (예: if (x > 5) {})
  • 반복문 (예: for (let i = 0; i < 10; i++) {}
• 문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미콜론으로 끝나야 한다. 단 코드블록은 제외이다.
  • ASI: automatic semicolon insertion, 세미콜론을 안붙혀도 자바스크립트 엔진이 자동으로 세미콜론을 붙혀주는 기능
  • ESLint와 같은 정적 분석 도구에서도 세미콜론 사용을 기본으로 설정하고 있다.
  • TC39(ECMAScript 기술 위원회)도 세미콜론 사용을 권장하는 분위기이다.
• 문은 표현식이 될 수 있는 문과 표현식이 아닌 문으로 나눌 수 있다. 표현식이 아닌 문은 크롬 개발자 도구에서는 undefined를 반환한다.

연산자

• 피연산자가 “값”이라는 명사의 역할을 한다면 연산자는 “값을 만든다”라는 동사의 역할을 한다고 볼 수 있다.

• 연산자의 종류

  • 산술 연산자(Arithmetic Operator)

    • 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산을 할 수 없는 경우에는 NaN을 반환한다.
    • 이항 산술 연산자
      • 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다.
      • 피연산자의 값을 변경하는 부수 효과(Side effect)가 없다.
      • 종류
        • +, 덧셈
        • -, 뺄셈
        • *, 곱셈
        • /, 나눗셈
        • %, 나머지
    • 단항 산술 연산자
      • 단항 산술 연산자는 1개의 피연산자를 대상으로 연산한다.
      • 증가/감소 연산자는 피연산자의 값을 변경하는 부수 효과(Side effect)가 있다.
      • 종류
        • ++, 증가
          • 전위 증가/감소 연산자(Prefix increment/decrement operator): 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
          • 후위 증가/감소 연산자(Postfix increment/decrement operator): 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.
        • --, 감소
        • +, 숫자 타입이 아닌 피연산자를 숫자 타입으로 변환
        • -, 숫자의 부호를 바꾼다.

  • 문자열 연결 연산자

    • + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다.

  • 할당 연산자(Assignment Operator)

    • 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 할당 연산자는 좌항의 변수에 값을 할당하므로 부수 효과가 있다.
    • 할당 표현식은 할당된 값으로 평가된다.
    • 연쇄 할당(Chained assignment) (예: let x, y; y = x = 10;)

  • 비교 연산자(Comparison Operator)

    • 좌항과 우항의 피연산자를 비교하여 불리언 값을 반환한다. if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.
      • 동등 / 일치 비교 연산자: ==(값이 같음), ===(값과 타입이 같음), !=, !==
      • 대소 관계 비교 연산자: >, <, >=, <=
      • 삼항 조건 연산자:

  • 삼항 조건 연산자(ternary operator)

    • 조건식의 평가 결과에 따라 반환할 값을 결정한다.
    • 자바스크립트의 유일한 삼항 연산자이며 부수 효과는 없다.
    • 용법
      • 조건식 ? 조건식이 ture일때 반환할 값 : 조건식이 false일때 반환할 값

  • 논리 연산자(Logical Operator)

    • 우항과 좌항의 피연산자(부정 논리 연산자의 경우, 우항의 피연산자)를 논리 연산한다.
    • 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다.
    • 논리합(||) 연산자와 논리곱(&&) 연산자는 일반적으로 불리언 값을 반환하지만 반드시 불리언 값을 반환해야 하는 것은 아니다.
      • 단축평가로 사용될 수도 있다.
    • 종류: ||, &&, !

  • 쉼표 연산자

    • 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
    • 예:

     var x, y, z;
      x = 1, y = 2, z = 3; // 3

  • 그룹 연산자

    • 연산자의 우선 순위를 1순위로 높일 수 있다.
    • 그룹 내의 표현식을 최우선으로 평가한다.

  • typeof 연산자

    • 자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.
    • typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 일치하지는 않는다.
    • null 빼고 다 반환하며, 함수의 경우 'function'을 반환한다.
    • null은 'object'로 반환한다.

5. 제어문

• 주어진 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.

블록문(Block statement/Compound statement)

• 0개 이상의 문들을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부르기도 한다.
• 자바스크립트는 블록문을 하나의 단위로 취급한다.
• 블록문은 단독으로 사용할 수도 있다.
• 일반적으로 제어문이나 함수 선언문 등에서 사용한다.
• 말미에 세미콜론을 붙히지 않는다.

조건문(conditional statement)

• 주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블럭(블록문)의 실행을 결정한다.

• 자바스크립트는 2가지의 조건문 if…else 문과 switch 문을 제공한다.

• if..else 문

  • 주어진 조건식의 평가 결과에 따라 실행할 코드 블록을 결정한다.
  • 조건식을 추가하고 싶으면 else if 문을 사용한다.
  • 만일 코드 블록 내의 문이 하나뿐이라면 중괄호를 생략 할 수 있다.
  • 대부분의 if...else 문은 삼항 조건 연산자로 대체 할 수 있다.

• switch 문

  • switch 문의 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다.
  • case 문은 상황(case)을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행할 문들을 위치시킨다.
  • switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없다면 실행 순서는 default 문으로 이동한다. default 옵션으로 사용할 수도 있고 사용하지 않을 수도 있다.
  • fall through: 만일 case에서 break;를 포함시키지 않을 시 다음 case문도 실행되는 것
  • case문은 중복해서 사용할 수 있다. (예: case 1: case 3: case 5: case 7:)

반복문(Loop statement)

• 주어진 조건식(conditional expression)의 평가 결과가 참인 경우 코드 블럭을 실행한다.

• 그 후 조건식을 다시 검사하여 여전히 참인 경우 코드 블록을 다시 실행한다.

• 조건식이 거짓일 때까지 위 과정을 반복한다.

• 자바스크립트는 3가지의 반복문 for 문, while 문, do…while 문을 제공한다.

• for 문

  • for 문은 조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행한다.
  • for (초기화식; 조건식; 증감식) { 실행문 }
  • for 문의 실행 순서
    • 초기화식 -> 조건식 -> 실행문 -> 증감식 -> 조건식 -> 실행문 -> 증감식 -> 조건식 ...
    • 위 과정을 조건식이 false가 될 때까지 반복한다. false이면 for문 종료.
  • for문의 초기화식, 조건식, 증감식은 모두 옵션이다. for( ; ; )을 사용하면 무한루프가 발동한다.

• while 문

  • 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
  • 조건문의 평가 결과가 거짓이 되면 실행을 종료한다.

• do…while 문

  • 코드 블록을 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한번 이상 실행된다.
  • do {실행문} while (조건식)

break 문

• break 문은 레이블 문, 반복문(for, for…in, for…of, while, do…while) 또는 switch 문의 코드 블록을 탈출한다.

• 레이블 문, 반복문, switch 문의 코드 블록 이외에 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다.

• 레이블 문(Label statement)이란 식별자가 붙은 문을 말한다. case문과 default문도 레이블 문이다.

  foo: console.log('foo');

• 레이블 문을 break를 이용하여 탈출하기

 foo: {
   console.log(1);
   break foo; // foo 레이블 블록문을 탈출한다.
   console.log(2);
 }

• 중첩된 for 문의 내부 for 문에서 break 문을 실행하면 내부 for 문을 탈출하여 외부 for 문으로 진입한다. 이때 내부 for 문이 아닌 외부 for 문을 탈출하려면 레이블 문을 사용한다.

• 중첩된 for 문을 외부로 탈출할 때 레이블 문은 유용하지만 그 외의 경우 레이블 문은 일반적으로 권장하지 않는다.

  • 레이블 문을 사용하면 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문이다.

• break 문은 레이블 문 뿐만이 아니라 반복문, switch 문에서도 사용할 수 있다. 이 경우에는 break 문에 레이블 식별자를 지정하지 않는다.

• break 문은 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 회피할 수 있어 유용하다.

continue 문

• 반복문(for, for…in, for…of, while, do…while)의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 이동한다.
• break 문처럼 반복문을 탈출하지는 않는다.