In this post, we can provide 50 multiple-choice JavaScript questions and answers, with the help of this you can prepare your javascript interview easily.
If you like this post so we can provide the next 50 + 50 questions and answers in the next part.
150 JavaScript Questions Part 2
51. What's the output?
function getInfo(member, year) {
member.name = 'Lydia';
year = '1998';
}
const person = { name: 'Sarah' };
const birthYear = '1997';
getInfo(person, birthYear);
console.log(person, birthYear);
- A:
{ name: "Lydia" }, "1997"
- B:
{ name: "Sarah" }, "1998"
- C:
{ name: "Lydia" }, "1998"
- D:
{ name: "Sarah" }, "1997"
Answer
#### Answer: A
Arguments are passed by value, unless their value is an object, then they're passed by reference. birthYear
is passed by value, since it's a string, not an object. When we pass arguments by value, a copy of that value is created (see question 46).
The variable birthYear
has a reference to the value "1997"
. The argument year
also has a reference to the value "1997"
, but it's not the same value as birthYear
has a reference to. When we update the value of year
by setting year
equal to "1998"
, we are only updating the value of year
. birthYear
is still equal to "1997"
.
The value of person
is an object. The argument member
has a (copied) reference to the same object. When we modify a property of the object member
has a reference to, the value of person
will also be modified, since they both have a reference to the same object. person
's name
property is now equal to the value "Lydia"
52. What's the output?
function greeting() {
throw 'Hello world!';
}
function sayHi() {
try {
const data = greeting();
console.log('It worked!', data);
} catch (e) {
console.log('Oh no an error:', e);
}
}
sayHi();
- A:
It worked! Hello world!
- B:
Oh no an error: undefined
- C:
SyntaxError: can only throw Error objects
- D:
Oh no an error: Hello world!
Answer
#### Answer: D
With the throw
statement, we can create custom errors. With this statement, you can throw exceptions. An exception can be a string, a number, a boolean or an object. In this case, our exception is the string 'Hello world!'
.
With the catch
statement, we can specify what to do if an exception is thrown in the try
block. An exception is thrown: the string 'Hello world!'
. e
is now equal to that string, which we log. This results in 'Oh an error: Hello world!'
.
53. What's the output?
function Car() {
this.make = 'Lamborghini';
return { make: 'Maserati' };
}
const myCar = new Car();
console.log(myCar.make);
- A:
"Lamborghini"
- B:
"Maserati"
- C:
ReferenceError
- D:
TypeError
Answer
#### Answer: B
When you return a property, the value of the property is equal to the returned value, not the value set in the constructor function. We return the string "Maserati"
, so myCar.make
is equal to "Maserati"
.
54. What's the output?
(() => {
let x = (y = 10);
})();
console.log(typeof x);
console.log(typeof y);
- A:
"undefined", "number"
- B:
"number", "number"
- C:
"object", "number"
- D:
"number", "undefined"
Answer
#### Answer: A
let x = (y = 10);
is actually shorthand for:
javascript
y = 10;
let x = y;
When we set y
equal to 10
, we actually add a property y
to the global object (window
in browser, global
in Node). In a browser, window.y
is now equal to 10
.
Then, we declare a variable x
with the value of y
, which is 10
. Variables declared with the let
keyword are block scoped, they are only defined within the block they're declared in; the immediately invoked function expression (IIFE) in this case. When we use the typeof
operator, the operand x
is not defined: we are trying to access x
outside of the block it's declared in. This means that x
is not defined. Values who haven't been assigned a value or declared are of type "undefined"
. console.log(typeof x)
returns "undefined"
.
However, we created a global variable y
when setting y
equal to 10
. This value is accessible anywhere in our code. y
is defined, and holds a value of type "number"
. console.log(typeof y)
returns "number"
.
55. What's the output?
class Dog {
constructor(name) {
this.name = name;
}
}
Dog.prototype.bark = function() {
console.log(`Woof I am ${this.name}`);
};
const pet = new Dog('Mara');
pet.bark();
delete Dog.prototype.bark;
pet.bark();
- A:
"Woof I am Mara"
,TypeError
- B:
"Woof I am Mara"
,"Woof I am Mara"
- C:
"Woof I am Mara"
,undefined
- D:
TypeError
,TypeError
Answer
#### Answer: A
We can delete properties from objects using the delete
keyword, also on the prototype. By deleting a property on the prototype, it is not available anymore in the prototype chain. In this case, the bark
function is not available anymore on the prototype after delete Dog.prototype.bark
, yet we still try to access it.
When we try to invoke something that is not a function, a TypeError
is thrown. In this case TypeError: pet.bark is not a function
, since pet.bark
is undefined
.
56. What's the output?
const set = new Set([1, 1, 2, 3, 4]);
console.log(set);
- A:
[1, 1, 2, 3, 4]
- B:
[1, 2, 3, 4]
- C:
{1, 1, 2, 3, 4}
- D:
{1, 2, 3, 4}
Answer
#### Answer: D
The Set
object is a collection of unique values: a value can only occur once in a set.
We passed the iterable [1, 1, 2, 3, 4]
with a duplicate value 1
. Since we cannot have two of the same values in a set, one of them is removed. This results in {1, 2, 3, 4}
.
57. What's the output?
// counter.js
let counter = 10;
export default counter;
// index.js
import myCounter from './counter';
myCounter += 1;
console.log(myCounter);
- A:
10
- B:
11
- C:
Error
- D:
NaN
Answer
#### Answer: C
An imported module is read-only: you cannot modify the imported module. Only the module that exports them can change its value.
When we try to increment the value of myCounter
, it throws an error: myCounter
is read-only and cannot be modified.
58. What's the output?
const name = 'Lydia';
age = 21;
console.log(delete name);
console.log(delete age);
- A:
false
,true
- B:
"Lydia"
,21
- C:
true
,true
- D:
undefined
,undefined
Answer
#### Answer: A
The delete
operator returns a boolean value: true
on a successful deletion, else it'll return false
. However, variables declared with the var
, const
or let
keyword cannot be deleted using the delete
operator.
The name
variable was declared with a const
keyword, so its deletion is not successful: false
is returned. When we set age
equal to 21
, we actually added a property called age
to the global object. You can successfully delete properties from objects this way, also the global object, so delete age
returns true
.
59. What's the output?
const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
console.log(y);
- A:
[[1, 2, 3, 4, 5]]
- B:
[1, 2, 3, 4, 5]
- C:
1
- D:
[1]
Answer
#### Answer: C
We can unpack values from arrays or properties from objects through destructuring. For example:
javascript
[a, b] = [1, 2];
The value of a
is now 1
, and the value of b
is now 2
. What we actually did in the question, is:
javascript
[y] = [1, 2, 3, 4, 5];
This means that the value of y
is equal to the first value in the array, which is the number 1
. When we log y
, 1
is returned.
60. What's the output?
const user = { name: 'Lydia', age: 21 };
const admin = { admin: true, ...user };
console.log(admin);
- A:
{ admin: true, user: { name: "Lydia", age: 21 } }
- B:
{ admin: true, name: "Lydia", age: 21 }
- C:
{ admin: true, user: ["Lydia", 21] }
- D:
{ admin: true }
Answer
#### Answer: B
It's possible to combine objects using the spread operator ...
. It lets you create copies of the key/value pairs of one object, and add them to another object. In this case, we create copies of the user
object, and add them to the admin
object. The admin
object now contains the copied key/value pairs, which results in { admin: true, name: "Lydia", age: 21 }
.
61. What's the output?
const person = { name: 'Lydia' };
Object.defineProperty(person, 'age', { value: 21 });
console.log(person);
console.log(Object.keys(person));
- A:
{ name: "Lydia", age: 21 }
,["name", "age"]
- B:
{ name: "Lydia", age: 21 }
,["name"]
- C:
{ name: "Lydia"}
,["name", "age"]
- D:
{ name: "Lydia"}
,["age"]
Answer
#### Answer: B
With the defineProperty
method, we can add new properties to an object, or modify existing ones. When we add a property to an object using the defineProperty
method, they are by default not enumerable. The Object.keys
method returns all enumerable property names from an object, in this case only "name"
.
Properties added using the defineProperty
method are immutable by default. You can override this behavior using the writable
, configurable
and enumerable
properties. This way, the defineProperty
method gives you a lot more control over the properties you're adding to an object.
62. What's the output?
const settings = {
username: 'lydiahallie',
level: 19,
health: 90,
};
const data = JSON.stringify(settings, ['level', 'health']);
console.log(data);
- A:
"{"level":19, "health":90}"
- B:
"{"username": "lydiahallie"}"
- C:
"["level", "health"]"
- D:
"{"username": "lydiahallie", "level":19, "health":90}"
Answer
#### Answer: A
The second argument of JSON.stringify
is the replacer. The replacer can either be a function or an array, and lets you control what and how the values should be stringified.
If the replacer is an array, only the property names included in the array will be added to the JSON string. In this case, only the properties with the names "level"
and "health"
are included, "username"
is excluded. data
is now equal to "{"level":19, "health":90}"
.
If the replacer is a function, this function gets called on every property in the object you're stringifying. The value returned from this function will be the value of the property when it's added to the JSON string. If the value is undefined
, this property is excluded from the JSON string.
63. What's the output?
let num = 10;
const increaseNumber = () => num++;
const increasePassedNumber = number => number++;
const num1 = increaseNumber();
const num2 = increasePassedNumber(num1);
console.log(num1);
console.log(num2);
- A:
10
,10
- B:
10
,11
- C:
11
,11
- D:
11
,12
Answer
#### Answer: A
The unary operator ++
first returns the value of the operand, then increments the value of the operand. The value of num1
is 10
, since the increaseNumber
function first returns the value of num
, which is 10
, and only increments the value of num
afterwards.
num2
is 10
, since we passed num1
to the increasePassedNumber
. number
is equal to 10
(the value of num1
. Again, the unary operator ++
first returns the value of the operand, then increments the value of the operand. The value of number
is 10
, so num2
is equal to 10
.
64. What's the output?
const value = { number: 10 };
const multiply = (x = { ...value }) => {
console.log((x.number *= 2));
};
multiply();
multiply();
multiply(value);
multiply(value);
- A:
20
,40
,80
,160
- B:
20
,40
,20
,40
- C:
20
,20
,20
,40
- D:
NaN
,NaN
,20
,40
Answer
#### Answer: C
In ES6, we can initialize parameters with a default value. The value of the parameter will be the default value, if no other value has been passed to the function, or if the value of the parameter is "undefined"
. In this case, we spread the properties of the value
object into a new object, so x
has the default value of { number: 10 }
.
The default argument is evaluated at call time! Every time we call the function, a new object is created. We invoke the multiply
function the first two times without passing a value: x
has the default value of { number: 10 }
. We then log the multiplied value of that number, which is 20
.
The third time we invoke multiply, we do pass an argument: the object called value
. The *=
operator is actually shorthand for x.number = x.number * 2
: we modify the value of x.number
, and log the multiplied value 20
.
The fourth time, we pass the value
object again. x.number
was previously modified to 20
, so x.number *= 2
logs 40
.
65. What's the output?
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));
- A:
1
2
and3
3
and6
4
- B:
1
2
and2
3
and3
4
- C:
1
undefined
and2
undefined
and3
undefined
and4
undefined
- D:
1
2
andundefined
3
andundefined
4
Answer
#### Answer: D
The first argument that the reduce
method receives is the accumulator, x
in this case. The second argument is the current value, y
. With the reduce method, we execute a callback function on every element in the array, which could ultimately result in one single value.
In this example, we are not returning any values, we are simply logging the values of the accumulator and the current value.
The value of the accumulator is equal to the previously returned value of the callback function. If you don't pass the optional initialValue
argument to the reduce
method, the accumulator is equal to the first element on the first call.
On the first call, the accumulator (x
) is 1
, and the current value (y
) is 2
. We don't return from the callback function, we log the accumulator and current value: 1
and 2
get logged.
If you don't return a value from a function, it returns undefined
. On the next call, the accumulator is undefined
, and the current value is 3
. undefined
and 3
get logged.
On the fourth call, we again don't return from the callback function. The accumulator is again undefined
, and the current value is 4
. undefined
and 4
get logged.
66. With which constructor can we successfully extend the Dog
class?
class Dog {
constructor(name) {
this.name = name;
}
};
class Labrador extends Dog {
// 1
constructor(name, size) {
this.size = size;
}
// 2
constructor(name, size) {
super(name);
this.size = size;
}
// 3
constructor(size) {
super(name);
this.size = size;
}
// 4
constructor(name, size) {
this.name = name;
this.size = size;
}
};
- A: 1
- B: 2
- C: 3
- D: 4
Answer
#### Answer: B
In a derived class, you cannot access the this
keyword before calling super
. If you try to do that, it will throw a ReferenceError: 1 and 4 would throw a reference error.
With the super
keyword, we call that parent class's constructor with the given arguments. The parent's constructor receives the name
argument, so we need to pass name
to super
.
The Labrador
class receives two arguments, name
since it extends Dog
, and size
as an extra property on the Labrador
class. They both need to be passed to the constructor function on Labrador
, which is done correctly using constructor 2.
67. What's the output?
// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));
// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;
- A:
running index.js
,running sum.js
,3
- B:
running sum.js
,running index.js
,3
- C:
running sum.js
,3
,running index.js
- D:
running index.js
,undefined
,running sum.js
Answer
#### Answer: B
With the import
keyword, all imported modules are pre-parsed. This means that the imported modules get run first, the code in the file which imports the module gets executed after.
This is a difference between require()
in CommonJS and import
! With require()
, you can load dependencies on demand while the code is being run. If we would have used require
instead of import
, running index.js
, running sum.js
, 3
would have been logged to the console.
68. What's the output?
console.log(Number(2) === Number(2));
console.log(Boolean(false) === Boolean(false));
console.log(Symbol('foo') === Symbol('foo'));
- A:
true
,true
,false
- B:
false
,true
,false
- C:
true
,false
,true
- D:
true
,true
,true
Answer
#### Answer: A
Every Symbol is entirely unique. The purpose of the argument passed to the Symbol is to give the Symbol a description. The value of the Symbol is not dependent on the passed argument. As we test equality, we are creating two entirely new symbols: the first Symbol('foo')
, and the second Symbol('foo')
. These two values are unique and not equal to each other, Symbol('foo') === Symbol('foo')
returns false
.
69. What's the output?
const name = 'Lydia Hallie';
console.log(name.padStart(13));
console.log(name.padStart(2));
- A:
"Lydia Hallie"
,"Lydia Hallie"
- B:
" Lydia Hallie"
," Lydia Hallie"
("[13x whitespace]Lydia Hallie"
,"[2x whitespace]Lydia Hallie"
) - C:
" Lydia Hallie"
,"Lydia Hallie"
("[1x whitespace]Lydia Hallie"
,"Lydia Hallie"
) - D:
"Lydia Hallie"
,"Lyd"
,
Answer
#### Answer: C
With the padStart
method, we can add padding to the beginning of a string. The value passed to this method is the total length of the string together with the padding. The string "Lydia Hallie"
has a length of 12
. name.padStart(13)
inserts 1 space at the start of the string, because 12 + 1 is 13.
If the argument passed to the padStart
method is smaller than the length of the array, no padding will be added.
70. What's the output?
console.log('🥑' + '💻');
- A:
"🥑💻"
- B:
257548
- C: A string containing their code points
- D: Error
Answer
#### Answer: A
With the +
operator, you can concatenate strings. In this case, we are concatenating the string "🥑"
with the string "💻"
, resulting in "🥑💻"
.
71. How can we log the values that are commented out after the console.log statement?
function* startGame() {
const answer = yield 'Do you love JavaScript?';
if (answer !== 'Yes') {
return "Oh wow... Guess we're gone here";
}
return 'JavaScript loves you back ❤️';
}
const game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ❤️
- A:
game.next("Yes").value
andgame.next().value
- B:
game.next.value("Yes")
andgame.next.value()
- C:
game.next().value
andgame.next("Yes").value
- D:
game.next.value()
andgame.next.value("Yes")
Answer
#### Answer: C
A generator function "pauses" its execution when it sees the yield
keyword. First, we have to let the function yield the string "Do you love JavaScript?", which can be done by calling game.next().value
.
Every line is executed, until it finds the first yield
keyword. There is a yield
keyword on the first line within the function: the execution stops with the first yield! This means that the variable answer
is not defined yet!
When we call game.next("Yes").value
, the previous yield
is replaced with the value of the parameters passed to the next()
function, "Yes"
in this case. The value of the variable answer
is now equal to "Yes"
. The condition of the if-statement returns false
, and JavaScript loves you back ❤️
gets logged.
72. What's the output?
console.log(String.raw`Hello\nworld`);
- A:
Hello world!
- B:
Hello
world
- C:
Hello\nworld
- D:
Hello\n
world
Answer
#### Answer: C
String.raw
returns a string where the escapes (\n
, \v
, \t
etc.) are ignored! Backslashes can be an issue since you could end up with something like:
const path = `C:\Documents\Projects\table.html`
Which would result in:
"C:DocumentsProjects able.html"
With String.raw
, it would simply ignore the escape and print:
C:\Documents\Projects\table.html
In this case, the string is Hello\nworld
, which gets logged.
73. What's the output?
async function getData() {
return await Promise.resolve('I made it!');
}
const data = getData();
console.log(data);
- A:
"I made it!"
- B:
Promise {<resolved>: "I made it!"}
- C:
Promise {<pending>}
- D:
undefined
Answer
#### Answer: C
An async function always returns a promise. The await
still has to wait for the promise to resolve: a pending promise gets returned when we call getData()
in order to set data
equal to it.
If we wanted to get access to the resolved value "I made it"
, we could have used the .then()
method on data
:
data.then(res => console.log(res))
This would've logged "I made it!"
74. What's the output?
function addToList(item, list) {
return list.push(item);
}
const result = addToList('apple', ['banana']);
console.log(result);
- A:
['apple', 'banana']
- B:
2
- C:
true
- D:
undefined
Answer
#### Answer: B
The .push()
method returns the length of the new array! Previously, the array contained one element (the string "banana"
) and had a length of 1
. After adding the string "apple"
to the array, the array contains two elements, and has a length of 2
. This gets returned from the addToList
function.
The push
method modifies the original array. If you wanted to return the array from the function rather than the length of the array, you should have returned list
after pushing item
to it.
75. What's the output?
const box = { x: 10, y: 20 };
Object.freeze(box);
const shape = box;
shape.x = 100;
console.log(shape);
- A:
{ x: 100, y: 20 }
- B:
{ x: 10, y: 20 }
- C:
{ x: 100 }
- D:
ReferenceError
Answer
#### Answer: B
Object.freeze
makes it impossible to add, remove, or modify properties of an object (unless the property's value is another object).
When we create the variable shape
and set it equal to the frozen object box
, shape
also refers to a frozen object. You can check whether an object is frozen by using Object.isFrozen
. In this case, Object.isFrozen(shape)
returns true, since the variable shape
has a reference to a frozen object.
Since shape
is frozen, and since the value of x
is not an object, we cannot modify the property x
. x
is still equal to 10
, and { x: 10, y: 20 }
gets logged.
76. What's the output?
const { name: myName } = { name: 'Lydia' };
console.log(name);
- A:
"Lydia"
- B:
"myName"
- C:
undefined
- D:
ReferenceError
Answer
#### Answer: D
When we unpack the property name
from the object on the right-hand side, we assign its value "Lydia"
to a variable with the name myName
.
With { name: myName }
, we tell JavaScript that we want to create a new variable called myName
with the value of the name
property on the right-hand side.
Since we try to log name
, a variable that is not defined, a ReferenceError gets thrown.
77. Is this a pure function?
function sum(a, b) {
return a + b;
}
- A: Yes
- B: No
Answer
#### Answer: A
A pure function is a function that always returns the same result, if the same arguments are passed.
The sum
function always returns the same result. If we pass 1
and 2
, it will always return 3
without side effects. If we pass 5
and 10
, it will always return 15
, and so on. This is the definition of a pure function.
78. What is the output?
const add = () => {
const cache = {};
return num => {
if (num in cache) {
return `From cache! ${cache[num]}`;
} else {
const result = num + 10;
cache[num] = result;
return `Calculated! ${result}`;
}
};
};
const addFunction = add();
console.log(addFunction(10));
console.log(addFunction(10));
console.log(addFunction(5 * 2));
- A:
Calculated! 20
Calculated! 20
Calculated! 20
- B:
Calculated! 20
From cache! 20
Calculated! 20
- C:
Calculated! 20
From cache! 20
From cache! 20
- D:
Calculated! 20
From cache! 20
Error
Answer
#### Answer: C
The add
function is a memoized function. With memoization, we can cache the results of a function in order to speed up its execution. In this case, we create a cache
object that stores the previously returned values.
If we call the addFunction
function again with the same argument, it first checks whether it has already gotten that value in its cache. If that's the case, the caches value will be returned, which saves on execution time. Else, if it's not cached, it will calculate the value and store it afterwards.
We call the addFunction
function three times with the same value: on the first invocation, the value of the function when num
is equal to 10
isn't cached yet. The condition of the if-statement num in cache
returns false
, and the else block gets executed: Calculated! 20
gets logged, and the value of the result gets added to the cache object. cache
now looks like { 10: 20 }
.
The second time, the cache
object contains the value that gets returned for 10
. The condition of the if-statement num in cache
returns true
, and 'From cache! 20'
gets logged.
The third time, we pass 5 * 2
to the function which gets evaluated to 10
. The cache
object contains the value that gets returned for 10
. The condition of the if-statement num in cache
returns true
, and 'From cache! 20'
gets logged.
79. What is the output?
const myLifeSummedUp = ['☕', '💻', '🍷', '🍫'];
for (let item in myLifeSummedUp) {
console.log(item);
}
for (let item of myLifeSummedUp) {
console.log(item);
}
- A:
0
1
2
3
and"☕"
"💻"
"🍷"
"🍫"
- B:
"☕"
"💻"
"🍷"
"🍫"
and"☕"
"💻"
"🍷"
"🍫"
- C:
"☕"
"💻"
"🍷"
"🍫"
and0
1
2
3
- D:
0
1
2
3
and{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}
Answer
#### Answer: A
With a for-in loop, we can iterate over enumerable properties. In an array, the enumerable properties are the "keys" of array elements, which are actually their indexes. You could see an array as:
{0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}
Where the keys are the enumerable properties. 0
1
2
3
get logged.
With a for-of loop, we can iterate over iterables. An array is an iterable. When we iterate over the array, the variable "item" is equal to the element it's currently iterating over, "☕"
"💻"
"🍷"
"🍫"
get logged.
80. What is the output?
const list = [1 + 2, 1 * 2, 1 / 2];
console.log(list);
- A:
["1 + 2", "1 * 2", "1 / 2"]
- B:
["12", 2, 0.5]
- C:
[3, 2, 0.5]
- D:
[1, 1, 1]
Answer
#### Answer: C
Array elements can hold any value. Numbers, strings, objects, other arrays, null, boolean values, undefined, and other expressions such as dates, functions, and calculations.
The element will be equal to the returned value. 1 + 2
returns 3
, 1 * 2
returns 2
, and 1 / 2
returns 0.5
.
81. What is the output?
function sayHi(name) {
return `Hi there, ${name}`;
}
console.log(sayHi());
- A:
Hi there,
- B:
Hi there, undefined
- C:
Hi there, null
- D:
ReferenceError
Answer
#### Answer: B
By default, arguments have the value of undefined
, unless a value has been passed to the function. In this case, we didn't pass a value for the name
argument. name
is equal to undefined
which gets logged.
In ES6, we can overwrite this default undefined
value with default parameters. For example:
function sayHi(name = "Lydia") { ... }
In this case, if we didn't pass a value or if we passed undefined
, name
would always be equal to the string Lydia
82. What is the output?
var status = '😎';
setTimeout(() => {
const status = '😍';
const data = {
status: '🥑',
getStatus() {
return this.status;
},
};
console.log(data.getStatus());
console.log(data.getStatus.call(this));
}, 0);
- A:
"🥑"
and"😍"
- B:
"🥑"
and"😎"
- C:
"😍"
and"😎"
- D:
"😎"
and"😎"
Answer
#### Answer: B
The value of the this
keyword is dependent on where you use it. In a method, like the getStatus
method, the this
keyword refers to the object that the method belongs to. The method belongs to the data
object, so this
refers to the data
object. When we log this.status
, the status
property on the data
object gets logged, which is "🥑"
.
With the call
method, we can change the object to which the this
keyword refers. In functions, the this
keyword refers to the the object that the function belongs to. We declared the setTimeout
function on the global object, so within the setTimeout
function, the this
keyword refers to the global object. On the global object, there is a variable called status with the value of "😎"
. When logging this.status
, "😎"
gets logged.
83. What is the output?
const person = {
name: 'Lydia',
age: 21,
};
let city = person.city;
city = 'Amsterdam';
console.log(person);
- A:
{ name: "Lydia", age: 21 }
- B:
{ name: "Lydia", age: 21, city: "Amsterdam" }
- C:
{ name: "Lydia", age: 21, city: undefined }
- D:
"Amsterdam"
Answer
#### Answer: A
We set the variable city
equal to the value of the property called city
on the person
object. There is no property on this object called city
, so the variable city
has the value of undefined
.
Note that we are not referencing the person
object itself! We simply set the variable city
equal to the current value of the city
property on the person
object.
Then, we set city
equal to the string "Amsterdam"
. This doesn't change the person object: there is no reference to that object.
When logging the person
object, the unmodified object gets returned.
84. What is the output?
function checkAge(age) {
if (age < 18) {
const message = "Sorry, you're too young.";
} else {
const message = "Yay! You're old enough!";
}
return message;
}
console.log(checkAge(21));
- A:
"Sorry, you're too young."
- B:
"Yay! You're old enough!"
- C:
ReferenceError
- D:
undefined
Answer
#### Answer: C
Variables with the const
and let
keyword are block-scoped. A block is anything between curly brackets ({ }
). In this case, the curly brackets of the if/else statements. You cannot reference a variable outside of the block it's declared in, a ReferenceError gets thrown.
85. What kind of information would get logged?
fetch('https://www.website.com/api/user/1')
.then(res => res.json())
.then(res => console.log(res));
- A: The result of the
fetch
method. - B: The result of the second invocation of the
fetch
method. - C: The result of the callback in the previous
.then()
. - D: It would always be undefined.
Answer
#### Answer: C
The value of res
in the second .then
is equal to the returned value of the previous .then
. You can keep chaining .then
s like this, where the value is passed to the next handler.
86. Which option is a way to set hasName
equal to true
, provided you cannot pass true
as an argument?
function getName(name) {
const hasName = //
}
- A:
!!name
- B:
name
- C:
new Boolean(name)
- D:
name.length
Answer
#### Answer: A
With !!name
, we determine whether the value of name
is truthy or falsy. If name is truthy, which we want to test for, !name
returns false
. !false
(which is what !!name
practically is) returns true
.
By setting hasName
equal to name
, you set hasName
equal to whatever value you passed to the getName
function, not the boolean value true
.
new Boolean(true)
returns an object wrapper, not the boolean value itself.
name.length
returns the length of the passed argument, not whether it's true
.
87. What's the output?
console.log('I want pizza'[0]);
- A:
"""
- B:
"I"
- C:
SyntaxError
- D:
undefined
Answer
#### Answer: B
In order to get an character on a specific index in a string, you can use bracket notation. The first character in the string has index 0, and so on. In this case we want to get the element which index is 0, the character "I'
, which gets logged.
Note that this method is not supported in IE7 and below. In that case, use .charAt()
88. What's the output?
function sum(num1, num2 = num1) {
console.log(num1 + num2);
}
sum(10);
- A:
NaN
- B:
20
- C:
ReferenceError
- D:
undefined
Answer
#### Answer: B
You can set a default parameter's value equal to another parameter of the function, as long as they've been defined before the default parameter. We pass the value 10
to the sum
function. If the sum
function only receives 1 argument, it means that the value for num2
is not passed, and the value of num1
is equal to the passed value 10
in this case. The default value of num2
is the value of num1
, which is 10
. num1 + num2
returns 20
.
If you're trying to set a default parameter's value equal to a parameter which is defined after (to the right), the parameter's value hasn't been initialized yet, which will throw an error.
89. What's the output?
// module.js
export default () => 'Hello world';
export const name = 'Lydia';
// index.js
import * as data from './module';
console.log(data);
- A:
{ default: function default(), name: "Lydia" }
- B:
{ default: function default() }
- C:
{ default: "Hello world", name: "Lydia" }
- D: Global object of
module.js
Answer
#### Answer: A
With the import * as name
syntax, we import all exports from the module.js
file into the index.js
file as a new object called data
is created. In the module.js
file, there are two exports: the default export, and a named export. The default export is a function which returns the string "Hello World"
, and the named export is a variable called name
which has the value of the string "Lydia"
.
The data
object has a default
property for the default export, other properties have the names of the named exports and their corresponding values.
90. What's the output?
class Person {
constructor(name) {
this.name = name;
}
}
const member = new Person('John');
console.log(typeof member);
- A:
"class"
- B:
"function"
- C:
"object"
- D:
"string"
Answer
#### Answer: C
Classes are syntactical sugar for function constructors. The equivalent of the Person
class as a function constructor would be:
javascript
function Person() {
this.name = name;
}
Calling a function constructor with new
results in the creation of an instance of Person
, typeof
keyword returns "object"
for an instance. typeof member
returns "object"
.
91. What's the output?
let newList = [1, 2, 3].push(4);
console.log(newList.push(5));
- A:
[1, 2, 3, 4, 5]
- B:
[1, 2, 3, 5]
- C:
[1, 2, 3, 4]
- D:
Error
Answer
#### Answer: D
The .push
method returns the new length of the array, not the array itself! By setting newList
equal to [1, 2, 3].push(4)
, we set newList
equal to the new length of the array: 4
.
Then, we try to use the .push
method on newList
. Since newList
is the numerical value 4
, we cannot use the .push
method: a TypeError is thrown.
92. What's the output?
function giveLydiaPizza() {
return 'Here is pizza!';
}
const giveLydiaChocolate = () =>
"Here's chocolate... now go hit the gym already.";
console.log(giveLydiaPizza.prototype);
console.log(giveLydiaChocolate.prototype);
- A:
{ constructor: ...}
{ constructor: ...}
- B:
{}
{ constructor: ...}
- C:
{ constructor: ...}
{}
- D:
{ constructor: ...}
undefined
Answer
#### Answer: D
Regular functions, such as the giveLydiaPizza
function, have a prototype
property, which is an object (prototype object) with a constructor
property. Arrow functions however, such as the giveLydiaChocolate
function, do not have this prototype
property. undefined
gets returned when trying to access the prototype
property using giveLydiaChocolate.prototype
.
93. What's the output?
const person = {
name: 'Lydia',
age: 21,
};
for (const [x, y] of Object.entries(person)) {
console.log(x, y);
}
- A:
name
Lydia
andage
21
- B:
["name", "Lydia"]
and["age", 21]
- C:
["name", "age"]
andundefined
- D:
Error
Answer
#### Answer: A
Object.entries(person)
returns an array of nested arrays, containing the keys and objects:
[ [ 'name', 'Lydia' ], [ 'age', 21 ] ]
Using the for-of
loop, we can iterate over each element in the array, the subarrays in this case. We can destructure the subarrays instantly in the for-of loop, using const [x, y]
. x
is equal to the first element in the subarray, y
is equal to the second element in the subarray.
The first subarray is [ "name", "Lydia" ]
, with x
equal to "name"
, and y
equal to "Lydia"
, which get logged.
The second subarray is [ "age", 21 ]
, with x
equal to "age"
, and y
equal to 21
, which get logged.
94. What's the output?
function getItems(fruitList, ...args, favoriteFruit) {
return [...fruitList, ...args, favoriteFruit]
}
getItems(["banana", "apple"], "pear", "orange")
- A:
["banana", "apple", "pear", "orange"]
- B:
[["banana", "apple"], "pear", "orange"]
- C:
["banana", "apple", ["pear"], "orange"]
- D:
SyntaxError
Answer
#### Answer: D
...args
is a rest parameter. The rest parameter's value is an array containing all remaining arguments, and can only be the last parameter! In this example, the rest parameter was the second parameter. This is not possible, and will throw a syntax error.
javascript
function getItems(fruitList, favoriteFruit, ...args) {
return [...fruitList, ...args, favoriteFruit];
}
getItems(['banana', 'apple'], 'pear', 'orange');
The above example works. This returns the array [ 'banana', 'apple', 'orange', 'pear' ]
95. What's the output?
function nums(a, b) {
if (a > b) console.log('a is bigger');
else console.log('b is bigger');
return
a + b;
}
console.log(nums(4, 2));
console.log(nums(1, 2));
- A:
a is bigger
,6
andb is bigger
,3
- B:
a is bigger
,undefined
andb is bigger
,undefined
- C:
undefined
andundefined
- D:
SyntaxError
Answer
#### Answer: B
In JavaScript, we don't have to write the semicolon (;
) explicitly, however the JavaScript engine still adds them after statements. This is called Automatic Semicolon Insertion. A statement can for example be variables, or keywords like throw
, return
, break
, etc.
Here, we wrote a return
statement, and another value a + b
on a new line. However, since it's a new line, the engine doesn't know that it's actually the value that we wanted to return. Instead, it automatically added a semicolon after return
. You could see this as:
javascript
return;
a + b;
This means that a + b
is never reached, since a function stops running after the return
keyword. If no value gets returned, like here, the function returns undefined
. Note that there is no automatic insertion after if/else
statements!
96. What's the output?
class Person {
constructor() {
this.name = 'Lydia';
}
}
Person = class AnotherPerson {
constructor() {
this.name = 'Sarah';
}
};
const member = new Person();
console.log(member.name);
- A:
"Lydia"
- B:
"Sarah"
- C:
Error: cannot redeclare Person
- D:
SyntaxError
Answer
#### Answer: B
We can set classes equal to other classes/function constructors. In this case, we set Person
equal to AnotherPerson
. The name on this constructor is Sarah
, so the name property on the new Person
instance member
is "Sarah"
.
97. What's the output?
const info = {
[Symbol('a')]: 'b',
};
console.log(info);
console.log(Object.keys(info));
- A:
{Symbol('a'): 'b'}
and["{Symbol('a')"]
- B:
{}
and[]
- C:
{ a: "b" }
and["a"]
- D:
{Symbol('a'): 'b'}
and[]
Answer
#### Answer: D
A Symbol is not enumerable. The Object.keys method returns all enumerable key properties on an object. The Symbol won't be visible, and an empty array is returned. When logging the entire object, all properties will be visible, even non-enumerable ones.
This is one of the many qualities of a symbol: besides representing an entirely unique value (which prevents accidental name collision on objects, for example when working with 2 libraries that want to add properties to the same object), you can also "hide" properties on objects this way (although not entirely. You can still access symbols using the Object.getOwnPropertySymbols()
method).
98. What's the output?
const getList = ([x, ...y]) => [x, y]
const getUser = user => { name: user.name, age: user.age }
const list = [1, 2, 3, 4]
const user = { name: "Lydia", age: 21 }
console.log(getList(list))
console.log(getUser(user))
- A:
[1, [2, 3, 4]]
andundefined
- B:
[1, [2, 3, 4]]
and{ name: "Lydia", age: 21 }
- C:
[1, 2, 3, 4]
and{ name: "Lydia", age: 21 }
- D:
Error
and{ name: "Lydia", age: 21 }
Answer
#### Answer: A
The getList
function receives an array as its argument. Between the parentheses of the getList
function, we destructure this array right away. You could see this as:
[x, ...y] = [1, 2, 3, 4]
With the rest parameter ...y
, we put all "remaining" arguments in an array. The remaining arguments are 2
, 3
and 4
in this case. The value of y
is an array, containing all the rest parameters. The value of x
is equal to 1
in this case, so when we log [x, y]
, [1, [2, 3, 4]]
gets logged.
The getUser
function receives an object. With arrow functions, we don't have to write curly brackets if we just return one value. However, if you want to return an object from an arrow function, you have to write it between parentheses, otherwise no value gets returned! The following function would have returned an object:
const getUser = user => ({ name: user.name, age: user.age })
Since no value gets returned in this case, the function returns undefined
.
99. What's the output?
const name = 'Lydia';
console.log(name());
- A:
SyntaxError
- B:
ReferenceError
- C:
TypeError
- D:
undefined
Answer
#### Answer: C
The variable name
holds the value of a string, which is not a function, thus cannot invoke.
TypeErrors get thrown when a value is not of the expected type. JavaScript expected name
to be a function since we're trying to invoke it. It was a string however, so a TypeError gets thrown: name is not a function!
SyntaxErrors get thrown when you've written something that isn't valid JavaScript, for example when you've written the word return
as retrun
.
ReferenceErrors get thrown when JavaScript isn't able to find a reference to a value that you're trying to access.
100. What's the value of output?
// 🎉✨ This is my 100th question! ✨🎉
const output = `${[] && 'Im'}possible!
You should${'' && `n't`} see a therapist after so much JavaScript lol`;
- A:
possible! You should see a therapist after so much JavaScript lol
- B:
Impossible! You should see a therapist after so much JavaScript lol
- C:
possible! You shouldn't see a therapist after so much JavaScript lol
- D:
Impossible! You shouldn't see a therapist after so much JavaScript lol
Answer
#### Answer: B
[]
is a truthy value. With the &&
operator, the right-hand value will be returned if the left-hand value is a truthy value. In this case, the left-hand value []
is a truthy value, so "Im'
gets returned.
""
is a falsy value. If the left-hand value is falsy, nothing gets returned. n't
doesn't get returned.
Orininally posted on - Alimammiya