프론트엔드 기술 면접 질문 리스트 : JavaScript

 

추가적으로 업데이트 예정

 

🎯 Q1. JS Runtime Environment란 무엇이고, 대표적인 2가지를 설명하세요.

JS Runtime Environment는 자바스크립트가 실행되는 환경으로, JavaScript Engine, Web APIs, Event Loop로 구성된다.

브라우저는 대표적인 런타임 환경으로 DOM, Fetch API 등을 포함해 사용자 인터페이스와 상호작용한다.

Node.js는 서버 측 자바스크립트 런타임 환경으로 V8엔진과 함께 파일 시스템, HTTP 모듈 등 서버 관련 API를 제공한다.

 

 

🎯 Q2. JS Engine 동작 원리를 간략하게 설명하세요.

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램으로 크게 파싱, 컴파일, 실행 단계로 동작한다.

• 파싱: 자바스크립트 코드는 먼저 소스코드에서 AST를 생성하는 과정으로 파싱된다. 이 단계에서 코드의 문법 분석 및 크리 형태로 구조화한다.
• 컴파일: 파싱된 AST는 바이트코드로 변환되며, 이는 자바스크립트 엔진이 실행할 수 있는 중간 형태이다.
• 실행: 바이트코드는 실행 컨텍스트 내에서 실행되며, 변수와 함수가 메모리에 할당되고, 결과적으로 화면이나 콘솔에 출력된다.

 

 

🎯 Q3. Lexical Scope란 무엇인가요.

Lexical Scope는 코드의 선언 위치에 따라 변수의 유효 범위가 결정되는 스코핑 방식이다.

자바스크립트는 렉시컬 스코프를 따르기 때문에 함수 내부에서 외부 스코프의 변수에 접근할 수 있지만, 반대는 불가능하다.

 

 

🎯 Q4. 함수 선언문과 함수 표현식, 화살표 함수의 차이에 대해 설명하세요.

• 함수 선언문은 function foo(){} 처럼 선언하며, 호이스팅되어 어디서든 호출 가능하다.
• 함수 표현식은 const foo = function(){}처럼 변수에 할당되며, 호이스팅되지 않는다.
• 화살표 함수는 const foo = () => {}처럼 선언하며, this를 바인딩하지 않는다.

 

 

🎯 Q5. this에 대해 설명하세요. call / apply / bind에 대해 설명하세요.

• this는 함수 호출 방식에 따라 달라지며, 메서드에서는 호출한 객체를 가리킨다.
• call은 첫 번째 인수로 주어진 객체를 this로 사용해 함수를 즉시 호출한다.
• apply는 call과 같지만, 인수를 배열로 전달한다.
• bind는 this가 고정된 새 함수를 반환한다.

 

 

🎯 Q6. Callback이란 무엇인가요.

Callback은 다른 함수의 인수로 전달되는 함수이다.

비동기 작업에서 결과를 처리하기 위해 사용되며, 주로 API 호출, 이벤트 처리 등에 활용된다.

 

 

🎯 Q7. Promise와 Async/Await의 차이점을 무엇인가요. 에러 처리 방식에 대해서도 설명하세요.

Promise는 비동기 작업의 성공, 실패 상태를 나타내는 객체이다.

Async/Await는 Promise를 더 간결하게 사용하기 위한 구문이다.

Promise는 then과 catch로 에러를 처리하며, Async/Await에서는 try-catch 블록으로 에러를 처리한다.

 

 

🎯 Q8. var, let, const의 차이에 대해 설명하세요. TDZ에 대해 설명하세요.

var는 함수 스코프로, 함수 내에서 선언된 var 변수는 함수 전체에서 접근할 수 있다. 호이스팅이 발생하여 선언 위치와 상관 없이 코드의 최상단으로 끌어올려 질 때 초기화는 나중에 이루어지므로 undefined로 평가된다. var는 재선언이 가능하여 같은 이름으로 변수를 여러 번 선언할 수 있다.

let은 블록 스코프를 가져 {}로 감싸진 블록 내에서만 유효하다. 재선언이 불가능하지만 재할당은 가능하다.

TDZ의 영향을 받아 선언 전에 변수에 접근하려고 하면 ReferenceError가 발생한다.

const는 블록 스코프를 가지며 let과 동일한 스코핑 규칙이 적용된다.

선언과 동시에 초기화애햐 하며 값의 재할당이 불가능하다. 하지만 객체나 배열과 같은 참조 자료형의 경우 내부 값의 변경은 가능하다.

 

TDZ는 let과 const 변수가 선언되기 전까지 접근할 수 없는 시기를 의미한다.

이 영역에서는 변수가 초기화되지 않으므로, 접근하려고 하면 ReferenceError가 발생한다.

 

 

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

호이스팅은 변수와 함수 선언이 코드의 최상단으로 끌어올려지는 현상이다.

자바스크립트 엔진이 코드를 해석할 때 변수 선언을 먼저 처리하기 때문에 발생한다.

 

 

🎯 Q10. 동기와 비동기의 차이는 무엇인가요.

동기는 코드가 작성된 순서대로 실행되며, 이전 작업이 완료되어야 다음 작업이 실행된다.

비동기는 작업이 동시에 실행되며, 이전 작업이 완료되지 않아도 다음 작업을 시작할 수 있다.

 

 

🎯 Q11. JS 스크립트 로딩 방식 Async, Defer 동작 원리에 대해 설명하세요.

async와 defer는 HTM에서 <script> 태그로 자바스크립트를 로드할 때 비동기로 로드하는 방식이다.

async는 스크립트를 비동기로 로드하고, 로드가 완료되는 즉시 실행한다. 다른 스크립트와 순서가 보장되지 않지만 빠르게 로드할 때 유용하다.

defer는 스크립트를 비동기로 로드하되, HTML 파싱이 끝난 후에 실행한다. 순서를 보장하며, 페이지 렌더링을 방해하지 않는다.

일반적으로, async는 독립적인 스크립트에 defer는 의존성이 있는 스크립트에 사용된다.

 

 

🎯 Q12. Currying이란 무엇인가요.

Currying은 여러 인자를 받는 함수를 하나의 인자만 받는 함수들로 변환하는 기법이다.

예를 들어, f(a, b)는 f(a)(b)로 표현될 수 있다.

Currying은 부분 적용 함수를 생성할 때 유용하다.

 

 

🎯 Q13. Closure란 무엇인가요.

Closure는 함수가 자신이 선언된 환경 즉 스코프를 기억하고, 그 스코프에 접근할 수 있는 기능이다.

외부 함수의 실행이 끝난 후에도 내부 함수는 외부 함수의 변수를 참조할 수 있다. 주로 데이터 은닉과 캡슐화에 활용된다.

 

 

🎯 Q14. IIFE란 무엇인가요.

IIFE는 즉시 실행 함수 표현식으로, 선언과 동시에 실행되는 함수이다.

주로 전역 변수 오염을 방지하고 독립적인 스코프를 만들 때 사용된다.

 

 

🎯 Q15. 객체 / 배열에서의 Spread Operator에 대해 설명하세요.

Spread Operator(...)는 객체나 배열의 내용을 펼치는 연산자이다.

객체에서는 프로퍼티를 복사하고, 배열에서는 요소를 복사하거나 합칠 때 사용한다.

 

 

🎯 Q16. 객체 / 배열에서의 Destructure에 대해 설명하세요.

Destructure는 객체나 배열의 값을 분해하여 변수에 할당하는 문법이다.

배열에서는 [a, b] = [1, 2], 객체에서는 {name} = {name: 'John'}처럼 사용한다.

코드의 가독성이 높아지고, 필요한 값만 쉽게 추출하여 사용할 때 유용하다.

 

 

🎯 Q17. ES6에서 추가된 JS 문법은 무엇이 있는지 설명하세요.

ES6에서는 let, const, 화살표 함수, 템플릿 리터럴, 클래스, 모듈 시스템(import/export), Promise, Spread/Rest 연산자, Destructuring, Map/Set 등이 추가되었다.

• let과 const: var의 한계를 보완하고, 블록 스코프를 지원하는 let과 상수로 선언된 const가 추가되었다.
• 화살표 함수: function 키워드 없이 간결한 문법으로 함수를 정의할 수 있으며, this 바인딩을 더 직관적으로 처리할 수 있다.
• 템플릿 리터럴: 문자열 안에 변수를 쉽게 삽입할 수 있게 해주는 백틱(```)을 사용한 문자열 템플릿으로, 다중 라인 문자열을 다루기 편리해졌다.
• 클래스: 객체 지향 프로그래밍 스타일을 지원하는 class 문법이 추가되어, 클래스 기반의 객체 구조를 쉽게 정의할 수 있다.
• Promise: 비동기 작업을 처리할 때 콜백 지옥을 피할 수 있도록 도와주는 Promise가 도입되어, 더 깔끔한 비동기 처리가 가능해졌다.
• 모듈 시스템: import와 export를 통해 코드의 재사용성과 관리가 용이해졌다.
• Spread/Rest 연산자: 배열이나 객체에서 값을 복사하거나 합치거나, 함수를 호출할 때 매개변수를 간편하게 다룰 수 있다.
• Destructuring: 배열이나 객체에서 값을 분해하여 쉽게 변수에 할당할 수 있다.
• Map/Set: Map은 키-값 쌍을 저장하는 객체이고, Set은 중복되지 않는 값을 저장하는 자료형이다.

 

 

🎯 Q18. AJAX 간편한 사용을 위한 jQuery, Axios, Fetch API 차이에 대해 설명하세요.

• jQuery: AJAX 요청을 간단하게 할 수 있는 라이브러리로, 간단한 문법과 크로스브라우징을 지원한다.
• Axios: Promise 기반의 HTTP 클라이언트 라이브러리로, 요청과 응답을 JSON 형태로 자동 처리한다.
• Fetch API: ES6에서 추가된 표준 API로, Promise 기반이며, 내장된 기능으로 간단한 HTTP 요청을 처리할 수 있다.

 

 

🎯 Q19. 모듈 시스템이란 무엇이며, CommonJS와 ES Modules 차이에 대해 설명하세요.

모듈 시스템은 코드의 재사용과 관리를 위해 독립적인 모듈로 나누어 사용하는 방법이다.

Common JS는 Node.js에서 사용하는 모듈 시스템으로, require와 module.exports를 사용한다.

ES Modules는 브라우저와 Node.js에서 지원하며, import와 export 키워드를 사용한다.

 

 

🎯 Q20. 이벤트 버블링이란 무엇인가요. 버블링을 활용한 방법론과 방지하기 위한 방법을 설명하세요.

이벤트 버블링은 이벤트가 내부 요소에서 시작해 부모 요소까지 전파되는 현상이다.

이벤트 위임은 버블링을 활용해 부모 요소에서 하위 요소의 이벤트를 처리할 수 있도록 하는 방식이다.

이벤트 전파 방지를 위해 event.stopPropagation()을 사용할 수 있다.

 

 

🎯 Q21. 타입스크립트란 무엇이며 왜 사용하나요.

타입스크립트는 자바스크립트에 정적 타입을 추가한 언어이다.

자바스크립트의 기능을 그대로 사용하면서도 변수, 함수, 객체 등에 명시적인 타입을 지정할 수 있다.

코드 작성 시 타입 검사가 가능해져 런타임 오류를 줄일 수 있다.

프로젝트 규모가 커질수록 코드이 복잡성이 증가하지만 타입스크립트는 타입 정의를 통해 코드 구조를 체계적으로 관리할 수 있게 해준다.