<FE면접질문> #3. JavaScript (Part 1)

자바스크립트 관련 예상 질문은 양이 많아서 두 번에 나누어서 정리해 보려고 한다.

JavaScript

이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing)에 대해서 설명하세요. (D사 화상면접)

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 더 상위 요소들로 전달되어 가는 특성을 의미한다. 이벤트 캡처링은 이벤트 버블링과 반대로 상위 요소에서 하위 요소로 탐색하며 이벤트를 전파하는 방식이다.

event delegation에 대해 설명하세요. (D사 화상면접) 

특정 요소 하나하나를 개별적으로 이벤트를 부여하는 것이 아니라, 하나의 부모에 이벤트를 등록하여 부모가 이벤트를 위임하는 방식을 이벤트 위임이라고 한다. 이 방법은 동적인 요소들에 대한 처리가 수월하며 이벤트 핸들러를 더 적게 등록해 주기 때문에 메모리도 절약할 수 있다.

this는 JavaScript에서 어떻게 작동하는지 설명해주세요.

this는 자바스크립트 런타임 시에 바인딩이 이루어지는 실행 컨텍스트 중 하나로, 해당 함수가 실행되는 동안에 사용할 수 있으며 함수 호출 부분에서 this가 가리키는 것이 무엇인지를 확인할 수 있다. 때로는 복잡한 코드에서 암시적 바인딩에 의해 혼란스러운 경우가 많은데, 이런 문제를 해결하기 위해서 call이나 apply 같은 내장 유틸리티를 사용하여 명시적으로 바인딩을 해 준다.

prototype 기반 상속은 어떻게 하는지 설명해주세요.

자바스크립트 객체에는 Prototype이라는 내부 프로퍼티가 있고, 이는 다른 객체를 참조할 때 사용한다. 자바스크립트에서 상속을 진행할 때는 프로토타입끼리 연결을 하는데, 부모 프로토타입을 create()나 setPropertyOf() 메서드를 사용하여 자식 프로토타입과 연결한다.

null과 undefined의 차이점은 무엇인가요?

두 타입 모두 값이 없음을 의미한다. 둘 다 데이터 타입이자 그 변수의 값이다. 자바스크립트에서 변수를 선언하면 초기값으로 undefined를 할당하게 된다. 반면 null은 값이 비어있음을 나타내며 값이 없다는 값이 등록되어 있는 것이다.

익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?

익명함수는 즉시 실행이 필요한 상황에서 사용한다.

AJAX에 관해 가능한 한 자세히 설명하세요. (D사 화상면접)

AJAX는 비동기 자바스크립트 xml의 약자이다. 쉽게 말하면 클라이언트와 서버가 xml 데이터를 주고 받는 기술이다. 기존에는 클라이언트에서 서버로 요청을 보내고 응답을 받으면 다시 화면을 갱신해야 했고 이 과정에서 많은 리소스가 낭비되었다. 이 문제를 해결하기 위해 ajax는 페이지에서 필요한 일부만 갱신할 수 있도록 XMLHttpRequest 객체를 서버에 요청한다. 이로 인해 자원과 시간을 많이 아낄 수 있다.

"호이스팅(Hoisting)"에 대해서 설명하세요. (V사 기술면접)

호이스팅은 인터프리터가 자바스크립트 코드를 해석함에 있어서, Global 영역 또는 함수 영역 안에 대해서 주어진 선언들을 모두 끌어올려서 해당 유효 범위 최상단에 선언하는 것을 의미한다.

Callback과 Promise, async/await의 차이점에 대해서 설명해 주세요. (D사 화상면접)

가장 먼저 나온 Callback은 비동기 처리를 구현하기 위해 만들어 졌다. 이 함수는 다른 함수에게 인자로 전달되어 어느 시점에 실행될 수 있도록 던져주는 함수이다. 하지만 콜백 지옥이라 불리는 중첩문이 발생하면서 에러처리 한계가 생기기 시작했고 이를 해결하기 위해 Promise가 나타났다.

Promise는 어떤 값이 생성 되었을 때 그 값을 대신하는 대리자이다. 비동기 연산이 종료된 이후에 그 결과 값이나 에러를 처리할 수 있도록 처리기를 연결하는 역할을 하는 객체이다. Promise 객체를 통해 성공, 실패, 오류에 따른 후속처리가 바로 가능해서 가독성도 좋고, 비동기 에러를 처리하기도 수월하다.

Async/await은 비동기 코드를 동기식으로 표현하는 더 나은 방법으로 ES2017에 등장하였다. Async와 await는 항상 같이 붙어 있어야 한다. await 모드는 Promise 객체를 받아 처리하고, 만약 비동기 함수가 아닌 동기적 함수라면 리턴 값을 그대로 받는다. Async 함수는 Promise 객체를 통해 비동기적으로 처리된 내용을 동기적인 코드 진행 순서로 보여주는 역할을 한다.

let, var, const의 차이점에 관해서 설명해주세요. (V사 기술면접)

let, const 중복이나 호이스팅을 선언하지 않는다. 블록 단위의 변수타입이다.

event loop란 무엇인가요? (D사 화상면접)

자바스크립트 엔진이 Call Stack과 Callback Queue의 상태를 체크하여 Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어 넣는다.

Javascript Scope Chaining에 대해 설명해 주세요.

실행 컨텍스트 내에서 변수를 탐색할 때 중복되는 변수가 있더라도 먼저 탐색된 변수를 우선적으로 실행시키는 방식이다.

use strict 은 무엇이고, 사용했을 때 장단점에 관해서 설명해주세요.

use strict는 엄격 모드로 전체 스크립트 또는 부분 함수에 적용이 가능하다. use strict를 사용하게 되면 1. 기존에 무시되던 에러들이 throw 되며 2. JS 엔진 최적화 작업을 어렵게 만드는 실수들을 바로 잡고 3. ECMAScript의 차기 버전에서 정의될 문법들을 금지하는 특성을 가지고 있다.

특히 엄격 모드에서는 이전에 허용되던 실수를 오류로 바꾸어 놓는다. 예를 들어 전역 변수 생성을 불가능하게 만든다든지, 아니면 NaN에 할당하는 것과 같은 일들을 엄격 모드에서는 그냥 넘어가지 않는다. 또한 삭제할 수 없는 프로퍼티를 삭제하려고 하면 예외를 발생시킨다.