11 Tricky JavaScript Questions
By: Kesk - -
Tags: Javascript Tips, JavaScript, Software Development, Programming, Javascript Interview

11 Tricky JavaScript Questions

Photo of Pixabay in Pexels

In this article, you have 11 trick questions done in Javascript. The questions seem easy but think hard enough about the answer because it is straightforward to fail.

The importance of the scope of the variables

What’s the output?

Case 1

for (var i = 0; i < 5; i++) {

setTimeout(() => console.log(i), 1);

}

A: 0 1 2 3 4

B: 5 5 5 5 5

Case 2

for (let i = 0; i < 5; i++) {

setTimeout(() => console.log(i), 1);

}

A: 0 1 2 3 4

B: 5 5 5 5 5

C: 0 1 2 3 4

Solution

Case 1: B.

Case 2: C.

In case 1, the setTimeout callback function is called after the loop has been executed(A second is a long time for a computer). The ‘i’ variable is declared using the ‘var’ keyword, and therefore it is global. When we invoke the setTimeout function after approximately one second, the ‘i’ has the value of 5.

In case 2, the ‘i’ variable is declared using the ‘let’ keyword, and therefore it is block-scoped. During each iteration, the ‘i’ variable will have a new value.

Case 1

Case 1

The ‘new’ keyword

What’s the output?

function User(username, password) {

this.username= username;

this.password= password;

}

Case 1

const kesk = new User('kesk', '12345');

kesk;

A: {username :”kesk”, password:”12345"}

B: undefined

Case 2

const kesk2 = User('kesk', '12345');

kesk2;

A: {username :”kesk2”, password:”12345"}

B: undefined

Solution

Case 1: A.

Case 2: B.

Case 1

Case 2

If we use the ‘new’ keyword, this refers to the new empty object we create. However, if you don’t add the new keyword, this refers to the window global object.

3. JavaScript Coercion

What’s the output?

function sum(n1, n2) {

return n1+ n2;

} sum(10, '20');

Possible results:

A: NaN

B: TypeError

C: “1020”

D: 20

Solution:

C.

JavaScript is a dynamically typed language, so values are automatically be converted into another if necessary. This is called coercion.

In this case, JavaScript converts the number 10 into a string to make sense and return a value. During the addition of a numeric type (10) and a string type (‘20’), the number is treated as a string similar to do “Hello” + “world!” (“Hello world!”), so the result is “1020”.

Solution.

4. Template literals

What’s the output?

function getCar(brand, model) {

console.log(brand);

console.log(model);

} const brand = 'Ford';

const model = 'shelby'; getCar`The brand of your car is ${brand} and the model is{model}`;

Solution

When we use tagged template literals, the first argument's value is an array of string values, and the remaining arguments get the values of the passed expressions.

Solution.

5. Rest parameter

What’s the output?

function getCar(...args) {

console.log(typeof args);

} getCar('Ford', 'Shelby');

Possible results:

A: “array”

B: “number”

C: “NaN”

D: “object”

Solution:

D.

The rest parameter (…args) “collects” all remaining arguments into an array. And, what’s the type of an array? It is an object, so typeof args returns “object.”

Solution.

6. Multiple ‘var’ variables

What’s the output?

var v1 = 10;

var v1 = 20; console.log(v1);

Possible results:

A: 10

B: 20

C: Syntax error

Solution:

B.

We can declare multiple variables with the same name with the ‘var’ keyword. The variable, In this case, will hold the latest value.

Solution.

7. Continue Statement

What’s the output?

for(let i =1; i< 10; i++){

if(i === 5) continue;

console.log(i);

}

Possible results:

A: 1 2 3 4 5 6 7 8 9 10

B: 1 2 3 4 6 7 8 9 10

C: 1 2 3 4

Solution:

B.

The “continue” statement skips an iteration if a particular condition returns true, in this case, if the value of ‘i’ is 5.

8. Array assignment

What’s the output?

const anArray = [1, 2, 3, 4, 5];

anArray[10] = 100;

console.log(anArray);

Possible results:

A:[1, 2, 3, 4, 5, 100]

B:[1, 2, 3, 4, 5, empty x 5,100]

D: SyntaxError

Solution:

If you set a value to an index in an array that exceeds the array's length, JavaScript creates “empty slots” that have undefined values in them.

Solution

9. Falsy && truthy values

What’s the output?

console.log(!!null);

console.log(!!1);

console.log(!!0);

console.log(!!'');

console.log(!!true);

console.log(!!false);

Possible results:

A: false, true, false, false, true, false

B: false, true, false, false, false, true

Solution:

A.

In JavaScript, the “!!” operator converts a value into its corresponding boolean value.

null is falsy, !null return true and !true returns false.

!1 is false, !false is true.

!0 is true, !true is false.

“” is falsy, !”” returns true, !true returns false.

!true is false, !false is true.

!false is true, !true is false.

Solution

10. The Map function

What’s the output?

[1, 2, 3, 4, 5].map( n => {

if (n < 10) return;

return n * 2;

});

Possible results:

A: [null, null, null, null, null]

B: [undefined, undefined, undefined, undefined, undefined]

C: []

Solution:

B.

In this example, if n < 10, we don’t return a value, and when we don’t return a value in a function, we return “undefined.” In this case, for each element in the array, the map function returns “undefined,” and the resulting collection is an array full of “undefined.”

Solution.

11. Export && import

What’s the output?

utilsFile.js

let counter = 1;

export default counter;

main.js

import myCounter from './utilsFile'; myCounter += 1; console.log(myCounter);

Possible results:

A:2

B:1

C: NaN

D: Error

Solution:

D.

The imports of an ES6 module are read-only. Only the module that exports them can change their value.

Fix:

utilsFile.js

let counter = 1; export function incrementCounter() {

counter++;

}

main.js

import incrementCounter './utilsFile'; console.log(counter); // 1

incrementCounter();

console.log(counter); // 2

Thanks for reading me!