[항해 14기] 개발일지5 (JS심화)

JS 심화

 

1. 데이터 타입

1) 기본형 : Number, String, Boolean, null, undefined, Symbol

- 값이 담긴 주소값 바로 복제, 불변성(데이터 메모리 변경 불가)

2) 참조형(Object) : Array, Function, Date, RegExp,Map,Set

- 기본형들의 묶음을 가리키는 주소값 복제, 불변X(데이터 메모리 변경 가능)

3) 메모리 키워드

- 변수 메모리, 데이터 메모리, 참조형 메모리, 가비지 컬렉터

 

 

2. 실행컨텍스트

1) 개요

- 선언된 변수 끌어올림(호이스팅), 외부 환경 정보 구성, this 설정

- 콜스택 방식

 

2) 컨텍스트 구성

- 전역 컨텍스트 : 스크립트를 실행하는 최상위 컨텍스트, 전역 컨텍스트는 단 하나만 존재하며, 코드 실행 전에 자동으로 생성. 전역 객체(Global Object)와 전역 스코프(Global Scope)를 생성함.
- 함수 컨텍스트 : 함수가 호출될 때마다 생성되는 컨텍스트. 함수 컨텍스트는 함수 실행에 필요한 매개변수, 지역 변수, 중첩된 함수, this 값 등을 저장합니다. 함수 실행이 끝나면 해당 컨텍스트는 제거.

- Eval 컨텍스트 : eval() 함수를 실행할 때 생성되는 컨텍스트. 전달받은 문자열을 코드로 실행하는데, 이때 생성된 실행 컨텍스트를 Eval 컨텍스트라고 하며 ES6이후는 function()사용이 권장됨

 

3) 컨텍스트 항목 별 구성 요소

3.1) VE(VariableEnvironment, Variable Object)
- 현재 컨텍스트의 식별자(record)정보, 외부환경정보(outer), 선언 시점LE의 snapshot
- 해당 컨텍스트가 생성될 때 생성, 해당 컨텍스트가 실행 종료되면 함께 소멸

3.1.1) LE(LexicalEnviroment)

- VE와동일하나 변경사항을 실시간으로 반영

 

3.2) Scope Chain(스코프 체인)
- 실행 컨텍스트가 생성될 때, 현재 실행 중인 함수의 유효 범위(scope)를 나타내는 스코프 체인을 생성. 

3.4) ThisBinding
- 실행 컨텍스트에서 사용되는 this 값으로, 함수가 호출될 때 결정. this 값은 함수를 호출할 때 전달되는 객체를 나타냄

 

 

3. this

1) 전역공간, 함수의 this

- 글로벌객체(node), 윈도우객체(브라우저)

2) 메소드의 this

- 호출 주체

3) 화살표 함수

- this binding 과정이 없어 상위 this값이 상속됨

4) 생성자 함수의 this

- 생성된 인스턴스들을 가르킴

5) 명시적 this 바인딩

- call, apply, bind

 

 

4. 리뷰

JS의 구조를 깊게 파헤쳐봤고, 몇몇 예제들을 풀면서 실행컨텍스트 콜스택 순서와 thisbinding 개념을 이해하였다. 한번에 완벽하게 이해하기엔 양이많고 개념이 깊어서 다음에 한번 더 공부 후 상세히 정리할 예정