/simple-but-tricky-javascript-interview-questions/

[panzerdp]

Written on 10/10/2019 08:24:02

URL: https://dmitripavlutin.com/simple-but-tricky-javascript-interview-questions/

[panzerdp]

Comment written by Srijan R Shetty on 10/15/2019 15:50:57

Found a small error in Q3. Q3 evaluates to a ReferenceError as 'i' is scoped to the for loop which has no body. The next block does not have an 'i' variable and neither does the global scope and hence evaluates to ReferenceError. (I checked both Firefox and Chrome, both of which throw a ReferenceError)

[panzerdp]

Comment written by Srijan R Shetty on 10/15/2019 15:53:37

Also on Q5, my proposed solution is:


for (let i = 0; i < 3; i++) {
const log = () => {
console.log(i);
}
setTimeout(log, 100);
}


[panzerdp]

Comment written by Dmitri Pavlutin on 10/16/2019 06:15:50

Nice catch! I will fix the question to use `var` like I intended initially.

[panzerdp]

Comment written by Dmitri Pavlutin on 10/16/2019 06:32:06

That's a good solution.

[panzerdp]

Comment written by Jeff Orrok on 10/16/2019 18:35:26

Except it's not EXACTLY what you ASKED for. But this is :-D :-P

var t;
let i;
for (i = 0; i < 3; i++) {
let j = i ;
const log = () => {
console.log(j); }
t = setTimeout(log, 100);
}
clearTimeout(t);
setTimeout(()=>console.log(i),100);

[panzerdp]

Comment written by 40K Today on 10/16/2019 18:59:50

let i;
for (i = 0; i < 3; i++) {
const log = (a) => {
console.log(a); }
setTimeout(log(i), 100);
}

Now if you could give me a tip on this, what is the integer that gets spit out by FireFox's console when you run this? I think I remember that it is the integer ID of the function, something like an address, but I really don't know

[panzerdp]

Comment written by MegaDunk on 10/17/2019 02:03:04

The original had the declaration scoped for the null block. Using `let` outside the `for` declaration would yield the same results as the current use of `var`.

Perhaps you meant to use `var` inside the `for` declaration, which would also result in `numbers = [5]`.

[panzerdp]

Comment written by Dmitri Pavlutin on 10/17/2019 05:22:14

Perhaps you meant to use `var` inside the `for` declaration, which would also result in `numbers = [5]`.

Yep, that was the idea.

[panzerdp]

Comment written by Dmitri Pavlutin on 10/17/2019 05:27:36

Unfortunately, your solution is not good enough because it will instantly log the numbers, without any timeout. The idea is to log the numbers after 100ms timeout.

[panzerdp]

Comment written by jakopo87 on 10/17/2019 08:25:01

Q5:

let i;
for (i = 0; i < 3; i++) {
const log = (i) => {
console.log(i);
}
setTimeout(log.bind(this, i), 100);
}

[panzerdp]

Comment written by Dmitri Pavlutin on 10/17/2019 08:50:09

That's a possible solution too. You might want to refactor log.bind(this, i) to something like log.bind(undefined, i).

[panzerdp]

Comment written by Eugene Karataev on 10/18/2019 17:13:39

Answered correctly 6/7.
Eagle eye test is 🤬

[panzerdp]

Comment written by Cameron on 10/18/2019 19:13:22

Another solution for Q5 is:
let i;
for (i = 0; i < 3; i++) {
const log = (i) => {
console.log(i);
}
setTimeout(log, 100, i);
}

This solves the closure problem by passing in the variable at the value expected as a parameter to the `log` function. 🎉
I also like @srijanshetty:disqus answer, which uses the full power of the `let` keyword.

[panzerdp]

Comment written by Rajesh Ranjan on 10/19/2019 09:46:10

for (let i = 0; i < 3; i++) {
const log = () => {
console.log(i);
}
setTimeout(log, 100);
}

[panzerdp]

Comment written by Dmitri Pavlutin on 10/19/2019 12:44:47

Exactly. Having variable i block scoped solves the problem.

[panzerdp]

Comment written by Dmitri Pavlutin on 10/19/2019 12:45:30

That's a good result! Eagle eye test is a trap.

[panzerdp]

Comment written by Dmitri Pavlutin on 10/19/2019 12:47:21

An interesting solution too. Good to know that you can set arguments to the callback using setTimeout(callback, delay, arg1, arg2, ...).

[panzerdp]

Comment written by Zoie Cheng on 10/21/2019 03:23:09

solution for Q5,
let i;
for (i = 0; i < 3; i++) {
const log = (a) => {
return () => console.log(a);
}
setTimeout(log(i), 100);
}

[panzerdp]

Comment written by Dmitri Pavlutin on 10/21/2019 06:24:54

While not the most optimal, but this is a viable solution too.

[panzerdp]

Comment written by Martin on 10/21/2019 10:09:45

I found question 4 confusing as

function arrayFromValue(item) {
return
[items];
}

you are passing in item and then in the array using items which was initially what I thought I was meant to be looking at.

[panzerdp]

Comment written by Dmitri Pavlutin on 10/21/2019 10:36:04

That's a typo. The post has been updated.

[panzerdp]

Comment written by Cameron on 10/21/2019 18:47:33

Thanks! and ya!

[panzerdp]

Comment written by Александр Грошев on 10/22/2019 10:37:05

Q5: 0, 1, and 3? or 2?

[panzerdp]

Comment written by Artem Nakhodkin on 10/28/2019 14:49:40

3. Eagle eye test

I was slightly disappointed because of such unfair tricks. I asked the interviewer what is the reason behind tricks like that? The interviewer replied:

“Because we need people that have good attention to detail.”

I must say that modern text editors and IDE's would even highlight the piece of code as suspicious one. And programmers on the other hand should spend much more time on reasoning about good architecture, learning about high code standards and best practices and introducing accurate abstractions rather than spending any bits of time on such things...

However, I should admit that such tiny little thing could cause tremendous problems if you faced the issue right after rolling out the code on production during the smoke testing activities...

But the wording for this question should be definitely changed to something like this:
"You have the following piece of code that produced this result. Could you possibly try to figure out the root cause of this behaviour and how it should be fixed?"

This should be more efficient way to check whether the candidate is familiar with the concept of null statements.

https://uploads.disquscdn.c...

[panzerdp]

Comment written by Dmitri Pavlutin on 10/29/2019 11:07:45

It's a good idea to discuss with the candidate even a small problem or gotcha, to his way of thinking.

[panzerdp]

Comment written by Andrew Lewman on 10/29/2019 13:06:41

Why nobody says that?


let i;
for (i = 0; i < 3; i++) {
const log = (() => {
console.log(i);
})(i);
setTimeout(log, 100);
}


[panzerdp]

Comment written by Dmitri Pavlutin on 10/30/2019 10:10:39

Your solution doesn't work as intended. It logs the numbers right away, but the numbers must be logged with a delay.

[panzerdp]

Comment written by Masha I. Klachko-Blair on 11/07/2019 20:03:28

Another great article -- thank you, Dmitri!
I can't believe about #3...

[panzerdp]

Comment written by Dmitri Pavlutin on 11/08/2019 08:32:59

I'm glad you find it useful @mashaiklachkoblair:disqus!

[panzerdp]

Comment written by Vege Table on 11/18/2019 12:56:51

But if we change let to var it won't work. Is there a simple explanation?
I guess it's because of how js works under the hood.
Something like in each iteration variable declared by let keyword creates new lexical environment. But if its decraled by var it doesn't

[panzerdp]

Comment written by Dmitri Pavlutin on 11/19/2019 13:53:44

for (let i = 0; ...) { } - i is block scoped. Each iteration creates a new binding of i. The closures capture NEW bindings of i.

for (var i = 0; ...) { } - i is function scoped. Each iteration uses the same binding of i.The closures capture the SAME binding of i.

[panzerdp]

Comment written by Dmitri Pavlutin on 11/25/2019 09:06:14

It should be 0, 1, 2. The post has been fixed.

[panzerdp]

Comment written by Peter on 01/03/2020 14:17:40

These are very good. Most articles about programming interviews just list a bunch of useless theoretical questions, instead of tasks actually involving JavaScript like most real interviews do. Though it could be useful to add some more coding tasks like in these JavaScript interview questions.

[panzerdp]

Comment written by Dmitri Pavlutin on 01/03/2020 15:15:06

Thanks for sharing the coding tasks. Worth trying.

[panzerdp]

Comment written by suman khatri on 01/28/2020 06:40:51

Thats a really nice post, Keep sharing such JS tricks.

[panzerdp]

Comment written by Dmitri Pavlutin on 01/28/2020 08:05:43

Thanks.

[panzerdp]

Comment written by Umair Khan on 02/26/2020 21:27:21

for (let i = 0; i < 3; i++) {
const log = () => {
console.log(i);
}
setTimeout(log, 100);
}

[panzerdp]

Comment written by Jacob R on 06/09/2020 11:52:12

Very well written. We've compiled a list of important JS interview topics. Might be useful.

[panzerdp]

Comment written by Anton Stoliarchuk on 06/12/2020 15:05:44

let i;
for (i = 0; i < 3; i++) {
const log = () => {
console.log(i);
}
setTimeout(log(i), 100);
}

[panzerdp]

Comment written by Arushi Vohra on 06/16/2020 11:25:13

I found these questions very helpful for my JavaScript interview prep. Precise and updated, there were more than one takeaways from this post. It is a good idea to be prepared for the tricky questions though. Here is a list of the important javascript interview topics list for anyone preparing for the Javascript interview.

[panzerdp]

Comment written by Neha Verma on 08/16/2020 16:56:45

Solution for Q5:
Using IIFE concept.
let i;
for (i = 0; i < 3; i++) {
((i) => {
const log = () => {
console.log(i);
}
setTimeout(log, 100);
})(i);

}

I hope it corroborates with the desired solution. Please share the feedback.

[panzerdp]

Comment written by Yury Yakimuk on 10/01/2020 09:38:47

undefined is in your callback, dude

[vitthalmahale]

let i; for (let i = 0; i < 3; i++) { const log = () => { console.log(i); } setTimeout(log, 100); } // output: 0 1 2

[panzerdp]

let i; for (let i = 0; i < 3; i++) { const log = () => { console.log(i); } setTimeout(log, 100); } // output: 0 1 2

Yes, that's the correct solution @vitthalmahale. Note that you can omit the first let i;.

[anuragarwalkar]

// Change the context using bind let i; for (i = 0; i < 3; i++) { const log = (val) => { console.log(val); }; setTimeout(log.bind(log, i), 100); }

[anuragarwalkar]

// fix the scoping issue by defining i in for loop for (let i = 0; i < 3; i++) { const log = () => { console.log(i); }; setTimeout(log, 100); }

[ManuelRCastroIglesias]

What don't you know how to answer? Is it the same... "" && NaN; What... Nan && "" ? Or... Is it the same... undefined || Nan; what.., Nan || undefained ?

[Sam-Radnus]

I encountered the Same scenario as you did in eagle eye test , and fortunately I didn't end up working for that company