: undefined}
Answer
##### Answer: 4
The await expression returns value 10 with promise resolution and the code after each await expression can be treated as existing in a `.then` callback. 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. The above async function is equivalent to below expression,
```javascript
function func() {
return Promise.resolve(10).then(() => undefined);
}
```
Answer
##### Answer: 1
Even though “processArray” is an async function, the anonymous function that we use for `forEach` is synchronous. If you use await inside a synchronous function then it throws a syntax error.
Answer
##### Answer: 4
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.
But you control the array sequence using for..of loop,
```javascript
async function processArray(array) {
for (const item of array) {
await delayedLog(item);
}
console.log("Process completed!");
}
```
Answer
##### Answer: 1
Set has few exceptions from equality check,
1. All NaN values are equal
2. Both +0 and -0 considered as different values
Answer
##### Answer: 3
Symbol follows below conventions,
1. Every symbol value returned from Symbol() is unique irrespective of the optional string.
2. `Symbol.for()` function creates a symbol in a global symbol registry list. But it doesn't necessarily create a new symbol on every call, it checks first if a symbol with the given key is already present in the registry and returns the symbol if it is found. Otherwise a new symbol created in the registry.
**Note:** The symbol description is just useful for debugging purposes.
Answer
##### Answer: 1
`Symbol` is a just a standard function and not an object constructor(unlike other primitives new Boolean, new String and new Number). So if you try to call it with the new operator will result in a TypeError
Answer
##### Answer: 4
The return value of `typeof myNumber` or `typeof myString` is always a truthy value (either "number" or "string"). The ! operator operates on either `typeof myNumber` or `typeof myString`, converting them to boolean values. Since the value of both `!typeof myNumber` and `!typeof myString` is false, the if condition fails, and control goes to else block.
To make the ! operator operate on the equality expression, one needs to add parentheses:
```
if (!(typeof myNumber === "string"))
```
Or simply use the inequality operator:
```
if (typeof myNumber !== "string")
```
Answer
##### Answer: 2
The symbols has below constraints,
1. The undefined, Functions, and Symbols are not valid JSON values. So those values are either omitted (in an object) or changed to null (in an array). Hence, it returns null values for the value array.
2. All Symbol-keyed properties will be completely ignored. Hence it returns an empty object({}).
Answer
##### Answer: 2
Using constructors, `new.target` refers to the constructor (points to the class definition of class which is initialized) that was directly invoked by new. This also applies to the case if the constructor is in a parent class and was delegated from a child constructor.
Answer
##### Answer: 4
It throws a syntax error because the rest element should not have a trailing comma. You should always consider using a rest operator as the last element.
Answer
##### Answer: 1
The object property follows below rules,
1. The object properties can be retrieved and assigned to a variable with a different name
2. The property assigned a default value when the retrieved value is `undefined`
Answer
##### Answer: 2
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. Otherwise you will receive an error `Error: Cannot read property 'length' of undefined` as mentioned above.
You can avoid the error with either of the below changes,
1. **Pass at least an empty object:**
```javascript
function area({ length = 10, width = 20 }) {
console.log(length * width);
}
area({});
```
2. **Assign default empty object:**
```javascript
function area({ length = 10, width = 20 } = {}) {
console.log(length * width);
}
area();
```
Answer
##### Answer: 1
It is possible to combine Array and Object destructuring. In this case, the third element in the array props accessed first followed by name property in the object.
Answer
##### Answer: 3
If the function argument is set implicitly(not passing argument) or explicitly to undefined, the value of the argument is the default parameter. Whereas for other falsy values('' or null), the value of the argument is passed as a parameter.
Hence, the result of function calls categorized as below,
1. The first two function calls logs number type since the type of default value is number
2. The type of '' and null values are string and object type respectively.
Answer
##### Answer: 2
Since the default argument is evaluated at call time, a new object is created each time the function is called. So in this case, the new array is created and an element pushed to the default empty array.
Answer
##### Answer: 2
Since parameters defined earlier are available to later default parameters, this code snippet doesn't throw any error.
Answer
##### Answer: 1
The functions and variables declared in the function body cannot be referred from default value parameter initializers. If you still try to access, it throws a run-time ReferenceError(i.e, `inner` is not defined).
Answer
##### Answer: 3
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.
Answer
##### Answer: 2
Spread syntax can be applied only to iterable objects. By default, Objects are not iterable, but they become iterable when used in an Array, or with iterating functions such as `map(), reduce(), and assign()`. If you still try to do it, it still throws `TypeError: obj is not iterable`.
Answer
##### Answer: 4
Generators are not constructible type. But if you still proceed to do, there will be an error saying "TypeError: myGenFunc is not a constructor"
Answer
##### Answer: 1
A return statement in a generator function will make the generator finish. If a value is returned, it will be set as the value property of the object and done property to true. When a generator is finished, subsequent next() calls return an object of this form: `{value: undefined, done: true}`.
Answer
##### Answer: 4
The generator should not be re-used once the iterator is closed. i.e, Upon exiting a loop(on completion or using break & return), the generator is closed and trying to iterate over it again does not yield any more results. Hence, the second loop doesn't print any value.
Answer
##### Answer: 1
If you use an invalid number(outside of 0-7 range) in the octal literal, JavaScript will throw a SyntaxError. In ES5, it treats the octal literal as a decimal number.
Answer
##### Answer: 2
Unlike function declarations, class declarations are not hoisted. i.e, First You need to declare your class and then access it, otherwise it will throw a ReferenceError "Uncaught ReferenceError: Square is not defined".
**Note:** Class expressions also applies to the same hoisting restrictions of class declarations.
Answer
##### Answer: 4
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. Otherwise global window object will be returned. In our case, the initial `this` value is undefined so both methods return window objects.
Answer
##### Answer: 3
The super keyword is used to call methods of a superclass. Unlike other languages the super invocation doesn't need to be a first statement. i.e, The statements will be executed in the same order of code.
Answer
##### Answer: 2
Even though we used constant variables, the content of it is an object and the object's contents (e.g properties) can be altered. Hence, the change is going to be valid in this case.
Answer
##### Answer: 2
Emojis are unicodes and the unicode for smile symbol is "U+1F642". The unicode comparison of same emojies is equivalent to string comparison. Hence, the output is always true.
Answer
##### Answer: 1
The typeof operator on any primitive returns a string value. So even if you apply the chain of typeof operators on the return value, it is always string.
Answer
##### Answer: 1
1. The type of operator on new Number always returns object. i.e, typeof new Number(0) --> object.
2. Objects are always truthy in if block
Hence the above code block always goes to if section.
Answer
##### Answer: 4
It returns undefined for non-strict mode and returns Error for strict mode. In non-strict mode, the wrapper object is going to be created and get the mentioned property. But the object get disappeared after accessing the property in next line.
Answer
##### Answer: 1
11 and 10 is logged to the console.
The innerFunc is a closure which captures the count variable from the outerscope. i.e, 10. But the conditional has another local variable `count` which overwrites the ourter `count` variable. So the first console.log displays value 11.
Whereas the second console.log logs 10 by capturing the count variable from outerscope.
Answer
- 1: hi
- 2: 1
- 3: ''
Reason : 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.
**Note:** Below these values are consider as falsy value
- 1: 0
- 2: ''
- 3: null
- 4: undefined
- 5: NAN
Answer
##### Answer: 3
Arrays have their own implementation of `toString` method that returns a comma-separated list of elements. So the above code snippet returns true. In order to avoid conversion of array type, we should use === for comparison.
Answer
##### Answer: 2
Hoisting will move variables and functions to be the top of scope. Even though getMessage is an arrow function the above function will considered as a variable due to it's variable declaration or assignment. So the variables will have undefined value in memory phase and throws an error '`getMessage` is not a function' at the code execution phase.
Answer
##### Answer: 3
Even though a promise is resolved immediately, it won't be executed immediately because its **.then/catch/finally** handlers or callbacks(aka task) are pushed into the queue. Whenever the JavaScript engine becomes free from the current program, it pulls a task from the queue and executes it. This is the reason why last statement is printed first before the log of promise handler.
**Note:** We call the above queue as "MicroTask Queue"
Answer
##### Answer: 4
When JavaScript encounters a line break without a semicolon, the JavaScript parser will automatically add a semicolon based on a set of rules called `Automatic Semicolon Insertion` which determines whether line break as end of statement or not to insert semicolon. But it does not assume a semicolon before square brackets [...]. So the first two lines considered as a single statement as below.
```javascript
console
.log("First line")
[("a", "b", "c")].forEach((element) => console.log(element));
```
Hence, there will be **cannot read properties of undefined** error while applying the array square bracket on log function.
Solution 1 (Iterative generation)
```javascript
const HEX_ALPHABET = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"a",
"b",
"c",
"d",
"e",
"f",
];
const HEX_PREFIX = "#";
const HEX_LENGTH = 6;
function generateRandomHex() {
let randomHex = "";
for (let i = 0; i < HEX_LENGTH; i++) {
const randomIndex = Math.floor(Math.random() * HEX_ALPHABET.length);
randomHex += HEX_ALPHABET[randomIndex];
}
return HEX_PREFIX + randomHex;
}
```
Solution 2 (One-liner)
```javascript
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")
);
}
```
Answer
##### Answer: 1
In JavaScript, `of` is not considered as a reserved keyword. So the variable declaration with `of` is accepted and prints the array value `of` using for..of loop.
But if you use reserved keyword such as `in` then there will be a syntax error saying `SyntaxError: Unexpected token in`,
```javascript
var in = ['in'];
for(var in in in) {
console.log(in[in]);
}
```
Answer
##### Answer: 2
By default, the sort method sorts elements alphabetically. This is because elemented converted to strings and strings compared in UTF-16 code units order. Hence, you will see the above numbers not sorted as expected. In order to sort numerically just supply a comparator function which handles numeric sorts.
```javascript
const numbers = [11, 25, 31, 23, 33, 18, 200];
numbers.sort((a, b) => a - b);
console.log(numbers);
```
**Note:** Sort() method changes the original array.
Answer
##### Answer: 4
When the JavaScript engine parses the above code, the first two statements are asynchronous which will be executed later and third statement is synchronous statement which will be moved to callstack, executed and prints the number 3 in the console. Next, Promise is native in ES6 and it will be moved to Job queue which has high priority than callback queue in the execution order. At last, since setTimeout is part of WebAPI the callback function moved to callback queue and executed. Hence, you will see number 2 printed first followed by 1.
Answer
##### Answer: 4
IIFE(Immediately Invoked Function Expression) is just like any other function expression which won't be hoisted. Hence, there will be a reference error for message call.
The behavior would be the same with below function expression of message1,
```javascript
console.log(name);
console.log(message());
var name = 'John';
var message = function () {
console.log('Hello John: Welcome');
});
```
Answer
##### Answer: 3
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.
Answer
##### Answer: 3
Due to hositing feature, the variables declared with `var` will have `undefined` value in the creation phase so the outer variable `currentCity` will get same `undefined` value. But after few lines of code JavaScript engine found a new function call(`changeCurrentCity()`) to update the current city with `var` re-declaration. Since each function call will create a new execution context, the same variable will have `undefined` value before the declaration and new value(`Singapore`) after the declaration. Hence, the value `undefined` print first followed by new value `Singapore` in the execution phase.
Answer
##### Answer: 1
Each context(global or functional) has it's own variable environment and the callstack of variables in a LIFO order. So you can see the message variable value from second, first functions in an order followed by global context message variable value at the end.
Answer
##### Answer: 1
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. i.e, It won't be accessed from global context. Hence, there will be an error while invoking the function as `functionOne is not defined`.
Answer
##### Answer: 4
`this` keyword is dynamic scoped but not lexically scoped . In other words, it doesn't matter where `this` has been written but how it has been invoked really matter. In the above code snippet, the `user` object invokes `eat` function so `this` keyword refers to `user` object but `eatFruit` has been invoked by `eat` function and `this` will have default `Window` object.
The above pit fall fixed by three ways,
1. In ES6, the arrow function will make `this` keyword as lexically scoped. Since the surrounding object of `this` object is `user` object, the `eatFruit` function will contain `user` object for `this` object.
```javascript
const user = {
name: "John",
eat() {
console.log(this);
var eatFruit = () => {
console.log(this);
};
eatFruit();
},
};
user.eat();
```
The next two solutions have been used before ES6 introduced.
2. It is possible create a reference of `this` into a separate variable and use that new variable inplace of `this` keyword inside `eatFruit` function. This is a common practice in jQuery and AngularJS before ES6 introduced.
```javascript
const user = {
name: "John",
eat() {
console.log(this);
var self = this;
var eatFruit = () => {
console.log(self);
};
eatFruit();
},
};
user.eat();
```
3. The `eatFruit` function can bind explicitly with `this` keyword where it refers `Window` object.
```javascript
const user = {
name: "John",
eat() {
console.log(this);
var eatFruit = function () {
console.log(this);
};
return eatFruit.bind(this);
},
};
user.eat()();
```
Answer
##### Answer: 3
In JavaScript, primitives are immutable i.e. there is no way to change a primitive value once it gets created. So when you try to update the string's first character, there is no change in the string value and prints the same initial value `Hello World!`. Whereas in the later example, the concatenated value is re-assigned to the same variable which will result into creation of new memory block with the reference pointing to `John Smith` value and the old memory block value(`John`) will be garbage collected.
Answer
##### Answer: 2
In JavaScript, the variables such as objects, arrays and functions comes under pass by reference. When you try to compare two objects with same content, it is going to compare memory address or reference of those variables. These variables always create separate memory blocks hence the comparison is always going to return false value.
Answer
##### Answer: 3
The variable `message` is still treated as closure(since it has been used in inner function) eventhough it has been declared after setTimeout function. The function with in setTimeout function will be sent to WebAPI and the variable declaration executed with in 5 seconds with the assigned value. Hence, the text declared for the variable will be displayed.
Answer
##### Answer: 1
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. Whereas the second declaration is primitive assignment with a number and the type is `number` type. Hence, the equality operator `===` will output `false` value.
Answer
##### Answer: 2
Eventhough the above function returns the same result for the same arguments(input) that are passed in the function, the `console.log()` statement causes a function to have side effects because it affects the state of an external code. i.e, the `console` object's state and depends on it to perform the job. Hence, the above function considered as impure function.
Answer
##### Answer: 3
The above promises settled at the same time but one of them resolved and other one rejected. When you use `.all` method on these promises, the result will be short circuted by throwing an error due to rejection in second promise. But If you use `.allSettled` method then result of both the promises will be returned irrespective of resolved or rejected promise status without throwing any error.
```javascript
Promise.allSettled([promiseOne, promiseTwo]).then((data) => console.log(data));
```
Answer
##### Answer: 3
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. This is because the try...catch statement works synchronously, and the function in the above code is executed asynchronously after a certain period of time. Hence, you will see runtime exception without catching the error. To resolve this issue, you have to put the try...catch block inside the function as below,
```javascript
setTimeout(() => {
try {
console.log("try block");
throw new Error(`An exception is thrown`);
} catch (err) {
console.log("Error: ", err);
}
}, 1000);
```
You can use `.catch()` function in promises to avoid these issues with asynchronous code.
Answer
##### Answer: 2
The variable "a" declared inside "if" has block scope and does not affect the value of the outer "a" variable.
Answer
##### Answer: 4
The length of the array 'arr' has been set to 0, so the array becomes empty.
Answer
##### Answer: 4
The function `printHello` is hoisted to the top of the global scope and prints "Hello" to the console. Even `printMessage` function is hoisted, but it is lifted to the local scope(in "printHello") it was declared in. That is the reason you will endup with reference error for second function call.
But if the second function is invoked in the first function itself, there won't be any reference error.
```javascript
printHello();
function printHello() {
printMessage();
console.log("Hello");
function printMessage() {
console.log("Good day");
}
}
```
Answer
##### Answer: 1
Even though there is a timer of 5 seconds supplied to `setTimeout` callback, it won't get executed until the main thread is free and finished executing the remaining part of the code. In this example, the remaining code(while loop) takes 10seconds to finish it's execution. In the mean time, the callback will be stored in callback queue upon completion of its 5 seconds timer. After 10 seconds, the callback will be moved to callstack because the callstack is empty by poping out global execution context.
Answer
##### Answer: 3
JavaScript has a native method sort that allows sorting an array of elements in-place. It will treat each element as a string and sort it alphabetically. But if you try to sort an array of strings which has non-ASCII characters, you will receive a strange result. This is because characters with an accent have higher character codes.
In this case, the sort order of an array is ['Wann', 'Woche', 'wäre', 'wöchentlich'].
If you want to sort an array of string values which has non-ASCII characters in an ascending order, there are two possible options like **localeCompare** and **Intl.Collator** provided by ECMAScript Internationalization API.
**localeCompare:**
```javascript
let arr = ["wöchentlich", "Woche", "wäre", "Wann"];
console.log(arr.sort((a, b) => a.localeCompare(b))); //['Wann', 'wäre', 'Woche', 'wöchentlich']
```
**Intl.Collator:**
```javascript
let arr = ["wöchentlich", "Woche", "wäre", "Wann"];
console.log(arr.sort(Intl.Collator().compare)); //['Wann', 'wäre', 'Woche', 'wöchentlich']
```
Answer
##### Answer: 1
If a function is called with `undefined`, the `undefined` value is treated as a parameter. But if the function is not passed with any parameters, the `arguments` object doesn't include any argument eventhough the function has default function parameter. Hence, the function invocation with `undefined` has one argument and function call without any arguments has 0 arguments.
Answer
##### Answer: 3
This question is really showcasing how JavaScript mixes array reduction with low-level bitwise tricks. The code first uses .reduce() to turn the array into a single value by counting how many elements are odd, then an IIFE immediately kicks in and loops through the array again, shifting each number left by its index and XOR-ing it into the accumulator. The whole vibe is about understanding how reduction works for summarizing arrays and how bit shifting plus XOR can transform values in a way that feels mathematical rather than typical JS.
Answer
##### Answer
The output will be an array of Promise objects, not the actual user data.
```javascript
[Promise { }, Promise { }, Promise { }]
```
This happens because `Array.map()` does not wait for the async callback to resolve. Each `async` function returns a Promise immediately, so `users` becomes an array of Promises.
To get the actual user data, you need to wait for all the promises to resolve using `Promise.all()`:
```javascript
const ids = [1, 2, 3];
const users = await Promise.all(
ids.map(async (id) => {
return await getUser(id);
})
);
console.log(users);
```
If you are not inside an async function, use:
```javascript
const ids = [1, 2, 3];
Promise.all(
ids.map(async (id) => getUser(id))
).then((users) => {
console.log(users);
});
```
The key idea is that `async` functions always return Promises, so you must resolve them using `await` or `Promise.all()` to get the final values.
