4 데이터 처리 - flow control

4-0 flow control 개요

4-0-1 flow control의 이해

• goto문은 에러가 많아 권장 안함

4-0-2 표현식과 문의 이해

4-1 choice - 조건문

4-2 loop - 반복문

4-2-1 conditional loop

4-2-2 for loop

4-2-3 break, continue문

4-3 예외 처리하기

4-3-1 예외상황의 종류

4-3-2 throw와 Error 객체

4-3-3 try...catch문

• foo에서 bar로 에러가 넘어가는 것을 보면 catch문에서 에러를 핸들링할 수 있게 됨

5 객체와 빌트인 객체

5-1 객체

5-1-1 객체란?

5-1-2 객체 속성 control

5-1-3 객체간 비교와 복사

5-1-4 객체의 종류

5-2 build-in 객체 - 숫자와 날짜

5-2-1 Number, Math 객체

5-2-2 Date 객체

5-3 build-in 객체 - 텍스트

5-3-1 문자열

5-3-2 정규표현식

5-4 build-in 객체 - Collection

5-4-1 Collection 개요

5-4-2 index collection - 배열(Array)

5-4-3 key based collection - Map, WeakMap

• 추가된 순서대로 보장이 된다는 점은 중요한 차이

5-4-4 key based collection - Set, WeakSet

5-5 build-in 객체 - 그 외

5-5-1 JSON 객체

5-5-2 국제화(intl)

6 데이터 처리 - 언어의 메커니즘

6-1 프로토타입 기반 언어

6-1-1 프로토타입과 생성자 함수

6-1-2 프로토타입 chain과 상속

• 객체에 속성을 정의하지 않아 특성 속성을 참조할 때 undefined가 나올 줄 알았지만 정상적으로 호출될 때가 있음

• 부모객체의 메소드가 참조되는 것임
• 프로토타입 체인으로 영원히 부모객체를 찾지는 않음, JS는 객체기반이고 모든 객체의 부모는 오브젝트 프로토타입임
• 즉, 프로토타입 체인의 종점은 오브젝트 프로토타입이기 때문에 오브젝트 프로토타입의 부모는 존재하지 않고 오브젝트 프로토타입에서 체이닝이 마무리됨

• 프로토타입 객체를 활용하여 인스턴스 객체의 상속이 가능함

• 객체를 참조할 때 객체 내 속성부터 프로토타입 체인을 통해 부모객체의 속성들까지 참조가 가능함

6-1-3 class 문법

• 오른쪽 코드는 ES6의 class문법이 바벨을 통해 ES5로 변환되었을 때의 코드, 생성자 함수로 class가 변환되는 것을 확인할 수 있음

• 특수 메서드 constructor

6-2 자바스크립트 컨텍스트

6-2-1 this와 화살표 함수

• 컨텍스트란? 문맥

6-2-2 스코프

• 코드를 작성하다보면 변수를 중복해서 선언 할 때 있음 bar함수 안에서와 밖에서의 변수는 다르게 적용함

• 변수의 영역을 스코프라고 하며, 이에는 규칙이 있음

• 전역스코프의 예시로는 윈도우 객체가 있음, 파일스코프는 파일 단위, 모듈스코프는 모듈단위

• 코드를 보면 블록 스코프에서 const bar를 참조하지 못 함, 반면 var 키워드로 정의한 변수는 블록레벨 스코프로 지정이 되지 않아 외부에서도 참조가 가능함

• 정리하자면, js는 기본적으로 렉시컬 스코프 규칙을 따르기 때문에 어디에 선언되었는지에 따라 스코프의 정의가 달라짐

6-2-3 실행 컨텍스트

• 코드를 평가하고 실행하는 과정에서 JS엔진은 정보가 필요함

• 아래와 같은 정보가 필요하며 실행을 위해 물리적 객체 형태로 관리를 함 이를 실행 컨텍스트(코드가 실행되는 범위에 대한 개념)라고 함

• JS는 평가 후 실행을 하는데 실행 컨텍스트에 의해 관리됨

• 코드 평가 단계에서 렉시컬 환경이 생성됨, 렉시컬 환경에서는 두가지 참조가 생성됨

• 코드가 실행이 될 때 하나의 글로벌 컨텍스트와 여러 펑셔널 컨텍스트가 생성됨, jS엔진은 코드를 실행하며 이러한 컨텍스트를 계속해서 추적해야 하며 이를 위해 인터프리터 언어에서는 call stack이라는 매커니즘을 사용함

• 콜스택은 호출된 함수와 순서를 추적하는 방법

• 콜스택은 스택 자료구조(LIFO 구조)를 따름
• JS엔진은 코드를 평가해서 실행 컨텍스트를 만들어 이를 콜스택에 하나씩 쌓고 제일 마지막에 쌓은 실행 컨텍스트를 실행하고 종료시키며 스택에서 하나씩 없애게 됨

• 아래 코드에서 콜스택의 변화와 실행 컨텍스트의 내부 변화를 스택별로 확인해보자

• 첫 단계에서는 글로벌 실행 컨텍스트의 생성 단계이다. 내부에서는 렉시컬 인바이러먼트가 생성되고 내부에서 인바이러먼트 레코드와 외부 환경 참조가 생성이 됨
• 인바이러먼트 레코드에는 글로벌 오브젝트, 디스, 전역변수 들이 초기화 되며, 글로벌 오브젝트에는 윈도우가 매핑되어 있고 디스는 글로벌 오브젝트인 윈도우에 바인딩 됨.
• foo변수가 존재하여 변수 초기화가 진행되었기 때문에 undifined가 할당되어있음
• var함수도 코드에 존재하여 함수로서 정의됨
• 글로벌 실행 컨텍스트이기 때문에 외부 환경 참조는 되어있지 않아 null이 할당되어 있음

• 글로벌 컨텍스트의 생성단계를 마무리하고 실행단계로 넘어가면, 위에서 아래로 코드가 실행이 되기 때문에 첫번째 줄에서 변수 할당이 실행되어 문자열 할당이 됨
• 실행 컨텍스트 내에서도 foo 필드에 문자열 1이 매핑된 것을 확인할 수 있음
• 실행 단계이기 때문에 함수 선언문은 넘어가고 bar 함수를 실행하는 마지막 줄에 레코드가 위치해있음
• bar함수를 실행하게 되고 새로운 함수를 실행하는 컨텍스트가 만들어짐

• 글로벌 실행 컨텍스트가 아직 실행단계에 있는 상황에서 함수 실행 컨텍스트를 진행하게 됨
• 콜스택에는 새로운 실행 컨텍스트를 추가하게 되고 동일하게 렉시컬 환경이 생성됨
• 렉시컬 환경에는 인바이러먼트 레코드와 외부환경 참조가 생성이 됨
• 인바이러먼트 레코드에는 코드에는 보이지 않는 arg라는 변수가 보임
• bar함수는 펑션빌트인 객체를 따르기 때문에 arg라는 함수 자체의 변수를 갖고 있어서 실행컨텍스트에도 정의되게 됨
• 디스 바인딩과 지역변수 baz의 초기화가 진행되며, 외부 환경 참조에는 글로벌 실행컨텍스트가 참조되어 스코프 체인이 형성됨

• 함수 실행 컨텍스트의 생성단계가 마무리 되고 실행단계로 가면 함수의 블럭문이 실행되고 첫번째 줄에 변수할당 연산자를 통해 값이 할당되게 됨
• baz에 1000이라는 값이 할당되었고 인바이러먼트 레코드에도 1000이 baz에 매핑된 것을 확인할 수 있음
• 코드의 다음줄로 레코드가 넘어가면 리턴문을 만나게 되고 함수가 종료되며 실행 컨텍스트도 실행단계를 끝내게 됨

• 함수 실행 컨텍스트가 종료되어 콜스택에서도 제거됨
• 스택에 남아있는 글로벌 실행 컨텍스트로 돌아와서 나머지 코드를 실행할 준비를 함
• bar함수 실행 다음에는 실행할 코드가 존재하지 않아 글로벌 실행 컨텍스트도 실행을 마무리 함

• 글로벌 실행 컨텍스트도 콜스택에서 제외되며 모든 코드의 실행은 종료됨

6-2-4 클로저

• 실행 컨텍스트의 생성단계에서 외부 환경 참조에 의해서 스코프 체인이 형성됨

• 함수 내부에 함수가 존재한다면 실행 컨텍스트와 외부 환경 참조는 아래와 같음
• baz함수가 실행될 때 실행 컨텍스트는 다음과 같음
• baz라는 이름의 펑셔널 실행 컨텍스트가 존재하고 외부 환경 참조로는 bar라는 이름의 펑셔널 실행 컨텍스트를 가르키고 있음
• bar라는 이름의 실행 컨텍스트 또한 글로벌 실행 컨텍스트를 참조하고 있음
• 외부 환경 참조는 해당 실행 컨텍스트가 종료되면 참조가 해제됨

• JS는 일급객체이기 때문에 함수가 함수를 반환할 수 있음
• 함수가 반환한 내부함수를 함수 외부에서 호출하는 상황도 발생하며, 이때 내부함수에서 특별한 상황발생
• bar 함수가 내부의 함수가 바로 반환되는 것을 볼 수 있는데 반환되는 내부함수에서는 내부함수 기준에서 외부함수인 bar함수에 애플이라는 지역변수를 참조하고 있고 애플이라는 함수를 반환하는 함수인 것을 확인할 수 있음
• 리턴문을 통해 익명함수를 반환하여 bar함수가 종료되고 더이상 bar의 실행 컨텍스트에 접근할 수 없게 됨

• 다만, 이런 상황에서는 접근이 가능함
• 반환된 내부 함수를 실행했을 때 bar함수가 이미 종료되었기 때문에 내부함수에서 참조하고 있는 지역변수 애플은 반환받을 수 없을 것이라 생각할 수 있지만, 실상은 참조하고 있음
• 내부함수 내에서 외부함수의 변수를 참조하고 있어 외부함수는 종료되었지만 참조가 유지되어 외부함수 환경에 접근할 수 있는 환경을 클로저라고 함

• 클로저는 함수가 종료되어도 스코프를 기억한다는 장점으로 상태값을 유지할 때 사용하고 특정 스코프에 접근할 수 있기에 코드를 은닉할 때 사용함