Full Stack Developer Interview Questions 2024 — (Part 2— ES6 + JavaScript)

Souvik Majumder

·

Follow

7 min read

·

Nov 9, 2024

--

Listen

Share

1. How does the Set object handle duplicates, and how can you use it to remove duplicates from an array?

• Explanation: Set only stores unique values, automatically removing duplicates.

const numbers = [1, 2, 2, 3, 4, 4];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4]

2. What is the difference between forEach and map methods in JavaScript?

• Explanation: forEach iterates over array elements and performs an action but returns undefined. map creates a new array with the results of applying a function to each element.

const array = [1, 2, 3];
array.forEach(num => console.log(num * 2)); // 2, 4, 6

const doubled = array.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

3. Explain var, let, and const scope differences and hoisting behavior.

• Explanation: var is function-scoped and hoisted, meaning it can be accessed before its declaration, but without an assigned value (undefined). let and const are block-scoped and are also hoisted but are in a “temporal dead zone” (TDZ), meaning they cannot be accessed before declaration.

console.log(x); // undefined (var is hoisted)
var x = 5;

// console.log(y); // ReferenceError: Cannot access 'y' before initialization (TDZ)
let y = 10;
const z = 15;

4. What is hoisting in JavaScript, and how does it affect variable and function declarations?

• Explanation: Hoisting moves variable and function declarations to the top of their scope during the compile phase. Function declarations are fully hoisted (can be invoked before they appear in code), while var declarations are hoisted without initialization.

console.log(foo()); // "Hello"
function foo() {
  return "Hello";
}

console.log(bar); // undefined (due to hoisting of declaration only)
var bar = "Hi";

5. What are closures, and how are they created in JavaScript?

• Explanation: A closure is formed when a function retains access to its lexical environment, even after its containing function has executed. Closures allow functions to access variables from their outer scope.

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

6. Explain execution context in JavaScript and its components.

• Explanation: Execution context is the environment in which JavaScript code is evaluated. It consists of the variable object (contains function arguments and variables), the scope chain, and the value of this.
• Example: Global execution context is created by default; every function call creates a new execution context with its scope.

7. How do array prototype methods like map, filter, and reduce work?

• Explanation: These methods are built into the Array.prototype and provide ways to transform or aggregate array data.

const array = [1, 2, 3, 4];
console.log(array.map(x => x * 2)); // [2, 4, 6, 8]
console.log(array.filter(x => x % 2 === 0)); // [2, 4]
console.log(array.reduce((acc, x) => acc + x, 0)); // 10

8. Explain Function.prototype.bind, call, and apply methods with examples.

• Explanation: call and apply invoke a function with a specified this context. bind returns a new function with bound this but does not execute it immediately.

const obj = { num: 2 };
function add(a, b) {
  return this.num + a + b;
}
console.log(add.call(obj, 3, 4)); // 9
console.log(add.apply(obj, [3, 4])); // 9

const boundAdd = add.bind(obj, 3);
console.log(boundAdd(4)); // 9

9. What is currying in JavaScript, and how is it useful?

• Explanation: Currying transforms a function with multiple arguments into a series of functions, each with a single argument, enhancing reusability and flexibility.

function curryAdd(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}
console.log(curryAdd(1)(2)(3)); // 6

10. How does the this keyword behave in JavaScript, especially with arrow functions and methods?

• Explanation: this refers to the calling context. In regular functions, this can vary, while arrow functions capture this from their lexical scope (outer function or global).

const obj = {
  value: 10,
  method: function() {
    console.log(this.value); // 10
  },
  arrowMethod: () => {
    console.log(this.value); // undefined (lexical scope is global)
  }
};
obj.method();
obj.arrowMethod();

11. Explain left shift (<<) and right shift (>>) operators in JavaScript.

• Explanation: Bitwise shift operators move the bits of a number to the left or right, effectively multiplying or dividing by powers of two.

console.log(5 << 1); // 10 (5 * 2)
console.log(20 >> 2); // 5 (20 / 4)

12. What are higher-order functions, and how are they useful?

• Explanation: Higher-order functions accept functions as arguments or return functions as results, enabling more modular and flexible code.

function greet(name) {
  return `Hello, ${name}`;
}
function logGreeting(fn, name) {
  console.log(fn(name));
}
logGreeting(greet, 'Alice'); // "Hello, Alice"

13. What is event delegation, and how does it work in JavaScript?

• Explanation: Event delegation is a technique where a single event listener is attached to a parent element to manage events for multiple child elements. It improves performance by reducing the number of event listeners.

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<script>
  document.getElementById('list').addEventListener('click', (event) => {
    console.log(`Clicked on ${event.target.textContent}`);
  });
</script>

14. What are IIFEs (Immediately Invoked Function Expressions), and why are they used?

• Explanation: IIFEs are functions that execute immediately after being defined, often used to create a private scope and avoid polluting the global namespace.

(function() {
  const secret = "I'm private!";
  console.log(secret); // "I'm private!"
})();
// console.log(secret); // ReferenceError: secret is not defined

15. How does the JavaScript engine execute code (call stack, event loop, Web APIs)?

• Explanation: JavaScript is single-threaded. The call stack handles synchronous code, Web APIs handle asynchronous tasks, and the event loop manages the callback queue, pushing completed tasks to the call stack.

console.log('Start');
setTimeout(() => console.log('Async task'), 0);
console.log('End');
// Output: "Start", "End", "Async task"

16. What are default parameters in ES6?

• Explanation: Default parameters allow you to specify default values for function parameters, enabling you to call functions without explicitly passing all arguments.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Alice')); // "Hello, Alice!"

17. What is Map in ES6, and how does it differ from a regular object?

• Explanation: Map is a data structure introduced in ES6 that allows key-value pairs where keys can be any data type, unlike objects where keys are typically strings.

const map = new Map();
map.set('name', 'Alice');
map.set(42, 'The answer');
console.log(map.get('name')); // "Alice"
console.log(map.get(42)); // "The answer"

18. How does the Set data structure work in ES6, and when would you use it?

• Explanation: Set is a collection of unique values, where duplicates are automatically removed. It's useful for storing distinct values and eliminating duplicates from arrays.

const set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set { 1, 2, 3, 4 }

19. What is the difference between for...of and for...in loops in ES6?

• Explanation: for...of is used to iterate over iterable objects (like arrays, strings, maps), returning values, while for...in iterates over enumerable properties of an object, returning keys.

const array = ['a', 'b', 'c'];
for (const value of array) {
  console.log(value); // "a", "b", "c"
}

const obj = { name: 'Alice', age: 25 };
for (const key in obj) {
  console.log(key); // "name", "age"
}

20. How does async/await work in ES8, and how does it simplify asynchronous code?

• Explanation: async and await provide a way to write asynchronous code that looks and behaves like synchronous code, making it easier to read and debug. The await keyword pauses the function execution until the promise resolves.

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}
fetchData();

21. What are tagged template literals, and what are they used for?

• Explanation: Tagged template literals allow you to parse template literals with a custom function, which can manipulate the template’s result in different ways.

function tag(strings, ...values) {
  return strings[0] + values.join('-');
}
const result = tag`Hello ${'Alice'} and ${'Bob'}`;
console.log(result); // "Hello Alice-Bob"

22. What are optional chaining (?.) and nullish coalescing (??) operators?

• Explanation: Optional chaining (?.) allows you to safely access deeply nested properties, returning undefined if any part is null or undefined. Nullish coalescing (??) returns the right-hand operand if the left is null or undefined.

const user = { name: 'Alice', address: { city: 'Wonderland' } };
console.log(user.address?.city); // "Wonderland"
console.log(user.address?.street); // undefined

const foo = null;
console.log(foo ?? 'default'); // "default"

23. Explain how array and object destructuring work with default values.

• Explanation: Destructuring allows you to unpack values from arrays or objects with an option to set default values if they’re undefined.

const [a = 10, b = 20] = [5];
console.log(a); // 5
console.log(b); // 20

const { name = 'Guest', age = 30 } = { name: 'Alice' };
console.log(name); // "Alice"
console.log(age); // 30

24. How does dynamic import() work in ES2020, and what are its use cases?

• Explanation: Dynamic import() allows you to load modules dynamically, enabling lazy-loading and conditional loading of modules.

async function loadModule() {
  const module = await import('./module.js');
  console.log(module.greet()); // "Hello"
}
loadModule();

25. What are Iterators and Generators?

• Iterators provide a standard way to iterate over data, while generators allow you to define functions that can pause and resume their execution, useful for handling asynchronous data.

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1

26. What are Rest and Spread Operators (...)?

• The spread operator (...) expands elements in arrays or properties in objects, while the rest operator collects multiple elements into an array.

const arr = [1, 2, 3];
const arr2 = [...arr, 4, 5];

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

27. What are the ES6 features or principles?

— Summary of ES6 Principles

• Modularity: Enhanced by the new module syntax, allowing separation and reuse of code across files.
• Conciseness: Features like arrow functions, template literals, and destructuring assignment help reduce boilerplate code.
• Consistency and Clarity: Class syntax, let/const, and the block-scoped variable declarations promote code clarity and help prevent bugs.
• Performance and Efficiency: Promises, iterators, and generators offer optimized handling of asynchronous code, while new data structures (Map, Set, WeakMap, WeakSet) improve data handling efficiency.
• Readability and Maintainability: The new syntax and features encourage writing cleaner, more maintainable, and reusable code.

<- Revise Part 1 (React.js)

Continue to Part 3 (CSS, SCSS) ->