Question 1: What were the 10 new features that were introduced in ES6?

Explain each
one of them in detail?

1. Arrow Functions:
o Syntax for writing concise function expressions. They use the => syntax.
o Example:

javascript
Copy code
const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

oDifferences from regular functions: no own this, no arguments object.

2. Template Literals:
o Strings that allow embedded expressions, multiline strings, and string
interpolation using backticks (`).
o Example:

javascript
Copy code
const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!

3. Default Parameters:
o Function parameters can have default values if no argument is provided.
o Example:

javascript
Copy code
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, Guest!
greet('John'); // Output: Hello, John!

4. Destructuring Assignment:
o A syntax for unpacking values from arrays or properties from objects into
distinct variables.
o Example:

javascript
Copy code
const [a, b] = [1, 2];
console.log(a, b); // Output: 1 2

const { name, age } = { name: 'John', age: 30 };

console.log(name, age); // Output: John 30

5. Rest and Spread Operators:

o ... syntax for expanding or collecting elements.
o Example:

javascript
 Copy code
// Spread
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
console.log(newArr); // Output: [1, 2, 3, 4, 5]

// Rest
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // Output: 6

6. Classes:
o Syntactic sugar for constructor functions and prototypes-based inheritance.
o Example:

javascript
Copy code
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}

const john = new Person('John', 30);

john.greet(); // Output: Hello, my name is John

7. Enhanced Object Literals:

o Improved syntax for defining object properties and methods.
o Example:

javascript
Copy code
const name = 'John';
const age = 30;

const person = {
name,
age,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};

console.log(person); // Output: { name: 'John', age: 30, greet:

[Function: greet] }

8. Modules:
o Native support for modular code using import and export statements.
o Example:

javascript
Copy code
// In module.js
 export const greet = name => `Hello, ${name}`;

// In main.js
import { greet } from './module.js';
console.log(greet('John')); // Output: Hello, John

9. Promises:
o Objects representing the eventual completion or failure of an asynchronous
operation.
o Example:

javascript
Copy code
const fetchData = () => new Promise((resolve, reject) => {
setTimeout(() => resolve('Data received'), 1000);
});

fetchData().then(data => console.log(data)); // Output: Data

received

10. Generators:
o Functions that can be paused and resumed, producing a sequence of values.
o Example:

javascript
Copy code
function* generator() {
yield 1;
yield 2;
yield 3;
}

const gen = generator();

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

Question 2: Call, Apply, Bind. When to use what? Can you give an example?

• Call:
o Method to invoke a function with a specified this value and arguments
provided individually.
o Example:

javascript
Copy code
function greet() {
console.log(`Hello, ${this.name}`);
}

const person = { name: 'John' };

greet.call(person); // Output: Hello, John

• Apply:
o Method to invoke a function with a specified this value and arguments
provided as an array.
 o Example:

javascript
Copy code
function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'John' };

greet.apply(person, ['Hello', '!']); // Output: Hello, John!

• Bind:
o Method to create a new function with a specified this value and initial
arguments.
o Example:

javascript
Copy code
function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'John' };

const greetJohn = greet.bind(person, 'Hello');
greetJohn('!'); // Output: Hello, John!

Question 3: What are different ways to store data in the browser? Explain each one of
them and when should we use what?

• Cookies:
o Small pieces of data stored by the browser, sent with every HTTP request.
o Use for: Storing small amounts of data that needs to be sent to the server with
every request, like session identifiers.
• Local Storage:
o Provides a way to store key-value pairs in the browser with no expiration date.
o Use for: Storing data that needs to persist across sessions, like user
preferences.
o Example:

javascript
Copy code
localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // Output: value

• Session Storage:
o Similar to local storage but data is cleared when the page session ends.
o Use for: Storing data that only needs to persist for a single session.
o Example:

javascript
Copy code
sessionStorage.setItem('key', 'value');
console.log(sessionStorage.getItem('key')); // Output: value
 • IndexedDB:
o A low-level API for storing large amounts of structured data.
o Use for: Complex data storage requirements, like offline applications.
o Example:

javascript
Copy code
const request = indexedDB.open('myDatabase', 1);
request.onsuccess = function(event) {
const db = event.target.result;
console.log('Database opened successfully');
};

Question 4: What are generator functions in JavaScript? How are they different from
normal functions?

• Generator Functions:
o Functions that can be paused and resumed, producing a sequence of values
using the function* syntax.
o Example:

javascript
Copy code
function* generator() {
yield 1;
yield 2;
yield 3;
}

const gen = generator();

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

• Difference from Normal Functions:

o Generators can pause their execution using yield and can be resumed later.
o They return an iterator object that can be used to control the execution.

Question 5: Difference between array.forEach, array.map, and array.filter? Take

example input array and explain the output which you will get.

• array.forEach:
o Iterates over an array and executes a provided function once for each array
element. Does not return a new array.
o Example:

javascript
Copy code
const arr = [1, 2, 3];
arr.forEach(num => console.log(num * 2));
// Output: 2 4 6

• array.map:
 o Creates a new array with the results of calling a provided function on every
element in the array.
o Example:

javascript
Copy code
const arr = [1, 2, 3];
const newArr = arr.map(num => num * 2);
console.log(newArr); // Output: [2, 4, 6]

• array.filter:
o Creates a new array with all elements that pass the test implemented by the
provided function.
o Example:

javascript
Copy code
const arr = [1, 2, 3, 4];
const newArr = arr.filter(num => num % 2 === 0);
console.log(newArr); // Output: [2, 4]

Question 6: What is the use of array.reduce? Explain with an example.

• array.reduce:
o Executes a reducer function on each element of the array, resulting in a single
output value.
o Example:

javascript
Copy code
const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

o The reducer function takes four arguments: accumulator, current value, current
index, and the array being processed.
o Useful for summing values, flattening arrays, or creating more complex data
structures.

Feel free to ask for more details or examples on any specific feature or concept!