An evergreen list of advanced JS questions + their explanations - JOYK Joy of Geek, Geek News, Link all geek

List of (Advanced) JavaScript Questions

I post daily multiple choice JavaScript questions on my Instagram , which I'll also post here!

From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! :muscle: :rocket:

The answers are in the collapsed sections below the questions, simply click on them to expand it. Good luck :heart:

1. What's the output?

function sayHi() {
  console.log(name);
  console.log(age);
  var name = "Lydia";
  let age = 21;
}

sayHi();

A: Lydia and undefined
B: Lydia and ReferenceError
C: ReferenceError and 21
D: undefined and ReferenceError

Answer

Answer: D

Within the function, we first declare the name variable with the var keyword. This means that the variable gets hoisted (memory space is set up during the creation phase) with the default value of undefined , until we actually get to the line where we define the variable. We haven't defined the variable yet on the line where we try to log the name variable, so it still holds the value of undefined .

Variables with the let keyword (and const ) are hoisted, but unlike var , don't get initialized . They are not accessible before the line we declare (initialize) them. This is called the "temporal dead zone". When we try to access the variables before they are declared, JavaScript throws a ReferenceError .

2. What's the output?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

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

A: 0 1 2 and 0 1 2
B: 0 1 2 and 3 3 3
C: 3 3 3 and 0 1 2

Answer

Answer: C

Because of the event queue in JavaScript, the setTimeout function is called after the loop has been executed. Since the variable i in the first loop was declared using the var keyword, this value was global. During the loop, we incremented the value of i by 1 each time, using the unary operator ++ . By the time the setTimeout function was invoked, i was equal to 3 in the first example.

In the second loop, the variable i was declared using the let keyword: variables declared with the let (and const ) keyword are block-scoped (a block is anything between { } ). During each iteration, i will have a new value, and each value is scoped inside the loop.

3. What's the output?

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2;
  },
  perimeter: () => 2 * Math.PI * this.radius
};

shape.diameter();
shape.perimeter();

A: 20 and 62.83185307179586
B: 20 and NaN
C: 20 and 63
D: NaN and 63

Answer

Answer: B

Note that the value of diameter is a regular function, whereas the value of perimeter is an arrow function.

With arrow functions, the this keyword refers to its current surrounding scope, unlike regular functions! This means that when we call perimeter , it doesn't refer to the shape object, but to its surrounding scope (window for example).

There is no value radius on that object, which returns undefined .

4. What's the output?

+true;
!"Lydia";

A: 1 and false
B: false and NaN
C: false and false

Answer

Answer: A

The unary plus tries to convert an operand to a number. true is 1 , and false is 0 .

The string 'Lydia' is a truthy value. What we're actually asking, is "is this truthy value falsy?". This returns false .

5. Which one is NOT valid?

const bird = {
  size: "small"
};

const mouse = {
  name: "Mickey",
  small: true
};

mouse.bird.size
mouse[bird.size]
mouse[bird["size"]]

Answer

Answer: A

In JavaScript, all object keys are strings (unless it's a Symbol). Even though we might not type them as strings, they are always converted into strings under the hood.

JavaScript interprets (or unboxes) statements. When we use bracket notation, it sees the first opening bracket [ and keeps going until it finds the closing bracket ] . Only then, it will evaluate the statement.

mouse[bird.size] : First it evaluates bird.size , which is "small" . mouse["small"] returns true

However, with dot notation, this doesn't happen. mouse does not have a key called bird , which means that mouse.bird is undefined . Then, we ask for the size using dot notation: mouse.bird.size . Since mouse.bird is undefined , we're actually asking undefined.size . This isn't valid, and will throw an error similar to Cannot read property "size" of undefined .

6. What's the output?

let c = { greeting: "Hey!" };
let d;

d = c;
c.greeting = "Hello";
console.log(d.greeting);

Hello
undefined
ReferenceError
TypeError

Answer

Answer: A

In JavaScript, all objects interact by reference when setting them equal to each other.

First, variable c holds a value to an object. Later, we assign d with the same reference that c has to the object.

When you change one object, you change all of them.

7. What's the output?

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

A: true false true
B: false false true
C: true false false
D: false true true

Answer

Answer: C

new Number() is a built-in function constructor. Although it looks like a number, it's not really a number: it has a bunch of extra features and is an object.

When we use the == operator, it only checks whether it has the same value . They do they both have the value of 3 , so it returns true .

However, when we use the === operator, both value and type should be the same. It's not: new Number() is not a number, it's an object . Both return false.

8. What's the output?

class Chameleon {
  static colorChange(newColor) {
    this.newColor = newColor;
  }

  constructor({ newColor = "green" } = {}) {
    this.newColor = newColor;
  }
}

const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");

orange
purple
green
TypeError

Answer

Answer: D

The colorChange function is static. Static methods are designed to live only on the constructor in which they are created, and cannot be passed down to any children. Since freddie is a child, the function is not passed down, and not available on the freddie instance: a TypeError is thrown.

9. What's the output?

let greeting;
greetign = {}; // Typo!
console.log(greetign);

{}
ReferenceError: greetign is not defined
undefined

Answer

Answer: A

It logs the object, because we just created an empty object on the global object! When we mistyped greeting as greetign , the JS interpreter actually saw this as global.greetign = {} (or window.greetign = {} in a browser).

In order to avoid this, we can use "use strict" . This makes sure that you have declared a variable before setting it equal to anything.

10. What happens when we do this?

function bark() {
  console.log("Woof!");
}

bark.animal = "dog";

SyntaxError
undefined
ReferenceError

Answer

Answer: A

This is possible in JavaScript, because functions are objects! (Everything besides primitive types are objects)

A function is a special type of object. The code you write yourself isn't the actual function. The function is an object with properties. This property is invocable.

11. What's the output?

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = () => this.firstName + this.lastName;

console.log(member.getFullName());

A: TypeError
B: SyntaxError
C: Lydia Hallie
D: undefined undefined

Answer

Answer: A

You can't add properties to a constructor like you can with regular objects. If you want to add a feature to all objects at once, you have to use the prototype instead. So in this case,

Person.prototype.getFullName = () => this.firstName + this.lastName

would have made lydia.getFullName() work. Why is this beneficial? Say that we added this method to the constructor itself. Maybe not every Person instance needed this method. This would waste a lot of memory space, since they would still have that property, which takes of memory space for each instance. Instead, if we only add it to the prototype, we just have it at one spot in memory, yet they all have access to it!

12. What's the output?

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");

console.log(lydia);
console.log(sarah);

A: Person {firstName: "Lydia", lastName: "Hallie"} and undefined
B: Person {firstName: "Lydia", lastName: "Hallie"} and Person {firstName: "Sarah", lastName: "Smith"}
C: Person {firstName: "Lydia", lastName: "Hallie"} and {}
D: Person {firstName: "Lydia", lastName: "Hallie"} and ReferenceError

Answer

Answer: A

For sarah , we didn't use the new keyword. When using new , it refers to the new empty object we create. However, if you don't add new it refers to the global object !

We said that this.firstName equals "Sarah" and this.lastName equals "Smith" . What we actually did, is defining global.firstName = 'Sarah' and global.lastName = 'Smith' . sarah itself is left undefined .

12. What are the three phases of event propagation?

A: Target > Capturing > Bubbling
B: Bubbling > Target > Capturing
C: Target > Bubbling > Capturing
D: Capturing > Target > Bubbling

Answer

Answer: D

During the capturing phase, the event goes through the ancestor elements down to the target element. It then reaches the target element, and bubbling begins.

13. All objects have prototypes.

A: true
B: false

Answer

Answer: B

All objects have prototypes, except for the base object . The base object has access to some methods and properties, such as .toString . This is the reason why you can use built-in JavaScript methods! All of such methods are available on the prototype. Although JavaScript can't find it directly on your object, it goes down the prototype chain and finds it there, which makes it accessible for you.

14. What's the output?

function sum(a, b) {
  return a + b;
}

sum(1, "2");

NaN
TypeError
"12"
3

Answer

Answer: C

JavaScript is a dynamically typed language : we don't specify what types certain variables are. Values can automatically be converted into another type without you knowing, which is called implicit type coercion . Coercion is converting from one type into another.

In this example, JavaScript converts the number 1 into a string, in order for the function to make sense and return a value. During the addition of a numeric type ( 1 ) and a string type ( '2' ), the number is treated as a string. We can concatenate strings like "Hello" + "World" , so what's happening here is "1" + "2" which returns "12" .

15. What's the output?

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

A: 1 1 2
B: 1 2 2
C: 0 2 2
D: 0 1 2

Answer

Answer: C

The postfix unary operator ++ :

The prefix unary operator ++ :

This returns 0 2 2 .

16. What's the output?

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}

const person = "Lydia";
const age = 21;

getPersonInfo`${person} is ${age} years old`;

A: Lydia 21 ["", "is", "years old"]
B: ["", "is", "years old"] Lydia 21
C: Lydia ["", "is", "years old"] 21

Answer

Answer: B

If you use tagged template literals, the value of the first argument is always an array of the string values. The remaining arguments get the values of the passed expressions!

17. What's the output?

function checkAge(data) {
  if (data === { age: 18 }) {
    console.log("You are an adult!");
  } else if (data == { age: 18 }) {
    console.log("You are still an adult.");
  } else {
    console.log(`Hmm.. You don't have an age I guess`);
  }
}

checkAge({ age: 18 });

You are an adult!
You are still an adult.
Hmm.. You don't have an age I guess

Answer

Answer: C

When testing equality, primitives are compared by their value , while objects are compared by their reference . JavaScript checks if the objects have a reference to the same location in memory.

The two objects that we are comparing don't have that: the object we passed as a parameter refers to a different location in memory than the object we used in order to check equality.

This is why both { age: 18 } === { age: 18 } and { age: 18 } == { age: 18 } return false .

18. What's the output?

function getAge(...args) {
  console.log(typeof args);
}

getAge(21);

"number"
"array"
"object"
"NaN"

Answer

Answer: C

The spread operator ( ...args .) returns an array with arguments. An array is an object, so typeof args returns "object"

20. What's the output?

function getAge() {
  "use strict";
  age = 21;
  console.log(age);
}

getAge();

21
undefined
ReferenceError
TypeError

Answer

Answer: C

With "use strict" , you can make sure that you don't accidentally declare global variables. We never declared the variable age , and since we use "use strict" , it will throw a reference error. If we didn't use "use strict" , it would have worked, since the property age would have gotten added to the global object.

21. What's the output?

const sum = eval("10*10+5");

105
"105"
TypeError
"10*10+5"

Answer

Answer: A

eval evaluates codes that's passed as a string. If it's an expression, like in this case, it evaluates the expression. The expression is 10 * 10 + 5 . This returns the number 105 .

22. How long is cool_secret accessible?

sessionStorage.setItem("cool_secret", 123);

A: Forever, the data doesn't get lost.
B: When the user closes the tab.
C: When the user closes the entire browser, not only the tab.
D: When the user shuts off their computer.

Answer

Answer: B

The data stored in sessionStorage is removed after closing the tab .

If you used localStorage , the data would've been there forever, unless for example localStorage.clear() is invoked.

23. What's the output?

var num = 8;
var num = 10;

console.log(num);

8
10
SyntaxError
ReferenceError

Answer

Answer: B

With the var keyword, you can declare multiple variables with the same name. The variable will then hold the latest value.

You cannot do this with let or const since they're block-scoped.

24. What's the output?

const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);

obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);

A: false true false true
B: false true true true
C: true true false true
D: true true true true

Answer

Answer: C

All object keys (excluding Symbols) are strings under the hood, even if you don't type it yourself as a string. This is why obj.hasOwnProperty('1') also returns true.

It doesn't work that way for a set. There is no '1' in our set: set.has('1') returns false . It has the numeric type 1 , set.has(1) returns true .

25. What's the output?

const obj = { a: "one", b: "two", a: "three" };
console.log(obj);

{ a: "one", b: "two" }
{ b: "two", a: "three" }
{ a: "three", b: "two" }
SyntaxError

Answer

Answer: C

If you have two keys with the same name, the key will be replaced. It will still be in its first position, but with the last specified value.

26. The JavaScript global execution context creates two things for you: the global object, and the "this" keyword.

A: true
B: false
C: it depends

Answer

Answer: A

The base execution context is the global execution context: it's what's accessible everywhere in your code.

27. What's the output?

for (let i = 1; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

A: 1 2
B: 1 2 3
C: 1 2 4
D: 1 3 4

Answer

Answer: C

The continue statement skips an iteration if a certain condition returns true .

28. What's the output?

String.prototype.giveLydiaPizza = () => {
  return "Just give Lydia pizza already!";
};

const name = "Lydia";

name.giveLydiaPizza();

"Just give Lydia pizza already!"
TypeError: not a function
SyntaxError
undefined

Answer

Answer: A

String is a built-in constructor, which we can add properties to. I just added a method to its prototype. Primitive strings are automatically converted into a string object, generated by the string prototype function. So, all strings (string objects) have access to that method!

29. What's the output?

const a = {};
const b = { key: "b" };
const c = { key: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

123
456
undefined
ReferenceError

Answer

Answer: B

Object keys are automatically converted into strings. We are trying to set an object as a key to object a , with the value of 123 .

However, when we stringify an object, it becomes "[Object object]" . So what we are saying here, is that a["Object object"] = 123 . Then, we can try to do the same again. c is another object that we are implicitly stringifying. So then, a["Object object"] = 456 .

Then, we log a[b] , which is actually a["Object object"] . We just set that to 456 , so it returns 456 .

30. What's the output?

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");

bar();
foo();
baz();

A: First Second Third
B: First Third Second
C: Second First Third
D: Second Third First

Answer

Answer: B

We have a setTimeout function and invoked it first. Yet, it was logged last.

This is because in browsers, we don't just have the runtime engine, we also have something called a WebAPI . The WebAPI gives us the setTimeout function to start with, and for example the DOM.

After the callback is pushed to the WebAPI, the setTimeout function itself (but not the callback!) is popped off the stack.

Now, foo gets invoked, and "First" is being logged.

foo is popped off the stack, and baz gets invoked. "Third" gets logged.

The WebAPI can't just add stuff to the stack whenever it's ready. Instead, it pushes the callback function to something called the queue .

This is where an event loop starts to work. An event loop looks at the stack and task queue. If the stack is empty, it takes the first thing on the queue and pushes it onto the stack.

bar gets invoked, "Second" gets logged, and it's popped off the stack.

31. What is the event.target when clicking the button?

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>

div
div
button

Answer

Answer: C

The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation

32. When you click the paragraph, what's the logged output?

<div onclick="console.log('div')">
  <p onclick="console.log('p')">
    Click here!
  </p>
</div>

A: p div
B: div p
C: p
D: div

Answer

Answer: A

If we click p , we see two logs: p and div . During event propagation, there are 3 phases: capturing, target, and bubbling. By default, event handlers are executed in the bubbling phase (unless you set useCapture to true ). It goes from the deepest nested element outwards.

33. What's the output?

const person = { name: "Lydia" };

function sayHi(age) {
  console.log(`${this.name} is ${age}`);
}

sayHi.call(person, 21);
sayHi.bind(person, 21);

A: undefined is 21 Lydia is 21
B: function function
C: Lydia is 21 Lydia is 21
D: Lydia is 21 function

Answer

Answer: D

With both, we can pass the object to which we want the this keyword to refer to. However, .call is also executed immediately !

.bind. returns a copy of the function, but with a bound context! It is not executed immediately.

34. What's the output?

function sayHi() {
  return (() => 0)();
}

typeof sayHi();

"object"
"number"
"function"
"undefined"

Answer

Answer: B

The sayHi function returns the returned value of the immediately invoked function (IIFE). This function returned 0 , which is type "number" .

FYI: there are only 7 built-in types: null , undefined , boolean , number , string , object , and symbol . "function" is not a type, since functions are objects, it's of type "object" .

35. Which of these values are falsy?

0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;

A: 0 , '' , undefined
B: 0 , new Number(0) , '' , new Boolean(false) , undefined
C: 0 , '' , new Boolean(false) , undefined
D: All of them are falsy

Answer

Answer: A

There are only six falsy values:

undefined
null
NaN
0
''
false

Function constructors, like new Number and new Boolean are truthy.

36. What's the output?

console.log(typeof typeof 1);

"number"
"string"
"object"
"undefined"

Answer

Answer: B

typeof 1 returns "number" . typeof "number" returns "string"

37. What's the output?

const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);

[1, 2, 3, 7 x null, 11]
[1, 2, 3, 11]
[1, 2, 3, 7 x empty, 11]
SyntaxError

Answer

Answer: C

When you set a value to an element in an array that exceeds the length of the array, JavaScript creates something called "empty slots". These actually have the value of undefined , but you will see something like:

[1, 2, 3, 7 x empty, 11]

depending on where you run it (it's different for every browser, node, etc.)

38. What's the output?

(() => {
  let x, y;
  try {
    throw new Error();
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x);
  }
  console.log(x);
  console.log(y);
})();

A: 1 undefined 2
B: undefined undefined undefined
C: 1 1 2
D: 1 undefined undefined

Answer

Answer: A

The catch block receives the argument x . This is not the same x as the variable when we pass arguments. This variable x is block-scoped.

Later, we set this block-scoped variable equal to 1 , and set the value of the variable y . Now, we log the block-scoped variable x , which is equal to 1 .

Outside of the catch block, x is still undefined , and y is 2 . When we want to console.log(x) outside of the catch block, it returns undefined , and y returns 2 .

39. Everything in JavaScript is either a...

A: primitive or object
B: function or object
C: trick question! only objects
D: number or object

Answer

Answer: A

JavaScript only has primitive types and objects.

Primitive types are boolean , null , undefined , bigint , number , string , and symbol .

40. What's the output?

[[0, 1], [2, 3]].reduce(
  (acc, cur) => {
    return acc.concat(cur);
  },
  [1, 2]
);

[0, 1, 2, 3, 1, 2]
[6, 1, 2]
[1, 2, 0, 1, 2, 3]
[1, 2, 6]

Answer

Answer: C

[1, 2] is our initial value. This is the value we start with, and the value of the very first acc . During the first round, acc is [1,2] , and cur is [0, 1] . We concatenate them, which results in [1, 2, 0, 1] .

Then, [1, 2, 0, 1] is acc and [2, 3] is cur . We concatenate them, and get [1, 2, 0, 1, 2, 3]

41. What's the output?

!!null;
!!"";
!!1;

A: false true false
B: false false true
C: false true true
D: true true false

Answer

Answer: B

null is falsy. !null returns true . !true returns false .

"" is falsy. !"" returns true . !true returns false .

1 is truthy. !1 returns false . !false returns true .

42. What does the `setInterval` method return?

setInterval(() => console.log("Hi"), 1000);

undefined

Answer

Answer: A

It returns a unique id. This id can be used to clear that interval with the clearInterval() function.

43. What does this return?

[..."Lydia"];

["L", "y", "d", "i", "a"]
["Lydia"]
[[], "Lydia"]
[["L", "y", "d", "i", "a"]]

Answer

Answer: A

A string is an iterable. The spread operator maps every character of an iterable to one element.