면접자 80% 이상이 실패하는 JS 면접 질문

총 5024 단어, 읽는 데 6분, 속독하는 데 2분이 걸립니다. 이 글은 Zhihu Column Front-end Weekly에 처음 게재되었습니다. 앞서 쓴 대로 저자는 면접관으로 2년 넘게 수백 명의 프론트엔드 엔지니어를 인터뷰했는데, 지원자의 80% 이상이 다음 질문에 대한 답조차 통과하지 못했다는 사실에 놀랐다. 이건 무슨 마법 같은 면접 질문인가요? 그는 후보자에서 어떤 능력을 검사합니까? 이 글을 읽고 있는 당신에게 어떤 의미가 있나요? 천천히 알려드릴게요 ("프론트엔드 면접질문" 추천)

겸손한 시작

프론트엔드 엔지니어 모집, 특히 중-상위 프론트엔드 엔지니어라면 탄탄한 JS 기반이 꼭 필요합니다. 기초가 탄탄하지 않아 엔지니어들은 프론트엔드 개발에서 다양한 문제에 직면할 때 무기력해질 가능성이 높습니다. 나는 종종 후보자의 JS 기반을 검토할 때 다음 코드를 제공한 후 후보자에게 실제 작업 결과를 분석하도록 요청합니다.

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

이 코드는 매우 짧습니다. 여기에서 읽을 수 있을 것 같습니다. 아마도 이 코드가 수행하는 작업을 한 줄씩 설명할 필요는 없을 것입니다. 이 코드에 직면했을 때 후보자가 제공한 결과도 다릅니다. 다음은 일반적인 답변입니다.

• A. 20%의 사람들이 코드를 빠르게 스캔한 다음 결과를 제공합니다. 1,2,3,4,5;
0,1,2,3,4,5；
• B. 30% 的人会拿着代码逐行看，然后给出结果：5,0,1,2,3,4；
• C. 50% 的人会拿着代码仔细琢磨，然后给出结果：5,5,5,5,5,5；

只要你对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解，就知道正确答案是 C，代码的实际输出是：

2017-03-18T00:43:45.873Z 5
2017-03-18T00:43:46.866Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5
2017-03-18T00:43:46.868Z 5

接下来我会追问：如果我们约定，用箭头表示其前后的两次输出之间有 1 秒的时间间隔，而逗号表示其前后的两次输出之间的时间间隔可以忽略，代码实际运行的结果该如何描述？会有下面两种答案：

• A. 60% 的人会描述为：5 -> 5 -> 5 -> 5 -> 5，即每个 5 之间都有 1 秒的时间间隔；</pre> <li>B. 40% 的人会描述为：<code class="code">5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；

这就要求候选人对 JS 中的定时器工作机制非常熟悉，循环执行过程中，几乎同时设置了 5 个定时器，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。

如果到这里算是及格的话，100 个人参加面试只有 20 人能及格，读到这里的同学可以仔细思考，你及格了么？

追问 1：闭包

如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来我会追问，如果期望代码的输出变成：5 -> 0,1,2,3,4B. 30%의 사람들이 코드를 가져와서 한 줄씩 읽은 다음 결과를 제공합니다: 5, 0,1,2,3,4;

C. 50%의 사람들이 코드를 받아 신중하게 생각한 다음 결과를 제공합니다: 5,5,5 ,5,5,5;

동기 코드와 비동기 코드의 차이점, 변수 범위, 클로저 및 기타 개념을 올바르게 이해하고 있다면 JS에서 정답은 C이고 코드의 실제 출력은 다음과 같습니다.

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

다음으로 질문하겠습니다. 동의한다면 화살표를 사용하여 두 출력 전후의 1초 시간 간격을 나타냅니다. , 그리고 그 앞과 뒤의 두 출력 사이의 시간 간격을 나타내는 쉼표입니다. 시간 간격은 무시할 수 있습니다. 코드 실행의 실제 결과를 어떻게 설명합니까? 다음과 같은 두 가지 답변이 있습니다.

A. 60%의 사람들이 다음과 같이 설명합니다: 5 -> 5 -> 5 즉, 각 5;

B 사이에는 1초의 시간 간격이 있습니다. 40%의 사람들은 이를 5 -> ,5,5 , 즉 처음 5가 직접 출력되고 1초 후에 5 5가 출력됩니다. 이를 위해서는 응시자가 타이머 작동 메커니즘에 매우 익숙해야 합니다. JS 및 루프 실행 프로세스에서는 5개의 타이머가 거의 동시에 설정됩니다. 일반적인 상황에서는 이러한 타이머가 1초 후에 트리거되고 루프가 즉시 실행된 후 출력됩니다.

이것을 합격이라고 한다면, 면접에 참여한 100명 중 20명만 합격할 것입니다. 이 글을 읽는 학생들은 곰곰히 생각해보면 합격하셨나요?

후속 질문 1: Closure

이 질문이 단순히 JS 비동기 코드 및 변수 범위에 대한 응시자의 이해도를 테스트하는 것이라면 한계가 너무 큽니다. 후속 조치를 취하려면 코드 출력이 5 -> 0,1,2,3,4가 될 것으로 예상되는 경우 코드를 어떻게 수정해야 합니까? 클로저에 익숙한 학생들은 다음과 같은 해결책을 빠르게 생각해 낼 수 있습니다.

var output = function (i) {
    setTimeout(function() {        
        console.log(new Date, i);
    }, 1000);
};
for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}
console.log(new Date, i);

🎜 클로저로 인해 발생하는 문제를 IIFE(Immediately Invoked Function Expression: 선언하고 실행하는 함수 표현식)를 영리하게 사용하는 것은 참으로 좋은 생각입니다. 하지만 초보자는 이러한 코드를 이해하기 쉽지 않을 수도 있습니다. 적어도 처음 시작했을 때 실제로 이해하기 전에는 잠시 고민했습니다. 🎜🎜더 직관적인 접근 방식이 있나요? 대답은 '예'입니다. 출력을 담당하는 코드가 각 루프의 i 값을 얻을 수 있도록 루프 본문을 약간 조정하면 됩니다. 무엇을 해야 할까요? JS에서 기본형(Primitive Type)의 매개변수 전달이 값에 의한 전달(Pass by Value)이라는 특징을 활용하면 다음 코드를 변환하는 것은 어렵지 않습니다. 🎜

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

🎜 위 두 가지 솔루션을 제공할 수 있는 후보자는 다음과 같이 간주될 수 있습니다. JS 기본에 대한 이해와 활용이 좋으며, 각 10점씩 추가 가능합니다. 물론 실제 인터뷰에서 일부 지원자는 다음 코드를 제공했습니다. 🎜

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {            
            console.log(new Date, j);
        }, 1000 * j);  // 这里修改 0~4 的定时器时间
    })(i);
}
setTimeout(function() { 
        // 这里增加定时器，超时设置为 5 秒
    console.log(new Date, i);
}, 1000 * i);

🎜주의 깊은 학생들은 여기에 매우 미묘한 변화가 있다는 것을 알게 될 것입니다. 즉, ES6 블록 범위(Block Scope)를 var 대신 사용하고, 그러나 코드는 실제로 실행될 때 오류를 보고합니다. 왜냐하면 마지막 출력에 사용된 i는 해당 코드가 위치한 범위에 존재하지 않고 루프 내부에만 존재하기 때문입니다. 🎜🎜ES6 기능에 대해 생각할 수 있는 학생은 정답을 맞히지 못할 수도 있지만 ES6에 대한 이해를 입증한 것으로 5점을 추가하고 다음 질문을 계속할 수 있습니다. 🎜🎜후속 질문 2: ES6🎜🎜프런트엔드 경험이 있는 학생들은 이 글을 읽고 조금 조바심이 날 수도 있습니다. 제가 너무 많은 이야기를 했고, 그 사람이 아는 게 전부입니다. 도전의 어려움은 있을 것입니다. 계속 증가합니다. 🎜

接着上文继续追问：如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）。

看到这里，部分同学会给出下面的可行解：

for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {            
            console.log(new Date, j);
        }, 1000 * j);  // 这里修改 0~4 的定时器时间
    })(i);
}
setTimeout(function() { 
        // 这里增加定时器，超时设置为 5 秒
    console.log(new Date, i);
}, 1000 * i);

不得不承认，这种做法虽粗暴有效，但是不算是能额外加分的方案。如果把这次的需求抽象为：在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，再做其他的事情，代码该怎么组织？聪明的你是不是想起了什么？对，就是 Promise。

可能有的同学会问，不就是在控制台输出几个数字么？至于这样杀鸡用牛刀？你要知道，面试官真正想考察的是候选人是否具备某种能力和素质，因为在现代的前端开发中，处理异步的代码随处可见，熟悉和掌握异步操作的流程控制是成为合格开发者的基本功。

顺着下来，不难给出基于 Promise 的解决方案（既然 Promise 是 ES6 中的新特性，我们的新代码使用 ES6 编写是不是会更好？如果你这么写了，大概率会让面试官心生好感）：

const tasks = [];
for (var i = 0; i < 5; i++) {   // 这里 i 的声明不能改成 let，如果要改该怎么做？
    ((j) => {
        tasks.push(new Promise((resolve) => {
            setTimeout(() => {
                console.log(new Date, j);
                resolve();  // 这里一定要 resolve，否则代码不会按预期 work
            }, 1000 * j);   // 定时器的超时时间逐步增加
        }));
    })(i);
}

Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);   // 注意这里只需要把超时设置为 1 秒
});

相比而言，笔者更倾向于下面这样看起来更简洁的代码，要知道编程风格也是很多面试官重点考察的点，代码阅读时的颗粒度更小，模块化更好，无疑会是加分点。

const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

读到这里的同学，恭喜你，你下次面试遇到类似的问题，至少能拿到 80 分。

我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞，好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning，而排查这些错误还需要一些特别的技巧（浏览器、Node.js）。

追问 3：ES7

既然你都看到这里了，那就再坚持 2 分钟，接下来的内容会让你明白你的坚持是值得的。

多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力，即技术自驱力，直白的说就是候选人像有内部的马达在驱动他，用漂亮的方式解决工程领域的问题，不断的跟随业务和技术变得越来越牛逼，究竟什么是牛逼？建议阅读程序人生的这篇剖析。

回到正题，既然 Promise 已经被拿下，如何使用 ES7 中的 async await 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？请在这里暂停 1 分钟，思考下。

下面是笔者给出的参考代码：

// 模拟其他语言中的 sleep，实际上可以是任何异步操作
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();

总结

感谢你花时间读到这里，相信你收获的不仅仅是用 JS 精确控制代码输出的各种技巧，更是对于前端工程师的成长期许：扎实的语言基础、与时俱进的能力、强大技术自驱力。

推荐教程：《JS教程》

위 내용은 면접자 80% 이상이 실패하는 JS 면접 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!