면접 예상 문제 답안 정리 - JavaScript

https://github.com/JaeYeopHan/Interview_Question_for_Beginner 위 링크에 있는 문제에 대한 답안을 정리해보았다.

JavaScript Event Loop

자바스크립트 엔진은 크게 세 부분으로 나뉜다

Call stack, Task Queue(Event Queue), Heap 그리고 추가적으로 Event loop 가 존재하여 Task Queue에 들어가는 task를 관리한다.

Call Stack

자바스크립트는 단 하나의 호출 스택을 사용한다.
요청이 들어올 때마다 순차적으로 요청을 호출 스택에 담아 처리
그 말은 하나의 함수가 실행되면 다른 어떤 task도 수행될 수 없다는 것

Heap

동적으로 생성된 객체(인스턴스)는 힙에 할당된다.
대부분 구조화되지 않는 더미같은 메모리 영역을 heap이라 표현

Task Queue (Event Queue)

자바스크립트의 런타임 환경에서 처리해야 하는 Task들을 임시 저장하는 대기 큐
Call Stack이 비워졌을 때 먼저 대기열에 들어온 순서대로 수행됨
이벤트 루프는 반복해서 call stack과 queue 사이의 작업들을 확인하고, call stack이 비워져있는 경우 queue에서 작업을 꺼내어 call stack에 넣음

참조

https://asfirstalways.tistory.com/362
http://sculove.github.io/blog/2018/01/18/javascriptflow/

Hoisting

hoist란? 끌어올리기
var 변수 선언과 함수선언문에서만 호이스팅이 일어남
- var 변수의 할당이 아닌 선언만 호이스팅 발생
- let/const 변수 선언과 함수표현식에서는 호이스팅 발생X
변수의 정의가 그 범위에 따라 선언과 할당으로 분리됨.

Hoisting 사용 시 주의

코드의 가독성과 유지 보수를 위해 가급적 호이스팅이 일어나지 않도록 한다
- 함수와 변수를 가급적 코드 상단부에 선언
- let/const를 사용

참조

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

Execution Context

실행 컨텍스트

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념. 실행 가능한 코드가 실행 되기 위해 필요한 환경. 여기서 말하는 실행 가능한 코드는

전역 코드: 전역 영역에 존재하는 코드
Eval 코드: eval 함수로 실행하는 코드
함수 코드: 함수 내에 존재하는 코드 자바스크립트 엔진은 코드를 실행하기 위해 아래와 같은 정보를 알고 있어야 한다
변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
함수 선언
변수의 유효범위(Scope)
this

코드를 실행하면 아래와 같은 과정이 일어난다.

컨트롤이 실행 가능한 코드로 이동하면 논리적 스택 구조를 가지는 새로운 실행 컨텍스트 스택이 생성된다.
전역 코드로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다. 전역 실행 컨텍스트는 애플리케이션이 종료될 때까지 유지된다
함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다
함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.

실행 컨텍스트의 3가지 객체

실행 컨텍스트는 물리적으로 객체의 형태를 가지며 아래 3가지 프로퍼티를 소유한다

Variable object
Scope chain
thisValue

Variable Object (변수 객체)

variable object는 아래 정보를 담는다

변수
매개변수(parameter)와 인수 정보(arguments)
함수 선언(함수 표현식은 제외) variable object는 다른 객체를 가리키는 값을 갖는다. 그런데 전역 코드 실행시 실행되는 전역 컨텍스트의 경우와 함수를 실행할 때 실행되는 함수 컨텍스트는 가리키는 값이 다르다. 전역 코드와 함수의 내용이 다르기 때문.

전역 컨텍스트의 경우

variable object는 전역 객체를 가리킨다.

함수 컨텍스트의 경우

Activation object를 가리키며 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 객체인 arguments object가 추가된다.

Scope Chain

해당 전역 또는 함수가 참조할 수 있는 변수, 함수 선언 등의 정보를 담고 있는 전역 객체 또는 활성 객체의 리스트를 가리킨다

this value

this 프로퍼티에는 this 값이 할당된다. this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.

참조

https://poiemaweb.com/js-execution-context

Scope

Closure

함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 것.
스코프를 함수 주변으로 좁히는closing 것.
자신의 scope 외부에 있는 것을 가져와 쓰는 것.

let globalFunc;
{
	let blockVar = 'a';
    globalFunc = function() {
    	console.log(blockVar);
    }
}
globalFunc();     // "a"

globalFunc가 있는 블록 스코프와 그 부모인 전역 스코프가 클로져를 형성. globalFunc를 어디서 호출하든 이 함수는 클로저에 들어있는 식별자에 접근할 수 있다.

즉시 호출하는 함수 표현식

함수 표현식을 사용하면 즉시 호출하는 함수 표현식(IIFE)을 만들 수 있다. IIFE는 함수를 선언하고 즉시 실행. 다음과 같은 형태를 취한다.

(function(){
	// IIFE 바디
})();

IIFE의 장점은 내부에 있는 것들이 모두 자신만의 스코프를 가지지만, IIFE 자체는 함수이므로 그 스코프 밖으로 무언가를 내보낼 수 있다는 것이다. IIFE는 함수이므로 무엇이든 반환할 수 있다.

var, let, const의 차이

var : function level scope를 가지며, 재할당이 가능하다. 호이스팅이 일어난다.
let : block level scope를 가지며, 재할당이 가능하다
const : block level scope를 가지며, 재할당이 불가능하다.

참조

책 ‘러닝 자바스크립트(이선 브라운)’

this에 대해서

자바스크립트의 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 그렇기 때문에 자바스크립트에서 this는 함수가 호출된 상황에 따라 그 모습을 달리한다.

생성자 함수 / 객체에서의 this

new 키워드로 새로운 객체를 생성했을 경우 생성자 함수 내의 this는 new를 통해 만들어진 새로운 변수가 됨.

bind, call, apply 에서

명시적으로 this를 바꾸기에 this가 객체를 가리킴

arrow function

화살표 함수는 this로 window 대신 상위 함수의 this를 가져옴

참조

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb
https://blueshw.github.io/2018/03/12/this/

Promise

프로미스 기반 비동기적 함수를 호출하면 그 함수는 Promise 인스턴스를 반환한다. 프로미스는 fullfilled or rejected 두 가지뿐. 프로미스가 성공하거나 실패하면 그 프로미스를 settled 됐다고 말한다.
프로미스에 접근하려면 .then()을 쓴다.
error를 처리하려면 .catch()를 쓴다.

Async / Await

JavaScript 개발자들이 Promise로 만족하지 못하고 더 훌륭한 방법을 고안해낸 것. function 키워드 앞에 async를 붙여주면 되고, function 내부의 promise를 반환하는 비동기 처리 함수 앞에 await를 붙여주기만 하면 된다.
Promise 보다 비동기 코드의 겉모습을 더 깔끔하게 한다.

참조

https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/JavaScript