🌟 자주 등장하는 프론트엔드 기술 면접 질문 정리 [JS편]

💬 동기와 비동기의 차이점을 설명해 주세요.

동기는 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식입니다.

비동기는 이와 반대로 현재 실행 중인 코드의 완료 여부와 무관하게 다음 코드를 실행하는 방식입니다.

웹 앱에서는 서버에게 데이터를 비동기적으로 요청한 다음,
사용자의 인터페이스가 멈추지 않도록 하고 동시에 여러 작업을 효율적으로 처리할 수 있습니다.

💬 콜백 함수에 대해 설명해 주세요.

콜백 함수란 다른 코드의 인자로 넘겨주는 함수입니다.
    
콜백 함수를 인자로 넘겨줌으로써 그 제어권도 함께 위임하는데
여기서 제어권이란 콜백 함수의 호출 시점, 인자, this를 결정할 권리를 말합니다.

즉시 호출되는 것이 아니라, 특정 이벤트가 발생하거나 특정 작업이 완료된 후
호출되도록 지정할 수 있어서 나중에 불러달라는 의미에서 call back이라 명명하였습니다.

💬 콜백 지옥의 의미를 설명해 주세요.

콜백 지옥은 콜백 함수를 익명으로 전달하는 과정이 반복되어
코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 의미합니다.

주로 이벤트 처리나 서버 통신과 같이 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데,
가독성이 떨어지고 코드를 유지보수하기 어렵게 합니다.

💬 promise와 callback의 차이를 설명해 주세요.

callback 함수는 특정 작업이 완료된 후 호출되는 함수입니다.

비동기 작업을 처리하는 가장 기본적인 방식으로, 작업이 완료되면 콜백 함수가 호출됩니다.

여러 비동기 작업이 순차적으로 처리되어야 할 경우 콜백 지옥 문제가 발생할 수 있는데,
코드 가독성과 유지보수성을 떨어트립니다.

이를 보완하기 위해 ES6에서 Promise가 등장하였습니다.

Promise는 비동기 작업의 성공 또는 실패 여부를 추상화하여 관리하는 객체입니다.

콜백 함수 대신 then, catch 메서드를 이용하여 비동기 작업이 완료된 이후의 결과를 처리합니다.

이를 통해 콜백 지옥 문제를 해결할 수 있습니다.

💬 promise와 async-await의 차이를 설명해 주세요.

promise 와 then-catch을 이용하여 여러 비동기 작업을
체인 형태로 연결하여 순차적으로 실행할 수 있습니다.

그러나 복잡한 비동기 작업에서 체인 구조가 복잡해질 수 있으며 오류 처리가 힘듭니다.

따라서 promise 를 더 직관적으로 사용할 수 있게 ES8에서 async-await 문법이 등장하였습니다.

비동기 작업을 수행하고자 하는 함수 앞에 async을 표기하고,  
함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await을 표기하는 것만으로  
뒤의 내용을 자동으로 promise로 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행합니다.

async-await 은 동기적인 코드 스타일로 작성할 수 있게 해주며,
try-catch 문을 통해 에러를 처리할 수 있어 가독성과 유지 보수성이 뛰어납니다.

💬 map과 forEach의 차이를 설명해 주세요. (➕reduce)

map과 forEach 모두 배열을 순회하여 각 요소마다 콜백 함수를 실행하는 것은 동일합니다.

그러나 map은 콜백 함수의 return값으로 이루어진 새로운 배열을 반환하고,
forEach는 새로운 배열을 반환하지 않고 그저 실행만 합니다.

reduce는 배열의 모든 요소에 콜백 함수를 적용하여 하나의 결과 값을 생성하는 함수입니다.

인수로는 누적 값, 현재 값, 현재 인덱스 등을 받는데 배열의 요소들을 하나로 줄여(reduce) 집계한 값을 반환합니다.

💬 var, let, const의 차이를 설명해 주세요.

	재선언	재할당	스코프
var	O	O	함수 단위
let	X	O	블록 단위
const	X	X	블록 단위

💬 일반 함수와 화살표 함수의 차이를 설명해 주세요.

일반 함수는 메서드로서 호출하면 현재 객체를 바라보도록 this 바인딩을 하고,
함수로서 호출하면 this가 전역 객체를 참조합니다.

그러나 화살표 함수는 호출할 때 this 바인딩 과정 자체가 빠지게 되어서
화살표 함수 내에서 this을 출력하면 상위 스코프의 this가 출력됩니다.

따라서 화살표 함수를 사용하면 this가 전역 객체를 바라보게 돼서 발생하는 혼란을 줄일 수 있습니다.

💬 this의 의미를 설명해 주세요.

this는 자신이 속한 객체 혹은 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.

💬 함수 선언문과 함수 표현식의 차이를 설명해 주세요.

함수 선언문은 function 키워드를 활용해서 함수를 정의하는 방식이고,
함수 표현식은 변수에 함수 리터럴을 할당하여 정의하는 방식입니다.

둘의 차이는 호이스팅 여부에서 명확히 드러납니다.

함수 선언문은 런타임 이전에 호이스팅되어 메모리 공간에 함수가 미리 저장됩니다.

그러나 함수 표현식은 변수만 호이스팅되고 함수 자체는 호이스팅되지 않기 때문에
함수 표현식 라인 이전에서 해당 함수를 호출하면 오류가 발생합니다.

💬 호이스팅에 대해 설명해 주세요.

호이스팅은 ‘끌어올린다’라는 의미로,
함수 혹은 변수 선언문이 코드의 최상위로 끌어올려지는 것처럼 동작하는 자바스크립트의 현상을 의미합니다.

자바스크립트에서 코드 실행 이전에 함수와 변수의 메모리 공간을 미리 확보해둡니다.

이러한 동작이 마치 선언문이 스코프의 최상단으로 끌어올려진 것 같아서 ‘호이스팅’이라고 부릅니다.

함수 선언문이 호이스팅될 때 함수 전체가 메모리에 올라가지만,
변수 선언문은 값이 undefined로 초기화됩니다.

💬 실행 컨텍스트에 대해 설명해 주세요.

실행 컨텍스트는 함수가 실행되는 시점에 생성되어 콜 스택에 쌓입니다.

이 실행 컨텍스트는 함수에 대한 환경 정보를 담은 객체입니다.

식별자에 대한 정보나 this, 상위 스코프에 대한 참조를 갖고 있습니다.

💬 렉시컬 환경에 대해 설명해 주세요.

렉시컬 환경은 환경 레코드와 외부 렉시컬 환경 참조로 구성됩니다.

렉시컬 환경은 현재 실행 중인 코드 블록에서의 식별자 정보를 저장하는 객체입니다.

환경 레코드에는 변수와 함수 선언이 저장되며,
외부 렉시컬 환경 참조를 통해 상위 스코프와 연결됩니다.

💬 스코프와 스코프 체인에 대해 설명해 주세요.

스코프란 변수의 유효 범위를 말합니다.

어떠한 스코프 내에서 선언한 변수는 스코프 밖에서는 접근할 수 없습니다.

그러나 상위 스코프에서 선언한 변수는 하위 스코프에서 참조할 수 있는데,
이는 단방향으로 상위 스코프를 참조할 수 있도록 체인 형식으로 연결되어 있기 때문입니다.

💬 깊은 복사와 얕은 복사의 차이점을 설명해 주세요.

어떠한 객체를 복제하고 싶을 때,
얕은 복사와 깊은 복사 두 가지 방법을 사용할 수 있습니다.

결론부터 말하자면, 얕은 복사란 한 단계 밑의 프로퍼티까지 복사하는 것입니다.

깊은 복사는 객체의 모든 속성을 재귀적으로 복사하여 독립된 객체를 생성하는 것입니다.

만약 중첩된 객체를 얕은 복사하면,
내부 객체 자체를 복사하는 게 아니라 그 참조를 복사하기 때문에 원본 객체가 손실될 수 있습니다.

따라서 중첩된 객체를 복사할 때는 깊은 복사를 하면 원본 객체가 손실되지 않습니다.

💬 spread 문법과 rest 문법의 차이에 대해 설명해 주세요.

spread는 배열이나 객체를 펼쳐서 개별 요소로 분해합니다.

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

rest는 이와 반대로 여러 개의 인수 혹은 요소를 배열로 묶습니다.

function foo(...args) { console.log(args); }
foo(1, 2, 3); // [1, 2, 3]

💬 ES6에서 생긴 큰 변화들에 대해 설명해 주세요.

• let, const
• 화살표 함수
• 클래스
• 템플릿 리터럴
• Promise
• Map, Set 자료 구조
• 등

💬 null, undefined의 차이에 대해 설명해 주세요. (➕undeclared)

null과 undefined 모두 빈 값을 의미하는 건 동일합니다.

그러나 null은 변수에 값이 없다는 것을 드러내기 위해 개발자가 의도적으로 할당하는 값이며,
undefined는 선언이 되고 초기화되지 않았기 때문에 자바스크립트 엔진이 할당하는 값입니다.

따라서 변수에 undefined가 할당되어 있으면 초기화되지 않은 변수라는 의미가 더 강합니다.

undeclared 는 해당 스코프 내에서 접근하려 했으나 선언조차 되지 않은 상태를 말합니다.

💬 자바스크립트 데이터 타입에 대해 설명해 주세요.

자바스크립트의 데이터 타입은 크게 두 가지로 분류됩니다.

• 기본형
  • Number
  • String
  • Boolean
  • null
  • undefined
  • Symbol
• 참조형
  • Array
  • Function
  • Date
  • RegExp
  • Map
  • Set

💬 call과 apply의 차이점은 무엇인가요?

call과 apply 모두 명시적으로 this를 바인딩하는 메서드임은 동일합니다.
call과 apply는 인자를 전달하는 방식만 다릅니다.

• call: 메서드의 첫 번째 인자를 this로 바인딩하고 나머지 모든 인자들을 호출할 함수의 매개변수로 합니다.
• apply: 메서드의 첫 번째 인자를 this로 바인딩하고 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정합니다.

💬 function.prototype.bind에 대해 설명해 주세요.

bind는 call, apply와 달리 즉시 호출하지 않고 전달받은 this와 인수들을 바탕으로 새로운 함수를 반환합니다.

var func = function (a, b, c, d) {
    console.log(this, a, b, c, d);
};

var bindFunc = func.bind({ x: 1 }, 4, 5);
bindFunc(6, 7); // 출력: {x: 1} 4 5 6 7

💬 자바스크립트가 동적 타입 언어인 이유는 무엇인가요?

자바스크립트는 변수의 타입이 고정되지 않고 런타임에 타입이 결정되며,
실행 중에 변수의 타입을 자유롭게 변경할 수 있습니다.

또한 객체의 속성을 동적으로 추가, 삭제할 수 있습니다.

💬 객체의 불변성을 유지하려면 어떻게 해야 하나요?

깊은 복사를 해서 원복 객체의 손실을 막는 방법이 있습니다.

또한 Immutable.js나 Immer 같은 라이브러리를 사용하면 복잡한 불변성 관리를 보다 쉽게 할 수 있습니다.

이러한 라이브러리는 깊은 복사를 자동으로 처리하거나,
객체의 상태를 불변하게 유지하면서 업데이트할 수 있는 기능을 제공합니다.

💬 ==과 ===의 차이점을 설명해 주세요.

==은 두 피연산자의 타입이 다를 경우 암묵적으로 타입 변환해서 값을 비교하고,
===은 타입을 변환하지 않고 보다 더 엄격하게 두 피연산자를 비교합니다.

예를 들어, 빈 문자열인 ‘’ 와 0은 둘 다 Falsy 값이기 때문에 false로 암묵적 형 변환될 수 있습니다.

따라서 두 값을 == 연산자를 통해 비교하면 참으로 출력됩니다.

하지만 === 연산자를 사용해서 비교하면 두 피연산자는 엄격히 타입이 다르므로 false가 출력됩니다.

💬 동기 및 비동기 작업 처리를 JS의 스레드와 연관지어서 설명해 주세요.

JavaScript는 싱글 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리할 수 있습니다.

➊ 동기

동기 작업은 콜 스택에서 현재 실행 중인 함수나 코드를 쌓고, 이 스택이 비워질 때까지 작업을 순차적으로 처리합니다.

➋ 비동기

싱글 스레드에서 이벤트 루프와 작업 큐를 활용하여 처리됩니다.

비동기 작업이란, 어떤 작업을 바로 완료하지 않고 나중에 완료될 작업을 미리 예약해두는 방식입니다.

대표적인 예로 네트워크 요청이나 타이머 함수(setTimeout) 등이 있습니다.

[비동기 작업의 처리 과정]

① 비동기 함수 호출
- 비동기 작업을 요청하면, 해당 작업은 콜 스택에서 빠져나가고, 브라우저 또는 Node.js의 백그라운드에서 실행됩니다.
- 이때 자바스크립트 엔진의 콜 스택은 비어있는 상태로 다음 작업을 계속 처리할 수 있습니다.

② 작업 완료 및 콜백
- 비동기 작업이 완료되면, 그 결과는 작업 큐(Task Queue)에 콜백 형태로 들어갑니다.

③ 이벤트 루프
- 이벤트 루프는 콜 스택이 비어 있는지를 지속적으로 확인합니다.
- 콜 스택이 비어 있는 경우, 작업 큐에 쌓여 있는 콜백을 콜 스택으로 옮겨 실행합니다.

💬 객체 지향 프로그래밍에 대해 설명해 주세요.

객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로,
데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 상호작용을 통해
로직을 구성하는 프로그래밍 방법이다.

① 캡슐화: 정보 은닉, 외부로부터 정보 접근 제어
② 상속: 이미 정의된 상위 클래스의 모든 속성과 기능을 하위 클래스가 물려받는 것
③ 추상화: 객체들 간의 공통적인 특징을 도출
④ 다형성: 같은 이름의 메소드가 다양한 방식으로 동작(오버로딩, 오버라이딩)

💬 자바스크립트는 싱글 스레드 기반 언어인데 비동기 프로그래밍은 왜 가능한 걸까요?

웹 애플리케이션에서는 네트워크 요청이나 이벤트 처리, 타이머와 같은 작업을 멀티로 처리해야 하는 경우가 많다.

이러한 작업들은 자바스크립트 엔진이 아닌 브라우저 내부의 멀티 스레드인 Web APIs에서 비동기 + 논블로킹으로 처리된다.

즉, 비동기로 동작하는 핵심 요소는 자바스크립트 언어가 아니라 브라우저라는 소프트웨어가 가지고 있다.

❓ 비동기 + 논블로킹

메인 스레드가 작업을 다른 곳에 요청하여 대신 실행하고, 그 작업이 완료되면
이벤트나 콜백 함수를 받아 결과를 실행하는 방식

💡 자바스크립트는 왜 싱글 스레드 인가?

자바스크립트는 1995년에 넷스케이프에서 웹 브라우저에서 동적인 웹 페이지를 만들기 위해 개발된 스크립트 언어이다.
당시에는 멀티 코어 프로세서가 보편화되지 않았고,
자바스크립트는 웹 브라우저에서 간단한 스크립트 동작을 수행하는 데 주로 사용되었기 때문에
복잡한 병렬 처리를 필요로 하지 않아, 메모리 사용량이 적고, 동기화 문제를 피할 수 있는 싱글 스레드로 구현하였다.
그러나 싱글 스레드는 오래 걸리는 작업이 실행되면 다른 작업들이 대기해야 하므로 응답성이 떨어진다.
또한 CPU 코어를 여러 개 사용할 수 없으므로 성능이 제한된다.
이러한 문제들을 해결하기 위해 언어 자체의 설계를 바꾸는 것 보단,
브라우저의 멀티 스레드를 이용하는 자바스크립트의 비동기 프로그래밍을 지원하는 것이다.
그리고 이 비동기 프로그래밍의 핵심이 이벤트 루프이다.

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

클로저란 함수의 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때도
그 스코프에 접근할 수 있는 함수를 의미한다.

클로저는 주로 캡슐화와 정보 은닉을 위해 사용한다.

💬 프로토타입과 프로토타입 체인에 대해 설명해 주세요.

자바스크립트는 프로토타입 기반 언어이며 프로토타입은 객체의 원형을 의미한다.
모든 객체는 프로토타입 객체에 접근할 수 있으며 프로토타입 객체로부터 속성과 메소드를 상속받는다.
즉, 자바스크립트 객체는 자신의 부모 역할을 하는 프로토타입 객체와 연결되어 있다.

어떠한 객체가 프로퍼티에 접근하려고 할 때,
해당 객체에 프로퍼티가 존재하지 않으면 __proto__가 가리키는 링크를 따라
자신의 부모 역할을 하는 프로토타입 객체에서 순차적으로 검색한다.
모든 프로토타입 체이닝의 종점은 Object.prototype이다.

💬 constructor, prototype, instance의 관계에 대해 설명해 주세요.

생성자 함수(constructor)를 통해 인스턴스를 생성하면 해당 인스턴스는 __proto__라는 프로퍼티를 갖는다.
__proto__는 생성자 함수의 프로퍼티인 prototype 객체를 그대로 참조한다.
prototype은 부모 역할을 하는 객체로서 속성과 메소드를 해당 객체에게 상속한다.

💬 클래스의 스태틱 멤버와 프로토타입 멤버의 차이를 설명해 주세요.

프로토타입 멤버는 인스턴스에서 자신이 상속받은 것처럼 사용할 수 있다.
그러나 스태틱 멤버는 인스턴스에서 직접 호출할 수 없으며
생성자 함수 자체를 this로 바인딩하여 호출할 수 있다.

💬 구조 분해 할당에 대해 설명해 주세요.

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest); // [30, 40, 50]