[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가지! 간단히 변수의 참조를 기록하는 환경이라고 생각하자.
-
VariableEnvironment: 변수 객체(Variable Object) 라고도 함
- LexicalEnvironment의 스냅샷이라고 함
-
LexicalEnvironment
-
변수, 매개변수, 인자, 함수 선언 등의 정보
-
Environment record와 Outer로 구성되어 있음
Environment record
- 변수와 함수 선언등을 저장
- 코드가 실행되기 전에 정보를 모두 수집 = 자바스크립트 엔진은 실행되기 전에 코드의 변수명을 모두 알고 있다는 것 → hoisting
- 해당 변수가 어떤 값을 할당했는지는 관심 없다
Outer
- 다른 LexicalEnvironment를 참조하기 위함. → scope 탐색!
-
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 얘기 할것!