면접대비 질문 정리: 자바스크립트, 타입스크립트

면접질문 참고

• https://nomadcoders.co/community/thread/3979
• [diary] 프론트엔드 신입 면접 준비하기
• [면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)
• 프론트엔드 면접질문 중요도별 정리
• [Frontend] 프론트엔드 주니어 개발자 면접 질문 (기술/인성)

 

1. 호이스팅(hoisting)이란?

호이스팅이란 "끌어올린다" 라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. (여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않습니다.)

 

👾 변수 호이스팅

console.log(score); //undefined
var score;

js는 인터프리터에 의해 한줄씩 순차적으로 실행되는 인터프리터 언어다. 따라서 순차적으로 변수 선언 이전에  console.log(score);가 실행된다.

선언되지 않은 변수를 사용하는 경우 참조 에러가 발생하므로 위의 코드도 에러가 발생해야 한다. 하지만 위 코드의 출력 결과는 참조에러가 아닌 undefined이다. (console.log 실행 시점에 이미 변수 선언과 초기화가 완료되었다는 뜻)

 

이유👉 변수 선언은 *런타임 이전 단계에서 먼저 실행되기 때문이다.

(*런타임: 소스코드가 한줄씩 실행되는 시점)

 

자바스크립트 엔진은 소스코드를 순차적으로 실행하기 전 먼저 소스코드 평가과정을 거친다. 모든 선언문(var, let, const, function, function*, class 키워드를 사용한 모든 선언문)을 소스코드에서 찾아내 먼저 실행하는 것이다. 위의 코드와 같은 경우 console.log(score); 코드 실행 이전에 js 엔진이 이미 score의 선언을 확인했으므로, console.log(score);의 결과로 undefined가 출력된다.

 

이처럼 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 js 특유의 특징을 변수 호이스팅이라 한다.

함수도 호이스팅된다.(추가, 함수 표현식은 한 줄 한 줄 읽으며 실행되고 함수 선언문은 호이스팅이 일어나서 함수 선언문 이전에 함수 사용 가능) 

 

참고: 

• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/hoisting.md
• https://florescene.tistory.com/420

 

2. ES6에 추가된 문법

• const, let
• arrow function
• template literals(탬플릿 리터럴) - 백틱사용하여 문자열 내에서 변수사용가능합니다.
• 구조분해할당
• import export
• promise
• spread 연산자

 

3. 동기와 비동기

✅ 답변

동기는 요청을 보낸 후 기다렸다가 해당 응답을 받고 나서 다음 동작을 실행하는 것을 의미하고, 비동기는 요청을 보낸 후 응답에 관계없이 순차적으로 다음 코드를 먼저 실행하는 것입니다.

 

 

4. 렉시컬 환경 (Lexical Environment)

✅ 답변

Lexical Environment는 코드 block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체입니다.
소스 코드를 실행하면서 참조가 필요한 변수의 값이 있다면, 이 Lexical Environment라는 객체에서 식별자 이름을 키로 찾게 됩니다.

 

참고: https://developer-alle.tistory.com/407

 

 

5. 실행 컨텍스트 (Execution context)

✅ 답변

실행 컨텍스트는 실행하고 있는 함수를 트래킹하기 위한 특별한 자료 구조입니다. 

현재 실행하고 있는 함수 내의 현재 변수 상태와 this의 값 등을 저장하고 있고, 현재 실행 중인 line을 기억하고 있습니다.

함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되며, 함수의 실행이 끝나면 해당 컨텍스트는 스택에서 제거됩니다. 따라서 중첩된 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고, 각 함수는 자신만의 변수 환경과 this 값을 유지합니다. 이러한 구조를 통해 중첩된 함수의 실행이 끝나면 다시 이전 실행 컨텍스트로 다시 돌아갈 수 있습니다.

 

참고: https://developer-alle.tistory.com/407

 

 

6. 클로저 (closure) ⭐

✅ 답변

클로저란 함수와 그 함수가 정의된 렉시컬 환경(Lexical environment)의 조합입니다. 클로저는 함수가 생성될 때의 렉시컬 환경을 기억하고, 이 환경을 나중에 호출될 때 사용합니다. 이를 통해 중첩 함수가 외부 함수의 변수 및 함수에 접근할 수 있게 됩니다.

내부함수 innerFunc가 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근할 수 있는 것, 다시 말해 상위 스코프에 접근할 수 있는 것은 렉시컬 스코프의 레퍼런스를 차례대로 저장하고 있는 실행 컨텍스트의 스코프 체인(스코프가 어떻게 연결되고 있는지 보여주는 일종의 리스트)을 자바스크립트 엔진이 검색하였기에 가능한 것이다. 좀더 자세히 설명하면 아래와 같다.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10

1. innerFunc 함수 스코프(함수 자신의 스코프를 가리키는 활성 객체) 내에서 변수 x를 검색한다. 검색이 실패하였다.
2. innerFunc 함수를 포함하는 외부 함수 outerFunc의 스코프(함수 outerFunc의 스코프를 가리키는 함수 outerFunc의 활성 객체)에서 변수 x를 검색한다. 검색이 성공하였다.

클로저는 함수가 생성될 당시의 외부 변수를 기억하고, 이후에도 그 변수에 계속해서 접근이 가능한 기능입니다.

외부 함수의 실행이 끝나서 외부 함수가 소멸된 이후에도 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부함수에 의해 참조되는 한 유효하기 때문에, 내부 함수가 외부 함수의 변수에 접근할 수 있습니다. 

 

참고:

• https://www.youtube.com/watch?v=tpl2oXQkGZs&ab_channel=%EC%BD%94%EB%94%A9%EC%95%99%EB%A7%88
• https://poiemaweb.com/js-closure

 

7. async, await

✅ 답변

async 함수에 대해 말씀드리겠습니다. 

function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환합니다. promise가 아닌 값을 반환하더라도 이행 상태의 promise(resolved promise)로 값을 감싸 이행된 promise가 반환되도록 합니다.

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

await는 async 함수 안에서만 동작하는 키워드입니다.

자바스크립트는 await 키워드를 만나면 promise가 처리될 때까지 기다리고, 결과는 그 이후에 반환됩니다.

즉 promise가 처리될 때까지 함수 실행을 기다리게 만들고 promise가 처리되면 그 결과와 함께 실행이 재개됩니다.

promise가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

(await는 promise.then보다 좀 더 세련되게 promise의 result 값을 얻을 수 있도록 해주는 문법입니다. promise.then보다 가독성이 좋고 코드를 작성하기도 쉽습니다.)

 

참고:

• 프로미스
• async, await

 

8. var, let, const의 차이 및 특징

✅ 답변

var 선언은 전역 스코프 또는 함수 스코프이며, let과 const는 블록 스코프입니다.

var 변수는 범위 내에서 업데이트 및 재선언할 수 있습니다. let 변수는 업데이트할 수 있지만, 재선언은 할 수 없습니다. const 변수는 업데이트와 재선언 둘 다 불가능합니다.

세 가지 모두 최상위로 호이스팅될 수 있지만 var 변수는 undefined(정의되지 않음)으로 초기화되는 반면 let과 const 변수는 초기화되지 않습니다.

var와 let은 초기화하지 않은 상태에서 선언만 하는 것이 가능하지만, const는 선언과 동시에 초기화를 반드시 해주어야 합니다.

 

참고: https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/

 

 

9. 스코프(Scope)

✅ 답변

‘변수에 접근할 수 있는 범위’를 뜻합니다.

자바스크립트의 스코프는 크게 전역 스코프, 지역 스코프로 나뉩니다.

전역 스코프의 경우 최상위 레벨에 해당하는 스코프이기 때문에 어디에서든 접근이 가능합니다.

반면 지역 스코프의 경우 특정 함수에 해당하는 스코프로, 해당 함수 자신과 하위 함수에서만 자원에 접근할 수 있습니다.

 

 

10. 객체지향이란?

✅ 답변

객체지향 프로그래밍이란 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그래밍하는 것을 뜻합니다.

생성자 함수를 통해 객체를 생성할 수 있고 생성자 함수 내에 속성(property)과 행동(method)를 지정하면 생성된 객체들은 공통된 속성과 행동을 사용할 수 있습니다.

모듈화, 은닉화, 상속이 가능하다는 특징이 있습니다. 

 

참고: 

• https://valueengine.tistory.com/m/18?category=1134953
• https://joontae-kim.github.io/2020/10/22/javascript-oop/

 

10. spread 연산자

✅ 답변

기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있는 연산자입니다.

 

 

 

 

앞으로 공부할 질문들

this

이벤트 루프⭐

map과 foreach의 차이

자바스크립트의 메모리 관리

Promise⭐

callback함수⭐

이벤트 전파(이벤트 버블링)⭐

이벤트 위임⭐

null, undefined, undeclared, NaN 에 대해 설명

Axios

 

 

 

Type과 Interface의 차이(*)
타입스크립트를 사용해 본 경험이 있는지, 있다면 소감을 말해주세요(*)
타입 추론에 대해 아는 대로 설명해주세요(*)