🥜 [JavaScript] Frontend 기술면접 (Javascript)

해당 포스트는 프론트앤드의 기술 면접 중 자바스크립트에 대해 중점적으로 다루는 페이지 입니다.

JavaScript

자바스크립트는 무슨 언어인가요?

Q. 자바스크립트는 인터프리터 언어입니다. 인터프리터 언어란 코드를 한 줄씩 읽고 실행하는 방식으로 동작합니다. 자바스크립트 코드는 브라우저나 Node.js와 같은 환경에서 실행될 때, 인터프리터에 의해 런타임 시에 해석되고 실행됩니다.

this 에 대해 설명해주세요.

Q. 자바스크립트의 this 는 현재 실행 중인 함수 컨텍스트를 가리킴

1) 전역 컨텍스트

전역스코프에서 this 는 전역객체를 가리키며 window 객체를 의미함

2) 함수 내부

일반 함수 호출 : 일반 함수 내에서 this 는 전역객체를 가리킴

메서드 호출 : 객체의 매서드 내의 this 는 해당 메서드가 속한 객체를 가리킴

생성자 함수 : new 키워드로 생성된 객체를 가리킴

3) 화살표 함수

화살표 함수 내의 this 는 함수가 정의된 위치에서 바깥쪽 스코프의 this 를 유지

4) 이벤트 핸들러

이벤트 핸들러 내에서 this 는 이벤트를 발생 시킨 DOM 요소를 가리킴

Callback 함수에 대해 설명해주세요.

Q. 다른 함수의 인자로 전달되어 특정 이벤트 조건이 발생 했을 때 실행 되는 함수

주로 비동기적인 작업을 처리하거나 특정한 조건이 충족되었을 때 실행되어야 하는 경우에 사용

Callback 지옥을 해결하는 방법에 대해 설명해주세요.

Q. Callback Hell 은 콜백 함수가 중첩되어 가독성이 떨어지고 유지보수가 어려운 코드를 말합니다.

이를 해결하기 위한 방법은 대표적으로 두가지가 있다.

1) Promise 사용

프로미스는 비동기 작업의 완료 또는 실패에 대한 결과를 나타내는 객체

someAsyncFunction()
   .then(result => {
       // 첫 번째 비동기 작업 완료 후 실행될 코드
       return anotherAsyncFunction(result);
   })
   .then(anotherResult => {
       // 두 번째 비동기 작업 완료 후 실행될 코드
       console.log(anotherResult);
   })
   .catch(error => {
       // 에러 발생 시 실행될 코드
       console.error(error);
   });

2) async/await 사용

비동기 코드를 동기식으로 사용할 수 있게 변경 해주는 async/await 을 사용

async function fetchData() {
   try {
       const result1 = await someAsyncFunction();
       const result2 = await anotherAsyncFunction(result1);
       console.log(result2);
   } catch (error) {
       console.error(error);
   }
}

이러한 방법들은 콜백 지옥을 피하고, 비동기 코드를 더욱 관리하기 쉽게 만들어준다.

코드의 가독성과 유지보수성을 높이기 위해 적절한 방법을 선택하여 사용하는 것이 중요

Callback 과 Promise 의 차이를 설명하세요.

Q. 콜백은 비동기 작업의 완료를 다루는 함수 자체이지만, 프로미스는 비동기 작업의 결과를 다루는 객체입니다.

콜백은 중첩되거나 복잡해질 수 있는 콜백 지옥(callback hell) 문제를 가질 수 있지만, 프로미스는 체이닝을 통해 더 읽기 쉽고 유지보수가 쉬운 코드를 작성할 수 있습니다.

프로미스는 비동기 작업의 성공 및 실패를 구분하여 처리할 수 있으므로 에러 처리가 간편합니다.

var, const, let 에 대해 설명해주세요.

var	let	const
함수스코프	블록스코프	블록스코프
호이스팅이 발생, 선언 전 사용해도 문제 발생하지 않음	호이스팅이 발생하지만 초기화 전까지 변수 접근 불가	한번 값이 할당 되면 재 할당 불가

Event Capturing 과 Event Bubbling 에 대해 설명해주세요.

Q.

1) 이벤트 캡쳐링

이벤트가 가장 먼 부모 요소에서부터 시작하여 실제 타겟 요소까지 이벤트를 전파하는 방식

캡처링 단계에서는 가장 상위의 요소부터 하위 요소로 이벤트가 전달

이벤트 캡처링은 이벤트 타겟을 찾기 위해 상위 요소들을 순차적으로 탐색

이벤트 핸들러가 상위 요소에서부터 호출되고 타겟 요소에 도달할 때까지 계속 실행

2) 이벤트 버블링

이벤트 버블링은 이벤트가 타겟 요소에서부터 시작하여 가장 먼 부모 요소까지 전파되는 방식

버블링 단계에서는 타겟 요소에서 이벤트가 발생한 후 상위 요소로 이벤트가 전달

이벤트 버블링은 이벤트 타겟에서 시작하여 상위 요소로 계속해서 이벤트 핸들러가 호출

이벤트 핸들러의 실행이 완료된 후에 상위 요소의 이벤트 핸들러가 호출

Event delegation 에 대해 설명하세요.

Q. 이벤트 위임은 JS 에서 이벤트를 효율적으로 처리하기 위해 사용하는데

이벤트를 상위요소에서 하위요소로 전파시켜서 처리할 수 있음

개별적으로 등록하는 것 보다 메모리 사용량을 줄이고 성능을 향상 시킬 수 있음

간단하게 설명하면 상위 component 에 이벤트를 등록해두면 하위 component 에 자동으로 등록되는 걸 말함

<ul onClick={onMove} id="list">
 <li>ITEM 1</li>
 <li>ITEM 2</li>
 <li>ITEM 3</li>
</ul> 
<!-- li 를 클릭해도 onMove 가 동작함 -->

호이스팅에 대해 설명하고 발생하는 이유를 설명하세요.

Q. 호이스팅이 발생하는 이유

JavaScript 에서 컴파일 과정에서 변수 및 함수 선언이 처리되는 방식 떄문

코드가 실행 되기 전에 Javascript 엔진은 코드를 선언단계와 실행단계로 나눔

선언 단계에서 변수와 함수를 메모리에 할당하고 실행단계에서 코드를 실행

console.log(x); // undefined
var x = 10;

sayHello(); // "Hello, world!"
function sayHello() {
   console.log("Hello, world!");
}

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
   console.log("Hello, world!");
}

위의 코드에서는 함수 표현식을 변수에 할당하였는데

변수는 호이스팅되지만 함수 표현식은 호이스팅되지 않습니다.

따라서 함수가 할당되기 전에 호출하려고 하면 에러가 발생합니다.

클로저에 대해 설명해주세요.

Q. 클로저(closure)는 함수와 그 함수가 선언된 렉시컬 환경(lexical environment)의 조합

함수가 선언 될 당시의 환경을 기억하고 이후 해당 함수가 호출 될 때에도 그 환경에 접근 할 수 있게 합니다.

따라서 자신이 선언된 외부 스코프의 변수들에 접근 할 수 있게 함

1) 내부함수와 외부함수의 조합

내부함수가 외부함수 내에서 정의되고, 외부함수가 내부함수를 반환할 때 클로저가 생성

2) 외부 스코프의 변수 접근

클로저 내부함수는 자신이 선언된 외부 스코프의 변수들에 접근 할 수 있음

3) 렉시컬 스코핑

클로저는 렉시컬 스코핑을 따르므로 함수가 어디서 호출되었는지가 아니라 어디서 접근 되었는지에 따라

외부변수에 접근 할 수 있음

주로 클로저는 비동기 처리, 프라이빗 변수 및 메서드 구현, 모듈 패턴에 사용 됨

function outerFunction() {
   let outerVariable = 'I am outer!';
   
   function innerFunction() {
       console.log(outerVariable);
   }
   
   return innerFunction;
}

let inner = outerFunction();
inner(); // 출력: "I am outer!"

위의 예시에서 innerFunction 은 outerFunction 내부에서 정의되었고,

외부 변수 outerVariable 에 접근할 수 있습니다. outerFunction 이 실행된 후에도

innerFunction 을 반환하여 클로저가 생성되고, 이후에 inner 를 호출하면 외부 변수에 접근할 수 있습니다.

동기와 비동기에 대해 설명해주세요.

Q.

동기 (Synchronous)

• 동기적인 코드는 순차적으로 진행
• 각 작업이 이전 작업이 실행 된 이후에 순차적으로 실행 됨

비동기 (Asynchronous)

• 비동기적인 코드는 순차적으로 진행되지 않고 여러작업이 동시에 실행
• 한 작업이 실행되는 동안 다른 작업이 중단되지 않음
• 해당 작업이 완료되지 않아도 다음 작업이 시작 됨
• 일반적으로 비동기 코드는 Callback, Promise, async/await 를 사용하여 완료처리