Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

[기술면접] 프론트엔드 면접 대비 (자바스크립트) 본문

CS/면접 대비

[기술면접] 프론트엔드 면접 대비 (자바스크립트)

미니모아 2022. 5. 9. 23:31

프론트엔드 면접 대비 (자바스크립트)

var, let, const 차이

Var

var는 이전에 변수를 선언하는 방식으로 더 이상 권장되지 않는다. var는 기존에 선언된 변수의 값을 덮어쓰며, 함수 스코프를 기준으로 동작한다.

문제점

var의 경우 변수를 선언할 때 선언과 초기화가 동시에 이뤄지기 때문에 호이스팅이 가능하게 된다.
블록 스코프를 무시하기 때문에 문제를 일으킬 수 있다.

let

es6에 새롭게 추가된 변수 선언 방식으로 블록 스코프를 가지며 선언, 초기화, 할당이 따로 이루어지기 때문에 호이스팅이 불가능하다. 재선언을 허용하지 않는다.

const

es6에 새롭게 추가된 변수 선언 방식으로 불변값을 가진다. let과 마찬가지로 블록 스코프를 가지며 호이스팅이 불가능하고 재선언을 허용하지 않는다.

초기화시 값이 필요하다.

함수 선언형, 함수 표현식 차이

화살표 함수는 함수를 간단하게 표현할 수 있는 ES6문법이다. 일반 함수는 this가 동적으로 바인딩 되는 반면, 화살표 함수는 렉시컬 this를 사용한다.

렉시컬 this란 함수를 어디에 선언하는지에 따라 this의 값이 결정되는 것을 말한다. 화살표 함수의 this는 화살표 함수를 둘러싸고 있는 렉시컬 스코프에서 this의 값을 받아 사용한다. 이 값은 변경되지 않는다.

또한, 화살표 함수는 프로토타입 프로퍼티를 가지고 있지 않기 때문에 생성자 함수로 사용이 어렵고 arguments 변수가 전달되지 않는다.

함수 선언문(일반 함수)의 경우 선언 & 초기화 & 할당이 동시에 진행되므로 호이스팅은 물론 실행도 가능하다. 함수 표현식(화살표 함수)는 불가능하다.

이벤트 버블링과 캡처링

이벤트 버블링과 캡처링 예시

dom이 겹쳐져 있을 경우 이벤트 시발점과 관련된 모든 요소들도 이벤트에 탑승하게 된다.

currnet target: 이벤트의 현재 주인

target: 이벤트의 시발점

관련된 엘리멘트들도 각각 이벤트를 가지고 있을 경우 순차적으로 이벤트가 실행되어야하는데 이를 위해 이벤트 플로우를 가진다. 그리고 이 플로우의 순서는 정해져있다.

html가 루트라면 밑에는 브라우저가 있을 것이다.

이벤트 플로우는 브라우저와 가장 가까운 것부터 실행되며 자식 엘리멘트로 내려가는 것을 capture phase이라고 한다.
target에서 이벤트가 실행되는 것을 target phase라고 한다.
이후에 다시 올라가게 되는데 이 과정을 bubble phase라고 한다.

하지만 이 순서대로 이벤트가 수행될 경우 target 이벤트 외에 다른 이벤트들도 중복되며 수행되는 문제점이 있다.

이를 해결하기 위해서 브라우저에서는 제한을 둔다.

currentTarget과 target이 일치하지 않는 경우 캡처 단계에서 실행될 것인지 버블 단계에서 실행될 것인지 선택할 수 있게 하는 것이다. 브라우저의 기본 값은 버블이다.

addEventListener의 3번째 인자(useCapture)로 설정할 수 있다.

따라서 이벤트가 중복되지 않고 실행되게 된다.

e.stopPropagation()

해당 요소 다음의 event flow를 멈출 수 있다.

출처:

https://youtu.be/7gKtNC3b_S8

Event delegation

이벤트 델리게이션은 수많은 자식 엘리멘트의 이벤트 핸드링을 부모 엘리멘트에서 한 번에 처리하는 것을 말한다.

(예, <table> 혹은 ul 등의 부모 엘리멘트 안에 각각의 항목에 대해 동일한 종류의 처리를 해줘야할 때)

데이터 타입

원시값

더 이상 쪼갤 수 없는 하나의 값을 가지는 것을 원시타입이라고 한다.

number
string
boolea
- false : 0, null, undefined, NaN, '' (falsy 값으로 거짓으로 평가된다.)
- true: any other value
null
undefined
Bigint

값 자체가 메모리에 저장된다.

참조값

Object

이름(키): 값 형태로 여러 값을 포함하는 컨테이너이다. 컨테이너 내부의 값은 변경할 수 있다. 거의 모든 객체들은 Object타입의 인스턴스이다.

object는 referece를 참조하고 referece는 객체 내부 내부의 값들이 저장되는 각각의 메모리를 가리킨다.

리터럴, Object 생성자 함수, 생성자 함수를 이용해 생성할 수 있다.

자바스크립트 데이터 형 변환

명시적 강제 변환

명시적 강제 변환은 의도적인 타입 변환을 나타내는 것이다.

문자열 변환
- String() : ECMAScript의 ToString 추상 연산을 기준으로 이뤄진다. 객체의 경우 원시 타입으로 변환한 뒤 다시 한번 ToString 추상 연산을 수행한 값을 반환한다. (Symbol는 객체의 다른 프로퍼티에 접근하는 것을 방지하기 때문에 변환 불가능하다.)
- toString() : 객체일 경우만 가능
숫자 변환
- Number() : ECMAScript ToNumber 추상 연산 명세를 기준으로 반환한다. BigInt, Symbol은 불가능하다. BigInt는 숫자와 타입이 구분되어야 하기 때문이다.
- parseInt() : 문자열만 대상으로 변환한다. 그 외 경우는 해당 값을 문자열로 변환한 후에 사용한다.
불리언으로 변환
- ToBoolean()
- Boolean()

객체의 원시 타입 변환

문자열, 숫자로 변환 두가지로 나뉘며 valueOf(), toString()이 쓰인다.

암묵적 강제 변환

표현식의 평가 중 타입이 변환 되는 것이다. 연산 중에 내부적으로 타입이 변환된다.

덧셈 연산자
- 피연산자 중 하나라도 문자열일 경우 나머지 타입도 문자열로 변환하여 병합한다.
- 모두 문자열, 객체가 아니면 숫자로 변환하여 연산한다.
동등 연산자
- 암시적 강제 변환을 허용한다. 피연산자 타입이 서로 같을 경우에는 변환하지 않는다.
- null == undefined
비교 연산자
조건 표현식
논리 연산자
- 논리 연산자 값이 불리언 타입이 아닐 수 있다.
- && : true일 경우 두 번째 피연산자, false일 경우 첫 번째 피연산자의 값을 리턴한다.
- || : true일 경우 첫번쩨 피연산자, false일 경우 두번째 피연산자의 값을 리턴한다.

자바스크립트가 유동적인 언어인이유는?

런타임에 타입이 결정되기 때문이다. 변수에 어떤 값이 담기는지에 따라 타입이 런타임에 달라지기도 한다. 그렇기 때문에 오류를 야기할 수 있고 이러한 문제를 해결하기 위해 타입을 명확히 명시하는 타입 스크립트가 등장하게 되었다.

프로토타입

프로토타입은 클래스, 객체의 내용 복사 없이도 상속을 구현할 수 있게 해주는 방법이다.

._ _ proto _ _

자바스크립트는 클래스처럼 상속이 불가능하다. 이를 해결하기 위해서 proto를 사용한다. 모든 자바스크립트 객체가 가지고 있는 proto는 객체와 객체를 연결하는 링크이다.

이러한 연결관계는 다음과 같다.

1. 다른 객체를 바탕으로 만들어진 객체라면

객체는 자신의 원형이라고 할 수 있는 객체가 있다면 그 객체를 가리키는 proto링크를 자동으로 가진다.

const newObj = Object.create(oldObj)
newObje.__proto__ = oldObj

2. 그냥 객체가 아니라 함수라면

이 경우 proto 외에 자신의 prototype 객체를 만든다.

함수는 자신의 프로토타입 속성을 통해서 자신의 프로토 타입 객체를 가리키고 프로토 타입 객체의 constructor는 함수를 가리키는 순환 참조 구조를 가지고 있다.

3. new + 함수로 만들어진 객체라면

new 키워드는 빈 객체를 메모리 상에 생성한다.
생성된 빈 객체가 this에 바인딩 된다.
함수 내부의 내용이 this 객체의 속성을 채우는 동작이라면 해당 동작이 수행된다.
return 하는 것이 없다면 그렇게 만들어진 this가 return된다.

만들어진 새로운 객체에 proto링크가 해당 객체의 prototype을 가리키게 된다.

prototype chaining

prototype을 proto 링크를 따라서 계속해서 탐색해나가는 과정을 말한다.

이를 이용해 어떤 객체에 proto를 이용해 어떤 메소드를 추가했을 때 해당 객체로 만들어진 인스턴스에서도 해당 메소드를 사용할 수 있게 된다.

proto 링크를 이용해 서로 다른 객체를 연결할 경우 어떤 객체에 어떤 속성이 없어도 연결된 다른 객체에 해당 속성이 있다면 그 속성을 사용할 수 있다.

이러한 체이닝은 Object의 prototype 객체까지 거슬러 올라가게 된다. 이때 proto링크 안에는 null이기 때문에 여기에 도달할 경우 찾으려는 값이 없기 때문에 undefined를 리턴한다.

프로토타입 체이닝과 property 할당

같은 이름의 속성을 객체 안에 넣을 경우 원래 프로토타입 객체의 속성에는 접근할 수 없다. 이를 가려짐(hide)이라고 하며 오버라이딩 대신 가려짐(hide)이 있는 것이다.

출처:

https://www.youtube.com/watch?v=RYxgNZW3wl0

깊은 복사와 얕은 복사

원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래 값과 복사된 값이 서로 영향을 미치지 않는다.

참조값은 변수가 객체의 주소를 가리키기 때문에 복사된 값이 같은 값을 가리킨다. 따라서 원래 값에 영향을 미칠 수 있다.

따라서 개체를 복사하는 방법은 크게 두 가지로 나뉜다.

얕은 복사

얕은 복사는 최상위 레벨 프로퍼티들을 복사한다. 하지만 중첩된 오브젝트들은 (객체 안의 객체) 원본과 복사본 사이에서 공유된다.

Object.assign
전개 연산자

깊은 복사

깊은 복사는 모든 오브젝트를 복사하는 것으로 복사본과 원본 오브젝트는 어느 프로퍼티라도 공유하지 않는다.

재귀함수를 이용한 복사
JSON.stringify()
lodash 라이브러리 사용

불변성을 유지하려면?

자바스크립트에서 불변성이란 객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다.

불변성을 유지하기 위해서는 call by value방식을 사용해야한다. 기존의 변수가 가리키고 있는 메모리 공간에 있는 값을 넘기는 것이 아니라 그 값을 복사하여 새로운 메모리 공간에 저장하고 나서 넘겨준다는 뜻이다.

object 타입의 경우 call by referece 방식을 사용하기 때문에 기존 변수가 가리키고 있는 메모리 공간의 주소를 넘긴다. 완벽하게 불변성을 유지하기 위해서는 복사하여 동일한 값을 가진 새로운 객체를 생성한 후에 값을 변경행한다.

불변성을 유지할 경우 장점

무분별한 상태의 변경을 막는다.
상태의 변경을 추적하기 쉽다.
- 이전 상태를 가진 객체와 다음 상태를 가진 객체를 비교하여 객체의 상태가 변화되었음을 알 수 있다.
- 리액트에서 setState를 사용하는 경우
- 리덕스에서 리듀서를 작성할 때 새로운 객체를 생성해서 반환하는 경우

JS에서 비동기 동작 방식

자바스크립트 엔진은 기본적으로 하나의 쓰레드에서 동작한다. 하나의 쓰레드를 가지고 있다는 것은 하나의 stack을 가지고 있다는 의미와 같고, 하나의 stack이 있다는 의미는 동시에 단 하나의 작업만을 할 수 있다는 의미이다.

자바스크립트 엔진은 하나의 코드 조각을 하나씩 실행하는 일을 하고, 비동기적으로 이벤트를 처리하거나 Ajax 통신을 하는 작업은 사실상 Web API에서 모두 처리된다.

이벤트루프

싱글 스레드 기반의 언어인 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동기성을 지원한다. 직접적인 작업은 Web API에서 처리되고, 그 작업들이 완료되면 요청시 등록했던 callback이 queue에 등록된다.

이벤트 루프는 콜스택과 콜백큐의 상태를 체크하여, 콜 스택이 빈 상태가 되면 콜백 큐의 첫번째 콜백을 콜 스택으로 밀어주는 역할을 한다. 즉 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케쥴하는 동시에 JS에서 비동기 작업을 처리할 수 있게 해준다. 모든 비동기 방식의 API들은 이벤트 루프를 통해 콜백 함수를 실행한다고 볼 수 있다.

Promise

콜백지옥

비동기는 실행 결과를 순서대로 처리하지 않는다. 뒤죽박죽인 결과 순서를 해결하기 위해서 콜백을 사용하는데 이때 중첩된 콜백함수를 매개변수로 사용하는 경우가 발생한다. 이런 패턴을 콜백 지옥 혹은 파멸의 피라미드라고 부른다. Promise 객체를 사용하면 비동기 처리 시점을 명확하게 표현할 수 있다.

Promise와 callback과 차이

callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback 안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수 없다. 하지만 promise를 사용하면 비동기에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해진다.

async, await 사용 방법

async, await는 promise를 더욱 편리하게 처리할 수 있다. promise 체이닝은 콜백 지옥을 개선했지만 이것도 길어질 경우 가독성이 떨어진다.

함수 앞 부분에 async를 붙이고 함수 내부에서 Promise 앞 부분에 await 키워드를 사용한다.

Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이

async와 await는 promise의 syntactic sugar로서 promise를 더 간편하게 작성할 수 있고 마치 프로그램이 동기로 실행되는 것처럼 보이게 한다.

promise 객체를 만들어서 리턴하지 않고 키워드를 붙여서 바로 promise 결과를 넘길 수 있다.

동시 다발적으로 병렬적으로 기능을 수행할 수 있는 경우에는 async, await를 이용해 동기식으로 처리할 경우 비효율적이다.

이때는 promise all을 사용해서 해당 aysnc 작업을 배열로 만들어 동시에 병렬적으로 처리할 수 있다.

JS 호이스팅

변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어 올리는 것을 말한다.

왜?

자바스크립트 엔진에서 변수는 선언 -> 초기화 -> 할당을 거쳐 생성된다.

선언 단계에서 변수는 실행 컨텍스트 (실행 코드에 제공할 정보 객체) 의 변수 객체에 등록된다.

초기화 단계에서 변수에 메모리가 할당되며 메모리 참조를 통해 변수에 접근할 수 있게 된다.

자바스크립트 엔진은 코드를 실행하기 전에 실행 컨텍스트에 등록된 변수 객체에 접근할 수 있다.

var의 경우 변수 선언 & 초기화가 함께 진행되므로, 변수 객체 등록과 동시에 메모리 공간도 할당 받는다. 그렇기 때문에 메모리를 할당 받은 상태이므로 호이스팅시 메모리 참조를 통해 변수 접근이 가능하다.
let/const는 선언과 초기화가 따로 진행되기 때문에 실행 컨텍스트에 등록은 했지만 메모리 할당을 받지 못해 접근이 불가능하다.
함수 선언문(일반 함수)의 경우 선언 & 초기화 & 할당이 동시에 진행되므로 호이스팅은 물론 실행도 가능하다.
함수 표현식(화살표 함수)는 불가능하다.

this

this란

일급 객체인 자바스크립트의 함수는

변수나 데이터에 저장
함수의 인수로 전달
함수의 반환 값으로 사용

될 수 있다.

자바스크립트에서 모든 함수는 this를 가지고 있다. 함수가 호출되면 그때 그때 상황에 따라 This가 가리키는 객체가 결정된다.

이렇게 함수가 호출될 때마다 this가 동적으로 결정되는 것을 this가 그 객체에 바인딩된다고 한다.

함수 실행 컨텍스트가 생성될 때 this 바인딩 컴포넌트의 값도 결정된다.

바인딩 규칙

this는 함수가 호출되는 상황에 따른 4가지 규칙에 따라 바인딩된다.

new 바인딩
명시적 바인딩
암시적 바인딩
기본 바인딩

위 순서에 따라 우선순위를 갖는다

기본 바인딩

가장 기본적인 방식은 함수를 단독 실행하는 것이다. 함수를 단독실행하면 this는 기본적으로 전역 객체에 바인딩 된다.

use strict 키워드를 사용해서 엄격 모드를 사용하게 되면 전역 객체는 기본 바인딩 대상에서 아예 제외가 된다. 그래서 이 때는 undeinfed 값을 가지게 된다.

브라우저 실행 환경 : 윈도우 객체
엄격 모드 : undefined

노드 환경에서는 아래와 같이 바인딩 된다

전역 코드 : 빈 객체 === 모듈 안에 있는 exports 객체
함수 코드 : global

암시적 바인딩

객체의 메소드로 호출되는 경우에는 호출한 함수가 속해 있는 객체에 바인딩된다.

만약 해당 메소드를 콜백 함수로 다른 함수에 전달하게 되면 동일한 함수를 참조하는 또다른 referemce가 콜백 변수에 저장 되어서 사용된다. 하지만 이 때는 암시적 바인딩이 되지 않게 되는데 그 이유는 점 연산 때문이다.

점 연산을 하면 참조 타입이라는 특별한 값을 반환해준다. 참조 타입은 자바스크립트 명세서에서만 사용되는 타입인데 프로퍼티 뿐만 아니라 프로퍼티를 가지고 있는 객체와 strict 모드인지 아닌지에 대한 여부를 가지고 있는 일종의 타입이다.

엄격모드에서 메소드를 점연산으로 호출하게 되면 참조 타입을 받게 되고 이를 바로 괄호를 붙여 실행하면 그 함수 안에 있는 this가 참조 타입에 있는 객체를 찾아서 바인딩된다.

하지만 대괄호 연산이나 점 연산을 제외한 다른 연산들은 참조 값만 전달하기 때문에 프로퍼티의 값 혹은 프로퍼티가 참조하고 있는 참조값만 남게 된다.

따라서 점 연산을 통해 얻은 값은 바로 함수로 호출하지 않고서는 암시적 바인딩을 기대할 수 없다.

명시적 바인딩 (call, apply, bind)

암시적 바인딩에서 this 객체를 잃어 버리는 경우를 해결하기 위해 call, apply, bind 함수를 사용해 this 객체를 명시적으로 지정할 수 있다.

call , apply

call(context, arg1, arg2, ..)

apply(context, args)

//context = this를 바인딩한 객체

call은 인수를 하나씩 전달해주고 apply는 인수들을 배열이나 유사배열 형태로 전달 해준다.

bind

bind(context, arg1, arg2, ..)

bind 메서드는 this가 참조하는 객체를 고정시켜준다.

첫 번 째 인자의 this를 바인딩할 객체를 넣어주고 이후에 인수로 사용될 값들을 넣어준다. bind는 항상 this가 특정 객체에 바인딩된 함수처럼 행동하는 객체를 반환해주며 바인딩된 This는 수정할 수 없다.

이렇게 바인딩을 강제하는 것을 하드 바인딩이라고 한다.

new 연산자 바인딩

함수를 new 키워드와 함께 호출하면 생성자로서의 역할을 함수가 실행할 수 있게 된다.

새로운 객체 생성
- 새롭게 생성된 객체에 this가 바인딩된다.
함수 코드 실행
새로 생성한 객체 반환

arrow function

화살표 함수 안에서 this는 선언될 당시에 상위 스코프에 해당하는 실행 컨텍스트 상의 this 바인딩 컴포넌트를 참조한다. 즉 상위 스코프의 this를 가리킨다.

이러한 this를 렉시컬 this라고 한다.

https://youtu.be/7RiMu2DQrb4

실행 컨텍스트

실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체이다.

실행 컨텍스트는 코드를 실행할 때 식별자를 더욱 효율적으로 결정하기 위한 수단으서 필요한 정보를 한데 모아서 제공하는 객체이다.

자바스크립트 코드를 실행시키면 자바스크립트 엔진은 콜 스택이라는 통에 전역 실행 컨텍스트를 담는다.

함수가 실행되면 해당 함수의 실행 컨텍스트를 담는다.

함수의 실행이 종료되면 해당 실행 컨텍스트는 콜스택에서 사라진다.

전역에 있는 모든 코드가 실행 종료되면 전역 실행 컨텍스트도 사라진다.

순서

생성 단계 : 선언문만 실행해서 환경 레코드에 기록
실행 단계 : 선언문 외 나머지 코드 순차적 실행, 환경 레코드 참조하거나 업데이트

호이스팅이 가능한 이유?

자바스크립트 엔진이 자바스크립트 코드 전체를 스캔하면서 변수와 같은 정보를 실행 컨텍스트 어딘가에 저장해놓기 때문이다. 이 때 기록해놓는 곳이 환경 레코드이다.

식별자와 식별자에 바인딩된 값을 기록한다.

외부 환경 참조

코드에서 변수나 함수의 값을 결정하는 것을 식별자 결정이라고 한다.

콜 스택 안에 동일한 식별이 여럿일 때 자바스크립트는 아우터를 이용해서 의사결정을 한다. outer는 현재 실행 컨텍스트에서 이전 렉시컬 환경을 가리킨다.

자바스크립트 엔진은 현재 실행 중인 실행 컨텍스트를 먼저 살펴보고 만약 없다면 outer를 따라 바깥 렉시컬 환경으로 가서 해당 변수를 찾는다. 전역 실행 컨텍스트까지 오면 찾는 것을 멈춘다.

한번 찾으면 더 이상 outer를 타고 내려가지 않고 탐색을 멈춘다.

이렇게 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상을 변수 섀도잉이라고 한다.

식별자를 결정할 떄 활용하는 스코프들의 연결리스트를 스코프체인이라고 한다.

https://youtu.be/EWfujNzSUmw

스코프와 클로저

스코프

식별자가 자신이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것을 스코프라고 한다.

스코프 체인

함수는 함수 내부에 선언될 수도 있다. 함수 내부에서 정의된 함수를 중첩 함수라고 하고 중첩함수를 포함하는 함수를 외부 함수라고 한다.

이처럼 함수가 중첩이 된다면 각각 함수의 지역 스코프도 중첩이 될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적인 구조를 가질 수 있다.

스코프가 계층적으로 연결되어 있는 것을 스코프 체인이라고 하고 변수를 참조할 때 자바스크립트는 스코프 체인을 통해 변수를 참조한다. 하위 스코프에서 상위 스코프의 변수를 참조할 수 있는 이유가 바로 이러한 스코프 체인의 반 방향성 때문이다.

스코프 레벨

블록 레벨 스코프 : if, for, 함수 ... 대부분의 프로그래밍 언어 + let, const
함수 레벨 스코프 : var ..

상위 스코프

동적 스코프 : 함수가 호출되는 시점에 결정 , 프로그램 런타임 도중에 호출 컨텍스트나 실행 컨텍스트에 의해 결정되는 것
정적 스코프 === 렉시컬 스코프 : 함수가 정의되는 시점에 결정

자바스크립트에서 함수는 생성과 동시에 본인의 내부 슬롯에 상위 스코프에 대한 참조를 저장한다.

함수가 호출되면 다음과 같은 순서로 실행된다.

함수 호출
실행 컨텍스트 생성, 콜 스택에 실행 컨텍스트 넣기
렉시컬 환경 생성
- 포함하는 식별자, 식별자에 바인딩된 걊, 상위 렉시컬 환경에 대한 참조
- 어떠한 코드가 어디서 실행되고 본인 주변에 어떤 코드들이 있는지 대체적인 정보를 담고 있는 환경

함수 실행이 종료되면 콜 스택에서 해당 실행 컨텍스트를 꺼낸다.

클로저

중첩함수가 이미 생명주기를 마감한 외부 함수의 지역 변수를 참조할 수 있는 것을 말한다.

그 이유는 중첩 함수가 내부 슬롯에 상위 스코프의 렉시컬 환경을 저장해놓고 참조하기 때문이다.

중첩함수가

상위 스코프의 식별자를 참조하고 있고
본인의 외부 함수보다 더 오래 살아 있다면

클로져이다.

클로저는 본인의 상위 스코프에서 현재 참조하는 식별자만을 기억한다. 이렇게 클로저에 의해 참조된 변수를 자유변수라고 한다.

하나의 state가 의도치 않게 변경되지 않도록

state를 안전하게 은닉하거나
특정 함수에게만 state 변경을 허용하기 위해 사용한다.

https://youtu.be/PVYjfrgZhtU

가비지 컬렉터

가비지 컬렉터란 메모리 할당을 추적하고, 할당된 메모리 영역이 필요하지 않은 영역일 경우를 판단해서 회수한다.

동작

JS에서 변수는 직접적으로 참조 값을 담고 있지 않고, 해당 값을 메모리 상에 저장한다.

참조 값을 생성하고 나서 더 이상 참조할 것이 없거나 비어졌을 때 가비지 컬렉터가 동작해서 메모리가 반환된다.

참고 링크 출처: