가장 많이 묻는 JavaScript 프론트엔드 인터뷰 질문 10가지

이런 유형의 인터뷰에 동의하지 않는 사람들이 많다는 것을 알고 있습니다. 사실, 당신이 좋든 싫든 그것을 받아들여야 합니다. 특히 독학을 하고 첫 직장에 지원하는 경우에는 더욱 그렇습니다.

이 외에도 Github/프로젝트 주소가 이상적인 증명 방법일 수 있지만 모든 방법에 의존하지는 마세요.

좋은 소식은 제한된 시간 내에 답변할 수 없는 어려운 질문(이벤트 루프, 양희삼각형 등)이 있고, 다른 면접 지원자도 인정한 부분이 있다는 것입니다. 답변을 하면 토론이 훨씬 쉬워질 것입니다.

나쁜 소식은 일부 인터뷰에서는 나중에 피드백이 없다는 것입니다. 세 회사에는 다시 연락이 닿지 않았습니다. 이 클릭은 자신감을 파괴하고 무례합니다. 그러다가 '인터뷰가 너무 잘 됐지?', '내 타입이 마음에 안 드나?' 등 심리적인 어려움을 겪을 수도 있다. 따라서 당신이 면접관이라면 면접관에게 명확한 대답을 하십시오. 자동 응답이라도 아무것도 없는 것보다는 낫습니다.

1. n번째 행에 양희삼각형을 반환하는 함수를 설계합니다. (인터뷰 전체 질문은 한 가지입니다)

참고* 양희의 삼각형은 파스칼의 삼각형이라고도 합니다

1

1 1 1

1 2 1

1 3 3 1

...

2. 문자열을 반환하려면 에서 가장 많이 반복되는 단어입니다.

3. 재귀를 사용하여 길이 n의 피보나치 수열을 인쇄합니다.

참고* 피보나치 수열은 0과 1로 시작하고 이전 두 숫자인 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

4. 바인드, 적용, 호출의 사용법과 차이점을 설명하세요.

5. 이벤트 위임이 무엇이며 왜 유용한지 설명하세요.

6. 이벤트 루프란?

7. JavaScript에서 호이스팅(선언 호이스팅)은 어떻게 작동하나요?

8.

9. JavaScript나 브라우저에 가장 추가하고 싶은 기능은 무엇이며 그 이유는 무엇입니까?

10. 함수형 프로그래밍과 명령형 프로그래밍의 차이점은 무엇인가요? 당신은 어느 것을 좋아합니까?

전형적인 프론트엔드 면접 질문 5가지

질문 1: 범위 범위

다음 코드를 고려해보세요.

(function() {
   var a = b = 5;
})();

console.log(b);

콘솔에 무엇이 인쇄될까요?

답

위 코드는 5를 출력합니다.

이 문제의 비결은 두 개의 변수 선언이 있지만 a는 var 키워드를 사용하여 선언된다는 것입니다. 함수의 지역 변수임을 나타냅니다. 대조적으로, b는 전역 변수가 됩니다.

이 질문의 또 다른 요령은 엄격 모드를 사용하지 않는다는 것입니다('use strict';). 엄격 모드가 활성화되면 코드는 ReferenceError: b가 정의되지 않음을 발생시킵니다. 엄격 모드에서는 전역 변수 선언을 구현하기 위해 명시적인 사양이 필요하다는 점을 기억하세요. 예를 들어 다음과 같이 작성해야 합니다.

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

질문 2: "네이티브" 메서드

를 생성하여 문자열 개체에 대한 반복 함수를 정의합니다. 정수 n을 전달하면 문자열을 n번 반복한 결과를 반환합니다. 예를 들어

console.log('hello'.repeatify(3));

는 helloellohello를 인쇄해야 합니다.


답변

가능한 구현은 다음과 같습니다.

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';
   for (var i = 0; i < times; i++) {
      str += this;
   }
   return str;
};

현재 질문은 JavaScript 상속 및 프로토타입에 대한 개발자의 지식을 테스트합니다. 이는 또한 개발자가 내장 객체를 확장하는 방법을 알고 있는지도 확인합니다(이렇게 하면 안 되더라도).

여기서 또 다른 중요한 점은 이미 정의되어 있는 기능을 재정의하지 않는 방법을 알아야 한다는 것입니다. 이전에 함수 정의가 존재하지 않았는지 테스트합니다.

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* 여기에 코드 */};

이 기술은 JavaScript 기능을 호환되게 만들라는 요청을 받을 때 특히 유용합니다.

질문 3: 명령문 호이스팅

이 코드를 실행하면 무엇이 출력되나요?

function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

답변

이 코드의 결과는 unundefined이고 2입니다.

이유는 변수 및 함수의 선언은 앞으로(함수 상단으로 이동) 이동하지만, 변수에는 아무런 값이 할당되지 않기 때문입니다. 따라서 변수를 인쇄할 때 해당 변수는 함수에 존재하지만(선언된) 여전히 undefine 상태입니다. 즉, 위의 코드는 다음과 동일합니다.

function test() {
   var a;
   function foo() {
      return 2;
   }
 
   console.log(a);
   console.log(foo());
    
   a = 1;
}
 
test();

질문 4: JavaScript에서는 어떻게 작동하나요?

下面的代码会输出什么结果？给出你的答案。

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());
 
var test = obj.prop.getFullname;
 
console.log(test());

回答 

答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。 

在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。 

问题5：call() 和 apply()

现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。 

回答 

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果： 

console.log(test.call(obj.prop))