프론트엔드 실무 면접 준비 - JS/TS (1)

중요도가 높은 질문들 - ⭐

실무 면접을 여러 번 진행해보면서 받아본 질문들 - ✔️

---

1. 변수의 선언, 초기화, 할당 단계란?

• 선언 : var Name의 단계, scope가 참조할 대상 생성
• 초기화 : 메모리에 변수 저장에 대한 공간 확보 (default = undefined)
• 할당 : var Name = 'lookin_min'; 변수에 대한 값 할당 단계

2. new 생성자란?

let minsu = new Person();

• 객체를 만드는 역할을 하는 함수, 객체 대한 초기화의 역할
• new + 파스칼케이스의 함수형태
• Java, C++의 class내의 생성자와는 전혀 다른 개념

3. this 키워드란?

• JS에서 this란 자신이 속한 객체를 가르키는 식별자.
  즉, 개체를 나타냄
• 사용 방법에 따라 다른 개체 바인딩
  1. in 객체 메서드 → 해당 객체 바인딩
  2. 단독, 일반 함수 → 전역 객체 바인딩
  3. 이벤트 → 해당 이벤트를 발생시킨 요소 바인딩

4. 콜백 함수? ⭐ ✔️

• 다른 함수의 인자로 넘겨지는 함수
• 다른 함수가 실행을 끝낸 뒤 실행되는 함수
• 비동기 방식의 함수를 동기적 처리를 하기 위해 필요

※ 콜백 지옥?

• 콜백 함수가 연속으로 중첩되어 발생하는 현상
  → Promise / async - await으로 해결 가능

5. Async - Await ? ⭐ ✔️

• 비동기 함수를 동기적 코드처럼 작동
• await 값 반환 전까지 async 내부 함수의 동작을 일시 중단한다.

6. Promise 객체란? ⭐

• 비동기 작업의 결과값 : 완료 / 실패
• Axios의 return값은 Promise 객체이다.

7. Promise VS 콜백함수

• Promise는 비동기 로직의 결과값을 Promise 객체에 저장하고
  이를 외부에서 사용할 수 있다.
• 콜백함수는 결과를 콜백함수 내에서만 사용할 수 있다.

8. Promise VS async-await in Error Handling ⭐

• Promise는 .catch()를 통해 에러 핸들링을 수행
• async-await은 try()-catch()를 통해 수행하며, 코드 흐름의 이해가 쉽다는 장점이 있다.

9. Ajax란? ⭐

• XMLHTTPRequest 객체를 통해 페이지를 새로고침 없이 페이지의 일부만을 위한 데이터를 로드하는 기법
• JS를 통한 비동기 통신
• Client ↔ Server 간 XML 데이터를 주고받는 기술이다.

※ Ajax vs Axios ✔️

• Ajax : Client ↔ Server 간 통신
• Axios : Ajax등의 웹 통신 기능을 제공하는 라이브러리

10. var, let, const 를 설명해주세요.

• var : 블록 scope를 가지지 않고, 함수 나 전역 scope를 가진다.
  중복 선언이 가능하지만 두번째 선언은 인식되지 않음

• let : 블록 scope를 가지며 중복 선언 시 SyntaxError

• const : 블록 scope, 중복 X, 재할당 X

  ※ let, const는 변수를 블록의 상단으로 호이스팅하며, 이때 초기화는 되지 않는다.

  개인적으로 var 사용을 지양하고 let와 const의 목적에 따른 사용이 필요하다 생각됨.

11. 호이스팅(Hoisting)이란? ⭐

• 코드가 실행되기 전 변수(함수) 선언이 해당 스코프의 최상단으로 끌어 올려지는 것 같은 현상
• JS 엔진은 코드 실행 전, 실행 컨텍스트를 위한 과정을 거친다.
• 해당 과정에서 모든 선언(var, let, const, class, function) 을 스코프에 등록

12. TDZ(Temporal Dead Zone) 란? ⭐

• 스코프의 시작 지점부터 초기화 시작 지점까지의 구간
• let, const 의 변수는 선언 단계와 초기화 단계가 분리되어 진행됨
  실행 컨텍스트에 변수를 등록해도 메모리가 할당되기 이전인 TDZ 상태에서 Reference Error가 발생

13. Scope란?

• 식별자의 유효 범위
  • var : 가장 가까운 함수
  • let, const : 가장 가까운 블록

14. 실행 컨텍스트 란? ⭐

• 실행할 JS 코드에 제공할 환경정보를 모아놓은 객체
• JS는 코드의 환경과 순서를 이를 통해 보장

15. 클로져(Closure) 란? ⭐

• 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical env.)과의 조합
• 즉, 반환된 내부 함수가 선언 시의 환경을 기억해 그 밖에서 호출되어도 해당 환경에 접근 가능한 것을 의미한다.
  • 함수를 변수에 할당 시 이해할 수 있다.

function outer() {
	let x = 10;
  	var inner = function() {console.log(x);} ;
    // 내부함수 inner()는 외부함수 outer()의 변수 x에 접근 가능
    inner();
}

outer();

• https://poiemaweb.com/js-closure 참고