General

Question 1

When creating a Number object, what do passed values that can’t be converted return?

Answer 1

NaN

Question 2

What error types does JavaScript have?

Answer 2

As well as the generic Error object JavaScript offers other error constructors tailored to specific errors.

RangeError - creates a RangeError instance that occurs when a numeric variable or parameter is outside of its valid range.

ReferenceError - creates a ReferenceError instance when trying to dereference a non-existant variable.

TypeError - creates a TypeError instance that occurs when a variable or parameter is not of a valid type.

URIError - creates a URIError instance that occurs when URI handling functions are passed malformed URIs.

Question 3

What is a binding?

Answer 3

A binding is the combination of a name (like a) and a storage slot for its current value. Variables are bindings. So are constants, parameters, the variable created by a function declaration, and various built-in things like this.

Question 4

What does mutable mean?

Answer 4

A mutable value is one that can be changed without creating an entirely new value. In JavaScript, objects and arrays are mutable by default, but primitive values are not — once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned.

Question 5

What types are mutable and what are not?

Answer 5

Mutable: arrays, objects.
Non-mutable: primitive values

Question 6

What are the two types of values in JavaScript?

Answer 6

Primitive types and reference types.

Question 7

List out the primitive types

Answer 7

Strings, numbers, null, undefined, symbols, bigInt, booleans

Question 8

List out the reference types

Answer 8

Arrays, objects, functions

Question 9

What is a reference type?

Answer 9

Reference Value: JavaScript provides three types of Reference values that include Array, Object, and Function. The size of a reference value is dynamic therefore It is stored on Heap. When we access a reference value, we manipulate it through reference, not through its actual value that is stored.

Question 10

What are the two types of modules?

Answer 10

CommonJs and ECMAScript Harmony (ES6)

Question 11

What are the two types of module exports in JavaScript?

Answer 11

Every module can have two different types of export, named export and default export. You can have multiple named exports per module but only one default export.

Question 12

What does __proto__ signify?

Answer 12

__proto__ represents the [[Prototype]] of the object

The __proto__ getter function exposes the value of the internal [[Prototype]] of an object.

However the use of __proto__ is controversial and discouraged.

const o = {
a: 1,
b: 2,
__proto__: {
b: 3,
c: 4,
},
};

Question 13

What is [[Prototype]]? or someObject.[[Prototype]]?

Answer 13

someObject.[[Prototype]] is used to designate the prototype of someObject.

The [[Prototype]] internal slot can be accessed and modified with the Object.getPrototypeOf() and Object.setPrototypeOf() functions respectively.

This is equivalent to the JavaScript accessor __proto__

Question 14

How do you set obj1 to be the prototype of obj2?

Answer 14

let obj1 = {
prop1: ()=>console.log(‘prop1’)
}
let obj2 = {
prop2: ()=>console.log(‘prop2’)
}
Object.setPrototypeOf(obj2, obj1);

obj2.prop2();
obj1.prop1();

therefore
const obj2 = {
prop2: () => console.log(‘prop2’),
__proto__: {
prop1: () => console.log(‘prop1’),
}
}

Question 15

How do you find the prototype of an object?

Answer 15

Object.getPrototypeOf(obj2);
will equal: obj1

Question 16

How do discern between the properties of an object and its prototype?

Answer 16

Object.getOwnPropertyNames(obj2)
will return prop2

Question 17

What is a Runtime Environment?

Answer 17

A runtime environment is where your program will be executed. It determines what global objects your program can access and it can also impact how it runs.

Question 18

What are the two JavaScript runtime environments:

Answer 18

The runtime environment of a browser (like Chrome, or Firefox) and this is called an ‘engine’

The Node runtime environment

Question 19

Why was node created?

Answer 19

The Node runtime environment was created for the purpose of executing JavaScript code without a browser, thus enabling programmers to create full-stack (front-end and back-end) applications using only the JavaScript language.

Question 20

Why is the noderun-time environment different from the browser?

Answer 20

The Node runtime environment gives back-end applications access to a variety of features unavailable in a browser, such as access to the server’s file system, database, and network.

Question 21

What is process.env? As in process.env.PWD?

Answer 21

process.env is an object containing environment variables such as process.env.PWD which contains the current working directory

Question 22

Is Node a framework!

Answer 22

So Nodejs is not a framework (or a language) but a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Question 23

Is Node.js Single-threaded and is it Synchronous or Asynchronous?

Answer 23

Node.js is Single-threaded and Asynchronous.

Question 24

In the browser how does the event loop operate with setTimeOut?

Answer 24

Whenever an async function is called, it is sent to a browser API. These are APIs built into the browser. Based on the command received from the call stack, the API starts its own single-threaded operation.

Therefore when a setTimeout is called, it is processed in the stack and then sent to the corresponding API which waits till the specified time to send this operation back in for processing.

Question 25

How is node asynchronous?

Answer 25

Node can create multiple threads, but only one thread is dedicated to parsing and executing javascript code.

The other threads are started from C++ bindings called from the JS.

Question 26

What area of the heap contains promises?

Answer 26

Micro Tasks Queue aka Job Queue

JavaScript promises and the Mutation Observer API both use the microtask queue to run their callbacks

Question 27

What are map, filter and reduced used for?

Answer 27

They modify each element of an array to return a single value or array.

Question 28

What is the difference between Undefined and Null?

Answer 28

Undefined: When you declare a variable but don’t give it a value, it’s considered undefined.

Null: Null is used when you want to explicitly say that a variable has no value. It’s like an empty container.

The key difference between them is that ‘null’ is a value you can assign to a variable, whereas ‘undefined’ usually means the variable hasn’t been given any value yet. However, it’s not a good practice to assign ‘undefined’ intentionally.

Question 29

What is the difference between “ == “ and “ === “ operators

Answer 29

Both are comparison operators. The difference between both the operators is that “==” is used to compare values whereas, “ === “ is used to compare both values and types.

Question 30

What are the modes in JavaScript, and why are they used?

Answer 30

JavaScript has two primary modes: “Strict Mode” and “Non-Strict Mode”. These modes affect how JavaScript code is parsed and executed.

Question 31

What is strict mode?

Answer 31

Strict is used by adding “use strict”; at the beginning of a script or a function.

• Enforces stricter parsing and error handling.
• Helps catch common coding mistakes and “unsafe” actions.
• Prohibits certain syntax and variable names.

Question 32

What is ‘sloppy’ (non-strict mode)?

Answer 32

The default mode in JavaScript is used if “use strict” is not present.

• Offers more forgiving error handling and type coercion.
• Allows for more lenient variable and property assignments.
• Doesn’t catch as many potential coding issues as strict mode.

Question 33

Question: What is the concept of currying in JavaScript, and how is it used?

Answer 33

Currying is a functional programming technique that involves transforming a function with multiple arguments into a sequence of functions, each taking a single argument. It allows partial application of arguments, creating new functions until all the required arguments are provided, resulting in the final value.

function multiply(a) {
return function(b) {
return a * b;
};
}

var multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5)); // Output: 10

Question 34

Explain the concept of memoization in JavaScript.

Answer 34

Memoization is an optimization technique where the return value of a function is cached based on its input parameters. If the function is called again with the same parameters, instead of re-computing the result, the cached value is returned. This can significantly improve performance for functions with expensive computations.

function memoize(fn) {
const cache = {};

return function(…args) {
const key = JSON.stringify(args);

if (key in cache) {
      return cache[key];
} else {
      const result = fn(...args);
  cache[key] = result;
  return result;
}   }; }

Question 35

What is the difference between shallow copy and deep copy in JavaScript? Provide examples for each.

Answer 35

1- Shallow copy: A shallow copy creates a new object that references the original object’s properties. Modifying the properties of the new object may affect the original object.

const originalObj = { name: 'John', age: 30 };
const shallowCopy = Object.assign({}, originalObj);

shallowCopy.name = 'Jane';
console.log(originalObj.name); // Output: 'John'

```
const originalObj = { name: ‘John’, age: 30 };
const deepCopy = JSON.parse(JSON.stringify(originalObj));

deepCopy.name = ‘Jane’;
console.log(originalObj.name); // Output: ‘John’
~~~

Question 36

Explain the concept of immutability in JavaScript and why it is important. Provide an example.

Answer 36

Immutability refers to the inability of an object (or its state) to be modified after it is created. In JavaScript, primitive values (e.g., strings, numbers) are immutable, while objects and arrays are mutable. Immutability is important because it helps avoid unintended side effects, enables simpler state management, and improves performance.

Question 37

What is a generator function in JavaScript? Provide an example of its usage.

Answer 37

A generator function is a special type of function that can be paused and resumed during its execution. It is defined using the function* syntax and uses the yield keyword to yield a sequence of values.
~~~
function* countUpTo(max) {
for (let i = 1; i <= max; i++) {
yield i;
}
}

const generator = countUpTo(5);

console.log(generator.next().value); // Output: 1
console.log(generator.next().value); // Output: 2
console.log(generator.next().value); // Output: 3
~~~

Question 38

Explain the concept of event bubbling in JavaScript and how to stop it. Provide an example.

Answer 38

Event bubbling is a phenomenon where an event triggered on a nested element is also triggered on its parent elements in the DOM hierarchy. It follows the order from the innermost element to the outermost element. To stop event bubbling, the event.stopPropagation() method can be used.
~~~
document.getElementById(‘inner’).addEventListener(‘click’, event => {
console.log(‘Inner element clicked’);
event.stopPropagation();
});

document.getElementById(‘outer’).addEventListener(‘click’, event => {
console.log(‘Outer element clicked’);
});
~~~

Question 39

What are the differences between function declarations and function expressions in JavaScript? Provide examples for each.

Answer 39

The main difference is that function declarations are hoisted and can be called before they are defined, whereas function expressions are not hoisted and must be defined before they are called.

Question 40

Explain the concept of the “rest” parameter in JavaScript functions and provide an example of its usage.

Answer 40

The “rest” parameter allows a function to accept an indefinite number of arguments as an array. It is denoted by three dots (…) followed by the parameter name. The rest parameter collects the remaining arguments passed to the function.
~~~
function sum(…numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15
~~~

Question 41

What is the purpose of the Object.setPrototypeOf() method in JavaScript? Provide an example.

Answer 41

The Object.setPrototypeOf() method is used to set the prototype (i.e., the internal [[Prototype]] property) of an object.

const parent = { name: 'John' };
const child = { age: 30 };

Object.setPrototypeOf(child, parent);

console.log(child.name); // Output: 'John'

Question 42

Explain the concept of the event-driven programming paradigm in JavaScript and provide an example.

Answer 42

Event-driven programming is a programming paradigm where the flow of the program is determined by events that occur, such as user actions or system events. The program responds to these events by executing corresponding event handlers or callbacks.

Question 43

What are JavaScript Promises, and how do they work? Provide an example.

Answer 43

Promises are a built-in feature in JavaScript used for handling asynchronous operations. They represent the eventual completion (or failure) of an asynchronous task and allow chaining of multiple asynchronous operations.
~~~
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = ‘Sample data’;
resolve(data);
}, 2000);
});
}

fetchData()
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
~~~

Question 44

Explain the concept of the module pattern in JavaScript and provide an example.

Answer 44

The module pattern is a design pattern used to encapsulate and organize code by creating self-contained modules with private and public members. It helps in achieving modularity, encapsulation, and separation of concerns.

const counterModule = (function() {
  let count = 0;

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }

  function getCount() {
    return count;
  }

  return {
    increment,
    decrement,
    getCount
  };
})();

console.log(counterModule.getCount()); // Output: 0
counterModule.increment();
counterModule.increment();
console.log(counterModule.getCount()); // Output: 2

Question 45

What is the event loop in JavaScript, and how does it work?

Answer 45

The event loop is a fundamental mechanism in JavaScript that allows non-blocking asynchronous operations to execute efficiently. It maintains a loop that continuously checks for tasks in the event queue. When a task is found, it is pushed onto the call stack for execution. This allows JavaScript to handle asynchronous operations seamlessly and ensure smooth program flow.

Question 46

Explain the concept of closures in JavaScript and provide an example.

Answer 46

Closures are an important concept in JavaScript where a function retains access to its lexical scope even when executed outside its original scope. This allows the function to access variables and parameters that were in scope at the time of its creation.

Question 47

What are the differences between “undefined” and “null” in JavaScript?

Answer 47

In JavaScript, “undefined” is a value assigned to variables that have been declared but have not been assigned a value. It signifies the absence of any value. On the other hand, “null” is a value that represents the intentional absence of an object value. It is often used as a placeholder when a value is expected but not yet determined.

Question 48

Explain the concept of prototypal inheritance in JavaScript.

Answer 48

Prototypal inheritance is a key feature of JavaScript that allows objects to inherit properties and methods from other objects. In this inheritance model, objects can serve as prototypes for creating new objects. When a property or method is accessed on an object, JavaScript searches the object’s prototype chain until it finds the desired property or method.

var parent = {
      name: "John",
  greet: function() {
        console.log("Hello, " + this.name + "!");
  }
};

var child = Object.create(parent);
child.name = "Emily";
child.greet(); // Output: Hello, Emily!

Question 49

Explain the differences between “let,” “const,” and “var” in JavaScript.

Answer 49

“let” and “const” were introduced in ES6 (ECMAScript 2015) and provide block-scoping, meaning they are limited to the block in which they are defined. “let” allows variable reassignment, while “const” is used for variables that should not be reassigned. “var” is function-scoped and can be hoisted, but it does not have block scope.

Question 50

How does “async/await” work in JavaScript?

Answer 50

“async/await” is a syntax introduced in ES2017 (ES8) that simplifies asynchronous code execution. The “async” keyword is used to define an asynchronous function, while the “await” keyword is used to pause the execution of the function until a Promise is resolved or rejected.

Question 51

What are the different ways to create objects in JavaScript? Provide examples for each method.

Answer 51

Object literals:
~~~
const obj = { key: value };
~~~
Constructor functions:
~~~
function Person(name) {
this.name = name;
}

const person = new Person(‘John’);
~~~
Object.create():
~~~
const protoObj = {
greet: function() {
console.log(‘Hello’); }
};
const obj = Object.create(protoObj);
~~~
ES6 Classes:
~~~
class Person {
constructor(name) {
this.name = name;
}
}

const person = new Person(‘John’);
~~~

Question 52

What is the difference between call(), apply(), and bind() methods? Provide examples for each.

Answer 52

call(): Calls a function with a specified this value and arguments passed individually.
~~~
function greet(message) {
console.log(message + ‘, ‘ + this.name);
}

const person = { name: ‘John’ };
greet.call(person, ‘Hello’);
~~~
apply(): Calls a function with a specified this value and arguments passed as an array-like object.
~~~
function greet(message) {
console.log(message + ‘, ‘ + this.name);
}

const person = { name: ‘John’ };
greet.apply(person, [‘Hello’]);
~~~
bind(): Creates a new function with a specified this value and initial arguments.
~~~
function greet(message) {
console.log(message + ‘, ‘ + this.name);
}

const person = { name: ‘John’ };
const greetPerson = greet.bind(person);
greetPerson(‘Hello’);
~~~

Question 53

What are the different ways to handle errors in JavaScript? Provide examples for each method.

Answer 53

1. Using try…catch
2. Using throw to manually throw an error:
3. Using finally to specify code that will always execute:

try {
  // Code that may throw an error
} catch (error) {
  // Handle the error
} finally {
  // Code that always executes
}

Question 54

Explain the concept of promises in JavaScript and provide an example of their usage.

Answer 54

Promises are objects representing the eventual completion or failure of an asynchronous operation. They allow handling asynchronous operations in a more structured and readable way.

Question 55

What is the purpose of the map() function in JavaScript? Provide an example.

Answer 55

The map() function is used to transform elements of an array and return a new array with the transformed values, without modifying the original array.

Question 56

Explain the concept of debouncing and provide an example of its usage.

Answer 56

Debouncing is a technique used to limit the rate at which a function is called, especially in scenarios where the function is triggered frequently. It delays the execution of a function until a certain amount of time has passed since the last invocation.

Question 57

What is the purpose of the reduce() function in JavaScript? Provide an example.

Answer 57

The reduce() function is used to reduce an array to a single value by applying a function to each element of the array, accumulating the result.

Question 58

Explain the concept of hoisting in JavaScript and provide an example.

Answer 58

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the creation phase, allowing them to be used before they are declared.

Question 59

What is the purpose of the Object.keys() method in JavaScript? Provide an example.

Answer 59

The Object.keys() method is used to extract all enumerable property names of an object and return them as an array.

Question 60

Explain the concept of event delegation in JavaScript and provide an example.

Answer 60

Event delegation is a technique where instead of attaching an event listener to each individual element, a single event listener is attached to a common ancestor. Events are then handled based on their target element within the ancestor.

Question 61

What is the opposite of event bubbling?

Answer 61

Event capturing

Question 62

What is the difference between event bubbling and event capturing?

Answer 62

In bubbling the inner most element’s event is handled first and then the outer: the <p> element’s click event is handled first, then the <div> element’s click event.

In capturing the outer most element’s event is handled first and then the inner: the <div> element’s click event will be handled first, then the <p> element’s click event.

Question 63

How do you deep clone an object and what errors can occur?

Answer 63

Use the new method: structuredClone.
You cannot clone an object with functions as properties