당신이 알아야 할 23가지 자바스크립트 면접 질문

1. bar가 객체인지 확인하기 위해 typeof bar === "object"를 사용하면 몇 가지 잠재적인 단점이 있습니까? 이 단점을 피하는 방법은 무엇입니까?

typeof 사용의 단점은 명백합니다(이 단점은 instanceof를 사용하는 것과 동일합니다).

let obj = {};
let arr = [];
 
console.log(typeof obj === 'object'); //true
console.log(typeof arr === 'object'); //true
console.log(typeof null === 'object'); //true

위 출력 결과에서 typeof bar = == "객체"는 그렇지 않습니다. bar가 객체인지 정확하게 판단할 수 없습니다. Object.prototype.toString.call(bar) === "[object Object]":

let obj = {};
let arr = [];
 
console.log(Object.prototype.toString.call(obj)); //[object Object]
console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(null)); //[object Null]

또한 생명을 소중히 여기려면 ==를 멀리하세요. :

그리고 [] === false는 false를 반환합니다.

관련 기사 추천: 2020년 가장 완벽한 js 면접 질문 모음(최신)

2. 다음 코드는 콘솔에 메시지를 출력합니까? 왜?

(function(){
 var a = b = 3;
})();
 
console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));

이것은 변수 범위와 관련이 있습니다. 출력은 다음과 같이 변경됩니다.

console.log(b); //3
console,log(typeof a); //undefined

자체 실행 함수에서 변수 할당을 분해합니다.

b = 3;
var a = b;

그래서 b는 전역 변수가 되고, a는 자체 실행 함수의 지역 변수가 됩니다.

3. 다음 코드는 콘솔에 메시지를 출력합니까? 왜?

var myObject = {
 foo: "bar",
 func: function() {
 var self = this;
 console.log("outer func: this.foo = " + this.foo);
 console.log("outer func: self.foo = " + self.foo);
 (function() {
 console.log("inner func: this.foo = " + this.foo);
 console.log("inner func: self.foo = " + self.foo);
 }());

ES6 이전에는 JavaScript에는 함수 범위만 있었기 때문에 func의 IIFE에는 자체적인 범위가 있으며 Self에 액세스할 수 있습니다. 외부 범위에서는 세 번째 출력이 오류를 보고합니다. 이는 액세스 가능한 범위에서 정의되지 않았고 네 번째 출력은 bar이기 때문입니다. 클로저에 대해 알고 있다면 해결하기 쉽습니다:

function(test) {
 console.log("inner func: this.foo = " + test.foo); //'bar'
 console.log("inner func: self.foo = " + self.foo);
}(self));

클로저에 익숙하지 않다면 다음 글을 참고하세요: 스코프 체인에서 클로저에 대해 이야기하기

4. JavaScript 코드 변환 펑션 블록에 포함한다는 것은 무엇을 의미합니까? 왜 이런 일을 하는가?

즉, 즉시 호출 함수 표현식을 사용하는 이유는 무엇입니까?

IIFE에는 두 가지 일반적인 사용 시나리오가 있습니다. 하나는 정기적으로 루프에서 데이터 항목을 출력하는 것과 유사하고, 다른 하나는 JQuery/Node 플러그인 및 모듈 개발과 유사합니다.

for(var i = 0; i < 5; i++) {
 setTimeout(function() {
 console.log(i);
 }, 1000);
}

위 출력은 생각한 대로 0, 1, 2, 3, 4가 아니지만 출력은 모두 5이므로 IIFE가 유용할 수 있습니다.

for(var i = 0; i < 5; i++) {
 (function(i) {
 setTimeout(function() {
 console.log(i);
 }, 1000);
 })(i)
}

In 가변 오염을 피하기 위해 JQuery/Node 플러그인 및 모듈 개발도 큰 IIFE입니다.

(function($) {
 //代码
 } )(jQuery);

5. 엄격 모드에서 JavaScript를 수행합니다('엄격 사용'). ) 개발의 이점은 무엇입니까?

Javascript 구문의 불합리하고 부정확한 측면을 제거하고 이상한 동작을 줄입니다.

코드 실행에서 안전하지 않은 측면을 제거하고 코드 실행의 안전성을 보장합니다.

컴파일러 효율성을 개선하고 실행 속도를 높이세요.

향후 새로운 버전의 Javascript를 위한 기반을 마련하세요.

6. 다음 두 함수의 반환값은 동일한가요? 왜?

첫 번째는 전력을 먼저 올린 다음 전력을 낮추는 것입니다.

function add(num1, num2){
 let r1, r2, m;
 r1 = (''+num1).split('.')[1].length;
 r2 = (''+num2).split('.')[1].length;
 
 m = Math.pow(10,Math.max(r1,r2));
 return (num1 * m + num2 * m) / m;
}
console.log(add(0.1,0.2)); //0.3
console.log(add(0.15,0.2256)); //0.3756

두 번째는 내장된 toPrecision() 및 toFixed() 메소드를 사용하는 것입니다. 메서드의 반환 값 문자열을 참고하세요.

function add(x, y) {
 return x.toPrecision() + y.toPrecision()
}
console.log(add(0.1,0.2)); //"0.10.2"

7. x가 정수인지 확인하는 isInteger(x) 함수를 구현합니다.

x를 10진수로 변환하여 다음과 같은지 확인할 수 있습니다. 그게 다입니다.

function isInteger(x) {
 return parseInt(x, 10) === x;
}

ES6은 숫자 값을 확장하고 매개변수가 정수인지 확인하는 정적 메서드 isInteger()를 제공합니다.

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false

JavaScript는 -2^53과 2^53 사이(두 끝점 제외)를 정확하게 표현할 수 있으며, 이 범위를 벗어나면 값을 정확하게 표현할 수 없습니다. ES6에서는 이 범위의 상한과 하한을 나타내기 위해 Number.MAX_SAFE_INTEGER 및 Number.MIN_SAFE_INTEGER라는 두 개의 상수를 도입했으며 정수가 안전한 정수인지 여부를 결정하기 위해 Number.isSafeInteger()를 제공했습니다.

8. 다음 코드에서는 1~4의 숫자가 어떤 순서로 출력되나요? 왜 이렇게 출력되나요?

(function() {
 console.log(1);
 setTimeout(function(){console.log(2)}, 1000);
 setTimeout(function(){console.log(3)}, 0);
 console.log(4);
})();

여기에서는 자세히 설명하지 않겠습니다. 주로 JavaScript의 타이밍 메커니즘과 타임 루프에 대한 것입니다. 자세한 설명은 setTimeout의 JavaScript 실행 메커니즘에 대해 설명을 참조하세요. <… here: Palindrome For Your Dome

10. 다음과 같은 방법으로 호출했을 때 정상적으로 작동할 수 있는 sum 메소드를 작성하세요

function isPalindrome(str) {
 str = str.replace(/\W/g, '').toLowerCase();
 return (str == str.split('').reverse().join(''));
}

이 문제는 해결될 수 있습니다. 매개변수 수를 판단하여:

console.log(sum(2,3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5

11. 아래 코드 스니펫을 기반으로 다음 질문에 답하세요.

function sum() {
 var fir = arguments[0];
 if(arguments.length === 2) {
 return arguments[0] + arguments[1]
 } else {
 return function(sec) {
 return fir + sec;
 }
 }
  
}

1. What 콘솔에 출력됩니까? 5개 버튼 중 하나를 클릭하면 5개가 출력됩니다

for (var i = 0; i < 5; i++) {
 var btn = document.createElement(&#39;button&#39;);
 btn.appendChild(document.createTextNode(&#39;Button &#39; + i));
 btn.addEventListener(&#39;click&#39;, function(){ console.log(i); });
 document.body.appendChild(btn);
}

2. 예상 구현 제공

IIFE를 참조하세요.

12. 다음 코드는 무엇을 출력할까요? 왜?

무엇이 출력되나요? 실행해 보면 알게 될 것이고, 예상치 못한 결과가 나올 수도 있습니다. reverse()는 배열 자체를 변경하고 원래 배열에 대한 참조를 반환합니다.

var arr1 = "john".split(''); j o h n
var arr2 = arr1.reverse(); n h o j
var arr3 = "jones".split(''); j o n e s
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

slice 사용법은 다음을 참조하세요.

13. 다음 코드는 무엇을 출력할까요? 왜?

console.log(1 + "2" + "2");
console.log(1 + +"2" + "2");
console.log(1 + -"1" + "2");
console.log(+"1" + "1" + "2");
console.log( "A" - "B" + "2");
console.log( "A" - "B" + 2);

输出什么，自己去运行吧，需要注意三个点：

多个数字和数字字符串混合运算时，跟操作数的位置有关

console.log(2 + 1 + '3'); / /‘33'
console.log('3' + 2 + 1); //'321'

数字字符串之前存在数字中的正负号(+/-)时，会被转换成数字

console.log(typeof '3'); // string
console.log(typeof +'3'); //number

同样，可以在数字前添加 ''，将数字转为字符串

console.log(typeof 3); // number
console.log(typeof (''+3)); //string

对于运算结果不能转换成数字的，将返回 NaN

console.log('a' * 'sd'); //NaN
console.log('A' - 'B'); // NaN

14、什么是闭包？举例说明

可以参考此篇：从作用域链谈闭包

15、下面的代码会输出什么？为啥？

for (var i = 0; i < 5; i++) {
 setTimeout(function() { console.log(i); }, i * 1000 );
}

请往前面翻，参考第4题，解决方式已经在上面了

16、解释下列代码的输出

console.log("0 || 1 = "+(0 || 1));
console.log("1 || 2 = "+(1 || 2));
console.log("0 && 1 = "+(0 && 1));
console.log("1 && 2 = "+(1 && 2));

逻辑与和逻辑或运算符会返回一个值，并且二者都是短路运算符：

逻辑与返回第一个是 false 的操作数 或者 最后一个是 true的操作数

console.log(1 && 2 && 0); //0
console.log(1 && 0 && 1); //0
console.log(1 && 2 && 3); //3

如果某个操作数为 false，则该操作数之后的操作数都不会被计算

逻辑或返回第一个是 true 的操作数 或者 最后一个是 false的操作数

console.log(1 || 2 || 0); //1
console.log(0 || 2 || 1); //2
console.log(0 || 0 || false); //false

如果某个操作数为 true，则该操作数之后的操作数都不会被计算

如果逻辑与和逻辑或作混合运算，则逻辑与的优先级高：

console.log(1 && 2 || 0); //2
console.log(0 || 2 && 1); //1
console.log(0 && 2 || 1); //1

在 JavaScript，常见的 false 值：

0, '0', +0, -0, false, '',null,undefined,null,NaN

要注意空数组([])和空对象({}):

console.log([] == false) //true
console.log({} == false) //false
console.log(Boolean([])) //true
console.log(Boolean({})) //true

所以在 if 中，[] 和 {} 都表现为 true：

17、解释下面代码的输出

console.log(false == '0')
console.log(false === '0')

18、解释下面代码的输出

var a={},
 b={key:'b'},
 c={key:'c'};
 
a[b]=123;
a[c]=456;
 
console.log(a[b]);
输出是456。

19、在下面的代码中，数字 1-4 会以什么顺序输出？为什么会这样输出？

(function() {
 console.log(1);
 setTimeout(function(){console.log(2)}, 1000);
 setTimeout(function(){console.log(3)}, 0);
 console.log(4);
})();

这个就不多解释了，主要是 JavaScript 的定时机制和时间循环，不要忘了，JavaScript 是单线程的。详解可以参考 从setTimeout谈JavaScript运行机制。

20、写一个少于 80 字符的函数，判断一个字符串是不是回文字符串

function isPalindrome(str) {
 str = str.replace(/\W/g, '').toLowerCase();
 return (str == str.split('').reverse().join(''));
}

这个题我在 codewars 上碰到过，并收录了一些不错的解决方式，可以戳这里：Palindrome For Your Dome

21、写一个按照下面方式调用都能正常工作的 sum 方法

console.log(sum(2,3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5

针对这个题，可以判断参数个数来实现：

function sum() {
 var fir = arguments[0];
 if(arguments.length === 2) {
 return arguments[0] + arguments[1]
 } else {
 return function(sec) {
 return fir + sec;
 }
 }
  
}

22、解释下面代码的输出，并修复存在的问题

var hero = {
 _name: 'John Doe',
 getSecretIdentity: function (){
 return this._name;
 }
};
 
var stoleSecretIdentity = hero.getSecretIdentity;
 
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

将 getSecretIdentity 赋给 stoleSecretIdentity，等价于定义了 stoleSecretIdentity 函数：

var stoleSecretIdentity = function (){
 return this._name;
}
stoleSecretIdentity

的上下文是全局环境，所以第一个输出 undefined。若要输出 John Doe，则要通过 call 、apply 和 bind 等方式改变 stoleSecretIdentity 的this 指向(hero)。

第二个是调用对象的方法，输出 John Doe。

23、给你一个 DOM 元素，创建一个能访问该元素所有子元素的函数，并且要将每个子元素传递给指定的回调函数。

函数接受两个参数：

DOM

指定的回调函数

原文利用 深度优先搜索(Depth-First-Search) 给了一个实现：

function Traverse(p_element,p_callback) {
 p_callback(p_element);
 var list = p_element.children;
 for (var i = 0; i < list.length; i++) {
 Traverse(list[i],p_callback); // recursive call
 }
}

相关学习推荐：javascript视频教程