FRONTEND - JAVASCRIPT 면접 질문-Thinking.Dev

티스토리 뷰

ETC

FRONTEND - JAVASCRIPT 면접 질문

비용러브 2022. 2. 10. 15:27

이벤트 버블링(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에 할당하는 것과 같은 일들을 엄격 모드에서는 그냥 넘어가지 않는다. 또한 삭제할 수 없는 프로퍼티를 삭제하려고 하면 예외를 발생시킨다.

클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.

클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 통해 은닉화를 할 수 있으며, 콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다.

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

다음 코드는 클로저에 대한 기본적인 예제이다. 대부분의 프로그래밍 언어에서는 makeFunc() 실행이 끝나면, 즉 displayName이 리턴되고 나면 name 변수에 더 이상 접근할 수 없다고 예상한다. 하지만 자바스크립트에서는 함수를 리턴하고, 리턴하는 함수가 클로저를 선언한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역변수로 구성된다. 따라서 myFunc은 makeFunc이 실행될 때 생성된 displayName 함수의 인스턴스에 대한 참조이다. displayName 인스턴스는 변수 name이 있는 어휘적 환경에 대한 참조를 유지한다.

모듈 패턴과 전통적 상속, 각각의 장단점을 말해달라.

모듈 패턴은 전역 영역에서 특정 변수영역을 보호하기 위해 단일 객체 안의 public/private의 변수를 포함할 수 있는 각 클래스 형식의 개념을 구현하는데 사용된다. 이 패턴으로 추가적인 자바스크립트 객체가 다른 스크립트의 객체와 충돌하는 것을 줄여줄 수 있다.

Before module pattern

모듈 패턴을 사용하지 않으면 해당 객체가 모두 전역에서 인스턴스화 되어 다른 코드와 충돌 가능성이 높아진다.
객체 간의 연관성을 알기 어려워 코드관리가 어려우며 가용성이 떨어진다.

const count = 3
const publicMethod = function () {
    console.log('Public Method : ', count);
}
const publicMethod2 = function () {
    console.log('Public Method2 : ', count);
}
publicMethod();
publicMethod2();

After module pattern

은닉화, 다형성, 상속을 통해 객체지향적으로 코드를 구성할 수 있다.

class Module {
    private count: number = 3
    private privateMethod() {
        console.log('Private Method : ', this.count);
    }
    publicMethod() {
        console.log('Public Method : ', this.count);
    }
    public publicMethod2() {
        console.log('Public Method2 : ', this.count);
    }
}
const mod = new Module();
// mod.privateMethod(); // coudn't access
mod.publicMethod();
mod.publicMethod2();

호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?

호스트 객체는 브라우저 환경에서 제공하는 window, XMLHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체를 말한다. 예를 들어 브라우저에서 동작하는 환경과 브라우저 외부에서 동작하는 환경의 자바스크립트(Node.js)는 다른 호스트 객체를 사용할 수 있다. 브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인 window, BOM(Browser Object Model)과 DOM(Document Object Model) 및 XMLHttpRequest 객체 등을 제공한다.

네이티브 객체는 ECMAScript 명세에 정의된 객체를 말하며, 어플리케이션 전역의 공통 기능을 제공한다. 네이티브 객체는 어플리케이션 환경과 관계없이 언제나 사용할 수 있다. Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구분된다.

JSON이 무엇이며 사용하면 어떠한 장점이 있나요?

JSON은 경량화된 파일 형식이다. 자바스크립트에서 모든 객체는 연관배열(Key/Value)을 기초로 구성되어 있는데, JSON은 이러한 연관 배열을 표시하는데 매우 효과적인 방식이다. JSON은 텍스트 포멧이며 유니코드 인코딩이다. AJAX에서 JSON 방식을 사용하게 되면 eval() 메서드를 사용하지 않아도 키 값을 바로 불러올 수 있다. XML로도 데이터를 불러올 수 있지만, 데이터의 크기를 불필요하게 증가시킬 수 있으며, 파싱 시에 브라우저 호환성도 신경을 써 주어야 한다는 단점을 가지고 있다.

전역 scope를 사용했을 때 장단점에 관해 설명해주세요.

자바스크립트에는 스코프 체인(scope chain)이라는 개념이 있는데, 내부 함수에서는 외부 함수의 변수에 접근이 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없다. 내부 함수에서는 변수를 먼저 해당 스코프에서 찾은 뒤, 만약 없으면 outer 스코프에서 찾고, 그렇게 타고 올라가다가 결국 전역 scope에서 찾는다. 따라서 전역 변수를 만들어서 작업하면 다른 개발자와 협업할 때 우연히 같은 변수 이름을 사용해서 이전의 변수를 덮어쓰는 불상사가 발생할 수도 있다. 굳이 전역 변수의 장점을 꼽자면 함수 내의 지역 변수와 달리, 저장된 값이 사라지지 않는다는 점이다.

function foo() {}와 var foo = function() {}에서 foo 의 차이가 무엇인지 설명해보세요.

전자는 함수 선언(function statement)이며 후자는 함수 표현(function literal)이다. 함수 선언은 코드 블럭 자체가 실행 가능 코드가 아니라는 것이다. 해당 코드 블럭을 콘솔에서 실행하여도 어떠한 결과가 리턴되지 않는다. Class와 동일한 개념으로 이해해도 된다. 함수 표현은 특정 변수에 할당되거나 즉시 실행가능한 코드 블럭으로서 존재하는 함수를 의미하는 것이다. 둘은 호이스팅 관점에서 차이가 있다. 선언식은 호이스팅 되지만 표현식은 호이스팅 되지 않는다.

JavaScript의 작동방식의 장단점에 관해 설명해주세요.

자바스크립트는 V8 엔진을 사용하며, 싱글 쓰레드 기반이고 콜백 큐를 사용한다. 엔진은 크게 두 요소로 구분된다. 메모리 힙(Memory Heap)과 콜 스택(Call Stack). 메모리 힙에서는 메모리 할당이 일어나고, 콜 스택에서는 코드 실행에 따라 호출 스택이 쌓인다. 자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 호출 스택이 하나이고 따라서 그 하나의 호출 스택에 실행된 코드가 하나씩 쌓이게 된다. 싱글 스레드이기 때문에 데드락 같은 문제나 복잡한 시나리오를 고민할 필요는 없으나, 호출 스택에 처리 시간이 어마어마하게 오래 걸리는 함수가 있다면 브라우저는 해당 함수가 실행되는 동안 아무것도 하지 못하고 가만히 있게 된다.

'ETC' 카테고리의 다른 글

FRONTEND - 웹브라우저 & HTML 면접 질문 (0)	2022.02.10
FRONTEND - 자료구조, 운영체제 면접 질문 (0)	2022.02.10
FRONTEND - CSS 면접 질문 (0)	2022.02.10
프론트엔드 개발자 면접 질문 (0)	2022.02.10
Python 개발자 면접 질문 (0)	2022.02.10

공유하기 링크

페이스북
카카오스토리
트위터

Thinking.Dev

티스토리 뷰