javascript Flashcards
What’s the output?
function sayHi() {
console.log(name);
console.log(age);
var name = ‘Lydia’;
let age = 21;
}
sayHi();
undefined and ReferenceError
Variables with the let keyword (and const) are hoisted, but unlike var, don’t get initialized.
What’s the output?
let c = { greeting: ‘Hey!’ };
let d;
d = c;
c.greeting = ‘Hello’;
console.log(d.greeting);
Hello
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.
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);
}
3 3 3 and 0 1 2
Because of the event queue in JavaScript, the setTimeout callback function is called after the loop has been executed.
What’s the output?
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius,
};
console.log(shape.diameter());
console.log(shape.perimeter());
20 and NaN
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!
What’s the output?
+true;
!’Lydia’;
1 and false
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.
Which one is true?
const bird = {
size: ‘small’,
};
const mouse = {
name: ‘Mickey’,
small: true,
};
mouse.bird.size is not valid
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.
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);
true false false
when we use the === operator (Strict equality 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.
What’s the output?
class Chameleon {
static colorChange(newColor) {
this.newColor = newColor;
return this.newColor;
}
constructor({ newColor = ‘green’ } = {}) {
this.newColor = newColor;
}
}
const freddie = new Chameleon({ newColor: ‘purple’ });
console.log(freddie.colorChange(‘orange’));
TypeError
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 or called upon class instances.
What’s the output?
let greeting;
greetign = {}; // Typo!
console.log(greetign);
{}
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 = {} in Node.jsIn order to avoid this, we can use “use strict”.
What happens when we do this?
function bark() {
console.log(‘Woof!’);
}
bark.animal = ‘dog’;
Nothing, this is totally fine!
This is possible in JavaScript, because functions are objects!
What’s the output?
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const member = new Person(‘Lydia’, ‘Hallie’);
Person.getFullName = function() {
return ${this.firstName} ${this.lastName};
};
console.log(member.getFullName());
TypeError
In JavaScript, functions are objects, and therefore, the method getFullName gets added to the constructor function object itself. For that reason, we can call Person.getFullName(), but member.getFullName throws a TypeError.
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);
Person {firstName: “Lydia”, lastName: “Hallie”} and undefined
For sarah, we didn’t use the new keyword. When using new, this refers to the new empty object we create. However, if you don’t add new, this refers to the global object!
What are the three phases of event propagation?
Capturing > Target > Bubbling
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.
All object have prototypes.
false
All objects have prototypes, except for the base object. The base object is the object created by the user, or an object that is created using the new keyword. The base object has access to some methods and properties, such as .toString
What’s the output?
function sum(a, b) {
return a + b;
}
sum(1, ‘2’);
“12”
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.
What’s the output?
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
0 2 2
The prefix unary operator ++:
Increments the value (number is now 2)
Returns the value (this returns 2)
This returns 0 2 2.
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;
[””, “ is “, “ years old”] “Lydia” 21
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!
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 });
Hmm.. You don’t have an age I guess
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.
What’s the output?
function getAge(…args) {
console.log(typeof args);
}
getAge(21);
“object”
The rest parameter (…args) lets us “collect” all remaining arguments into an array. An array is an object, so typeof args returns “object”
What’s the output?
function getAge() {
‘use strict’;
age = 21;
console.log(age);
}
getAge();
ReferenceError
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.
What’s the value of sum?
const sum = eval(‘10*10+5’);
105
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.
How long is cool_secret accessible?
sessionStorage.setItem(‘cool_secret’, 123);
When the user closes the tab.
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.
What’s the output?
var num = 8;
var num = 10;
console.log(num);
10
With the var keyword, you can declare multiple variables with the same name. The variable will then hold the latest value.
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);
true true false true
All object keys (excluding Symbols) are strings under the hood, even if you don’t type it yourself as a string.
What’s the output?
const obj = { a: ‘one’, b: ‘two’, a: ‘three’ };
console.log(obj);
{ a: “three”, b: “two” }
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.
The JavaScript global execution context creates two things for you: the global object, and the “this” keyword.
true
The base execution context is the global execution context: it’s what’s accessible everywhere in your code.
What’s the output?
for (let i = 1; i < 5; i++) {
if (i === 3) continue;
console.log(i);
}
1 2 4
The continue statement skips an iteration if a certain condition returns true.
What’s the output?
String.prototype.giveLydiaPizza = () => {
return ‘Just give Lydia pizza already!’;
};
const name = ‘Lydia’;
console.log(name.giveLydiaPizza())
“Just give Lydia pizza already!”
Primitive strings are automatically converted into a string object, generated by the string prototype function.
What’s the output?
const a = {};
const b = { key: ‘b’ };
const c = { key: ‘c’ };
a[b] = 123;
a[c] = 456;
console.log(a[b]);
456
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.
What’s the output?
const foo = () => console.log(‘First’);
const bar = () => setTimeout(() => console.log(‘Second’));
const baz = () => console.log(‘Third’);
bar();
foo();
baz();
First Third Second
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 which gives us the setTimeout function to start with, and for example the DOM.
What is the event.target when clicking the button?
<div>
<div>
<button>
Click!
</button>
</div>
</div>
button
The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation
When you click the paragraph, what’s the logged output?
<div>
<p>
Click here!
</p>
</div>
p div
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)
What’s the output?
const person = { name: ‘Lydia’ };
function sayHi(age) {
return ${this.name} is ${age};
}
console.log(sayHi.call(person, 21));
console.log(sayHi.bind(person, 21));
Lydia is 21 function
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.
What’s the output?
function sayHi() {
return (() => 0)();
}
console.log(typeof sayHi());
“number”
The sayHi function returns the returned value of the immediately invoked function expression (IIFE). This function returned 0, which is type “number”.
Which of these values are falsy?
0;
new Number(0);
(‘’);
(‘ ‘);
new Boolean(false);
undefined;
0, ‘’, undefined
Function constructors, like new Number and new Boolean are truthy.
What’s the output?
console.log(typeof typeof 1);
“string”
typeof 1 returns “number”. typeof “number” returns “string”
What’s the output?
const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);
[1, 2, 3, empty x 7, 11]
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
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);
})();
1 undefined 2
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.
Everything in JavaScript is either a…
primitive or object
Primitive types are boolean, null, undefined, bigint, number, string, and symbol.
What differentiates a primitive from an object is that primitives do not have any properties or methods;
What’s the output?
[[0, 1], [2, 3]].reduce(
(acc, cur) => {
return acc.concat(cur);
},
[1, 2],
);
[1, 2, 0, 1, 2, 3]
[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]
What’s the output?
!!null;
!!’’;
!!1;
false false true
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.
What does the setInterval
method return in the browser?
setInterval(() => console.log(‘Hi’), 1000);
a unique id
It returns a unique id. This id can be used to clear that interval with the clearInterval() function.
What does this return?
[…‘Lydia’];
[“L”, “y”, “d”, “i”, “a”]
A string is an iterable. The spread operator maps every character of an iterable to one element.
What’s the output?
function* generator(i) {
yield i;
yield i * 2;
}
const gen = generator(10);
console.log(gen.next().value);
console.log(gen.next().value);
10, 20
Regular functions cannot be stopped mid-way after invocation.a generator function can be “stopped” midway, and later continue from where it stopped. Every time a generator function encounters a yield keyword, the function yields the value specified after it.
What does this return?
const firstPromise = new Promise((res, rej) => {
setTimeout(res, 500, ‘one’);
});
const secondPromise = new Promise((res, rej) => {
setTimeout(res, 100, ‘two’);
});
Promise.race([firstPromise, secondPromise]).then(res => console.log(res));
“two”
When we pass multiple promises to the Promise.race method, it resolves/rejects the first promise that resolves/rejects.
What’s the output?
let person = { name: ‘Lydia’ };
const members = [person];
person = null;
console.log(members);
[{ name: “Lydia” }]
First, we declare a variable person with the value of an object that has a name property.Then, we declare a variable called members. We set the first element of that array equal to the value of the person variable.
What’s the output?
const person = {
name: ‘Lydia’,
age: 21,
};
for (const item in person) {
console.log(item);
}
“name”, “age”
On every loop, we set the value of item equal to the current key it’s iterating over. First, item is equal to name, and gets logged. Then, item is equal to age, which gets logged.
What’s the output?
console.log(3 + 4 + ‘5’);
“75”
Operator associativity is the order in which the compiler evaluates the expressions, either left-to-right or right-to-left. This only happens if all operators have the same precedence.
What’s the value of num?
const num = parseInt(‘7*6’, 10);
7
Only the first numbers in the string is returned.
What’s the output?
[1, 2, 3].map(num => {
if (typeof num === ‘number’) return;
return num * 2;
});
[undefined, undefined, undefined]
When mapping over the array, the value of num is equal to the element it’s currently looping over. In this case, the elements are numbers, so the condition of the if statement typeof num === “number” returns true.
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);
{ name: “Lydia” }, “1997”
Arguments are passed by value, unless their value is an object, then they’re passed by reference.
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();
Oh no an error: Hello world!
With the throw statement, we can create custom errors. With this statement, you can throw exceptions.
What’s the output?
function Car() {
this.make = ‘Lamborghini’;
return { make: ‘Maserati’ };
}
const myCar = new Car();
console.log(myCar.make);
“Maserati”
When a constructor function is called with the new keyword, it creates an object and sets the this keyword to refer to that object.
What’s the output?
(() => {
let x = (y = 10);
})();
console.log(typeof x);
console.log(typeof y);
“undefined”, “number”
let x = (y = 10); is actually shorthand for:
y = 10;
let x = y;
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;
“Woof I am Mara”, TypeError
the bark function is not available anymore on the prototype after delete Dog.prototype.bark, yet we still try to access it.
What’s the output?
const set = new Set([1, 1, 2, 3, 4]);
console.log(set);
{1, 2, 3, 4}
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}.
What’s the output?
// counter.js
let counter = 10;
export default counter;
// index.js
import myCounter from ‘./counter’;
myCounter += 1;
console.log(myCounter);
Error
When we try to increment the value of myCounter, it throws an error: myCounter is read-only and cannot be modified.
What’s the output?
const name = ‘Lydia’;
age = 21;
console.log(delete name);
console.log(delete age);
false, true
The delete operator returns a boolean value: true on a successful deletion, else it’ll return false.
What’s the output?
const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
1
We can unpack values from arrays or properties from objects through destructuring.
What’s the output?
const user = { name: ‘Lydia’, age: 21 };
const admin = { admin: true, …user };
console.log(admin);
{ admin: true, name: “Lydia”, age: 21 }
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.
What’s the output?
const person = { name: ‘Lydia’ };
Object.defineProperty(person, ‘age’, { value: 21 });
console.log(person);
console.log(Object.keys(person));
{ name: “Lydia”, age: 21 }, [“name”]
With the defineProperty method, we can add new properties to an object, or modify existing ones.
What’s the output?
const settings = {
username: ‘lydiahallie’,
level: 19,
health: 90,
};
const data = JSON.stringify(settings, [‘level’, ‘health’]);
console.log(data);
”{“level”:19, “health”:90}”
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.
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);
10, 10
The unary operator ++ first returns the value of the operand, then increments the value of the operand.
What’s the output?
const value = { number: 10 };
const multiply = (x = { …value }) => {
console.log((x.number *= 2));
};
multiply();
multiply();
multiply(value);
multiply(value);
20, 20, 20, 40
In this case, we spread the properties of the value object into a new object, so x has the default value of { number: 10 }.
What’s the output?
[1, 2, 3, 4].reduce((x, y) => console.log(x, y));
1 2 and undefined 3 and undefined 4
With the reduce method, we execute a callback function on every element in the array, which could ultimately result in one single value.
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;
}
};
2
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.
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;
running sum.js, running index.js, 3
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.
What’s the output?
console.log(Number(2) === Number(2));
console.log(Boolean(false) === Boolean(false));
console.log(Symbol(‘foo’) === Symbol(‘foo’));
true, true, false
The purpose of the argument passed to the Symbol is to give the Symbol a description.
What’s the output?
const name = ‘Lydia Hallie’;
console.log(name.padStart(13));
console.log(name.padStart(2));
” Lydia Hallie”, “Lydia Hallie” (“[1x whitespace]Lydia Hallie”, “Lydia Hallie”)
With the padStart method, we can add padding to the beginning of a string.
What’s the output?
console.log(‘🥑’ + ‘💻’);
“🥑💻”
With the + operator, you can concatenate strings.
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 done here”;
}
return ‘JavaScript loves you back ❤️’;
}
const game = startGame();
console.log(/* 1 /); // Do you love JavaScript?
console.log(/ 2 */); // JavaScript loves you back ❤️
game.next().value and game.next(“Yes”).value
A generator function “pauses” its execution when it sees the yield keyword.
What’s the output?
console.log(String.rawHello\nworld);
Hello\nworld
String.raw returns a string where the escapes (\n, \v, \t etc.) are ignored!
What’s the output?
async function getData() {
return await Promise.resolve(‘I made it!’);
}
const data = getData();
console.log(data);
Promise {<pending>}</pending>
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.
What’s the output?
function addToList(item, list) {
return list.push(item);
}
const result = addToList(‘apple’, [‘banana’]);
console.log(result);
2
The .push() method returns the length of the new array!
What’s the output?
const box = { x: 10, y: 20 };
Object.freeze(box);
const shape = box;
shape.x = 100;
console.log(shape);
{ x: 10, y: 20 }
Object.freeze makes it impossible to add, remove, or modify properties of an object (unless the property’s value is another object).
What’s the output?
const { firstName: myName } = { firstName: ‘Lydia’ };
console.log(firstName);
ReferenceError
By using destructuring assignment syntax we can unpack values from arrays, or properties from objects, into distinct variables.
Is this a pure function?
function sum(a, b) {
return a + b;
}
Yes
A pure function is a function that always returns the same result, if the same arguments are passed.
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));
Calculated! 20 From cache! 20 From cache! 20
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.
What is the output?
const myLifeSummedUp = [‘☕’, ‘💻’, ‘🍷’, ‘🍫’];
for (let item in myLifeSummedUp) {
console.log(item);
}
for (let item of myLifeSummedUp) {
console.log(item);
}
0 1 2 3 and “☕” “💻” “🍷” “🍫”
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.
What is the output?
const list = [1 + 2, 1 * 2, 1 / 2];
console.log(list);
[3, 2, 0.5]
Array elements can hold any value.The element will be equal to the returned value. 1 + 2 returns 3, 1 * 2 returns 2, and 1 / 2 returns 0.5.
What is the output?
function sayHi(name) {
return Hi there, ${name};
}
console.log(sayHi());
Hi there, undefined
arguments have the value of undefined, unless a value has been passed to the function.
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);
“🥑” and “😎”
In a method, like the getStatus method, the this keyword refers to the object that the method belongs to.
What is the output?
const person = {
name: ‘Lydia’,
age: 21,
};
let city = person.city;
city = ‘Amsterdam’;
console.log(person);
{ name: “Lydia”, age: 21 }
We set the variable city equal to the value of the property called city on the person object.
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));
ReferenceError
Variables with the const and let keyword are block-scoped.
What kind of information would get logged?
fetch(‘https://www.website.com/api/user/1’)
.then(res => res.json())
.then(res => console.log(res));
The result of the callback in the previous .then().
The value of res in the second .then is equal to the returned value of the previous .then. You can keep chaining .thens like this, where the value is passed to the next handler.
Which option is a way to set hasName equal to true, provided you cannot pass true as an argument?
function getName(name) {
const hasName = //
}
!!name
By setting hasName equal to name, you set hasName equal to whatever value you passed to the getName function, not the boolean value true.
What’s the output?
function sum(num1, num2 = num1) {
console.log(num1 + num2);
}
sum(10);
20
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.
What’s the output?
// module.js
export default () => ‘Hello world’;
export const name = ‘Lydia’;
// index.js
import * as data from ‘./module’;
console.log(data);
{ default: function default(), name: “Lydia” }
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.
What’s the output?
class Person {
constructor(name) {
this.name = name;
}
}
const member = new Person(‘John’);
console.log(typeof member);
“object”
Classes are syntactical sugar for function constructors.
What’s the output?
let newList = [1, 2, 3].push(4);
console.log(newList.push(5));
Error
By setting newList equal to [1, 2, 3].push(4), we set newList equal to the new length of the array: 4.
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);
{ constructor: …} undefined
Regular functions, such as the giveLydiaPizza function, have a prototype property, which is an object (prototype object) with a constructor property.
What’s the output?
const person = {
name: ‘Lydia’,
age: 21,
};
for (const [x, y] of Object.entries(person)) {
console.log(x, y);
}
name Lydia and age 21
Object.entries(person) returns an array of nested arrays, containing the keys and objects:
What’s the output?
function getItems(fruitList, …args, favoriteFruit) {
return […fruitList, …args, favoriteFruit]
}
getItems([“banana”, “apple”], “pear”, “orange”)
SyntaxError
the rest parameter was the second parameter. This is not possible, and will throw a syntax error.
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 is bigger, undefined and b is bigger, undefined
In JavaScript, we don’t have to write the semicolon (;) explicitly, however the JavaScript engine still adds them after statements.
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);
“Sarah”
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”.
What’s the output?
const info = {
[Symbol(‘a’)]: ‘b’,
};
console.log(info);
console.log(Object.keys(info));
{Symbol(‘a’): ‘b’} and []
A Symbol is not enumerable. The Object.keys method returns all enumerable key properties on an object.
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))
[1, [2, 3, 4]] and SyntaxError
The getList function receives an array as its argument. Between the parentheses of the getList function, we destructure this array right away.
What’s the output?
const name = ‘Lydia’;
console.log(name());
TypeError
The variable name holds the value of a string, which is not a function, thus cannot invoke.
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;
Impossible! You should see a therapist after so much JavaScript lol
[] 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.
What’s the value of output?
const one = false || {} || null;
const two = null || false || ‘’;
const three = [] || 0 || true;
console.log(one, two, three);
{} “” []
With the || operator, we can return the first truthy operand. If all values are falsy, the last operand gets returned.
What’s the value of output?
const myPromise = () => Promise.resolve(‘I have resolved!’);
function firstFunction() {
myPromise().then(res => console.log(res));
console.log(‘second’);
}
async function secondFunction() {
console.log(await myPromise());
console.log(‘second’);
}
firstFunction();
secondFunction();
second, I have resolved! and I have resolved!, second
In the firstFunction, we (sort of) put the myPromise function aside while it was running, but continued running the other code, which is console.log(‘second’) in this case.
What’s the value of output?
const set = new Set();
set.add(1);
set.add(‘Lydia’);
set.add({ name: ‘Lydia’ });
for (let item of set) {
console.log(item + 2);
}
3, Lydia2, [object Object]2
The + operator is not only used for adding numerical values, but we can also use it to concatenate strings.
What’s its value?
Promise.resolve(5);
Promise {<fulfilled>: 5}</fulfilled>
We can pass any type of value we want to Promise.resolve, either a promise or a non-promise. The method itself returns a promise with the resolved value (<fulfilled>).</fulfilled>
What’s its value?
function compareMembers(person1, person2 = person) {
if (person1 !== person2) {
console.log(‘Not the same!’);
} else {
console.log(‘They are the same!’);
}
}
const person = { name: ‘Lydia’ };
compareMembers(person);
They are the same!
Objects are passed by reference. When we check objects for strict equality (===), we’re comparing their references.
What’s its value?
const colorConfig = {
red: true,
blue: false,
green: true,
black: true,
yellow: false,
};
const colors = [‘pink’, ‘red’, ‘blue’];
console.log(colorConfig.colors[1]);
TypeError
We use dot notation (colorConfig.colors) instead of bracket notation (colorConfig[“colors”]).
What’s its value?
console.log(‘❤️’ === ‘❤️’);
true
Under the hood, emojis are unicodes. The unicodes for the heart emoji is “U+2764 U+FE0F”. These are always the same for the same emojis, so we’re comparing two equal strings to each other, which returns true.
Which of these methods modifies the original array?
const emojis = [‘✨’, ‘🥑’, ‘😍’];
emojis.map(x => x + ‘✨’);
emojis.filter(x => x !== ‘🥑’);
emojis.find(x => x !== ‘🥑’);
emojis.reduce((acc, cur) => acc + ‘✨’);
emojis.slice(1, 2, ‘✨’);
emojis.splice(1, 2, ‘✨’);
splice
With splice method, we modify the original array by deleting, replacing or adding elements. In this case, we removed 2 items from index 1 (we removed ‘🥑’ and ‘😍’) and added the ✨ emoji instead.
What’s the output?
const food = [‘🍕’, ‘🍫’, ‘🥑’, ‘🍔’];
const info = { favoriteFood: food[0] };
info.favoriteFood = ‘🍝’;
console.log(food);
[‘🍕’, ‘🍫’, ‘🥑’, ‘🍔’]
We set the value of the favoriteFood property on the info object equal to the string with the pizza emoji, ‘🍕’. A string is a primitive data type.
What does this method do?
JSON.parse();
Parses JSON to a JavaScript value
With the JSON.parse() method, we can parse JSON string to a JavaScript value.
What’s the output?
let name = ‘Lydia’;
function getName() {
console.log(name);
let name = ‘Sarah’;
}
getName();
ReferenceError
Each function has its own execution context (or scope). The getName function first looks within its own context (scope) to see if it contains the variable name we’re trying to access.
What’s the output?
function* generatorOne() {
yield [‘a’, ‘b’, ‘c’];
}
function* generatorTwo() {
yield* [‘a’, ‘b’, ‘c’];
}
const one = generatorOne();
const two = generatorTwo();
console.log(one.next().value);
console.log(two.next().value);
[‘a’, ‘b’, ‘c’] and a
With the yield* keyword, we can yield values from another generator function, or iterable object (for example an array).
What’s the output?
console.log(${(x => x)('I love')} to program);
I love to program
Expressions within template literals are evaluated first. This means that the string will contain the returned value of the expression, the immediately invoked function (x => x)(‘I love’) in this case.
What will happen?
let config = {
alert: setInterval(() => {
console.log(‘Alert!’);
}, 1000),
};
config = null;
The setInterval callback will still be called every second
Normally when we set objects equal to null, those objects get garbage collected as there is no reference anymore to that object.
Which method(s) will return the value ‘Hello world!’?
const myMap = new Map();
const myFunc = () => ‘greeting’;
myMap.set(myFunc, ‘Hello world!’);
//1
myMap.get(‘greeting’);
//2
myMap.get(myFunc);
//3
myMap.get(() => ‘greeting’);
2
When adding a key/value pair using the set method, the key will be the value of the first argument passed to the set function, and the value will be the second argument passed to the set function.
What’s the output?
const person = {
name: ‘Lydia’,
age: 21,
};
const changeAge = (x = { …person }) => (x.age += 1);
const changeAgeAndName = (x = { …person }) => {
x.age += 1;
x.name = ‘Sarah’;
};
changeAge(person);
changeAgeAndName();
console.log(person);
{name: “Lydia”, age: 22}
Both the changeAge and changeAgeAndName functions have a default parameter, namely a newly created object { …person }. This object has copies of all the key/values in the person object.
Which of the following options will return 6?
function sumValues(x, y, z) {
return x + y + z;
}
sumValues(…[1, 2, 3])
The sumValues function receives three arguments: x, y and z. …[1, 2, 3] will result in 1, 2, 3, which we pass to the sumValues function.
What’s the output?
let num = 1;
const list = [‘🥳’, ‘🤠’, ‘🥰’, ‘🤪’];
console.log(list[(num += 1)]);
🥰
With the += operand, we’re incrementing the value of num by 1. num had the initial value 1, so 1 + 1 is 2. The item on the second index in the list array is 🥰, console.log(list[2]) prints 🥰.
What’s the output?
const person = {
firstName: ‘Lydia’,
lastName: ‘Hallie’,
pet: {
name: ‘Mara’,
breed: ‘Dutch Tulip Hound’,
},
getFullName() {
return ${this.firstName} ${this.lastName};
},
};
console.log(person.pet?.name);
console.log(person.pet?.family?.name);
console.log(person.getFullName?.());
console.log(member.getLastName?.());
Mara undefined Lydia Hallie ReferenceError
If we’re trying to access a property on an undefined or null value (nullish), the expression short-circuits and returns undefined.
What’s the output?
const groceries = [‘banana’, ‘apple’, ‘peanuts’];
if (groceries.indexOf(‘banana’)) {
console.log(‘We have to buy bananas!’);
} else {
console.log(We don't have to buy bananas!);
}
We don’t have to buy bananas
We passed the condition groceries.indexOf(“banana”) to the if-statement. groceries.indexOf(“banana”) returns 0, which is a falsy value.
What’s the output?
const name = ‘Lydia Hallie’;
console.log(!typeof name === ‘object’);
console.log(!typeof name === ‘string’);
false false
typeof name returns “string”. The string “string” is a truthy value, so !typeof name returns the boolean value false. false === “object” and false === “string” both returnfalse.
What’s the output?
const config = {
languages: [],
set language(lang) {
return this.languages.push(lang);
},
};
console.log(config.language);
undefined
The language method is a setter. Setters don’t hold an actual value, their purpose is to modify properties. When calling a setter method, undefined gets returned.
What’s the output?
const add = x => y => z => {
console.log(x, y, z);
return x + y + z;
};
add(4)(5)(6);
4 5 6
The add function returns an arrow function, which returns an arrow function, which returns an arrow function.
What’s the output?
async function* range(start, end) {
for (let i = start; i <= end; i++) {
yield Promise.resolve(i);
}
}
(async () => {
const gen = range(1, 3);
for await (const item of gen) {
console.log(item);
}
})();
1 2 3
The generator function range returns an async object with promises for each item in the range we pass: Promise{1}, Promise{2}, Promise{3}.
What’s the output?
const myFunc = ({ x, y, z }) => {
console.log(x, y, z);
};
myFunc(1, 2, 3);
undefined undefined undefined
Since we’re only passing three separate numeric values (1, 2, 3) instead of one object with properties x, y and z ({x: 1, y: 2, z: 3}), x, y and z have their default value of undefined.
What’s the output?
function getFine(speed, amount) {
const formattedSpeed = new Intl.NumberFormat(‘en-US’, {
style: ‘unit’,
unit: ‘mile-per-hour’
}).format(speed);
const formattedAmount = new Intl.NumberFormat(‘en-US’, {
style: ‘currency’,
currency: ‘USD’
}).format(amount);
return The driver drove ${formattedSpeed} and has to pay ${formattedAmount};
}
console.log(getFine(130, 300))
The driver drove 130 mph and has to pay $300.00
We format the numeric value 130 to the en-US locale as a unit in mile-per-hour, which results in 130 mph.
What’s the output?
const spookyItems = [‘👻’, ‘🎃’, ‘🕸’];
({ item: spookyItems[3] } = { item: ‘💀’ });
console.log(spookyItems);
[“👻”, “🎃”, “🕸”, “💀”]
By destructuring objects, we can unpack values from the right-hand object, and assign the unpacked value to the value of the same property name on the left-hand object.
What’s the output?
const name = ‘Lydia Hallie’;
const age = 21;
console.log(Number.isNaN(name));
console.log(Number.isNaN(age));
console.log(isNaN(name));
console.log(isNaN(age));
false false true false
With the Number.isNaN method, you can check if the value you pass is a numeric value and equal to NaN. name is not a numeric value, so Number.isNaN(name) returns false.
What’s the output?
const randomValue = 21;
function getInfo() {
console.log(typeof randomValue);
const randomValue = ‘Lydia Hallie’;
}
getInfo();
ReferenceError
Variables declared with the const keyword are not referenceable before their initialization: this is called the temporal dead zone.
What’s the output?
const myPromise = Promise.resolve(‘Woah some cool data’);
(async () => {
try {
console.log(await myPromise);
} catch {
throw new Error(Oops didn't work);
} finally {
console.log(‘Oh finally!’);
}
})();
Woah some cool data Oh finally!
Since no errors were thrown in the try block, the code in the catch block doesn’t run.
What’s the output?
const emojis = [‘🥑’, [‘✨’, ‘✨’, [‘🍕’, ‘🍕’]]];
console.log(emojis.flat(1));
[‘🥑’, ‘✨’, ‘✨’, [‘🍕’, ‘🍕’]]
we passed the value 1 (which we didn’t have to, that’s the default value), meaning that only the arrays on the first depth will be concatenated.
What’s the output?
class Counter {
constructor() {
this.count = 0;
}
increment() {
this.count++;
}
}
const counterOne = new Counter();
counterOne.increment();
counterOne.increment();
const counterTwo = counterOne;
counterTwo.increment();
console.log(counterOne.count);
3
counterOne is an instance of the Counter class. The counter class contains a count property on its constructor, and an increment method.
What’s the output?
const myPromise = Promise.resolve(Promise.resolve(‘Promise’));
function funcOne() {
setTimeout(() => console.log(‘Timeout 1!’), 0);
myPromise.then(res => res).then(res => console.log(${res} 1!));
console.log(‘Last line 1!’);
}
async function funcTwo() {
const res = await myPromise;
console.log(${res} 2!)
setTimeout(() => console.log(‘Timeout 2!’), 0);
console.log(‘Last line 2!’);
}
funcOne();
funcTwo();
Last line 1! Promise 2! Last line 2! Promise 1! Timeout 1! Timeout 2!
First, we invoke funcOne. On the first line of funcOne, we call the asynchronous setTimeout function, from which the callback is sent to the Web API.
How can we invoke sum in sum.js from index.js?
// sum.js
export default function sum(x) {
return x + x;
}
// index.js
import * as sum from ‘./sum’;
sum.default(4)
With the asterisk *, we import all exported values from that file, both default and named.
What’s the output?
const handler = {
set: () => console.log(‘Added a new property!’),
get: () => console.log(‘Accessed a property!’),
};
const person = new Proxy({}, handler);
person.name = ‘Lydia’;
person.name;
Added a new property! Accessed a property!
With a Proxy object, we can add custom behavior to an object that we pass to it as the second argument.
Which of the following will modify the person object?
const person = { name: ‘Lydia Hallie’ };
Object.seal(person);
person.name = “Evan Bacon”
With Object.seal we can prevent new properties from being added, or existing properties to be removed.
Which of the following will modify the person object?
const person = {
name: ‘Lydia Hallie’,
address: {
street: ‘100 Main St’,
},
};
Object.freeze(person);
person.address.street = “101 Main St”
The Object.freeze method freezes an object. No properties can be added, modified, or removed.
What’s the output?
class Counter {
#number = 10
increment() {
this.#number++
}
getNum() {
return this.#number
}
}
const counter = new Counter()
counter.increment()
console.log(counter.#number)
SyntaxError
When we try to log counter.#number, a SyntaxError gets thrown: we cannot acccess it outside the Counter class!
What’s the output?
const add = x => x + x;
function myFunc(num = 2, value = add(num)) {
console.log(num, value);
}
myFunc();
myFunc(3);
2 4 and 3 6
Since we didn’t pass arguments, num and value got their default values: num is 2, and value the returned value of the function add.
What’s missing?
const teams = [
{ name: ‘Team 1’, members: [‘Paul’, ‘Lisa’] },
{ name: ‘Team 2’, members: [‘Laura’, ‘Tim’] },
];
function* getMembers(members) {
for (let i = 0; i < members.length; i++) {
yield members[i];
}
}
function* getTeams(teams) {
for (let i = 0; i < teams.length; i++) {
// ✨ SOMETHING IS MISSING HERE ✨
}
}
const obj = getTeams(teams);
obj.next(); // { value: “Paul”, done: false }
obj.next(); // { value: “Lisa”, done: false }
yield* getMembers(teams[i].members)
The generator function returns a generator object. In order to iterate over each element in this generator object, we need to use yield*.
What’s the output?
const person = {
name: ‘Lydia Hallie’,
hobbies: [‘coding’],
};
function addHobby(hobby, hobbies = person.hobbies) {
hobbies.push(hobby);
return hobbies;
}
addHobby(‘running’, []);
addHobby(‘dancing’);
addHobby(‘baking’, person.hobbies);
console.log(person.hobbies);
[“coding”, “dancing”, “baking”]
The addHobby function receives two arguments, hobby and hobbies with the default value of the hobbies array on the person object.
What’s the output?
class Bird {
constructor() {
console.log(“I’m a bird. 🦢”);
}
}
class Flamingo extends Bird {
constructor() {
console.log(“I’m pink. 🌸”);
super();
}
}
const pet = new Flamingo();
I’m pink. 🌸 I’m a bird. 🦢
First, “I’m pink. 🌸” gets logged, after which we call super(). super() calls the constructor of the parent class, Bird. The constructor in Bird gets called, and logs “I’m a bird. 🦢”.
Which of the options result(s) in an error?
const emojis = [‘🎄’, ‘🎅🏼’, ‘🎁’, ‘⭐’];
/* 1 / emojis.push(‘🦌’);
/ 2 / emojis.splice(0, 2);
/ 3 / emojis = […emojis, ‘🥂’];
/ 4 */ emojis.length = 0;
3
The properties on the emojis array can be modified, for example by pushing new values, splicing them, or setting the length of the array to 0.
What do we need to add to the person object to get [“Lydia Hallie”, 21] as the output of […person]?
const person = {
name: “Lydia Hallie”,
age: 21
}
[…person] // [“Lydia Hallie”, 21]
Symbol.iterator { yield Object.values(this) }
Objects aren’t iterable by default. An iterable is an iterable if the iterator protocol is present. We can add this manually by adding the iterator symbol [Symbol.iterator], which has to return a generator object.
What’s the output?
let count = 0;
const nums = [0, 1, 2, 3];
nums.forEach(num => {
if (num) count += 1
})
console.log(count)
3
Since the first number in the nums array is 0, a falsy value, the if statement’s code block won’t be executed.
What’s the output?
function getFruit(fruits) {
console.log(fruits?.[1]?.[1])
}
getFruit([[‘🍊’, ‘🍌’], [‘🍍’]])
getFruit()
getFruit([[‘🍍’], [‘🍊’, ‘🍌’]])
undefined, undefined, 🍌
The ? allows us to optionally access deeper nested properties within objects.
What’s the output?
class Calc {
constructor() {
this.count = 0
}
increase() {
this.count ++
} }
const calc = new Calc()
new Calc().increase()
console.log(calc.count)
0
We set the variable calc equal to a new instance of the Calc class. Then, we instantiate a new instance of Calc, and invoke the increase method on this instance.
What’s the output?
const user = {
email: “e@mail.com”,
password: “12345”
}
const updateUser = ({ email, password }) => {
if (email) {
Object.assign(user, { email })
}
if (password) {
user.password = password
}
return user }
const updatedUser = updateUser({ email: “new@email.com” })
console.log(updatedUser === user)
true
The updateUser function updates the values of the email and password properties on user, if their values are passed to the function, after which the function returns the user object.
What’s the output?
const fruit = [‘🍌’, ‘🍊’, ‘🍎’]
fruit.slice(0, 1)
fruit.splice(0, 1)
fruit.unshift(‘🍇’)
console.log(fruit)
[‘🍇’, ‘🍊’, ‘🍎’]
First, we invoke the slice method on the fruit array.Then, we invoke the splice method on the fruit array. At last, we invoke the unshift method on the fruit array.
What’s the output?
const animals = {};
let dog = { emoji: ‘🐶’ }
let cat = { emoji: ‘🐈’ }
animals[dog] = { …dog, name: “Mara” }
animals[cat] = { …cat, name: “Sara” }
console.log(animals[dog])
{ emoji: “🐈”, name: “Sara” }
Object keys are converted to strings.
What’s the output?
const user = {
email: “my@email.com”,
updateEmail: email => {
this.email = email
}
}
user.updateEmail(“new@email.com”)
console.log(user.email)
my@email.com
The updateEmail function is an arrow function, and is not bound to the user object.
What’s the output?
const promise1 = Promise.resolve(‘First’)
const promise2 = Promise.resolve(‘Second’)
const promise3 = Promise.reject(‘Third’)
const promise4 = Promise.resolve(‘Fourth’)
const runPromises = async () => {
const res1 = await Promise.all([promise1, promise2])
const res2 = await Promise.all([promise3, promise4])
return [res1, res2]
}
runPromises()
.then(res => console.log(res))
.catch(err => console.log(err))
‘Third’
We’re catching the rejected value in the chained catch method on the runPromises invocation to catch any errors within the runPromises function.
What should the value of method be to log { name: “Lydia”, age: 22 }?
const keys = [“name”, “age”]
const values = [“Lydia”, 22]
const method = /* ?? */
Objectmethod // { name: “Lydia”, age: 22 }
fromEntries
The first element in each subarray will be the key, and the second element in each subarray will be the value.
What’s the output?
const createMember = ({ email, address = {}}) => {
const validEmail = /.+\@.+..+/.test(email)
if (!validEmail) throw new Error(“Valid email pls”)
return {
email,
address: address ? address : null
} }
const member = createMember({ email: “my@email.com” })
console.log(member)
{ email: “my@email.com”, address: {} }
When we set the variable member equal to the object returned by the createMember function, we didn’t pass a value for address, which means that the value of address is the default empty object {}.
What’s the output?
let randomValue = { name: “Lydia” }
randomValue = 23
if (!typeof randomValue === “string”) {
console.log(“It’s not a string!”)
} else {
console.log(“Yay it’s a string!”)
}
Yay it’s a string!
!typeof randomValue === “string” always returns false, since we’re actually checking false === “string”
What are the possible ways to create objects in JavaScript?
Object constructor:
Object’s create method:
Object literal syntax:
What is a prototype chain?
Prototype chaining is used to build new types of objects based on existing ones. It is similar to inheritance in a class based language.
What is the difference between Call, Apply and Bind?
The call() method invokes a function with a given this value and arguments provided one by one.
Apply: Invokes the function with a given this value and allows you to pass in arguments as an array.
bind: returns a new function, allowing you to pass any number of arguments.
What is JSON and its common operations?
JSON is a text-based data format following JavaScript object syntax,useful when you want to transmit data across a network .
What is the purpose of the array slice method?
The slice() method returns the selected elements in an array as a new array object.
What is the purpose of the array splice method?
The splice() method is used either adds/removes items to/from an array, and then returns the removed item.
What is the difference between slice and splice?
Slice-Doesn’t modify the original array(immutable) while splice modifies the original array.
slice-Returns the subset of original array while splice Returns the deleted elements as array.
How do you compare Object and Map?
Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key.
What is the difference between == and === operators?
The strict operators take type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables.
What are lambda or arrow functions?
An arrow function is a shorter syntax for a function expression and does not have its own this, arguments, super, or new.target.
What is a first class function?
First-class functions means when functions in that language are treated like any other variable.
What is a first order function?
First-order function is a function that doesn’t accept another function as an argument and doesn’t return a function as its return value.
What is a higher order function?
Higher-order function is a function that accepts another function as an argument or returns a function as a return value or both.
What is a unary function?
Unary function (i.e. monadic) is a function that accepts exactly one argument. It stands for a single argument accepted by a function.
What is the currying function?
Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument.
What is a pure function?
A Pure function is a function where the return value is only determined by its arguments without any side effects.
What is the purpose of the let keyword?
the variables defined with let keyword are limited in scope to the block, statement, or expression on which it is used.
What is the difference between let and var?
var has a function scope while let has a block scope.
var-variables will be hoisted while in let- hoisted but not initialized.
What is the reason to choose the name let as a keyword?
let is a mathematical statement that was adopted by early programming languages like Scheme and Basic.
How do you redeclare variables in switch block without an error?
To avoid this error, you can create a nested block inside a case clause and create a new block scoped lexical environment.
What is the Temporal Dead Zone?
A behavior in JavaScript that occurs when declaring a variable with the let and const keywords, but not with var.
What is IIFE(Immediately Invoked Function Expression)?
a JavaScript function that runs as soon as it is defined.
The primary reason to use an IIFE is to obtain data privacy because any variables declared within the IIFE cannot be accessed by the outside world.
How do you decode or encode a URL in JavaScript?
encodeURI() function is used to encode an URL. This function requires a URL string as a parameter and return that encoded string. decodeURI() function is used to decode an URL.
What is memoization?
Memoization is a programming technique which attempts to increase a function’s performance by caching its previously computed results.
What is Hoisting?
Hoisting is a JavaScript mechanism where variables, function declarations and classes are moved to the top of their scope before code execution.
What are classes in ES6?
In ES6, Javascript classes are primarily syntactic sugar over JavaScript’s existing prototype-based inheritance.
What are closures?
A closure is the combination of a function and the lexical environment within which that function was declared.
What are modules?
Modules refer to small units of independent, reusable code and also act as the foundation of many JavaScript design patterns.
Why do you need modules?
For:
Maintainability
Reusability
Namespacing
What is scope in javascript?
Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime.
What is a service worker?
A Service worker is basically a script (JavaScript file) that runs in the background, separate from a web page and provides features that don’t need a web page or user interaction.
How do you manipulate DOM using a service worker?
Service worker can’t access the DOM directly. But it can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM.
How do you reuse information across service worker restarts?
service workers will have access to IndexedDB API in order to persist and reuse across restarts.
What is IndexedDB?
IndexedDB is a low-level API for client-side storage of larger amounts of structured data, including files/blobs.
What is web storage?
Web storage is an API that provides a mechanism by which browsers can store key/value pairs locally within the user’s browser, in a much more intuitive fashion than using cookies.
What is a post message?
Post message is a method that enables cross-origin communication between Window objects.(i.e, between a page and a pop-up that it spawned, or between a page and an iframe embedded within it).
What is a Cookie?
A cookie is a piece of data that is stored on your computer to be accessed by your browser. Cookies are saved as key/value pairs.
Why do you need a Cookie?
Cookies are used to remember information about the user profile(such as username).
What are the options in a cookie?
By default, the cookie is deleted when the browser is closed but you can change this behavior by setting expiry date.
By default, the cookie belongs to a current page. But you can tell the browser what path the cookie belongs to using a path parameter.
How do you delete a cookie?
You can delete a cookie by setting the expiry date as a passed date. You don’t need to specify a cookie value in this case.
What are the differences between cookie, local storage and session storage?
cookie-both server side and client side.
local storage-only client side
session storage-client side only
cookie -SSL supported
local storage-not SSL supported
session storage-not SSL supported.
What is the main difference between localStorage and sessionStorage?
LocalStorage is the same as SessionStorage but it persists the data even when the browser is closed and reopened(i.e it has no expiration time) whereas in sessionStorage data gets cleared when the page session ends.
How do you access web storage?
The Window object implements the WindowLocalStorage and WindowSessionStorage objects which has localStorage(window.localStorage) and sessionStorage(window.sessionStorage) properties respectively.
What are the methods available on session storage?
// Save data to sessionStorage
sessionStorage.setItem(“key”, “value”);
// Get saved data from sessionStorage
let data = sessionStorage.getItem(“key”);
// Remove saved data from sessionStorage
sessionStorage.removeItem(“key”);
// Remove all saved data from sessionStorage
sessionStorage.clear();
What is a storage event and its event handler?
The StorageEvent is an event that fires when a storage area has been changed in the context of another document. Whereas onstorage property is an EventHandler for processing storage events.
Why do you need web storage?
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
How do you check web storage browser support?
You need to check browser support for localStorage and sessionStorage before using web storage,
How do you check web workers browser support?
if (typeof Worker !== “undefined”) {
// code for Web worker support.
} else {
// Sorry! No Web Worker support..
}
Give an example of a web worker
Dashboard pages that display real-time data such as stock prices, real-time active users, and so on. Fetching huge files from the server.
What are the restrictions of web workers on DOM?
WebWorkers don’t have access to below javascript objects since they are defined in an external files
Window object
Document object
Parent object
What is a promise?
A promise is an object that may produce a single value some time in the future with either a resolved value or a reason that it’s not resolved(for example, network error).
Why do you need a promise
Promises are used to handle asynchronous operations. They provide an alternative approach for callbacks by reducing the callback hell and writing the cleaner code.
What are the three states of promise?
Promises have three states:
Pending: This is an initial state of the Promise before an operation begins
Fulfilled: This state indicates that the specified operation was completed.
Rejected: This state indicates that the operation did not complete. In this case an error value will be thrown.
What is a callback function
callback function is a function passed into another function as an argument. This function is invoked inside the outer function to complete an action.
Why do we need callbacks
The callbacks are needed because javascript is an event driven language. That means instead of waiting for a response javascript will keep executing while listening for other events.
What is a callback hell
Callback Hell is an anti-pattern with multiple nested callbacks which makes code hard to read and debug when dealing with asynchronous logic.
What are server-sent events
Server-sent events (SSE) is a server push technology enabling a browser to receive automatic updates from a server via HTTP connection without resorting to polling.
How do you receive server-sent event notifications
if (typeof EventSource !== “undefined”) {
var source = new EventSource(“sse_generator.js”);
source.onmessage = function (event) {
document.getElementById(“output”).innerHTML += event.data + “<br></br>”;
};
}
How do you check browser support for server-sent events
if (typeof EventSource !== “undefined”) {
// Server-sent events supported. Let’s have some code here!
} else {
// No server-sent events supported
}
What are the events available for server sent events
onopen-It is used when a connection to the server is opened
onmessage-This event is used when a message is received
onerror-It happens when an error occurs
What are the main rules of promise
A promise is an object that supplies a standard-compliant .then() method
A pending promise may transition into either fulfilled or rejected state
A fulfilled or rejected promise is settled and it must not transition into any other state.
Once a promise is settled, the value must not change.
What is callback in callback
You can nest one callback inside in another callback to execute the actions sequentially one by one. This is known as callbacks in callbacks.
What is promise chaining
The process of executing a sequence of asynchronous tasks one after another using promises is known as Promise chaining.
What is promise.all
Promise.all is a promise that takes an array of promises as an input (an iterable), and it gets resolved when all the promises get resolved or any one of them gets rejected.
What is the purpose of the race method in promise
Promise.race() method will return the promise instance which is firstly resolved or rejected.
What is a strict mode in javascript
Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a “strict” operating context. This way it prevents certain actions from being taken and throws more exceptions.
Why do you need strict mode
Strict mode is useful to write “secure” JavaScript by notifying “bad syntax” into real errors. For example, it eliminates accidentally creating a global variable by throwing an error and also throws an error for assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object.
How do you declare strict mode
The strict mode is declared by adding “use strict”; to the beginning of a script or a function. If declared at the beginning of a script, it has global scope.
What is the purpose of double exclamation
The double exclamation or negation(!!) ensures the resulting type is a boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, it will be true.
What is the purpose of the delete operator
The delete keyword is used to delete the property as well as its value.
var user = { name: “John”, age: 20 };
delete user.age;
console.log(user); // {name: “John”}
What is typeof operator
You can use the JavaScript typeof operator to find the type of a JavaScript variable. It returns the type of a variable or an expression.
What is undefined property
The undefined property indicates that a variable has not been assigned a value, or declared but not initialized at all. The type of undefined value is undefined too.
What is null value
The value null represents the intentional absence of any object value. It is one of JavaScript’s primitive values. The type of null value is object. You can empty the variable by setting the value to null.
What is the difference between null and undefined
Type of null is object while Type of undefined is undefined.
Null Indicates the absence of a value for a variable while Type Indicates absence of variable itself.
Null- It is an assignment value which indicates that variable points to no object while Type-it is not an assignment value where a variable has been declared but has not yet been assigned a value.
What is eval
The eval() function evaluates JavaScript code represented as a string. The string can be a JavaScript expression, variable, statement, or sequence of statements.
What is the difference between window and document
A window is the root element level in any webpage while document is the direct child of the window object.
A window object is available implicitly in the page while document You can access it via window.document or document.
How do you access history in javascript
You can load previous and next URLs in the history using back() and next() methods.
function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}
How do you detect caps lock key turned on or not
The mouseEvent getModifierState() is used to return a boolean value that indicates whether the specified modifier key is activated or not.
What is isNaN
The isNaN() function is used to determine whether a value is an illegal number (Not-a-Number) or not.
This function returns true if the value equates to NaN. Otherwise it returns false.
isNaN(“Hello”); //true
isNaN(“100”); //false
What are the differences between undeclared and undefined variables
undeclared are variables do not exist in a programvariables declared in the program but have not assigned any value and are not declared while undefined.
What are global variables
Global variables are those that are available throughout the length of the code without any scope. The var keyword is used to declare a local variable but if you omit it then it will become global variable
msg = “Hello”; // var is missing, it becomes global variable
What are the problems with global variables
The problem with global variables is the conflict of variable names of local and global scope. It is also difficult to debug and test the code that relies on global variables.
What is NaN property
The NaN property is a global property that represents “Not-a-Number” value. i.e, It indicates that a value is not a legal number.
Math.sqrt(-1);
parseInt(“Hello”);
What is the purpose of isFinite function
The isFinite() function is used to determine whether a number is a finite, legal number. It returns false if the value is +infinity, -infinity, or NaN (Not-a-Number), otherwise it returns true.
What is an event flow
Event flow is the order in which event is received on the web page.
What is event bubbling
Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element.
What is event capturing
Event capturing is a type of event propagation where the event is first captured by the outermost element, and then successively triggers on the descendants (children) of the target element in the same nesting hierarchy till it reaches the innermost DOM element.
How do you submit a form using JavaScript
You can submit a form using document.forms[0].submit().
function submit() {
document.forms[0].submit();
}
How do you find operating system details
The window.navigator object contains information about the visitor’s browser OS details.
console.log(navigator.platform);
What is the difference between document load and DOMContentLoaded events
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for assets(stylesheets, images, and subframes) to finish loading. Whereas The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images).
What is the difference between native, host and user objects
Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification.
Host objects are objects provided by the browser or runtime environment (Node).
User objects are objects defined in the javascript code.
What are the tools or techniques used for debugging JavaScript code
Chrome Devtools
debugger statement
Good old console.log statement
What are the pros and cons of promises over callbacks
Pros:
-It avoids callback hell which is unreadable
-Easy to write sequential asynchronous code with .then()
-Easy to write parallel asynchronous code with Promise.all()
Cons:
-makes little complex code
-You need to load a polyfill if ES6 is not supportedns;
What is the difference between an attribute and a property
Attributes are defined on the HTML markup whereas properties are defined on the DOM.
What is same-origin policy
The same-origin policy is a policy that prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number.
What is the purpose of void 0
Void(0) is used to prevent the page from refreshing. This will be helpful to eliminate the unwanted side-effect, because it will return the undefined primitive value.
Is JavaScript a compiled or interpreted language
JavaScript is an interpreted language, not a compiled language. An interpreter in the browser reads over the JavaScript code, interprets each line, and runs it.
Is JavaScript a case-sensitive language
Yes, JavaScript is a case sensitive language. The language keywords, variables, function & object names, and any other identifiers must always be typed with a consistent capitalization of letters.
Is there any relation between Java and JavaScript
No, they are entirely two different programming languages and have nothing to do with each other. But both of them are Object Oriented Programming languages .
What are events
Events are “things” that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can react on these events.
Who created javascript
JavaScript was created by Brendan Eich in 1995 during his time at Netscape Communications.
What is the use of preventDefault method
The preventDefault() method cancels the event if it is cancelable, meaning that the default action or behaviour that belongs to the event will not occur.
What is the use of stopPropagation method
The stopPropagation method is used to stop the event from bubbling up the event chain.
What are the steps involved in return false usage
The return false statement in event handlers performs the below steps,
First it stops the browser’s default action or behaviour.
It prevents the event from propagating the DOM
Stops callback execution and returns immediately when called.
What is BOM
The Browser Object Model (BOM) allows JavaScript to “talk to” the browser. It consists of the objects navigator, history, screen, location and document which are children of the window.
What is the use of setTimeout
The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds.
What is the use of setInterval
The setInterval() method is used to call a function or evaluate an expression at specified intervals (in milliseconds).
Why is JavaScript treated as Single threaded
Because the language specification does not allow the programmer to write code so that the interpreter can run parts of it in parallel in multiple threads or processes.
What is an event delegation
Event delegation is a technique for listening to events where you delegate a parent element as the listener for all of the events that happen inside it.
What is ECMAScript
ECMAScript is the scripting language that forms the basis of JavaScript.
What is JSON
JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging. It is based on a subset of JavaScript language in the way objects are built in JavaScript.
What are the syntax rules of JSON
-The data is in name/value pairs
-The data is separated by commas
-Curly braces hold objects
-Square brackets hold arrays
What is the purpose JSON stringify
When sending data to a web server, the data has to be in a string format. You can achieve this by converting JSON object into a string using stringify() method.
How do you parse JSON string
When receiving the data from a web server, the data is always in a string format. But you can convert this string value to a javascript object using parse() method.
Why do you need JSON
Since JSON is text only, it can easily be sent to and from a server, and used as a data format by any programming language.
What are PWAs
Progressive web applications (PWAs) are a type of mobile app delivered through the web, built using common web technologies including HTML, CSS and JavaScript.
PWAs are deployed to servers, accessible through URLs, and indexed by search engines.
What is the purpose of clearTimeout method
The clearTimeout() function is used in javascript to clear the timeout which has been set by setTimeout()function before that.
What is the purpose of clearInterval method
The clearInterval() function is used in javascript to clear the interval which has been set by setInterval() function.
How do you redirect new page in javascript
you can redirect to a new page using the location property of window object.
function redirect() {
window.location.href = “newPage.html”;
}
How do you check whether a string contains a substring
String.prototype.includes method to test a string contains a substring.
use String.prototype.indexOf which returns the index of a substring.
using Regular expression’s test method(RegExp.test), which allows for testing for against regular expressions.
How do you validate an email in javascript
You can validate an email in javascript using regular expressions. It is recommended to do validations on the server side instead of the client side. Because the javascript can be disabled on the client side.
How do you get the current url with javascript
You can use window.location.href expression to get the current url path and you can use the same expression for updating the URL too.
You can also use document.URL for read-only purposes but this solution has issues in FF.
What are the various url properties of location object
href - The entire URL
protocol - The protocol of the URL
host - The hostname and port of the URL
hostname - The hostname of the URL
port - The port number in the URL
pathname - The path name of the URL
search - The query portion of the URL
hash - The anchor portion of the URL
How do get query string values in javascript
You can use URLSearchParams to get query string values in javascript.
const urlParams = new URLSearchParams(window.location.search);
const clientCode = urlParams.get(“clientCode”);
How do you check if a key exists in an object
Using in operator: You can use the in operator whether a key exists in an object or not.
You can use hasOwnProperty to particularly test for properties of the object instance (and not inherited properties).
Using undefined comparison: If you access a non-existing property from an object, the result is undefined.
How do you loop through or enumerate javascript object
You can use the for-in loop to loop through javascript object. You can also make sure that the key you get is an actual property of an object, and doesn’t come from the prototype using hasOwnProperty method.
How do you test for an empty object
You can use object entries length along with constructor type.
You can use object keys length along with constructor type.
You can use a for-in loop along with hasOwnProperty.
What is an arguments object
The arguments object is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
How do you display the current date in javascript
You can use new Date() to generate a new Date object containing the current date and time.
What are the pros and cons of for loop
PROS:
-Works on every environment
-You can use break and continue flow control statements
CONS:
-Too verbose
-Imperative
-You might face one-by-off errors
How do you make first letter of the string in an uppercase
You can create a function which uses a chain of string methods such as charAt, toUpperCase and slice methods to generate a string with the first letter in uppercase.
How do you compare two date objects
You need to use date.getTime() method to compare date values instead of comparison operators (==, !=, ===, and !== operators)
How do you check if a string starts with another string
You can use ECMAScript 6’s String.prototype.startsWith() method to check if a string starts with another string or not. But it is not yet supported in all browsers.
How do you trim a string in javascript
JavaScript provided a trim method on string types to trim any whitespaces present at the beginning or ending of the string.
” Hello World “.trim(); //Hello World
How do you add a key value pair in javascript
Using dot notation: This solution is useful when you know the name of the property
object.key3 = “value3”;
Using square bracket notation: This solution is useful when the name of the property is dynamically determined.
obj[“key3”] = “value3”;
Is the !– notation represents a special operator
No,that’s not a special operator. But it is a combination of 2 standard operators one after the other,
A logical not (!)
A prefix decrement (–)
How do you assign default values to variables
You can use the logical or operator || in an assignment expression to provide a default value. The syntax looks like as below,
var a = b || c;
How do you define multiline strings
You can define multiline string literals using the ‘' character followed by line terminator.
var str =
“This is a \
very lengthy \
sentence!”;
What is an app shell model
An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users’ screens, similar to what you see in native applications.
Can we define properties for functions
Yes, We can define properties for functions because functions are also objects.
fn = function (x) {
//Function code goes here
};
fn.name = “John”;
fn.profile = function (y) {
//Profile code goes here
};
What is the way to find the number of parameters expected by a function?
You can use function.length syntax to find the number of parameters expected by a function.
What is a polyfill?
A polyfill is a piece of JS code used to provide modern functionality on older browsers that do not natively support it.
What are break and continue statements?
The break statement is used to “jump out” of a loop. i.e, It breaks the loop and continues executing the code after the loop.
The continue statement is used to “jump over” one iteration in the loop. i.e, It breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
What are js labels?
The label statement allows us to name loops and blocks in JavaScript. We can then use these labels to refer back to the code later.
What are the benefits of keeping declarations at the top?
-Gives cleaner code
-It provides a single place to look for local variables
-Easy to avoid unwanted global variables
-It reduces the possibility of unwanted re-declarations
What are the benefits of initializing variables?
-It gives cleaner code
-It provides a single place to initialize variables
-Avoid undefined values in the code
What are the recommendations to create new object?
-Assign {} instead of new Object()
-Assign “” instead of new String()
-Assign 0 instead of new Number()
-Assign false instead of new Boolean()
-Assign [] instead of new Array()
-Assign /()/ instead of new RegExp()
-Assign function (){} instead of new Function()
How do you define JSON arrays?
JSON arrays are written inside square brackets and arrays contain javascript objects.
How do you generate random integers?
You can use Math.random() with Math.floor() to return random integers.
Can you write a random integers function to print integers with in a range?
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
randomInteger(1, 100); // returns a random integer from 1 to 100
randomInteger(1, 1000); // returns a random integer from 1 to 1000
What is tree shaking
Tree shaking is a form of dead code elimination in that unused modules will not be included in the bundle during the build process and for that it relies on the static structure of ES2015 module syntax.
What is the need of tree shaking
Tree Shaking can significantly reduce the code size in any application. i.e, The less code we send over the wire the more performant the application will be.
Is it recommended to use eval
No, it allows arbitrary code to be run which causes a security problem.
What is a Regular Expression
A regular expression is a sequence of characters that forms a search pattern. You can use this search pattern for searching data in a text.
What are the string methods available in Regular expression?
The search() method uses an expression to search for a match, and returns the position of the match.
The replace() method is used to return a modified string where the pattern is replaced.
What are modifiers in regular expression?
Modifiers can be used to perform case-insensitive and global searches.
i-Perform case-insensitive matching
g-Perform a global match rather than stops at first match
m-Perform multiline matching
What are regular expression patterns?
Brackets: These are used to find a range of characters.
Metacharacters: These are characters with a special meaning .
Quantifiers: These are useful to define quantities
What is a RegExp object?
RegExp object is a regular expression object with predefined properties and methods.
How do you search a string for a pattern?
You can use the test() method of regular expression in order to search a string for a pattern, and return true or false depending on the result.
What is the purpose of exec method?
The purpose of exec method is similar to test method but it executes a search for a match in a specified string and returns a result array, or null instead of returning true/false.
How do you change the style of a HTML element?
Using style property: You can modify inline style using style property.
Using ClassName property: It is easy to modify element class using className property.
What would be the result of 1+2+’3’?
What would be the result of 1+2+’3’
The output is going to be 33.
1 and 2 are numeric values, the result is going to be a numeric value 3. The next digit is a string type value;the addition of numeric value 3 and string type value 3 is just going to be a concatenation value 33.
What is a debugger statement?
The debugger statement invokes any available debugging functionality, such as setting a breakpoint. If no debugging functionality is available, this statement has no effect.
What is the purpose of breakpoints in debugging?
At each breakpoint, javascript will stop executing, and let you examine the JavaScript values. After examining values, you can resume the execution of code using the play button.
Can I use reserved words as identifiers?
No, you cannot use the reserved words as variables, labels, object or function names.
How do you detect a mobile browser?
You can use regex which returns a true or false value depending on whether or not the user is browsing with a mobile.
How do you detect a mobile browser without regexp?
You can detect mobile browsers by simply running through a list of devices and checking if the useragent matches anything.
How do you get the image width and height using JS?
var img = new Image();
img.onload = function () {
console.log(this.width + “x” + this.height);
};
img.src = “http://www.google.com/intl/en_ALL/images/logo.gif”;
How do you make synchronous HTTP request?
function httpGet(theUrl) {
var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.open(“GET”, theUrl, false); // false for synchronous request
xmlHttpReq.send(null);
return xmlHttpReq.responseText;
}
How do you make asynchronous HTTP request?
Browsers provide an XMLHttpRequest object which can be used to make asynchronous HTTP requests from JavaScript by passing the 3rd parameter as true.
How do you convert date to another timezone in javascript?
You can use the toLocaleString() method to convert dates in one timezone to another.
What are the properties used to get size of window?
You can use innerWidth, innerHeight, clientWidth, clientHeight properties of windows, document element and document body objects to find the size of a window.
What is a conditional operator in javascript?
The conditional (ternary) operator is the only JavaScript operator that takes three operands which acts as a shortcut for if statements.
Can you apply chaining on conditional operator?
Yes, you can apply chaining on conditional operators similar to if … else if … else if … else chain.
What are the ways to execute javascript after page load?
window.onload:
window.onload = function …
document.onload:
document.onload = function …
body onload:
<body>
</body>
What is the difference between proto and prototype?
The __proto__ object is the actual object that is used in the lookup chain to resolve methods, etc. Whereas prototype is the object that is used to build __proto__ when you create an object with new.
Give an example where do you really need semicolon?
It is recommended to use semicolons after every statement in JavaScript.
What is a freeze method?
The freeze() method is used to freeze an object.
Freezing an object does not allow adding new properties to an object,prevents from removing and prevents changing the enumerability, configurability, or writability of existing properties.
What is the purpose of freeze method?
-It is used for freezing objects and arrays.
-It is used to make an object immutable.
Why do I need to use freeze method?
An existing API contains certain elements that are not intended to be extended, modified, or re-used outside of their current context.
How do you detect a browser language preference?
You can use navigator object to detect a browser language preference.
How to convert string to title case with javascript?
function toTitleCase(str) {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();
});
}
toTitleCase(“good morning john”); // Good Morning John
How do you detect javascript disabled in the page?
You can use the <noscript> tag to detect javascript disabled or not. The code block inside <noscript> gets executed when JavaScript is disabled.</noscript></noscript>
What are various operators supported by javascript?
-Arithmetic Operators
-Comparison Operators
-Logical Operators
-Assignment Operators
-Ternary Operators
-typeof Operator
What is a rest parameter?
Rest parameter is an improved way to handle function parameters which allows us to represent an indefinite number of arguments as an array.
What happens if you do not use rest parameter as a last argument?
A SyntaxError is thrown stating that it has to be the last formal argument and the code is not executed.
What are the bitwise operators available in javascript?
-Bitwise AND ( & )
-Bitwise OR ( | )
-Bitwise XOR ( ^ )
-Bitwise NOT ( ~ )
-Left Shift ( «_space;)
-Sign Propagating Right Shift (»_space; )
-Zero fill Right Shift (»_space;> )
What is a spread operator?
Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.
How do you determine whether object is frozen or not?
Object.isFrozen() method is used to determine if an object is frozen or not.
How do you determine two values same or not using object?
The Object.is() method determines whether two values are the same value.
What is the purpose of using object is method?
-It is used for comparison of two strings.
-It is used for comparison of two numbers.
-It is used for comparing the polarity of two numbers.
-It is used for comparison of two objects.
How do you copy properties from one object to other?
You can use the Object.assign() method which is used to copy the values and properties from one or more source objects to a target object.
What are the applications of assign method?
-It is used for cloning an object.
-It is used to merge objects with the same properties.
What is a proxy object?
The Proxy object is used to define custom behavior for fundamental operations such as property lookup, assignment, enumeration, function invocation.
What is the purpose of seal method?
The Object.seal() method is used to seal an object, by preventing new properties from being added to it and marking all existing properties as non-configurable.
What are the applications of seal method?
-It is used for sealing objects and arrays.
-It is used to make an object immutable.
What are the differences between freeze and seal methods?
If an object is frozen using the Object.freeze() method then its properties become immutable and no changes can be made in them whereas if an object is sealed using the Object.seal() method then the changes can be made in the existing properties of the object.
How do you determine if an object is sealed or not?
The Object.isSealed() method is used to determine if an object is sealed or not.
How do you get enumerable key and value pairs?
The Object.entries() method is used to return an array of a given object’s own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for…in loop.
What is the main difference between Object.values and Object.entries method?
The Object.values() method’s behavior is similar to Object.entries() method but it returns an array of values instead [key,value] pairs.
How can you get the list of keys of any object?
You can use the Object.keys() method which is used to return an array of a given object’s own property names, in the same order as we get with a normal loop.
How do you create an object with prototype?
The Object.create() method is used to create a new object with the specified prototype object and properties. i.e, It uses an existing object as the prototype of the newly created object.
What is a WeakSet?
WeakSet is used to store a collection of weakly(weak references) held objects.
new WeakSet([iterable]);
What are the differences between WeakSet and Set?
The main difference is that references to objects in Set are strong while references to objects in WeakSet are weak.
An object in WeakSet can be garbage collected if there is no other reference to it.
List down the collection of methods available on WeakSet
-add(value): A new object is appended with the given value to the weakset
-delete(value): Deletes the value from the WeakSet collection.
-has(value): It returns true if the value is present in the WeakSet Collection, otherwise it returns false.
What is a WeakMap?
The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced.
What are the differences between WeakMap and Map?
The main difference is that references to key objects in Map are strong while references to key objects in WeakMap are weak.
Maps can store any key type Whereas WeakMaps can store only collections of key objects.
WeakMap does not have size property unlike Map.
List down the collection of methods available on WeakMap
-set(key, value): Sets the value for the key in the WeakMap object.
-delete(key): Removes any value associated to the key.
-has(key): Returns a Boolean asserting whether a value has been associated to the key in the WeakMap object or not.
-get(key): Returns the value associated to the key, or undefined if there is none.
What is the purpose of uneval?
The uneval() is an inbuilt function which is used to create a string representation of the source code of an Object.
How do you encode an URL?
The encodeURI() function is used to encode complete URI which has special characters except (, / ? : @ & = + $ #) characters.
How do you decode an URL?
The decodeURI() function is used to decode a Uniform Resource Identifier (URI) previously created by encodeURI().
How do you print the contents of web page?
The window object provided a print() method which is used to print the contents of the current window.
What is the difference between uneval and eval?
The uneval function returns the source of a given object; whereas the eval function does the opposite, by evaluating that source code in a different memory area.
What is an anonymous function?
An anonymous function is a function without a name!
Anonymous functions are commonly assigned to a variable name or used as a callback function.
What is the precedence order between local and global variables?
A local variable takes precedence over a global variable with the same name.
What are javascript accessors?
ECMAScript 5 introduced javascript object accessors or computed properties through getters and setters.
Getters uses the get keyword whereas Setters uses the set keyword.
How do you define property on Object constructor?
The Object.defineProperty() static method is used to define a new property directly on an object, or modify an existing property on an object, and returns the object.
What is the difference between get and defineProperty?
If you use get the property will be defined on the prototype of the object whereas using Object.defineProperty() the property will be defined on the instance it is applied to.
What are the advantages of Getters and Setters?
-provide simpler syntax
-used for defining computed properties, or accessors in JS.
-Useful to provide equivalence relation between properties and methods
-provide better data quality
-Useful for doing things behind the scenes with the encapsulated logic.
Can I add getters and setters using defineProperty method?
Yes, You can use the Object.defineProperty() method to add Getters and Setters.
What is the purpose of switch-case?
The switch case statement in JavaScript is used for decision making purposes.
What are the conventions to be followed for the usage of switch case?
-The expression can be of type either number or string.
-Duplicate values are not allowed for the expression.
-The default statement is optional.
-The break statement is used inside the switch to terminate a statement sequence.
What are primitive data types?
data that has has a primitive value (which has no properties or methods).
e.g string,number,boolean,null
What are the different ways to access object properties?
-Dot notation: objectName.property;
-Square brackets notation: objectName[“property”];
-Expression notation: objectName[expression];
What are the function parameter rules?
-The function definitions do not specify data types for parameters.
-Do not perform type checking on the passed arguments.
-Do not check the number of arguments received.
What is an error object?
An error object is a built in error object that provides error information when an error occurs.
When do you get a syntax error?
A SyntaxError is thrown if you try to evaluate code with a syntax error.
What are the different error names from error object?
-EvalError:An error has occurred in the eval() function
-RangeError:An error has occurred with a number “out of range”
-ReferenceError:An error due to an illegal reference
-SyntaxError-An error due to a syntax error
-URIError:An error due to encodeURI()
What are the various statements in error handling?
-try: used to test a block of code for errors
-catch: used to handle the error
-throw: used to create custom errors.
-finally: used to execute code after try and catch regardless of the result.
What is nodejs?
Node.js is a server-side platform built on Chrome’s JavaScript runtime for easily building fast and scalable network applications.
What are the two types of loops in javascript?
Entry Controlled loops:-the test condition is tested before entering the loop body.
Exit Controlled Loops:-he test condition is tested or evaluated at the end of the loop body.
What is an Intl object?
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.
How do you perform language specific date and time formatting?
You can use the Intl.DateTimeFormat object which is a constructor for objects that enable language-sensitive date and time formatting.
What is an Iterator?
An iterator is an object which defines a sequence and a return value upon its termination.
How does synchronous iteration works?
Synchronous iteration is a protocol that connects two groups of entities in JavaScript: Data sources: On one hand, data comes in all shapes and sizes.
What is an event loop?
The event loop is a process that continuously monitors both the call stack and the event queue and checks whether or not the call stack is empty.
What is call stack?
Call Stack is a data structure for javascript interpreters to keep track of function calls(creates execution context) in the program.
What is an event queue?
The event queue follows the queue data structure.
It stores async callbacks to be added to the call stack.
It is also known as the Callback Queue or Macrotask Queue.
What is a decorator?
A decorator is an expression that evaluates to a function and that takes the target, name, and decorator descriptor as arguments.
What are the properties of Intl object?
-Collator: objects that enable language-sensitive string comparison
-DateTimeFormat: objects that enable language-sensitive date and time formatting.
-ListFormat: objects that enable language-sensitive list formatting.
-NumberFormat: Objects that enable language-sensitive number formatting.
What is an Unary operator?
The unary(+) operator is used to convert a variable to a number.
If the variable cannot be converted, it will still become a number but with the value NaN.
How do you sort elements in an array?
The sort() method is used to sort the elements of an array in place and returns the sorted array.
What is the purpose of compareFunction while sorting array?
The compareFunction is used to define the sort order.
If omitted, the array elements are converted to strings, then sorted according to each character’s Unicode code point value.
How do you reverse an array?
You can use the reverse() method to reverse the elements in an array. This method is useful to sort an array in descending order.
How do you find min and max value in an array?
You can use Math.min and Math.max methods on array variables to find the minimum and maximum elements within an array.
How do you find min and max values without Math functions?
You can write functions which loop through an array comparing each value with the lowest value or highest value to find the min and max values.
What is an empty statement and purpose of it?
The empty statement is a semicolon (;) indicating that no statement will be executed, even if JavaScript syntax requires one.
it is useful when you want to create a loop that has an empty body.
How do you get metadata of a module?
You can use the import.meta object which is a meta-property exposing context-specific meta data to a JavaScript module.
What is a comma operator?
The comma operator is used to evaluate each of its operands from left to right and returns the value of the last operand.
What is the advantage of a comma operator?
It is used to include multiple expressions in a location that requires a single expression.
What is typescript?
TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript.
What are the differences between javascript and typescript?
Typescript is an OOP language while javacript is a scripting language.
Typescript supports static typing while javascript supports dynamic typing.
Typescript has interfaces concept while javascript does not support interfaces.
What are the advantages of typescript over javascript?
TypeScript is able to find compile time errors at the development time only and it makes sures less runtime errors. Whereas javascript is an interpreted language.
TypeScript supports static typing which allows for checking type correctness at compile time.
What is an object initializer?
An object initializer is an expression that describes the initialization of an Object.
What is a constructor method?
The constructor method is a special method for creating and initializing an object created within a class.
What happens if you write constructor more than once in a class?
If you write a constructor method more than once in a class it will throw a SyntaxError error.
How do you call the constructor of a parent class?
You can use the super keyword to call the constructor of a parent class.
How do you get the prototype of an object?
You can use the Object.getPrototypeOf(obj) method to return the prototype of the specified object.
What happens If I pass string type for getPrototype method?
It will throw a TypeError exception if the obj parameter isn’t an object.
How do you set prototype of one object to another?
You can use the Object.setPrototypeOf() method that sets the prototype of a specified object to another object or null.
How do you check whether an object can be extendable or not?
The Object.isExtensible() method is used to determine if an object is extendable or not.
Whether it can have new properties added to it or not.
How do you prevent an object to extend?
The Object.preventExtensions() method is used to prevent new properties from ever being added to an object.
What are the different ways to make an object non-extensible?
-Object.preventExtensions
-Object.seal
-Object.freeze
How do you define multiple properties on an object?
The Object.defineProperties() method is used to define new or modify existing properties directly on an object and returning the object.
What is MEAN in javascript?
open-source JavaScript software tech stack available for building dynamic web apps where you can write both the server-side and client-side halves of the web project entirely in JavaScript.
What Is Obfuscation in javascript?
Obfuscation is the deliberate act of creating obfuscated javascript code(i.e, source or machine code) that is difficult for humans to understand.
Why do you need Obfuscation?
-The Code size will be reduced. So data transfers between server and client will be fast.
-It hides the business logic from outside world and protects the code from others
-Reverse engineering is highly difficult
-The download time will be reduced
What is Minification?
Minification is the process of removing all unnecessary characters(empty spaces are removed) and variables will be renamed without changing it’s functionality.
What are the advantages of minification?
-Decreases loading times of a web page
-Saves bandwidth usages
What are the differences between Obfuscation and Encryption?
Obfuscation can be decoded without any key while Encryption a key to decode is required.
In Obfuscation the target data is converted to a complex form while in Encryption the target data format will be converted into an unreadable form.
What are the common tools used for minification?
-Google’s Closure Compiler
-UglifyJS2
-jsmin
-javascript-minifier.com/
-prettydiff.com
How do you perform form validation using javascript?
JavaScript can be used to perform HTML form validation.
If the form field is empty, the function needs to notify, and return false, to prevent the form being submitted.
How do you perform form validation without javascript?
The validation enabled by applying the required attribute to prevent form submission when the input is empty.
What are the DOM methods available for constraint validation?
-checkValidity(): It returns true if an input element contains valid data.
-setCustomValidity(): It is used to set the validationMessage property of an input element.
What are the available constraint validation DOM properties?
-validity: provides a list of boolean properties related to the validity of an input element.
-validationMessage: displays the message when the validity is false.
-willValidate: indicates if an input element will be validated or not.
What are the list of validity properties?
-customError: It returns true, if a custom validity message is set.
-patternMismatch: It returns true, if an element’s value does not match its pattern attribute.
-rangeOverflow: It returns true, if an element’s value is greater than its max attribute.
-rangeUnderflow: It returns true, if an element’s value is less than its min attribute
Give an example usage of rangeOverflow property
function myOverflowFunction() {
if (document.getElementById(“age”).validity.rangeOverflow) {
alert(“The mentioned age is not allowed”);
}
}
Is enums feature available in javascript?
No, javascript does not natively support enums.
What is an enum?
An enum is a type restricting variables to one value from a predefined set of constants.
JavaScript has no enums but typescript provides built-in enum support.
How do you list all properties of an object?
You can use the Object.getOwnPropertyNames() method which returns an array of all properties found directly in a given object.
How do you get property descriptors of an object?
You can use the Object.getOwnPropertyDescriptors() method which returns all own property descriptors of a given object.
What are the attributes provided by a property descriptor?
-value: The value associated with the property
-writable: Determines whether the value associated with the property can be changed or not
-configurable: Returns true if the type of this property descriptor can be changed
-set: A function which serves as a setter for the property
-get: A function which serves as a getter for the property
How do you extend classes?
The extends keyword is used in class declarations/expressions to create a class which is a child of another class.
How do I modify the url without reloading the page?
The history.pushState() and history.replaceState() methods, allow you to add and modify history entries, respectively.
How do you check whether an array includes a particular value or not?
The Array#includes() method is used to determine whether an array includes a particular value among its entries by returning either true or false.
How do you compare scalar arrays?
You can use length and every method of arrays to compare two scalar(compared directly using ===) arrays.
How to get the value from get parameters?
The new URL() object accepts the url string and searchParams property of this object can be used to access the get parameters.
How do you print numbers with commas as thousand separators?
You can use the Number.prototype.toLocaleString() method which returns a string with a language-sensitive representation.
What is the difference between java and javascript?
Java is an OOP language while Javascript is a prototype based language.
Java is block scoped while Javascript is function-scoped.
Java is thread based while javascript is event based.
Does JavaScript supports namespace?
JavaScript doesn’t support namespace by default.
If you create any element(function, method, object, variable) then it becomes global and pollutes the global namespace.
How do you declare namespace?
-Using Object Literal Notation
-Using IIFE (Immediately invoked function expression)
-Using a block and a let/const declaration
How do you invoke javascript code in an iframe from parent page?
Initially iFrame needs to be accessed using either document.getElementBy or window.frames.
After that contentWindow property of iFrame gives the access for targetFunction
How do get the timezone offset from date?
You can use the getTimezoneOffset method of the date object.
How do you load CSS and JS files dynamically?
You can create both link and script elements in the DOM and append them as child to head tag.
What are the different methods to find HTML elements in DOM?
-document.getElementById(id): It finds an element by Id
document.getElementsByTagName(name): It finds an element by tag name
document.getElementsByClassName(name): It finds an element by class name
What is jQuery?
a popular cross-browser JavaScript library that provides Document Object Model (DOM) traversal, event handling, animations and AJAX interactions by minimizing the discrepancies across browsers.
What is V8 JavaScript engine?
V8 is an open source high-performance JavaScript engine used by the Google Chrome browser, written in C++.
Why do we call javascript as dynamic language?
JavaScript is a loosely typed or a dynamic language because variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned/reassigned with values of all types.
What is a void operator?
The void operator evaluates the given expression and then returns undefined(i.e, without returning value).
How to set the cursor to wait?
The cursor can be set to wait in JavaScript by using the property “cursor”.
function myFunction() {
window.document.body.style.cursor = “wait”;
}
How do you create an infinite loop?
You can create infinite loops using for and while loops without using any expressions.
for (;;) {}
while (true) {}
Why do you need to avoid with statement?
by reducing the need to repeat a lengthy object reference without performance penalty.
What is the output of below for loops?
for (var i = 0; i < 4; i++) {
// global scope
setTimeout(() => console.log(i));
}
for (let i = 0; i < 4; i++) {
// block scope
setTimeout(() => console.log(i));
}
4 4 4 4 and 0 1 2 3
Due to the event queue/loop of javascript, the setTimeout callback function is called after the loop has been executed.
List down some of the features of ES6?
-Support for constants or immutable variables
-Block-scope support for variables, constants and functions
-Arrow functions
-Default parameters
-Rest and Spread Parameters
-Template Literals
-Multi-line Strings
What is ES6
ES6 is the sixth edition of the javascript language and it was released in June 2015.
Can I redeclare let and const variables?
you cannot redeclare let and const variables.
The variable declaration with var keyword refers to a function scope and the variable is treated as if it were declared at the top of the enclosing scope due to hoisting feature.
Is const variable makes the value immutable?
No, the const variable doesn’t make the value immutable. But it disallows subsequent assignments.
What are default parameters?
Default function parameters feature allows parameters to be initialized with default values if no value or undefined is passed.
What are template literals?
Template literals or template strings are string literals allowing embedded expressions.
These are enclosed by the back-tick (`) character instead of double or single quotes.
How do you write multi-line strings in template literals?
use newline escape characters(‘\n’) and concatenation symbols(+) in order to get multi-line strings.
What are nesting templates?
The nesting template is a feature supported within template literals syntax to allow inner backticks inside a placeholder ${ } within the template.
What are tagged templates?
The advanced form of templates in which tags allow you to parse template literals with a function.
What are raw strings?
The raw strings feature allows you to access the raw strings as they were entered, without processing escape sequences.
What is destructuring assignment?
The destructuring assignment is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables.
What are default values in destructuring assignment?
A variable can be assigned a default value when the value unpacked from the array or object is undefined during destructuring assignment.
How do you swap variables in destructuring assignment?
using a destructuring feature, two variable values can be swapped in one destructuring expression.
What are enhanced object literals?
Object literals make it easy to quickly create objects with properties inside the curly braces.
What are dynamic imports?
The dynamic imports using import() function syntax allows us to load modules on demand by using promises or the async/await syntax.
What are the use cases for dynamic imports?
-Import a module on-demand or conditionally.
-Compute the module specifier at runtime.
What are typed arrays?
Typed arrays are array-like objects from ECMAScript 6 API for handling binary data.
What are the advantages of module loaders?
-Dynamic loading
-State isolation
-Global namespace isolation
-Compilation hooks
-Nested virtualization
What is collation?
Collation is used for sorting a set of strings and searching within a set of strings. It is parameterized by locale and aware of Unicode.
What is for…of statement?
The for…of statement creates a loop iterating over iterable objects or elements such as built-in String, Array, Array-like objects , TypedArray, Map, Set, and user-defined iterables.
What is the output of below spread operator array?
[…“John Resig”];
The output of the array is [‘J’, ‘o’, ‘h’, ‘n’, ‘’, ‘R’, ‘e’, ‘s’, ‘i’, ‘g’]
The string is an iterable type and the spread operator within an array maps every character of an iterable to one element.
Is PostMessage secure?
Yes, postMessages can be considered very secure as long as the programmer/developer is careful about checking the origin and source of an arriving message.
What are the problems with postmessage target origin as wildcard?
if the data sent through postMessage() are not intended to be public, an attacker could leverage this issue to capture sensitive data from a target web application.
How do you avoid receiving postMessages from attackers?
By validating the origin of the message on the receiver’s end using the “message.origin” attribute.
Can I avoid using postMessages completely?
You cannot avoid using postMessages completely.
Even though your application doesn’t use postMessage considering the risks, a lot of third party scripts use postMessage to communicate with the third party service.
Is postMessages synchronous?
The postMessages are synchronous in IE8 browser but they are asynchronous in IE9 and all other modern browsers .
What paradigm is Javascript?
JavaScript is a multi-paradigm language, supporting imperative/procedural programming, Object-Oriented Programming and functional programming.
What is the difference between internal and external javascript?
Internal JavaScript: It is the source code within the script tag.
External JavaScript: The source code is stored in an external file(stored with .js extension) and referred with in the tag.
Is JavaScript faster than server side script?
Yes, JavaScript is faster than server side scripts. Because JavaScript is a client-side script it does not require any web server’s help for its computation or calculation.
How do you get the status of a checkbox?
You can apply the checked property on the selected checkbox in the DOM. If the value is true it means the checkbox is checked, otherwise it is unchecked.
What is the purpose of double tilde operator?
The double tilde operator(~~) is known as double NOT bitwise operator. This operator is a slightly quicker substitute for Math.floor().
How do you convert character to ASCII code?
You can use the String.prototype.charCodeAt() method to convert string characters to ASCII numbers.
What is ArrayBuffer?
An ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer.
What is the output of below string expression?
console.log(“Welcome to JS world”[0]);
The output of the above expression is “W”.
The bracket notation with specific index on a string returns the character at a specific location. Hence, it returns the character “W” of the string.
What is the purpose of Error object?
The Error constructor creates an error object and the instances of error objects are thrown when runtime errors occur.
The Error object can also be used as a base object for user-defined exceptions.
What is the purpose of EvalError object?
The EvalError object indicates an error regarding the global eval() function.
What are the list of cases error thrown from non-strict mode to strict mode?
-Using with statement
-When you use delete operator on a variable name
-Using eval or arguments as variable or function argument name
-When you use newly reserved keywords
-When you declare a function in a block
Do all objects have prototypes?
No. All objects have prototypes except for the base object which is created by the user, or an object that is created using the new keyword.
What is the difference between a parameter and an argument?
Parameter is the variable name of a function definition whereas an argument represents the value given to a function when it is invoked.
What is the purpose of some method in arrays?
The some() method is used to test whether at least one element in the array passes the test implemented by the provided function. The method returns a boolean value.
How do you combine two or more arrays?
The concat() method is used to join two or more arrays by returning a new array containing all the elements.
What is the difference between Shallow and Deep copy?
Shallow copy is a bitwise copy of an object. A new object is created that has an exact copy of the values in the original object.
A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.
How do you create specific number of copies of a string?
The repeat() method is used to construct and return a new string which contains the specified number of copies of the string on which it was called, concatenated together.
How do you return all matching strings against a regular expression?
The matchAll() method can be used to return an iterator of all results matching a string against a regular expression.
How do you trim a string at the beginning or ending?
if you want to trim especially at the beginning or ending of the string then you can use trimStart/trimLeft and trimEnd/trimRight methods.
What is the output of below console statement with unary operator?
console.log(+”Hello”);
The output is NaN.
Because the element is prefixed by the unary operator and the JavaScript interpreter will try to convert that element into a number type.
Does javascript uses mixins?
Mixin is a generic object-oriented programming term - is a class containing methods that can be used by other classes without a need to inherit from it. In JavaScript we can only inherit from a single object.
What is a thunk function?
A thunk is just a function which delays the evaluation of the value. It doesn’t take any arguments but gives the value whenever you invoke the thunk.
What are asynchronous thunks?
The asynchronous thunks are useful to make network requests.
What is the output of below function calls?
const circle = {
radius: 20,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius,
};
console.log(circle.diameter());
console.log(circle.perimeter());
The output is 40 and NaN.
The this keyword of a regular function(i.e, diameter) refers to the surrounding scope which is a class(i.e, Shape object). Whereas this keyword of perimeter function refers to the surrounding scope which is a window object.
How to remove all line breaks from a string?
The easiest approach is using regular expressions to detect and replace newlines in the string.
What is the difference between reflow and repaint?
A repaint occurs when changes are made which affect the visibility of an element, but not its layout.
A reflow involves changes that affect the layout of a portion of the page (or the whole page).
What happens with negating an array?
Negating an array with ! character will coerce the array into a boolean. Since Arrays are considered to be truthy So negating it will return false.
What happens if we add two arrays?
If you add two arrays together, it will convert them both to strings and concatenate them.
What is the output of prepend additive operator on falsy values?
If you prepend the additive(+) operator on falsy values(null, undefined, NaN, false, “”), the falsy value converts to a number value zero.
How do you create self string using special characters?
How do you remove falsy values from an array?
You can apply the filter method on the array by passing Boolean as a parameter. This way it removes all falsy values(0, undefined, null, false and “”) from the array.
How do you get unique values of an array?
You can get unique values of an array with the combination of Set and rest expression/spread(…) syntax.
What is destructuring aliases?
a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables.
How do you map the array values without using map method?
You can map the array values without using the map method by just using the from method of Array.
How do you empty an array?
You can empty an array quickly by setting the array length to zero.
let cities = [“Singapore”, “Delhi”, “London”];
cities.length = 0; // cities becomes []
How do you rounding numbers to certain decimals?
You can round numbers to a certain number of decimals using toFixed method from native javascript.
What is the easiest way to convert an array to an object?
You can convert an array to an object with the same data using spread(…) operator.
How do you create an array with some data?
You can create an array with some data or an array with the same values using fill method.
What are the placeholders from console object?
%o — It takes an object,
%s — It takes a string,
%d — It is used for a decimal or integer
Is it possible to add CSS to console messages?
Yes, you can apply CSS styles to console messages similar to html text on the web page.
console.log(
“%c The text has blue color, with large font and red background”,
“color: blue; font-size: x-large; background: red”
);
What is the purpose of dir method of console object?
The console.dir() is used to display an interactive list of the properties of the specified JavaScript object as JSON.
Is it possible to debug HTML elements in console?
Yes, it is possible to get and debug HTML elements in the console just like inspecting elements.
const element = document.getElementsByTagName(“body”)[0];
console.log(element);
How do you display data in a tabular format using console object?
The console.table() is used to display data in the console in a tabular format to visualize complex arrays or objects.
How do you verify that an argument is a Number or not?
The combination of IsNaN and isFinite methods are used to confirm whether an argument is a number or not.
How do you create copy to clipboard button?
You need to select the content(using .select() method) of the input element and execute the copy command with execCommand (i.e, execCommand(‘copy’)).
What is the shortcut to get timestamp?
You can use new Date().getTime() to get the current timestamp.
console.log(+new Date());
console.log(Date.now());
How do you flattening multi dimensional arrays?
Flattening bi-dimensional arrays is trivial with Spread operator.
But you can make it work with multi-dimensional arrays by recursive calls.
Also you can use the flat method of Array.
What is the easiest multi condition checking?
You can use indexOf to compare input with multiple values instead of checking each value as one condition.
How do you capture browser back button?
The beforeunload event is triggered when the window, the document and its resources are about to be unloaded. This event is helpful to warn users about losing the current data and detect back button event.
How do you disable right click in the web page?
The right click on the page can be disabled by returning false from the oncontextmenu attribute on the body element.
<body></body>
What are wrapper objects?
Primitive Values like string,number and boolean don’t have properties and methods but they are temporarily converted or coerced to an object(Wrapper object) when you try to perform actions on them.
What is AJAX?
AJAX stands for Asynchronous JavaScript and XML and it is a group of related technologies(HTML, CSS, JavaScript, XMLHttpRequest API etc) used to display data asynchronously.
What are the different ways to deal with Asynchronous Code?
-Callbacks
-Promises
-Async/await
-Third-party libraries such as async.js,bluebird
How to cancel a fetch request?
The basic flow of cancelling a fetch request;
-Create an AbortController instance
-Get the signal property of an instance and pass the signal as a fetch option for signal
-Call the AbortController’s abort property to cancel all fetches that use that signal.
What is web speech API?
Web speech API is used to enable modern browsers recognize and synthesize speech.
What is minimum timeout throttling?
Throttling is used to call a function after every millisecond or a particular interval of time only the first click is executed immediately.
How do you implement zero timeout in modern browsers?
You can’t use setTimeout(fn, 0) to execute the code immediately due to minimum delay of greater than 0ms. But you can use window.postMessage() to achieve this behavior.
What are tasks in event loop?
A task is any javascript program which is scheduled to be run by the standard mechanisms such as initially starting to run a program, run an event callback, or an interval or timeout being fired.
What is microtask?
Microtask is the javascript code which needs to be executed immediately after the currently executing task/microtask is completed.
What are different event loops?
The Browser Event Loop is used in client-side JavaScript applications and is responsible for handling events that occur within the browser environment.
- The Node.js Event Loop is used in server-side JavaScript applications and is responsible for handling events that occur within the Node.js runtime environment.
What is the purpose of queueMicrotask?
The queueMicrotask function is used to schedule a microtask, which is a function that will be executed asynchronously in the microtask queue.
How do you use javascript libraries in typescript file
if you want to use libraries or frameworks in our TypeScript files without getting compilation errors, the only solution is declare keyword along with a variable declaration.
What are the differences between promises and observables?
Promises omit a single value at a time while observables emit multiple values over a period of time.
Promises are eager in nature while observables are lazy in nature.
Promises cannot be cancelled while observables can be Canceled by using unsubscribe() method.
What is heap?
Heap(Or memory heap) is the memory location where objects are stored when we define variables.
What is an event table?
Event Table is a data structure that stores and keeps track of all the events which will be executed asynchronously like after some time interval or after the resolution of some API requests.
What is a microTask queue?
Microtask Queue is the new queue where all the tasks initiated by promise objects get processed before the callback queue.
What is the difference between shim and polyfill?
A shim is a library that brings a new API to an older environment, using only the means of that environment.
Whereas polyfill is a piece of code that provides the technology that you, the developer, expect the browser to provide natively.
How do you detect primitive or non primitive value type?
If the value is a primitive data type, the Object constructor creates a new wrapper object for the value. But If the value is a non-primitive data type (an object), the Object constructor will give the same object.
What is babel?
Babel is a JavaScript transpiler to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
Is Node.js completely single threaded?
Node is a single thread, but some of the functions included in the Node.js standard library(e.g, fs module functions) are not single threaded.
What are the common use cases of observables?
Some of the most common use cases of observables are web sockets with push notifications, user input changes, repeating intervals.
What is RxJS?
RxJS (Reactive Extensions for JavaScript) is a library for implementing reactive programming using observables that makes it easier to compose asynchronous or callback-based code.
What is the difference between Function constructor and function declaration?
The functions which are created with Function constructor do not create closures to their creation contexts but they are always created in the global scope.
Whereas function declarations can access outer function variables(closures) too.
What is a Short circuit condition?
Short circuit conditions are meant for condensed way of writing simple if statements.
What is the easiest way to resize an array?
The length property of an array is useful to resize or empty an array quickly.
What is an observable?
An Observable is basically a function that can return a stream of values either synchronously or asynchronously to an observer over time.
What is the difference between function and class declarations?
The main difference between function declarations and class declarations is hoisting. The function declarations are hoisted but not class declarations.
What is an async function?
An async function is a function declared with the async keyword which enables asynchronous, promise-based behavior to be written in a cleaner style by avoiding promise chains.
How do you prevent promises swallowing errors?
-Add catch block at the end of each chain
-Add done method
-Extend ES6 Promises by Bluebird
What is deno?
Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 JavaScript engine and the Rust programming language.
How do you make an object iterable in javascript?
you can make the object iterable by defining a Symbol.iterator property on it.
What is a Proper Tail Call?
a technique where the program or code will not create additional stack frames for a recursion when the function call is a tail call.
How do you check an object is a promise or not?
If you don’t know if a value is a promise or not, wrapping the value as Promise.resolve(value) which returns a promise.
How to detect if a function is called as constructor?
You can use new.target pseudo-property to detect whether a function was called as a constructor(using the new operator) or as a regular function call.
What are the differences between arguments object and rest parameter?
-The arguments object is an array-like but not an array. Whereas the rest parameters are array instances.
-The arguments object does not support methods such as sort, map, forEach, or pop. Whereas these methods can be used in rest parameters.
What are the differences between spread operator and rest parameter?
Rest parameter collects all remaining elements into an array. Whereas Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.
What are the different kinds of generators?
-Generator function declaration
-Generator function expressions
-Generator method definitions in object literals
-Generator method definitions in class
-Generator as a computed property
What are the built-in iterables?
-Arrays and TypedArrays
-Strings: Iterate over each character or Unicode code-points
-Maps: iterate over its key-value pairs
-Sets: iterates over their elements
What are the differences between for…of and for…in statements?
-for..in iterates over all enumerable property keys of an object
-for..of iterates over the values of an iterable object.
How do you define instance and non-instance properties?
The Instance properties must be defined inside of class methods while But Static(class) and prototype data properties must be defined outside of the ClassBody declaration.
What is the difference between isNaN and Number.isNaN?
-The global function isNaN converts the argument to a Number and returns true if the resulting value is NaN.
-Number.isNaN: This method does not convert the argument. But it returns true when the type is a Number and value is NaN.
How to invoke an IIFE without any extra brackets?
Immediately Invoked Function Expressions(IIFE) requires a pair of parenthesis to wrap the function which contains set of statements.
Is that possible to use expressions in switch cases?
it is possible to use for switch cases by assigning true value for the switch condition.
What is the easiest way to ignore promise errors?
The easiest and safest way to ignore promise errors is void that error.
await promise.catch((e) => void e);
How do style the console output using CSS?
You can add CSS styling to the console output using the CSS format content specifier %c. The console string message can be appended after the specifier and CSS style in another argument.
What is nullish coalescing operator (??)?
It is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
How do you group and nest console output?
The console.group() can be used to group related log messages to be able to easily read the logs and use console.groupEnd()to close the group.
What is the difference between dense and sparse arrays?
An array contains items at each index starting from first(0) to last(array.length - 1) is called as Dense array. Whereas if at least one item is missing at any index, the array is called as sparse.
What are the different ways to create sparse arrays?
-Array literal: Omit a value when using the array literal
-Array() constructor: Invoking Array(length) or new Array(length).
-Delete operator: Using delete array[index] operator on the array.
-Increase length property: Increasing length property of an array
What is the difference between setTimeout, setImmediate and process.nextTick?
-setTimeout() is to schedule execution of a one-time callback after delay milliseconds
-setImmediate function is used to execute a function right after the current event loop finishes.
-If process.nextTick() is called in a given phase, all the callbacks passed to process.nextTick() will be resolved before the event loop continues.
How do you reverse an array without modifying original array?
-invoke the slice() method on the array to create a shallow copy followed by reverse() method call on the copy.
-use the spread syntax (…) to create a copy of the array followed by reverse() method call on the copy.
How do you create custom HTML element?
First you need to define some custom class by extending HTMLElement class. After that define your component properties (styles,text etc) using connectedCallback method.
What is global execution context?
The global execution context is the default or first execution context that is created by the JavaScript engine before any code is executed.
What is function execution context?
When a function is invoked, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context to evaluate and execute the code within that function.
What is debouncing?
Debouncing is a programming pattern that allows delaying execution of some piece of code until a specified time to avoid unnecessary CPU cycles, API calls and improve performance.
What is throttling?
Throttling is a technique used to limit the execution of an event handler function, even when this event triggers continuously due to user actions
What is optional chaining?
the optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid.
What is an environment record?
a specification type used to define the association of Identifiers to specific variables and functions, based upon the lexical nesting structure of ECMAScript code.
How to verify if a variable is an array?
-The Array.isArray(value) utility function is used to determine whether value is an array or not.
-The instanceof operator is used to check the type of an array at run time. It returns true if the type of a variable is an Array other false for other type.
What is pass by value and pass by reference?
Pass-by-value creates a new space in memory and makes a copy of a value.
Pass by reference doesn’t create a new space in memory but the new variable adopts a memory address of an initial variable.
What are the differences between primitives and non-primitives?
-Primitives are immutable while non primitives are mutable.
-Primitives are compared by value while non primitives are compared by reference.
-Primitives are stored in stack while non primitives are created in heap.
How do you create your own bind method using either call or apply method?
The function which is going to bind using custom myOwnBind method act as the attached function(boundTargetFunction) and argument as the object for apply method call.
What are the differences between pure and impure functions?
-Pure function has no side effects while impure function causes side effects.
-Pure function always returns the same result while impure function returns different results in each call.
What is referential transparency?
An expression in javascript that can be replaced by its value without affecting the behaviour of the program is called referential transparency.
What are the possible side-effects in javascript?
-DOM manipulations
-Mutating the input data
-Printing to a screen or console: For example, console.log() and alert()
-Fetching the current time
What are compose and pipe functions?
The “compose” and “pipe” are two techniques commonly used in functional programming to simplify complex operations and make code more readable.
What is module pattern?
Module pattern is a designed pattern used to wrap a set of variables and functions together in a single scope returned as an object.
What is Function Composition?
It is an approach where the result of one function is passed on to the next function, which is passed to another until the final function is executed for the final result.
How to use await outside of async function prior to ES2022?
await Promise.resolve(console.log(“Hello await”)); // SyntaxError: await is only valid in async function
What is the output of below code?
var car = new Vehicle(“Honda”, “white”, “2010”, “UK”);
console.log(car);
function Vehicle(model, color, year, country) {
this.model = model;
this.color = color;
this.year = year;
this.country = country;
}
{model: “Honda”, color: “white”, year: “2010”, country: “UK”}
The function declarations are hoisted similar to any variables. So the placement for Vehicle function declaration doesn’t make any difference.
What is the output of below code?
function foo() {
let x = (y = 0);
x++;
y++;
return x;
}
console.log(foo(), typeof x, typeof y);
1, undefined and number
the return value of foo() is 1 due to the increment operator. But the statement let x = y = 0 declares a local variable x. Whereas y declared as a global variable accidentally.
What is the output of below code?
function main() {
console.log(“A”);
setTimeout(function print() {
console.log(“B”);
}, 0);
console.log(“C”);
}
main();
A, C and B
The statements order is based on the event loop mechanism.
What is the output of below equality check?
console.log(0.1 + 0.2 === 0.3);
false
Since the floating point numbers are encoded in binary format, the addition operations on them lead to rounding errors.
What is the output of below code?
var y = 1;
if (function f() {}) {
y += typeof f;
}
console.log(y);
1undefined
You can see function expression instead function declaration inside if statement. So it always returns true.
What is the output of below code?
function foo() {
return;
{
message: “Hello World”;
}
}
console.log(foo());
Undefined
if there are any statements(in this case, return) missing semicolon, it is automatically inserted immediately. Hence, the function returned as undefined.
What is the output of below code?
var myChars = [“a”, “b”, “c”, “d”];
delete myChars[0];
console.log(myChars);
console.log(myChars[0]);
console.log(myChars.length);
[empty, ‘b’, ‘c’, ‘d’], undefined, 4
The delete operator will delete the object property but it will not reindex the array or change its length.
What is the output of below code in latest Chrome?
var array1 = new Array(3);
console.log(array1);
var array2 = [];
array2[2] = 100;
console.log(array2);
var array3 = [, , ,];
console.log(array3);
[empty × 3], [empty × 2, 100], [empty × 3]
The latest chrome versions display sparse array(they are filled with holes) using this empty x n notation.
What is the output of below code?
const obj = {
prop1: function () {
return 0;
},
prop2() {
return 1;
},
“prop” + 3 {
return 2;
},
};
console.log(obj.prop1());
console.log(obj.prop2());
console.log(obj.prop3());
0, 1, 2
both prop2 and prop3 are treated as regular function values.
What is the output of below code?
console.log(1 < 2 < 3);
console.log(3 > 2 > 1);
true, false
The important point is that if the statement contains the same operators(e.g, < or >) then it can be evaluated from left to right.
What is the output of below code in non-strict mode?
function printNumbers(first, second, first) {
console.log(first, second, first);
}
printNumbers(1, 2, 3);
3, 2, 3
In non-strict mode, the regular JavaScript functions allow duplicate named parameters.
What is the output of below code?
const printNumbersArrow = (first, second, first) => {
console.log(first, second, first);
};
printNumbersArrow(1, 2, 3);
SyntaxError: Duplicate parameter name not allowed in this context
the arrow functions doesn’t not allow duplicate parameters in either strict or non-strict mode.
What is the output of below code?
const arrowFunc = () => arguments.length;
console.log(arrowFunc(1, 2, 3));
ReferenceError: arguments is not defined
Arrow functions do not have an arguments, super, this, or new.target bindings.
What is the output of below code?
console.log(String.prototype.trimLeft.name === “trimLeft”);
console.log(String.prototype.trimLeft.name === “trimStart”);
False, True
In order to be consistent with functions like String.prototype.padStart, the standard method name for trimming the whitespaces is considered as trimStart.
What is the output of below code?
console.log(Math.max());
-Infinity
hen no arguments are provided, -Infinity is going to be returned.
What is the output of below code?
console.log(10 == [10]);
console.log(10 == [[[[[[[10]]]]]]]);
True, True
What is the output of below code?
console.log(10 + “10”);
console.log(10 - “10”);
1010, 0
The concatenation operator(+) is applicable for both number and string types. So if any operand is string type then both operands concatenated as strings.
What is the output of below code?
console.log([0] == false);
if ([0]) {
console.log(“I’m True”);
} else {
console.log(“I’m False”);
}
True, I’m True
In comparison operators, the expression [0] converted to Number([0].valueOf().toString()) which is resolved to false. Whereas [0] just becomes a truthy value .
What is the output of below code?
console.log([1, 2] + [3, 4]);
1,23,4
The + operator is not meant or defined for arrays. So it converts arrays into strings and concatenates them.
What is the output of below code?
const numbers = new Set([1, 1, 2, 3, 4]);
console.log(numbers);
const browser = new Set(“Firefox”);
console.log(browser);
{1, 2, 3, 4}, {“F”, “i”, “r”, “e”, “f”, “o”, “x”}
Since Set object is a collection of unique values, it won’t allow duplicate values in the collection.
What is the output of below code?
console.log(NaN === NaN);
False
NaNs are never equal for floating-point numbers.
What is the output of below code?
let numbers = [1, 2, 3, 4, NaN];
console.log(numbers.indexOf(NaN));
-1
The indexOf uses strict equality operator(===) internally and NaN === NaN evaluates to false. Since indexOf won’t be able to find NaN inside an array, it returns -1 always.
What is the output of below code?
let [a, …b,] = [1, 2, 3, 4, 5];
console.log(a, b);
SyntaxError
When using rest parameters, trailing commas are not allowed and will throw a SyntaxError.
What is the output of below code?
async function func() {
return 10;
}
console.log(func());
Promise {<fulfilled>: 10}</fulfilled>
Async functions always return a promise. But even if the return value of an async function is not explicitly a promise, it will be implicitly wrapped in a promise.
What is the output of below code?
async function func() {
await 10;
}
console.log(func());
Promise {<resolved>: undefined}</resolved>
In this case, there is no return expression at the end of the function. Hence, the default return value of undefined is returned as the resolution of the promise.
What is the output of below code
function delay() {
return new Promise(resolve => setTimeout(resolve, 2000));
}
async function delayedLog(item) {
await delay();
console.log(item);
}
async function processArray(array) {
array.forEach(item => {
await delayedLog(item);
})
}
processArray([1, 2, 3, 4]);
SyntaxError
If you use await inside a synchronous function then it throws a syntax error.
What is the output of below code?
function delay() {
return new Promise((resolve) => setTimeout(resolve, 2000));
}
async function delayedLog(item) {
await delay();
console.log(item);
}
async function process(array) {
array.forEach(async (item) => {
await delayedLog(item);
});
console.log(“Process completed!”);
}
process([1, 2, 3, 5]);
Process completed! and 1 2 3 5
The forEach method will not wait until all items are finished but it just runs the tasks and goes next. Hence, the last statement is displayed first followed by a sequence of promise resolutions.
What is the output of below code?
var set = new Set();
set.add(“+0”).add(“-0”).add(NaN).add(undefined).add(NaN);
console.log(set);
Set(4) {“+0”, “-0”, NaN, undefined}
All NaN values are equal
Both +0 and -0 considered as different values.
What is the output of below code?
const sym1 = Symbol(“one”);
const sym2 = Symbol(“one”);
const sym3 = Symbol.for(“two”);
const sym4 = Symbol.for(“two”);
console.log(sym1 === sym2, sym3 === sym4);
false, true
Every symbol value returned from Symbol() is unique irrespective of the optional string
What is the output of below code?
const sym1 = new Symbol(“one”);
console.log(sym1);
SyntaxError
Symbol is a just a standard function and not an object constructor.
What is the output of below code?
let myNumber = 100;
let myString = “100”;
if (!typeof myNumber === “string”) {
console.log(“It is not a string!”);
} else {
console.log(“It is a string!”);
}
if (!typeof myString === “number”) {
console.log(“It is not a number!”);
} else {
console.log(“It is a number!”);
}
It is a string!, It is a number!
The return value of typeof myNumber or typeof myString is always a truthy value (either “number” or “string”).
What is the output of below code?
console.log(
JSON.stringify({ myArray: [“one”, undefined, function () {}, Symbol(“”)] })
);
console.log(
JSON.stringify({ [Symbol.for(“one”)]: “one” }, [Symbol.for(“one”)])
);
{“myArray”:[‘one’, null,null,null]}, {}
All Symbol-keyed properties will be completely ignored. Hence it returns an empty object({}).
What is the output of below code?
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A();
new B();
A, B
Using constructors, new.target refers to the constructor (points to the class definition of class which is initialized) that was directly invoked by new.
What is the output of below code?
const [x, …y, z] = [1, 2, 3, 4];
console.log(x, y, z);
SyntaxError
It throws a syntax error because the rest element should not have a trailing comma.
What is the output of below code?
const { a: x = 10, b: y = 20 } = { a: 30 };
console.log(x);
console.log(y);
30, 20
The object properties can be retrieved and assigned to a variable with a different name.
What is the output of below code?
function area({ length = 10, width = 20 }) {
console.log(length * width);
}
area();
Error
If you leave out the right-hand side assignment for the destructuring object, the function will look for at least one argument to be supplied when invoked.
What is the output of below code?
const props = [
{ id: 1, name: “John” },
{ id: 2, name: “Jack” },
{ id: 3, name: “Tom” },
];
const [, , { name }] = props;
console.log(name);
Tom
The third element in the array props accessed first followed by name property in the object.
What is the output of below code?
function checkType(num = 1) {
console.log(typeof num);
}
checkType();
checkType(undefined);
checkType(“”);
checkType(null);
number, number, string, object
If the function argument is set implicitly or explicitly to undefined, the value of the argument is the default parameter.
What is the output of below code?
function add(item, items = []) {
items.push(item);
return items;
}
console.log(add(“Orange”));
console.log(add(“Apple”));
[‘Orange’], [‘Apple’]
the new array is created and an element pushed to the default empty array.
What is the output of below code?
function greet(greeting, name, message = greeting + “ “ + name) {
console.log([greeting, name, message]);
}
greet(“Hello”, “John”);
greet(“Hello”, “John”, “Good morning!”);
[‘Hello’, ‘John’, ‘Hello John’], [‘Hello’, ‘John’, ‘Good morning!’]
Since parameters defined earlier are available to later default parameters, this code snippet doesn’t throw any error.
What is the output of below code?
function outer(f = inner()) {
function inner() {
return “Inner”;
}
}
outer();
ReferenceError
The functions and variables declared in the function body cannot be referred from default value parameter initializers.
What is the output of below code?
function myFun(x, y, …manyMoreArgs) {
console.log(manyMoreArgs);
}
myFun(1, 2, 3, 4, 5);
myFun(1, 2);
[3, 4, 5], []
The rest parameter is used to hold the remaining parameters of a function and it becomes an empty array if the argument is not provided.
What is the output of below code?
const obj = { key: “value” };
const array = […obj];
console.log(array);
TypeError
Spread syntax can be applied only to iterable objects.
What is the output of below code?
function* myGenFunc() {
yield 1;
yield 2;
yield 3;
}
var myGenObj = new myGenFunc();
console.log(myGenObj.next().value);
TypeError
Generators are not constructible type.
What is the output of below code?
function* yieldAndReturn() {
yield 1;
return 2;
yield 3;
}
var myGenObj = yieldAndReturn();
console.log(myGenObj.next());
console.log(myGenObj.next());
console.log(myGenObj.next());
{ value: 1, done: false }, { value: 2, done: true }, { value: undefined, done: true }
A return statement in a generator function will make the generator finish.
What is the output of below code?
const myGenerator = (function* () {
yield 1;
yield 2;
yield 3;
})();
for (const value of myGenerator) {
console.log(value);
break;
}
for (const value of myGenerator) {
console.log(value);
}
1
The generator should not be re-used once the iterator is closed.
What is the output of below code?
const num = 0o38;
console.log(num);
SyntaxError
If you use an invalid number(outside of 0-7 range) in the octal literal, JavaScript will throw a SyntaxError.
What is the output of below code?
const squareObj = new Square(10);
console.log(squareObj.area);
class Square {
constructor(length) {
this.length = length;
}
get area() {
return this.length * this.length;
}
set area(value) {
this.area = value;
}
ReferenceError
Unlike function declarations, class declarations are not hoisted.
What is the output of below code?
function Person() {}
Person.prototype.walk = function () {
return this;
};
Person.run = function () {
return this;
};
let user = new Person();
let walk = user.walk;
console.log(walk());
let run = Person.run;
console.log(run());
Window, Window
When a regular or prototype method is called without a value for this, the methods return an initial this value if the value is not undefined.
What is the output of below code?
class Vehicle {
constructor(name) {
this.name = name;
}
start() {
console.log(${this.name} vehicle started);
}
}
class Car extends Vehicle {
start() {
console.log(${this.name} car started);
super.start();
}
}
const car = new Car(“BMW”);
console.log(car.start());
BMW car started, BMW vehicle started
The super keyword is used to call methods of a superclass.
What is the output of below code?
const USER = { age: 30 };
USER.age = 25;
console.log(USER.age);
25
Even though we used constant variables, the content of it is an object and the object’s contents can be altered.
What is the output of below code?
console.log(“🙂” === “🙂”);
true
The unicode comparision of same emojies is equivalent to string comparison.
What is the output of below code?
console.log(typeof typeof typeof true);
string
The typeof operator on any primitive returns a string value.
What is the output of below code?
let zero = new Number(0);
if (zero) {
console.log(“If”);
} else {
console.log(“Else”);
}
If
The type of operator on new Number always returns object.
What is the output of below code in non strict mode?
let msg = “Good morning!!”;
msg.name = “John”;
console.log(msg.name);
Undefined
It returns undefined for non-strict mode and returns Error for strict mode.
What is the output of below code?
let count = 10;
(function innerFunc() {
if (count === 10) {
let count = 11;
console.log(count);
}
console.log(count);
})();
11, 10
11 and 10 is logged to the console.
The innerFunc is a closure which captures the count variable from the outerscope.
What is the output of below code ?
1: console.log(true && ‘hi’);
2: console.log(true && ‘hi’ && 1);
3: console.log(true && ‘’ && 0);
1: hi
2: 1
3: ‘’
The operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.
What is the output of below code ?
let arr = [1, 2, 3];
let str = “1,2,3”;
console.log(arr == str);
true
Arrays have their own implementation of toString method that returns a comma-separated list of elements.
What is the output of below code?
getMessage();
var getMessage = () => {
console.log(“Good morning”);
};
getMessage is not a function
Hoisting will move variables and functions to be the top of scope.
What is the output of below code?
let quickPromise = Promise.resolve();
quickPromise.then(() => console.log(“promise finished”));
console.log(“program finished”);
program finished, promise finished
Even though a promise is resolved immediately, it won’t be executed immediately because its callbacks are pushed into the queue.
What is the output of below code?
console
.log(“First line”)
[(“a”, “b”, “c”)].forEach((element) => console.log(element));
console.log(“Third line”);
Cannot read properties of undefined
there will be cannot read properties of undefined error while applying the array square bracket on log function.
Write a function that returns a random HEX color?
const HEX_PREFIX = “#”;
const HEX_RADIX = 16;
const HEX_LENGTH = 6;
function generateRandomHex() {
return (
HEX_PREFIX +
Math.floor(Math.random() * 0xffffff)
.toString(HEX_RADIX)
.padStart(HEX_LENGTH, “0”)
);
}
What is the output of below code?
var of = [“of”];
for (var of of of) {
console.log(of);
}
of
the variable declaration with of is accepted and prints the array value of using for..of loop.
What is the output of below code?
const numbers = [11, 25, 31, 23, 33, 18, 200];
numbers.sort();
console.log(numbers);
[11, 18, 200, 23, 25, 31, 33]
By default, the sort method sorts elements alphabetically.
What is the output order of below code?
setTimeout(() => {
console.log(“1”);
}, 0);
Promise.resolve(“hello”).then(() => console.log(“2”));
console.log(“3”);
3, 2, 1
the first two statements are asynchronous which will be executed later and third statement is synchronous statement which will be moved to callstack.
What is the output of below code?
console.log(name);
console.log(message());
var name = “John”;
(function message() {
console.log(“Hello John: Welcome”);
});
undefined, Reference error: message is not defined
IIFE is just like any other function expression which won’t be hoisted.
What is the output of below code?
message();
function message() {
console.log(“Hello”);
}
function message() {
console.log(“Bye”);
}
Bye
As part of hoisting, initially JavaScript Engine or compiler will store first function in heap memory but later rewrite or replaces with redefined function content.
What is the output of below code?
var currentCity = “NewYork”;
var changeCurrentCity = function () {
console.log(“Current City:”, currentCity);
var currentCity = “Singapore”;
console.log(“Current City:”, currentCity);
};
changeCurrentCity();
undefined, Singapore
Due to hoisting feature, the variables declared with var will have undefined value in the creation phase so the outer variable currentCity will get same undefined value.
What is the output of below code in an order?
function second() {
var message;
console.log(message);
}
function first() {
var message = “first”;
second();
console.log(message);
}
var message = “default”;
first();
console.log(message);
undefined, first, default
Each context(global or functional) has it’s own variable environment and the callstack of variables in a LIFO order.
What is the output of below code?
var expressionOne = function functionOne() {
console.log(“functionOne”);
};
functionOne();
functionOne is not defined
The function call functionOne is not going to be part of scope chain and it has it’s own execution context with the enclosed variable environment.
What is the output of below code?
const user = {
name: “John”,
eat() {
console.log(this);
var eatFruit = function () {
console.log(this);
};
eatFruit();
},
};
user.eat();
{name: “John”, eat: f}, Window {…}
this keyword is dynamic scoped but not lexically scoped .
What is the output of below code?
let message = “Hello World!”;
message[0] = “J”;
console.log(message);
let name = “John”;
name = name + “ Smith”;
console.log(name);
Hello World!, John Smith
when you try to update the string’s first character, there is no change in the string value and prints the same initial value.
What is the output of below code?
let user1 = {
name: “Jacob”,
age: 28,
};
let user2 = {
name: “Jacob”,
age: 28,
};
console.log(user1 === user2);
False
When you try to compare two objects with same content, it is going to compare memory address or reference of those variables.
What is the output of below code?
function greeting() {
setTimeout(function () {
console.log(message);
}, 5000);
const message = “Hello, Good morning”;
}
greeting();
Hello, Good morning
The variable message is still treated as closure(since it has been used in inner function) eventhough it has been declared after setTimeout function.
What is the output of below code?
const a = new Number(10);
const b = 10;
console.log(a === b);
False
Eventhough both variables a and b refer a number value, the first declaration is based on constructor function and the type of the variable is going to be object type.
What is the type of below function?
function add(a, b) {
console.log(“The input arguments are: “, a, b);
return a + b;
}
Impure function
the above function is considered as impure function.
What is the output of below code?
const promiseOne = new Promise((resolve, reject) => setTimeout(resolve, 4000));
const promiseTwo = new Promise((resolve, reject) => setTimeout(reject, 4000));
Promise.all([promiseOne, promiseTwo]).then((data) => console.log(data));
Uncaught (in promise)
The above promises settled at the same time but one of them resolved and other one rejected.
What is the output of below code?
try {
setTimeout(() => {
console.log(“try block”);
throw new Error(An exception is thrown);
}, 1000);
} catch (err) {
console.log(“Error: “, err);
}
try block, Uncaught Error: Exception is thrown
If you put setTimeout and setInterval methods inside the try clause and an exception is thrown, the catch clause will not catch any of them.
What is the output of below code?
let a = 10;
if (true) {
let a = 20;
console.log(a, “inside”);
}
console.log(a, “outside”);
20, “inside” and 10, “outside”
The variable “a” declared inside “if” has block scope and does not affect the value of the outer “a” variable.
What is the output of below code?
let arr = [1, 2, 3, 4, 5, -6, 7];
arr.length = 0;
console.log(arr);
[ ]
The length of the array ‘arr’ has been set to 0, so the array becomes empty.
