[Pre Onboarding] 8월 16일 4주차

[Pre Onboarding] 8월 12일

예상 면접질문

• var vs let vs const 차이
• Closure 란?
• Hoisting 이란?
• this에 대해 설명해주세요.
  • this는 JavaScript에서 어떻게 작동하는가?
  • context란 무엇인가?
  • context에 따른 this의 차이는?
  • Call, Apply, Bind 함수에 대해 설명해달라
  • 화살표 함수와 일반 함수와의 차이

Execution Context

실행 컨텍스트

• 실행 컨텍스트는 JavaScript 코드가 실행되고 있는 컨텍스트입니다.
• 실행컨텍스트는 실행할 코드에 제공할 환경 정보들을(변수 정보들) 모아놓습니다.
  함수를 실행할 때마다, 그 함수에 대한 새로운 실행 컨텍스트를 생성하여 자신만의 고유한 컨텐스트에서 실행된다.
• 어떤 정보냐면..
  → 코드 실행하기 위한 여러가지 정보
  → ex) 어떤 변수가 있는지, 어떤 변수를 hoisting 할지, scope는 어떻고 scope chain은 어떻고, this는 어디에 어떻게 binding 되고 등등..
• 실행 컨텍스트는 scope, this binding, hoisting, closure 등의 동작원리를 담고 있다보니, 해당 키워드의 이해가 전부 있어야 해서 어렵게 느껴잡니다.

실행할 코드와 콜스택

• 하나의 자바스크립트 파일을 실행할 때, 필요한 환경 정보를 모아 컨텍스트를 구성하고, call stack에 쌓아 올렸다가, 가장 위의 컨텍스트와 관련있는 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장
• call stack 이란 현재 실행 중인 작업 관한 정보를 저장하는 Stack 자료구조

실행할 코드

1. 전역 코드

• 전역 영역에 존재하는 코드는 전역 컨텍스트가 생성
• 콜스택에 전역 컨텍스트는 하나뿐.
• 자바스크립트 파일 실행하자마자 전역 컨텍스트부터 활성화

2. 함수코드

• 함수 내에 존재하는 코드를 실행하기 위한 함수 컨텍스트

3. eval코드

• eval 함수로 실행되는 코드를 위한 eval 실행컨텍스트
• 요즘에 거의 쓰지 않으니 넘어가자.

컨텍스트에 담기는 정보

3가지! 간단히 변수의 참조를 기록하는 환경이라고 생각하자.

1. VariableEnvironment: 변수 객체(Variable Object) 라고도 함

   • LexicalEnvironment의 스냅샷이라고 함

2. LexicalEnvironment

   • 변수, 매개변수, 인자, 함수 선언 등의 정보

   • Environment record와 Outer로 구성되어 있음
     Environment record

     	- 변수와 함수 선언등을 저장
     	- 코드가 실행되기 전에 정보를 모두 수집 = 자바스크립트 엔진은 실행되기 전에 코드의 변수명을 모두 알고 있다는 것 → hoisting
     	- 해당 변수가 어떤 값을 할당했는지는 관심 없다

     Outer
     - 다른 LexicalEnvironment를 참조하기 위함. → scope 탐색!

3. ThisBinding

hoisting

함수 선언문과 함수 표현식

함수 선언문(function declaration)

• function 정의만 존재하고 별도의 할당 명령이 없다.

함수 표현식(function expression)

• function 키워드로 정의한 함수를 변수에 할당하는 것을 말한다.

hoisting

• 호이스팅은 변수의 선언을 끌어올리는 것을 말한다.
• 선언부는 끌어올리고, 할당은 코드가 실행되는 시점에 진행된다.

scope

변수가 유효한(살아있는) 범위

Global Scope

• 코드 어디에서든지 참조 가능
• var로 선언한 변수는 전역 객체에 속하게 된다.(프로퍼티가 된다)
  • client(브라우저)의 전역 객체는 window, Node.js에서는 global

Local Scope

• JavaScipt는 다른 언어와 달리 scope의 범위가 함수 블록 내이다. ({} 블록과 상관이 없다)
  = 함수에 의해서만 scope가 생성된다.

var, const 차이 hosting, scope에 대해 얘기하기

Scope Chain

• 변수가 해당 scope에서 유효하지 않을 때, 안에서부터 바깥으로만 차례로 검색해 나가는 것

closure

• 컴퓨터 언어에서 클로저는 일급 객체 함수의 개념을 이용하여 스코프에 묶인 변수를 바인딩 하기 위한 일종의 기술
• 함수를 일급 객체로 취급하는 여러 함수형 프로그래밍 언어에서 사용되는 보편적인 특성(JavaScript도)
• "함수가 선언됐을 때"가 중요.
• 함수를 선언할 때 만들어진 scope가 사라진 후에도 호출할 수 있는 함수
• scope가 끝난 외부 함수의 변수를 참조할 수 있다.

어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

var A = function() {
	var a = 1;

	var B = function() {
		return ++a;
	};

	return B;
};
var outer = A();
console.log(outer());  // 2
console.log(outer());  // 3

this

함수와 메서드

• 함수와 메서드는 모두 function 키워드로 함수를 정의한 것을 의미합니다.
• 그 중에서도 메서드는 객체의 프로퍼티로 함수가 정의되어야 한다.
  여기서 중요한건 객체가 함수를 호출해야 메서드이다.
  
• this는 실행컨텍스트가 생성될 때 결정된다. 실행컨텍스트는 함수를 호출할 때 생성되므로,
  this는 함수를 호출할 때 결정된다.
• this가 무엇이냐고 한다면 → this가 바라보고 있는 객체인데, 상황에 따라 대상이 달라진다.

arrow function

• this의 대상이 어떤 객체가 호출했느냐로 결정되지 않는다!
• 함수 내부에 this는 없으며, scope chain의 가장 가까운 this로 대상 결정!
  반드시 this 얘기 할것!