<FE면접질문> #4. JavaScript (Part 2)

지난 포스팅 

<FE면접질문> #1. 웹 브라우저 & HTML

<FE면접질문> #2. CSS

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

 

클로져(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). 메모리 힙에서는 메모리 할당이 일어나고, 콜 스택에서는 코드 실행에 따라 호출 스택이 쌓인다. 자바스크립트는 싱글 쓰레드 기반 언어이기 때문에 호출 스택이 하나이고 따라서 그 하나의 호출 스택에 실행된 코드가 하나씩 쌓이게 된다. 싱글 스레드이기 때문에 데드락 같은 문제나 복잡한 시나리오를 고민할 필요는 없으나, 호출 스택에 처리 시간이 어마어마하게 오래 걸리는 함수가 있다면 브라우저는 해당 함수가 실행되는 동안 아무것도 하지 못하고 가만히 있게 된다.

 

함수형 프로그래밍에 대해 설명해 주세요.

함수형 프로그래밍은 계산을 수학적 함수의 조합으로 생각하는 방식을 말한다. 이것은 일반적인 프로그래밍 언어에서 함수가 특정 동작을 수행하는 역할을 담당하는 것과는 반대되는 개념으로, 함수를 수행해도 함수 외부의 값이 변경될 수 없다.

함수형 프로그래밍은 순수 함수(pure function)를 조합하고 공유 상태(shared state), 변경 가능한 데이터(mutable data) 및 부작용(side-effects)을 피하여 소프트웨어를 만드는 프로세스다. 함수형 프로그래밍은 명령형(imperative)이 아닌 선언형(declarative)이며 어플리케이션의 상태는 순수함수를 통해 전달된다.

 

Callback을 왜 사용하나요?

디자인 패턴 중 하나인 옵저버(Observer) 패턴에서 나온 개념으로써 객체의 상태 변화(이벤트)가 발생 하였을 경우에 이러한 사실을 함수를 통해 전달하게 되는데, 이를 콜백 함수라고 한다. 콜백 함수를 사용하는 이유는 서버로 어떠한 요청을 보낸다고 가정할 때 응답을 기다리는 동안 가만히 시간을 버리는 것이 아닌, 다른 작업을 함으로써 동기적인 코드에 비해 성능을 향상시킬 수 있기 때문이다.

 

ES6에서 바뀐 문법을 생각나는 대로 이야기 해 주세요. (D사 화상면접) 

Destructuring(var { name } = person;), Template Literal(`, 백틱), Spread Operator(...), 화살표 함수(const a = () ⇒ {}), const&let(var와 다르게 block scope), import/export, Map/Set, Promise 등

 

ES6 이상의 버전을 브라우저에서 인식하지 못한다면 어떻게 해결해야 하는지? (D사 화상면접)

ES6 이상의 자바스크립트 버전은 브라우저 별로 지원률이 상이하기 때문에 트랜스파일러인 바벨을 사용하여 ES6+ → ES5로 변환한다.

 

자바스크립트 메서드 .call()과 .apply(), .bind() 차이를 설명하시오. (D사 화상면접) 

call과 apply는 함수를 호출하는 함수이다. 그냥 실행하는 것이 아닌 첫 번째 인자에 this로 setting 하고싶은 객체를 넘겨주어 this를 바꾸고 나서 실행한다. call과 apply의 차이점은 첫 번째 인자(this를 대체할 값)를 제외하고, 실제 함수 호출에 필요한 파라미터를 넣어야 한다. call 과 다르게 apply 함수는 두 번째 인자부터 모두 배열에 넣어야 한다.

bind 함수가 call과 apply와 다른 점은 함수를 실행하지 않는다는 점이다. 대신 bound 함수를 리턴한다. 이 bound 함수가 이제부터 this를 obj로 가지고 있기 때문에 나중에 사용해도 된다. bind에 사용하는 나머지 파라미터들은 동일하다.

 

ES6에서 화살표 함수와 일반 함수의 차이는?

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 반면에, 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.

 

참고자료

1. https://h5bp.org/Front-end-Developer-Interview-Questions/translations/korean/#JS-관련-질문
2. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode
3. https://velog.io/@naseriansuzie/imcourseTIL20
4. https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures
5. http://hi-cord.com/contents/javascript-typescript-module-pattern이란
6. https://poiemaweb.com/js-built-in-object
7. https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e
8. https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/
9. https://lovestudycom.tistory.com/entry/콜백함수를-왜-사용하나
10. https://perfectacle.github.io/2016/11/11/Babel-ES6-with-IE8/
11. https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/
12. https://velog.io/@ki_blank/JavaScript-화살표-함수Arrow-function