프로토타입

프로그래밍 언어에서 객체 지향을 구현하기 위한 페러다임으로 클래스 기반 언어와, 프로토타입 기반 언어가 존재하며, 자바스크립트는 프로토타입 기반 언어입니다.

프로토타입 언어의 특징

• 철학자 로쉬에 의해 정리된 프로토타입 이론을 기반으로 탄생한 페러다임
• 개별 객체 수준에서 메소드와 변수를 추가
• 객체 생성은 일반적으로 복사를 통해 이루어짐(JS는 프로토타입 체인)
• 확장이 아니라 위임(현재 객체가 메세지에 반응하지 못할 때 다른 객체로 메세지를 전달)
• 선험적 분류의 필요성을 줄이고, 유사성을 활용하도록 선택
  ※ 프로토타입 체인이란? https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

클래스란?

• 같은 종류의 집단에 속하는 속성과 행위를 정의한 것으로 사용자(개발자)가 정의한 데이터형. 클래스란 객체를 생성하기 위한 청사진이다

이벤트 루프와 실행 컨텍스트

이벤트 루프는 Javascript 의 언어적인 스펙이 아니라 브라우저의 Javascript 엔진이 구현하는 것으로, 브라우저에 따라 작동 방식에 차이가 있으나, 여기서는 보편적으로 사용되는 V8 엔진을 기준으로 설명합니다.

기본 개념

• 메모리 힙: 변수, 함수 등 객체 등이 담기는(할당되는) 영역
• Call stack: 코드가 한줄 단위로 실행(실행 컨텍스트가 쌓임)
• Web Apis: 지금 당장 실행될 수 없는 코드들, Promise, Ajax 등의 대기소
• Callback queue: 아래의 순서는 실행 우선순위가 높은 순
  • Microtask Queue: Promise, Object.observer, process.nextTick 등
  • Task Queue: setTimeout, setInterval, requestAnimationFrame, IO, UI 렌더링 등
  • Animation Frame

이벤트 루프의 실행순서

• Call Stack 에서 순서대로 한줄씩 실행한다
• 지금 당장 실행될 수 없는 코드들(주로 비동기 코드)은 Web Apis로 이동된다
• 이벤트 루프가 돌다가 Web Apis에서 실행이 가능해진 코드들은 Callback queue 로 이동한다
• Call Stack 이 완전히 비어있을 때, Callback queue에 쌓인 코드들이 순서대로 실행된다

실행컨텍스트

• 실행한 코드에 제공할 확경 정보들을 모아놓은 객체
• Call stack에는 실행컨텍스트 단위로 쌓인다
• 코드 평가, 호이스팅이 일어난 후 스코프 단위로 실행 컨텍스트가 생성된다.

호이스팅

• 실행 컨텍스트 생성시 렉시컬 스코프 내의 선언이 끌어올려 지는 것

화살표 함수와 일반함수의 차이

• 일반 함수: this 가 실행 문맥상에서 발화자(Invoker)를 가리킨다. 동일한 함수가 호출되더라도 실행 문맥에서 누가 발화했는지에 따라 this에 바인딩 되는 객체가 다르다
• 화살표 함수: 함수의 선언시에 this에 바인딩 될 객체가 정적으로 결정된다. 즉, 언제나 상위 스코프의 객체가 this로 바인딩되며, call, apply, bind 로 this를 변경할 수 없다
• call: 첫번째 인자에 this로 바인딩 할 객체를 전달
• apply: call 함수와 동일하나 두번째 인자로 함수에 전달할 인자를 배열 형태로 받아 전달
• bind: 첫번째 인자로 받은 객체를 this에 바인딩하여 생성된 함수를 반환한다. 곧바로 실행되지 않음

var, let, const 의 차이점

• var: 함수 레벨 스코프로 중복 선언이 가능하며, 선언과 함께 undefined로 초기화 된다
• let, const: 블록 레벨 스코프로 중복 선언이 불가하다. 선언과 초기화가 분리되며, 초기화 되지 않으면 일시적 사각지대(TDZ)로 인해 이를 참조하고자 하면 에러가 발생한다. 단, const의 경우 반드시 선언과 할당이 동시에 이루어져야 하며, 그렇지 않으면 문법 에러가 발생한다

Javascript 의 형(Type)

• 원시형: String, Number, Bigint, Boolean, Undefined, Symbol
• 복합형: Object, Array, Function

클로져

• 함수 선언 시점의 렉시컬 환경을 기억하는 함수

가비지 콜렉션의 동작 알고리즘

• Mark and sweep 알고리즘: Roots 객체, JS 에서는 전역객체(브라우저의 경우 window)로부터 시작하여 참조하며 내려가 닿을 수 없는 오프젝트를 가비지 컬렉터가 수집한다