A Tricky JavaScript Interview Question Asked by Google and Amazon

A Tricky JavaScript Interview Question Asked by Google and Amazon

The following will be a short explanation, along with some solutions, of a popular JavaScript question that tends to get asked in developer interviews by Google and Amazon

The question usually looks something like the following:

// interviewer: what will the following code output?
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('Index: ' + i + ', element: ' + arr[i]);
  }, 3000);
}

This question deals with the topics: closures, setTimeout, and scoping. The correct answer to this is question is:

Index: 4, element: undefined(printed 4 times).

If that’s not what you expected, then hopefully the rest of this article will help explain why this is the case in JavaScript.

A user on reddit mentioned that they were asked this question in an Amazon developer interview. I’ve also been asked this type of closure + loop question in interviews myself — even in a Google interview.

This question tests your knowledge of some important JavaScript concepts, and because of how the JavaScript language works this is actually something that can come up quite often when you’re working — namely, needing to use setTimeout or some sort of async function within a loop.

A solid understanding of functional/block scope, anonymous functions, closures, and IIFE’s will definitely make you a better JavaScript developer and help you out in future interviews.

Solutions

I’ve actually covered this question and some solutions in previous posts:

To quote from a previous article:

The reason for this is because the _setTimeout_ function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index _i_. After 3 seconds go by, the function is executed and it prints out the value of _i_, which at the end of the loop is at 4 because it cycles through 0, 1, 2, 3, 4 and the loop finally stops at 4._arr[4]_ does not exist, which is why you get _undefined_.

There are two popular solutions to the question. One involves passing the needed parameters into the inner function, and the other solution makes use of ES6.

A user on the reddit post provided a similar answer to this question as well. There’s also a good explanation of closures by a user on Stack Overflow.

This often confuse people who are new to JavaScript or functional programming. It is a result of misunderstanding what closures are. A closure does not merely pass the value of a variable or even a reference to the variable. A closure captures the variable itself!

If you have any JavaScript or interview questions you’d like me to write about or explain, let me know in the comments! Thanks for reading.

javascript interview-questions

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top 130 Android Interview Questions - Crack Technical Interview Now!

Top Android Interview Questions & Answers from Beginner to Advanced level. Get ready to crack your next android interview with these android interview questions

Javascript Mock Interview | online video interview Questions & Answers

Online Technical Mock Interview of one of my viewers. Where I ask JavaScript Fundamental Questions , algorithm questions aand give their answers

Top 50 Interview Questions for JavaScript Developer

In this article, you'll see top 50 questions you should know before going to a JavaScript Developer job interview

Oracle Coding Interview Questions

Get exceptionally good at coding interviews by solving one problem every day.They are a wide variety of questions inspired by real programming interviews, with in-depth solutions that clearly take you through each core concept. Get exceptionally good at coding interviews by solving one problem every day. We will together solve these problems using JavaScript.

PHP Interview Questions with Solutions: Prepare for PHP Interview

Prepare for PHP Interviews. Set Variable With php.ini File. Logic & Output Behind PHP Code Segment. Class Concept, Error & Functions in PHP. Start PHP Now!