신입 개발자를 위한 JavaScript 기초 면접질문 (2024년)

 

 신입 개발자 취업을 하다 보면 기초 지식에 대한 질문을 받기도 합니다. 아래 면접 질문은 정말 자주 나오는 유형이기도 하고 기초라고 하기엔 고급 질문도 섞여있기 때문에 개념적인 측면에서도 증명할 수 있습니다. 만약 아래 질문에 대해 막힘없이 서술이 가능하다면 적어도 면접은 충분히 통과할 거라 믿습니다. 

 

 그러나 요새는 프로젝트 자체에 대한 질문이 많아지는 추세입니다. 면접관이 깃허브 레포를 하나하나 들여다보면서 기술적 개념에 대해 물어보게 됩니다. 자신이 어떤 기술을 쓰고 있느냐에 따라 답변이 달라지니 사용한 기술에 대해 준비하시는걸 권장드립니다. 그럼에도 아래 나와있는 질문을 종종 물어보시기 때문에 알아두시면 면접하는 데 있어 유리하게 작용하실 겁니다. 이 포스트에서는 신입 프론트엔드 개발자를 위한 자바스크립트 기초 면접질문에 대해 알아봅니다.

 

 

 

I. 기초 면접 질문

1. 자바스크립트 언어가 다른 언어와 다른 특징을 3가지 서술하세요.
2. 변수에 대해 설명하고 let, const의 차이점을 서술하세요.
3. 호이스팅 개념에 대해 간략하게 서술하세요.
4. 클로저 개념에 대해 서술하세요.
5. ==과 ===의 차이점을 서술하세요.
6. 자바스크립트의 비동기 처리 방법에 대해 말씀해주세요.
7. 프로토타입에 대해 서술하세요.
8. this 키워드의 작동 방식에 대해 서술하고 this의 적용 범위에 대해 말씀해 주세요.
9. 스코프에 대해 설명하세요.
10. 콜백지옥에 빠지지 않기 위해 어떻게 해야 하는지 서술하세요.
11. 자바스크립트에서의 엄격모드가 하는 역할을 서술하세요.
12. 심볼 타입에 대해 서술하세요.
13. 웹 워커와 서비스 워커의 장점과 단점에 대해 말해주세요.
14. 데코레이터 패턴에 대해 서술하세요.
15. var 변수 타입을 지양해야 하는 이유를 말해주세요.
16. 동기와 비동기에 대해 말해주세요.
17. 이벤트 루프에 대해 설명하세요.

 

---

 

 

II. 답변

1. 먼저 동적 타입 시스템을 가지고 있습니다. 이에 따라 number 값이라도 string 타입의 변수에 할당할 수 있습니다. 다음으로 프로토타입 기반의 상속 체계를 제공합니다. 클래스 방식보다 간편하고 유연한 코드를 작성하도록 돕습니다. 마지막으로 비동기 프로그래밍을 지원합니다. ES6의 async/await를 통해 간편하게 작성할 수 있습니다.

 

2. 변수는 값을 저장하고 불러오기 위한 요소입니다. let과 const의 차이점은 변수 재할당 여부에 있습니다. let은 재할당이 가능하고 const는 불가능합니다.

 

3. 호이스팅은 변수나 함수가 스코프의 상당으로 끌어올려지는 현상을 의미합니다. 즉, 어느 범위에서든 접근이 가능합니다.

 

4. 클로저는 내부에 있는 함수가 외부 함수의 컨텍스트에 접근할 수 있는 것을 뜻합니다. 함수가 선언될 때 만들어지며 함수나 변수의 접근 범위를 제한하고 코드를 모듈화 하여 궁극적으로는 메모리 누수를 방지하는 데에도 도움이 됩니다.

 

5. ==는 두 값이 동등한 지를 뜻합니다. "1" == 1 은 참이 됩니다. ===는 두 값이 일치한 지를 뜻합니다. "1" === 1는 거짓이 되고 1 === 1은 참이 됩니다. ===는 타입체크를 한다는 점에서 보안 유지에 도움이 됩니다.

 

6. 여러 가지 방법이 있지만 대표적으로 프로미스와 async/await가 주로 쓰입니다. 

 

7. 프로토타입은 상속을 구현하는데 중요한 개념입니다. 모든 객체는 프로토타입을 가지고 있는데, 이 경우 객체 간 상속을 간단하게 구현할 수 있습니다.

 

8. this는 현재 실행 중인 코드에서 객체를 불러오는 데 사용됩니다. 실행 컨텍스트에 따라 동적으로 결정되고, 함수가 어떻게 호출되는지에 따라 달라집니다. 일반적으로 this는 전역 객체를 가르키지만, .call(), .bind() 을 통해 this를 명시적으로 지정할 수 있습니다.

 

9. 스코프는 변수와 함수의 유효 범위를 나타냅니다. 한 함수에서 다른 함수의 변수를 참조하지 못하게 방지하는 역할을 합니다.

 

10. 비동기 처리 방식을 사용하면 됩니다.

 

11. 엄격모드는 의도하지 않은 전역변수를 선언하는 걸 방지하고, eval 함수의 제한을 통해 취약점 공격을 사전에 방어합니다. 엄격모드는 함수의 첫 줄 또는 코드의 첫 줄에 "use strict";으로 선언할 수 있습니다.

 

12. ES6에서 추가된 개념으로 유일한 식별자와 불변성을 위해 사용됩니다. 객체 속성의 키 값으로 주로 사용됩니다.

 

13. 웹 워커와 서비스 워커 모드 백그라운드 동작을 위해 사용됩니다. 오프라인 상태에서도 애플리케이션을 동작할 수 있다는 장점과, 별도의 메시징을 사용하기에 추가적인 코드가 필요하고 보안상 위험이 존재한다는 단점이 존재합니다.

 

14. 데코레이터는 추상 클래스와 인터페이스입니다. 기존 코드를 수정하지 않고도 새로운 기능을 추가할 수 있어 유연한 개발이 가능하도록 합니다.

 

15. var는 전역변수를 오염하고, 재할당이 가능해서 스코프 지정이 불가합니다.

 

16. 동기는 말 그대로 순차적으로 실행됩니다. 마찬가지로 비동기는 한 작업이 완료되기를 기다리지 않고 바로 다른 작업을 실행합니다. 주로 파일 읽기나 시간이 오래 걸리는 작업에 쓰입니다.

 

17. 이벤트 루프는 자바스크립트의 처리 모델을 구현하는 핵심 구조입니다. 먼저 호출 스택이 비어있는지 확인하고, 비어있으면 이벤트 큐에서 작업을 가져와 호출스택에 추가합니다. 이후 호출 스택이 비워있지 않으면 호출 스택이 비워질 때까지 대기합니다. 

 

 

 

 읽어주셔서 감사합니다.