Questions III

Question 1

List down some of the features of ES6

Answer 1

Below are the list of some new 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
Destructuring Assignment
Enhanced Object Literals
Promises
Classes
Modules

Question 2

What is ES6

Answer 2

ES6 is the sixth edition of the javascript language and it was released in June 2015. It was initially known as ECMAScript 6 (ES6) and later renamed to ECMAScript 2015. Almost all the modern browsers support ES6 but for the old browsers there are many transpilers, like Babel.js etc.

Question 3

Can I redeclare let and const variables

Answer 3

No, you cannot redeclare let and const variables. If you do, it throws below error

Explanation: 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. So all the multiple declarations contributing to the same hoisted variable without any error. Let’s take an example of re-declaring variables in the same scope for both var and let/const variables.

Question 4

Does the const variable make the value immutable

Answer 4

No, the const variable doesn’t make the value immutable. But it disallows subsequent assignments(i.e, You can declare with assignment but can’t assign another value later)

Question 5

What are template literals

Answer 5

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. In ES6, this feature enables using dynamic expressions as below,

Question 6

What is collation

Answer 6

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. Let’s take comparison and sorting features,

Question 7

What is for…of statement

Answer 7

The for…of statement creates a loop iterating over iterable objects or elements such as built-in String, Array, Array-like objects (like arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

Question 8

What is the difference between internal and external javascript

Answer 8

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.

Question 9

What is the purpose of Error object

Answer 9

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.

Question 10

What is the difference between a parameter and an argument

Answer 10

Parameter is the variable name of a function definition whereas an argument represents the value given to a function when it is invoked. Let’s explain this with a simple function

function myFunction(parameter1, parameter2, parameter3) {
console.log(arguments[0]); // “argument1”
console.log(arguments[1]); // “argument2”
console.log(arguments[2]); // “argument3”
}

Question 11

What is the purpose of some method in arrays

Answer 11

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. Let’s take an example to test for any odd elements,

Question 12

How do you combine two or more arrays

Answer 12

The concat() method is used to join two or more arrays by returning a new array containing all the elements.

The syntax would be as below,

array1.concat(array2, array3, …, arrayX)

Question 13

What is the difference between Shallow and Deep copy

Answer 13

There are two ways to copy an object,

Shallow 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.

If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Deep copy: 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.

Question 14

Does javascript uses mixins

Answer 14

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. ie. There can be only one [[prototype]] for an object.

But sometimes we require to extend more than one, to overcome this we can use Mixin which helps to copy methods to the prototype of another class.

Question 15

What is a thunk function

Answer 15

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. i.e, It is used not to execute now but it will be sometime in the future.

Question 16

What is the easiest way to convert an array to an object

Answer 16

You can convert an array to an object with the same data using spread(…) operator.

Question 17

How do you create an array with some data

Answer 17

You can create an array with some data or an array with the same values using fill method.

Question 18

What are wrapper objects

Answer 18

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.

For example, if you apply toUpperCase() method on a primitive string value, it does not throw an error but returns uppercase of the string.

Question 19

What is AJAX

Answer 19

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. i.e. We can send data to the server and get data from the server without reloading the web page.

Question 20

Below are the list of different ways to deal with Asynchronous code.

Answer 20

Callbacks
Promises
Async/await
Third-party libraries such as async.js,bluebird etc

Question 21

What are tasks in event loop

Answer 21

A task is any javascript code/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.

All these tasks are scheduled on a task queue. Below are the list of use cases to add tasks to the task queue,

When a new javascript program is executed directly from console or running by the

 element, the task will be added to the task queue.
When an event fires, the event callback added to task queue
When a setTimeout or setInterval is reached, the corresponding callback added to task queue

Question 22

What is microtask

Answer 22

Microtask is used for the javascript code which needs to be executed immediately after the currently executing task/microtask is completed. They are kind of blocking in nature. i.e, The main thread will be blocked until the microtask queue is empty. The main sources of microtasks are Promise.resolve, Promise.reject, MutationObservers, IntersectionObservers etc

Note: All of these microtasks are processed in the same turn of the event loop.

Question 23

What is heap

Answer 23

Heap(Or memory heap) is the memory location where objects are stored when we define variables. i.e, This is the place where all the memory allocations and de-allocation take place. Both heap and call-stack are two containers of JS runtime. Whenever runtime comes across variables and function declarations in the code it stores them in the Heap.

Question 24

What is an event table

Answer 24

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. i.e.

Whenever you call a setTimeout function or invoke async operation, it is added to the Event Table. It doesn’t not execute functions on it’s own. The main purpose of the event table is to keep track of events and send them to the Event Queue as shown in the below diagram.

Question 25

What is babel

Answer 25

Babel is a JavaScript transpiler to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Some of the main features are listed below,

1. Transform syntax
2. Polyfill features that are missing in your target environment (using @babel/polyfill)
3. Source code transformations (or codemods)

Question 26

What is RxJS

Answer 26

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. It also provides utility functions for creating and working with observables.

Question 27

What is an observable

Answer 27

An Observable is basically a function that can return a stream of values either synchronously or asynchronously to an observer over time.

The consumer can get the value by calling subscribe() method. Let’s look at a simple example of an Observable

Question 28

What is an async function

Answer 28

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. These functions can contain zero or more await expressions.

Returns always a promise

Question 29

What are the differences between for…of and for…in statements

Answer 29

for..in iterates over all enumerable property keys of an object
for..of iterates over the values of an iterable object.

Question 30

How to invoke an IIFE without any extra brackets?

Answer 30

Since both IIFE and void operator discard the result of an expression, you can avoid the extra brackets using void operator for IIFE as below,

void function (dt) {
console.log(dt.toLocaleTimeString());
}(new Date());

Question 31

What is nullish coalescing operator (??)?

Answer 31

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.

This can be contrasted with the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined.

Question 32

What is global execution context?

Answer 32

The global execution context is the default or first execution context that is created by the JavaScript engine before any code is executed(i.e, when the file first loads in the browser). All the global code that is not inside a function or object will be executed inside this global execution context. Since JS engine is single threaded there will be only one global environment and there will be only one global execution context.

Question 33

What is function execution context?

Answer 33

Whenever a function is invoked, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context (FEC) within the Global Execution Context (GEC) to evaluate and execute the code within that function.

Question 34

What is debouncing?

Answer 34

Debouncing is a programming pattern that allows delaying execution of some piece of code until a specified time to avoid unnecessary CPU cycles and API calls.

This in turn enhance the web page performance. The debounce function make sure that your code is only triggered once per user input. The common usecases are Search box suggestions, text-field auto-saves, and eliminating double-button clicks.

Question 35

What is throttling?

Answer 35

Throttling is a technique used to limit the execution of an event handler function in a given period of time, even when this event triggers continuously due to user actions.

The common use cases are browser resizing, window scrolling, mouse movements etc.

Question 36

What is the purpose of the this keyword in JavaScript?

Answer 36

The this keyword in JavaScript is a special variable that is used within a function to refer to the object on which the function is invoked. The value of this depends on how the function is called. It allows functions to access and interact with the object they are bound to.

In a global context, this refers to the global object (e.g., window in a browser).

In a regular function, this refers to the global object.

In a method, this refers to the object that owns the method

In an event handler, this refers to the element that triggered the event (the button in this case).

Question 37

What are the uses of closures?

Answer 37

Closures are a powerful feature in programming languages like JavaScript. They allow functions to retain access to variables from their containing (enclosing) scope even after the outer function has finished executing. This means that a function defined within another function can access variables from the outer function, even if the outer function has already returned.

Question 38

What is globalThis, and what is the importance of it?

Answer 38

Nowadays JavaScript language is used in a wide variety of environments and each environment has its own object model. Due to this fact, there are different ways(syntax) to access the global object.

In web browser, the global object is accessible via window, self, or frames.

In Node environment, you have to use global.

In Web workers, the global object is available through self.

The globalThis property provides a standard way of accessing the global object without writing various code snippet to support multiple environments. For example, the global object retuned from multiple environments as shown below,

Question 39

What are the array mutation methods?

Answer 39

JavaScript array methods can be categorized into two groups:

Mutating methods: These are the methods that directly modify the original array.
Non-mutating methods: These methods return a new array without altering the original one.
There are 9 methods in total that mutate the arrays,

push: Adds one or more elements to the end of the array and returns the new length.

pop: Removes the last element from the array and returns that element.

unshift: Adds one or more elements to the beginning of the array and returns the new length..

shift: Removes the first element from the array and returns that element.

splice: Adds or removes elements from the array at a specific index position.

sort: Sorts the elements of the array in-place based on a given sorting criteria.

reverse: Reverses the order of elements in the given array.

fill: Fills all elements of the array with a specific value.
copyWithIn: Copies a sequence of elements within the array to a specified target index in the same array.