es6-advanced-features - javascript Interview Questions | Preplance

// ARRAY DESTRUCTURING const arr = [1, 2, 3, 4, 5]; // Basic extraction const [first, second] = arr; console.log(first); // 1 console.log(second); // 2 // Skip elements const [a, , c] = arr; console.log(a); // 1 console.log(c); // 3 // Rest operator const [head, ...tail] = arr; console.log(head); // 1 console.log(tail); // [2, 3, 4, 5] // Default values const [x, y, z = 10] = [1, 2]; console.log(z); // 10 // Swapping variables let num1 = 10; let num2 = 20; [num1, num2] = [num2, num1]; console.log(num1); // 20 console.log(num2); // 10 // Nested arrays const nested = [1, [2, 3], 4]; const [n1, [n2, n3]] = nested; console.log(n2); // 2 // String destructuring const [char1, char2] = 'hello'; console.log(char1); // 'h' // OBJECT DESTRUCTURING const user = { name: 'John', age: 30, email: 'john@example.com' }; // Basic extraction const {name, age} = user; console.log(name); // 'John' console.log(age); // 30 // Rename variables const {name: userName, age: userAge} = user; console.log(userName); // 'John' // Default values const {email, phone = 'N/A'} = user; console.log(phone); // 'N/A' // Rest operator const {name: n, ...others} = user; console.log(others); // {age: 30, email: '...'} // Nested objects const person = { name: 'John', address: { city: 'NYC', zip: '10001' } }; const { name: personName, address: {city, zip} } = person; console.log(city); // 'NYC' // FUNCTION PARAMETERS // Object destructuring in params function greet({name, age, country = 'USA'}) { console.log(`${name}, ${age}, from ${country}`); } greet({name: 'John', age: 30}); // 'John, 30, from USA' // Array destructuring in params function sum([a, b]) { return a + b; } console.log(sum([5, 3])); // 8 // ADVANCED PATTERNS // Computed property names const key = 'name'; const {[key]: value} = {name: 'John'}; console.log(value); // 'John' // Destructure and keep original const data = {x: 1, y: 2}; const {x, y, ...copy} = data; console.log(copy); // {x: 1, y: 2} // Multiple returns from function function getUser() { return { name: 'John', age: 30, email: 'john@example.com' }; } const {name: n2, email: e} = getUser(); // Array method returns function getCoordinates() { return [10, 20]; } const [x2, y2] = getCoordinates(); // PRACTICAL EXAMPLES // API response const response = { data: { user: { id: 1, name: 'John', profile: { avatar: 'url', bio: 'text' } } }, status: 200 }; const { data: { user: { name: userName2, profile: {avatar} } }, status } = response; console.log(userName2, avatar, status); // React props function Component({title, count = 0, onClick}) { return `${title}: ${count}`; } // Array methods const users = [ {name: 'John', age: 30}, {name: 'Jane', age: 25} ]; users.forEach(({name, age}) => { console.log(name, age); }); const names = users.map(({name}) => name); // For...of with destructuring for (const {name, age} of users) { console.log(name, age); } // Object.entries const obj = {a: 1, b: 2, c: 3}; for (const [key, value] of Object.entries(obj)) { console.log(key, value); } // GOTCHAS // Error: destructuring undefined/null // const {x} = undefined; // TypeError! // const {y} = null; // TypeError! // Safe with default const {x: x3} = undefined || {}; // OK // Assignment destructuring needs parentheses let name2, age2; ({name: name2, age: age2} = {name: 'John', age: 30}); // Parentheses required! // Default only for undefined const {val = 10} = {val: 0}; console.log(val); // 0 (not 10) const {val2 = 10} = {val2: null}; console.log(val2); // null (not 10)

2. Compare Promises and async/await. Explain error handling, parallel execution, and best practices for each.

Difficulty: HardType: SubjectiveTopic: Promises

Promises and async await are two ways to handle asynchronous operations in JavaScript. Async await is built on Promises and provides cleaner syntax. Promises: Represent eventual completion or failure of async operation. Use then for success, catch for errors, finally for cleanup. Can chain multiple operations with then. Promise.all for parallel execution. Promise.race for first completed. More explicit about async nature. Async Await: Syntactic sugar over Promises. Makes async code look synchronous. Use try catch for error handling. Easier to read and debug. Can use await in loops naturally. Top-level await in modules. Error handling: Promises use catch method or second argument to then. Async await uses try catch blocks. Catch can handle errors from multiple thens. Try catch can wrap multiple awaits. Finally block works for cleanup in both. Parallel execution: Promises naturally support Promise.all for concurrent operations. Async await needs Promise.all explicitly. Sequential awaits are slower. Always use Promise.all for independent operations. Promise.allSettled waits for all regardless of failures. When to use Promises: Complex chaining with transformations. Multiple independent operations. When you need promise objects. Working with Promise combinators. Callback-based APIs with promisify. When to use async await: Linear flow of operations. Better readability needed. Using with loops. Complex try catch needed. Most new code. Best practices: Always handle errors with catch or try catch. Use Promise.all for parallel operations. Avoid sequential awaits for independent operations. Return promises from async functions when appropriate. Use Promise.allSettled when all results needed. Name async functions descriptively. Common mistakes: Forgetting to await or return promises. Sequential awaits causing slow code. Not handling promise rejections. Mixing callbacks with promises. Using async without await unnecessarily. Understanding both approaches and when to use each shows mastery of asynchronous JavaScript.

Example code

// PROMISES

// Basic promise
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({id, name: 'John'});
      } else {
        reject('Invalid ID');
      }
    }, 1000);
  });
}

// Using promises
fetchUser(1)
  .then(user => {
    console.log('User:', user);
    return fetchPosts(user.id);
  })
  .then(posts => {
    console.log('Posts:', posts);
    return fetchComments(posts[0].id);
  })
  .then(comments => {
    console.log('Comments:', comments);
  })
  .catch(error => {
    console.error('Error:', error);
  })
  .finally(() => {
    console.log('Cleanup');
  });

// ASYNC/AWAIT

async function getUserData(id) {
  try {
    const user = await fetchUser(id);
    console.log('User:', user);
    
    const posts = await fetchPosts(user.id);
    console.log('Posts:', posts);
    
    const comments = await fetchComments(posts[0].id);
    console.log('Comments:', comments);
    
    return {user, posts, comments};
  } catch (error) {
    console.error('Error:', error);
    throw error; // Re-throw if needed
  } finally {
    console.log('Cleanup');
  }
}

// PARALLEL EXECUTION

// Promises - Promise.all
Promise.all([
  fetchUser(1),
  fetchPosts(1),
  fetchComments(1)
])
  .then(([user, posts, comments]) => {
    console.log({user, posts, comments});
  })
  .catch(error => {
    console.error('One failed:', error);
  });

// Async/await - sequential (SLOW)
async function sequentialSlow() {
  const user = await fetchUser(1);     // Wait
  const posts = await fetchPosts(1);   // Then wait
  const comments = await fetchComments(1); // Then wait
  return {user, posts, comments};
}
// Total time: sum of all

// Async/await - parallel (FAST)
async function parallelFast() {
  const [user, posts, comments] = await Promise.all([
    fetchUser(1),
    fetchPosts(1),
    fetchComments(1)
  ]);
  return {user, posts, comments};
}
// Total time: max of all

// Start promises, then await
async function parallelPattern() {
  const userPromise = fetchUser(1);
  const postsPromise = fetchPosts(1);
  const commentsPromise = fetchComments(1);
  
  const user = await userPromise;
  const posts = await postsPromise;
  const comments = await commentsPromise;
  
  return {user, posts, comments};
}

// ERROR HANDLING COMPARISON

// Promises - catch chain
fetchUser(1)
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .catch(error => {
    // Catches any error in the chain
    console.error(error);
  });

// Async/await - try/catch
async function withErrorHandling() {
  try {
    const user = await fetchUser(1);
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
  } catch (error) {
    // Catches any error
    console.error(error);
  }
}

// Multiple try/catch for specific handling
async function specificErrorHandling() {
  let user, posts;
  
  try {
    user = await fetchUser(1);
  } catch (error) {
    console.error('User fetch failed:', error);
    return null;
  }
  
  try {
    posts = await fetchPosts(user.id);
  } catch (error) {
    console.error('Posts fetch failed:', error);
    posts = [];
  }
  
  return {user, posts};
}

// PROMISE COMBINATORS

// Promise.all - all must succeed
Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(err => console.log('One failed'));

// Promise.allSettled - wait for all
Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Success:', result.value);
      } else {
        console.log('Failed:', result.reason);
      }
    });
  });

// Promise.race - first to finish
Promise.race([promise1, promise2])
  .then(result => console.log('First:', result));

// Promise.any - first fulfilled
Promise.any([promise1, promise2, promise3])
  .then(result => console.log('First success:', result));

// PRACTICAL PATTERNS

// Retry logic with promises
function retry(fn, retries = 3) {
  return fn().catch(err => {
    if (retries > 0) {
      return retry(fn, retries - 1);
    }
    throw err;
  });
}

// Retry logic with async/await
async function retryAsync(fn, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      return await fn();
    } catch (error) {
      if (i === retries - 1) throw error;
    }
  }
}

// Timeout wrapper
function withTimeout(promise, ms) {
  return Promise.race([
    promise,
    new Promise((_, reject) => 
      setTimeout(() => reject('Timeout'), ms)
    )
  ]);
}

// Sequential processing
async function processSequentially(items) {
  const results = [];
  for (const item of items) {
    const result = await processItem(item);
    results.push(result);
  }
  return results;
}

// Parallel processing
async function processParallel(items) {
  return Promise.all(
    items.map(item => processItem(item))
  );
}

// BEST PRACTICES

// Always return promises
async function good() {
  return await fetchData(); // or just: return fetchData();
}

// Avoid unnecessary async
function unnecessary() { // Don't need async here
  return fetchData(); // Already returns promise
}

// Handle errors
async function alwaysHandle() {
  try {
    return await fetchData();
  } catch (error) {
    console.error(error);
    return null; // Provide fallback
  }
}

// Use Promise.all for independent operations
async function efficient() {
  return Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchSettings()
  ]);
}

// ARRAY SPREAD // Copy array const arr1 = [1, 2, 3]; const arr2 = [...arr1]; arr2.push(4); console.log(arr1); // [1, 2, 3] (unchanged) console.log(arr2); // [1, 2, 3, 4] // Combine arrays const nums1 = [1, 2]; const nums2 = [3, 4]; const combined = [...nums1, ...nums2]; console.log(combined); // [1, 2, 3, 4] // Add elements while spreading const items = [2, 3]; const extended = [1, ...items, 4, 5]; console.log(extended); // [1, 2, 3, 4, 5] // Function arguments const numbers = [5, 10, 15]; console.log(Math.max(...numbers)); // 15 // Same as: Math.max(5, 10, 15) // String to array const str = 'hello'; const chars = [...str]; console.log(chars); // ['h', 'e', 'l', 'l', 'o'] // OBJECT SPREAD // Copy object const user = {name: 'John', age: 30}; const userCopy = {...user}; userCopy.age = 31; console.log(user.age); // 30 (unchanged) // Merge objects const defaults = {theme: 'light', lang: 'en'}; const settings = {theme: 'dark'}; const config = {...defaults, ...settings}; console.log(config); // {theme: 'dark', lang: 'en'} // Later properties override earlier ones // Add properties while spreading const person = {name: 'John'}; const employee = {...person, role: 'Developer', id: 123}; console.log(employee); // {name: 'John', role: 'Developer', id: 123} // SHALLOW COPY WARNING const original = { name: 'John', address: {city: 'NYC'} }; const copy = {...original}; copy.address.city = 'LA'; console.log(original.address.city); // 'LA' (changed!) // Nested objects are still referenced // PRACTICAL EXAMPLES // React state updates const state = {count: 0, user: {name: 'John'}}; const newState = {...state, count: state.count + 1}; // Array operations const todos = ['Task 1', 'Task 2']; const withNew = [...todos, 'Task 3']; const withoutFirst = todos.slice(1); // or [...todos.slice(1)] // Remove item by index const arr = [1, 2, 3, 4, 5]; const index = 2; const removed = [...arr.slice(0, index), ...arr.slice(index + 1)]; console.log(removed); // [1, 2, 4, 5]

// REST PARAMETERS - real array function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4)); // 10 console.log(sum(5, 10)); // 15 // numbers is a real array function demo(...args) { console.log(Array.isArray(args)); // true console.log(args.map(x => x * 2)); // Works! } // Mixed parameters with rest function greet(greeting, ...names) { return `${greeting} ${names.join(' and ')}`; } console.log(greet('Hello', 'John', 'Jane', 'Bob')); // 'Hello John and Jane and Bob' // ARGUMENTS OBJECT - array-like function oldWay() { console.log(Array.isArray(arguments)); // false // arguments.map(); // Error! No map method // Convert to array const arr = Array.from(arguments); // or const arr2 = [...arguments]; // or const arr3 = Array.prototype.slice.call(arguments); } // Arrow functions have NO arguments object const arrowFunc = () => { // console.log(arguments); // ReferenceError! }; // Must use rest parameters in arrow functions const arrowSum = (...nums) => { return nums.reduce((a, b) => a + b, 0); }; // PRACTICAL EXAMPLES // Logger with variable arguments function log(level, ...messages) { const timestamp = new Date().toISOString(); console.log(`[${level}] ${timestamp}:`, ...messages); } log('ERROR', 'Database error', 'Connection failed'); // Flexible calculator function calculate(operation, ...nums) { switch(operation) { case 'add': return nums.reduce((a, b) => a + b, 0); case 'multiply': return nums.reduce((a, b) => a * b, 1); default: return 0; } } console.log(calculate('add', 1, 2, 3, 4)); // 10 console.log(calculate('multiply', 2, 3, 4)); // 24 // Destructuring with rest const [first, second, ...rest] = [1, 2, 3, 4, 5]; console.log(first); // 1 console.log(second); // 2 console.log(rest); // [3, 4, 5] const {a, b, ...others} = {a: 1, b: 2, c: 3, d: 4}; console.log(others); // {c: 3, d: 4} // Function accepting unlimited callbacks function executeAll(...callbacks) { callbacks.forEach(cb => cb()); } executeAll( () => console.log('First'), () => console.log('Second'), () => console.log('Third') );

// MAP - any type as key const map = new Map(); // Object as key const keyObj = {id: 1}; map.set(keyObj, 'value'); // Function as key const keyFunc = () => {}; map.set(keyFunc, 'function value'); // Primitive as key map.set(1, 'number key'); map.set('name', 'string key'); console.log(map.get(keyObj)); // 'value' console.log(map.get(1)); // 'number key' // OBJECT - only string/symbol keys const obj = {}; obj[keyObj] = 'value'; // Converts to '[object Object]' obj[1] = 'value'; // Converts to '1' console.log(obj[keyObj]); // 'value' console.log(obj['[object Object]']); // 'value' (same!) // MAP METHODS const map2 = new Map(); // Set value map2.set('name', 'John'); map2.set('age', 30); // Get value console.log(map2.get('name')); // 'John' // Check if key exists console.log(map2.has('name')); // true // Delete key map2.delete('age'); // Size console.log(map2.size); // 1 // Clear all map2.clear(); // ITERATION const map3 = new Map([ ['a', 1], ['b', 2], ['c', 3] ]); // forEach map3.forEach((value, key) => { console.log(key, value); }); // for...of for (const [key, value] of map3) { console.log(key, value); } // Keys, values, entries console.log([...map3.keys()]); // ['a', 'b', 'c'] console.log([...map3.values()]); // [1, 2, 3] console.log([...map3.entries()]); // [['a',1], ['b',2], ['c',3]] // SET - unique values const set = new Set(); set.add(1); set.add(2); set.add(2); // Duplicate ignored set.add(3); console.log(set.size); // 3 console.log(set.has(2)); // true set.delete(2); set.clear(); // Array to Set (remove duplicates) const arr = [1, 2, 2, 3, 3, 4]; const uniqueSet = new Set(arr); const uniqueArr = [...uniqueSet]; console.log(uniqueArr); // [1, 2, 3, 4] // PRACTICAL EXAMPLES // Cache with Map const cache = new Map(); function memoizedFunction(key) { if (cache.has(key)) { return cache.get(key); } const result = expensiveOperation(key); cache.set(key, result); return result; } // DOM elements as keys const elementData = new Map(); const button = document.getElementById('btn'); elementData.set(button, {clicks: 0, lastClick: null}); // Unique values with Set const usernames = new Set(); usernames.add('john'); usernames.add('jane'); if (usernames.has('john')) { console.log('Username taken'); } // WEAKMAP and WEAKSET // WeakMap - keys are objects, garbage collected const weakMap = new WeakMap(); let obj2 = {id: 1}; weakMap.set(obj2, 'data'); obj2 = null; // Object can be garbage collected // WeakSet - values are objects, garbage collected const weakSet = new WeakSet(); let obj3 = {id: 1}; weakSet.add(obj3); obj3 = null; // Object can be garbage collected

// OPTIONAL CHAINING BASICS const obj = null; console.log(obj?.prop?.nested); // undefined (no error) // Without optional chaining // console.log(obj.prop.nested); // TypeError! // Traditional way const value1 = obj && obj.prop && obj.prop.nested; // PROPERTY ACCESS const user = { name: 'John', address: { city: 'NYC' } }; console.log(user?.name); // 'John' console.log(user?.address?.city); // 'NYC' console.log(user?.address?.zip); // undefined console.log(user?.contact?.email); // undefined const emptyUser = null; console.log(emptyUser?.name); // undefined (not error) // ARRAY ACCESS const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[10]); // undefined const nullArr = null; console.log(nullArr?.[0]); // undefined // FUNCTION CALLS const obj2 = { greet: () => 'Hello' }; console.log(obj2.greet?.()); // 'Hello' console.log(obj2.missing?.()); // undefined (no error) const nullObj = null; console.log(nullObj.method?.()); // undefined // COMBINING WITH NULLISH COALESCING const user2 = null; const name = user2?.name ?? 'Guest'; console.log(name); // 'Guest' const city = user2?.address?.city ?? 'Unknown'; console.log(city); // 'Unknown' // PRACTICAL EXAMPLES // API response handling const response = await fetch('/api/user'); const data = await response.json(); const email = data?.user?.profile?.email ?? 'No email'; // Event handler button?.addEventListener?.('click', handleClick); // Nested object access const config = { server: { host: 'localhost', port: 3000 } }; const port = config?.server?.port ?? 8080; const ssl = config?.server?.ssl?.enabled ?? false; // Array of objects const users = [ {name: 'John', address: {city: 'NYC'}}, {name: 'Jane'}, null ]; users.forEach(user => { console.log(user?.address?.city ?? 'No city'); }); // 'NYC', 'No city', 'No city' // Method chaining const result = obj ?.getData?.() ?.filter?.(x => x > 0) ?.[0]; // DELETE with optional chaining delete user?.address?.street; // Safe // WHEN NOT TO USE // Don't overuse const bad = data?.prop1?.prop2?.prop3?.prop4?.prop5; // This might hide design issues // Use with intention if (user?.address) { // We know user and address exist here console.log(user.address.city); // No need for ? } // COMPARISON // Old way - repetitive const city1 = user && user.address && user.address.city; // New way - clean const city2 = user?.address?.city; // Old way - try-catch try { const email1 = user.contact.email; } catch { const email1 = null; } // New way - optional chaining const email2 = user?.contact?.email ?? null;

// NAMED EXPORTS // math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; export const multiply = (a, b) => a * b; // Or export all at once const divide = (a, b) => a / b; const power = (a, b) => a ** b; export {divide, power}; // Importing named exports (must use exact names) import {add, subtract} from './math.js'; import {add as addition} from './math.js'; // Rename // Import all named exports import * as math from './math.js'; console.log(math.add(1, 2)); // DEFAULT EXPORT // user.js class User { constructor(name) { this.name = name; } } export default User; // Or inline export default class User { constructor(name) { this.name = name; } } // Function default export export default function greet(name) { return `Hello ${name}`; } // Importing default export (any name) import User from './user.js'; import MyUser from './user.js'; // Can rename import greetFunction from './greet.js'; // MIXING BOTH // utils.js export const PI = 3.14159; export function square(x) { return x * x; } class Calculator { // Main export } export default Calculator; // Importing mixed exports import Calculator, {PI, square} from './utils.js'; // Default first, then named in {} // EXPORT PATTERNS // Re-exporting // index.js export {default as User} from './User.js'; export {add, subtract} from './math.js'; export * from './helpers.js'; // Aggregating exports // api/index.js export {fetchUsers} from './users.js'; export {fetchPosts} from './posts.js'; export {fetchComments} from './comments.js'; // Now can import all from one place import {fetchUsers, fetchPosts} from './api/index.js'; // PRACTICAL EXAMPLES // constants.js export const API_URL = 'https://api.example.com'; export const TIMEOUT = 5000; export const MAX_RETRIES = 3; // config.js const config = { apiUrl: 'https://api.example.com', timeout: 5000 }; export default config; // Multiple utilities // utils.js export const formatDate = (date) => { return date.toLocaleDateString(); }; export const formatCurrency = (amount) => { return `$${amount.toFixed(2)}`; }; export const capitalize = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }; // Main class with helpers // Database.js export class Database { connect() {} } export const query = (sql) => {}; export const close = () => {}; // Or class Database { connect() {} } const query = (sql) => {}; const close = () => {}; export default Database; export {query, close}; // IMPORT PATTERNS // Selective import import {add, subtract} from './math.js'; // Import all as namespace import * as Math from './math.js'; Math.add(1, 2); // Dynamic import (async) const module = await import('./heavy-module.js'); module.default(); // Conditional import if (condition) { const {feature} = await import('./feature.js'); feature(); } // BEST PRACTICES // Prefer named exports for utilities export const helper1 = () => {}; export const helper2 = () => {}; // Use default for main class/component export default class Component {} // Avoid mixing too much // Either many named exports OR one default // Not both unless necessary

// WHEN NOT TO USE ARROW FUNCTIONS // 1. Object methods (this problem) const person = { name: 'John', // Wrong - arrow function greetArrow: () => { console.log('Hello, ' + this.name); // undefined! // this refers to parent scope (window), not person }, // Right - regular function greetRegular: function() { console.log('Hello, ' + this.name); // 'Hello, John' }, // Right - shorthand method greetShort() { console.log('Hello, ' + this.name); // 'Hello, John' } }; person.greetArrow(); // 'Hello, undefined' person.greetRegular(); // 'Hello, John' person.greetShort(); // 'Hello, John' // 2. Cannot use as constructor const Person = (name) => { this.name = name; }; // const john = new Person('John'); // TypeError! // 3. No arguments object const func = () => { // console.log(arguments); // ReferenceError! }; // Use rest parameters instead const funcRest = (...args) => { console.log(args); // Works! }; // 4. Event handlers that need this const button = document.getElementById('btn'); // Wrong - arrow function button.addEventListener('click', () => { console.log(this); // window, not button! }); // Right - regular function button.addEventListener('click', function() { console.log(this); // button element }); // WHEN TO USE ARROW FUNCTIONS // 1. Array methods (this not needed) const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); const evens = numbers.filter(n => n % 2 === 0); // 2. Callbacks that need parent this const timer = { seconds: 0, start: function() { // Arrow function inherits this from start() setInterval(() => { this.seconds++; // this = timer console.log(this.seconds); }, 1000); } }; // 3. Short functions const add = (a, b) => a + b; const square = x => x * x; // 4. Promise chains fetch('/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); // MIXED EXAMPLE - Class with proper usage class Component { constructor() { this.state = {count: 0}; } // Regular method (can be called with new, has prototype) render() { return `Count: ${this.state.count}`; } // Arrow function as class field (binds this) handleClick = () => { this.state.count++; // this always refers to instance } // Using arrow in regular method for callback setupTimer() { setInterval(() => { this.state.count++; // this = instance, not window }, 1000); } } // COMPARISON // Traditional function with bind class OldWay { constructor() { this.handleClick = this.handleClick.bind(this); } handleClick() { console.log(this); } } // Modern way with arrow function class NewWay { handleClick = () => { console.log(this); // Always bound to instance } }

// TOP-LEVEL AWAIT (ES2022 modules) // module.js const data = await fetch('/api/data').then(r => r.json()); export default data; // Other modules importing this wait for fetch to complete // Traditional way (still needed in non-modules) (async () => { const data = await fetch('/api/data'); console.log(data); })(); // ASYNC FUNCTION REQUIRED async function fetchData() { const response = await fetch('/api/data'); const data = await response.json(); return data; } // Error: await without async function wrong() { // const data = await fetch('/api'); // SyntaxError! } // PRACTICAL EXAMPLES // Sequential awaits async function sequential() { const user = await fetchUser(); // Wait const posts = await fetchPosts(); // Then wait const comments = await fetchComments(); // Then wait return {user, posts, comments}; } // Total time: time1 + time2 + time3 // Parallel awaits async function parallel() { const [user, posts, comments] = await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ]); return {user, posts, comments}; } // Total time: max(time1, time2, time3) // Error handling async function withErrorHandling() { try { const data = await fetch('/api/data'); return data.json(); } catch (error) { console.error('Error:', error); return null; } } // Multiple try-catch blocks async function multipleTryCatch() { try { const user = await fetchUser(); } catch (error) { console.error('User fetch failed'); } try { const posts = await fetchPosts(); } catch (error) { console.error('Posts fetch failed'); } } // Await in loops async function processItems(items) { // Sequential processing for (const item of items) { await processItem(item); // Wait for each } // Parallel processing await Promise.all(items.map(item => processItem(item))); } // Conditional await async function conditionalAwait(useCache) { if (useCache) { return getCachedData(); } else { return await fetchFreshData(); // Only await if needed } } // TOP-LEVEL AWAIT USE CASES // Dynamic imports const module = await import('./module.js'); // Database connection const db = await connectDatabase(); // Feature detection const isSupported = await checkFeatureSupport(); // Config loading const config = await fetch('/config.json').then(r => r.json()); // Resource initialization const resources = await loadResources();

// SYMBOL UNIQUENESS const sym1 = Symbol('description'); const sym2 = Symbol('description'); console.log(sym1 === sym2); // false (always unique!) // Each Symbol is unique const id1 = Symbol('id'); const id2 = Symbol('id'); const user = { [id1]: 123, [id2]: 456 }; console.log(user[id1]); // 123 console.log(user[id2]); // 456 // Different properties! // HIDDEN PROPERTIES const obj = { name: 'John', age: 30 }; const secretId = Symbol('id'); obj[secretId] = 12345; // Not in for...in for (let key in obj) { console.log(key); // Only 'name' and 'age' } // Not in Object.keys console.log(Object.keys(obj)); // ['name', 'age'] // Not in JSON.stringify console.log(JSON.stringify(obj)); // {"name":"John","age":30} // But accessible console.log(obj[secretId]); // 12345 // Get symbols const symbols = Object.getOwnPropertySymbols(obj); console.log(symbols); // [Symbol(id)] // GLOBAL SYMBOLS // Create or get global symbol const globalSym1 = Symbol.for('app.id'); const globalSym2 = Symbol.for('app.id'); console.log(globalSym1 === globalSym2); // true (same symbol!) // Get key from symbol console.log(Symbol.keyFor(globalSym1)); // 'app.id' // WELL-KNOWN SYMBOLS // Symbol.iterator - make object iterable const range = { from: 1, to: 5, [Symbol.iterator]() { let current = this.from; const last = this.to; return { next() { if (current <= last) { return {value: current++, done: false}; } else { return {done: true}; } } }; } }; for (let num of range) { console.log(num); // 1, 2, 3, 4, 5 } // Symbol.toStringTag - customize toString const myObject = { [Symbol.toStringTag]: 'MyCustomClass' }; console.log(myObject.toString()); // '[object MyCustomClass]' // Symbol.hasInstance - customize instanceof class MyArray { static [Symbol.hasInstance](instance) { return Array.isArray(instance); } } console.log([1, 2] instanceof MyArray); // true // PRACTICAL USE CASES // Private properties (before # syntax) const _private = Symbol('private'); class BankAccount { constructor(balance) { this[_private] = balance; } getBalance() { return this[_private]; } } const account = new BankAccount(1000); console.log(account.getBalance()); // 1000 // console.log(account._private); // undefined (hidden) // Unique constants const COLOR_RED = Symbol('red'); const COLOR_GREEN = Symbol('green'); const COLOR_BLUE = Symbol('blue'); function getColor(color) { switch(color) { case COLOR_RED: return '#FF0000'; case COLOR_GREEN: return '#00FF00'; case COLOR_BLUE: return '#0000FF'; } } // Metadata storage const metadata = Symbol('metadata'); function addMetadata(obj, data) { obj[metadata] = data; } const item = {name: 'Product'}; addMetadata(item, {created: Date.now()}); console.log(item[metadata]); // {created: ...} console.log(Object.keys(item)); // ['name'] (metadata hidden)

// Tracing the promise chain Promise.resolve(1) // 1 .then(x => x + 1) // 2 .then(x => { throw new Error(); }) // Error thrown .catch(() => 1) // Caught, returns 1 .then(x => x + 1) // 2 .then(x => console.log(x)); // Logs: 2 // ERROR HANDLING IN CHAINS // Error skips to next catch Promise.resolve(1) .then(x => { throw 'error'; }) .then(x => console.log('Skipped')) // Skipped .catch(err => console.log('Caught')) // Caught .then(() => console.log('Continues')); // Continues // Catch returns value, chain continues Promise.reject('error') .catch(err => 'recovered') .then(val => console.log(val)); // 'recovered' // Catch throws, goes to next catch Promise.reject('error1') .catch(err => { throw 'error2'; }) .catch(err => console.log(err)); // 'error2' // Multiple catches Promise.reject('error') .catch(err => { console.log('First catch'); throw err; // Rethrow }) .catch(err => { console.log('Second catch'); }); // PROMISE METHODS // Promise.all - all must succeed Promise.all([Promise.resolve(1), Promise.resolve(2)]) .then(results => console.log(results)); // [1, 2] Promise.all([Promise.resolve(1), Promise.reject('error')]) .catch(err => console.log(err)); // 'error' // Promise.race - first to finish Promise.race([ new Promise(resolve => setTimeout(() => resolve(1), 100)), new Promise(resolve => setTimeout(() => resolve(2), 50)) ]).then(result => console.log(result)); // 2 // Promise.allSettled - wait for all Promise.allSettled([ Promise.resolve(1), Promise.reject('error') ]).then(results => console.log(results)); // [{status: 'fulfilled', value: 1}, // {status: 'rejected', reason: 'error'}] // Promise.any - first fulfilled Promise.any([ Promise.reject('error1'), Promise.resolve(2), Promise.resolve(3) ]).then(result => console.log(result)); // 2 // CHAINING PATTERNS // Return promise from then fetch('/api/user') .then(response => response.json()) // Returns promise .then(user => fetch(`/api/posts/${user.id}`)) .then(response => response.json()) .then(posts => console.log(posts)); // Return value from then Promise.resolve(5) .then(x => x * 2) // Returns value, wrapped in promise .then(x => x + 1) .then(x => console.log(x)); // 11 // Finally block (runs regardless) Promise.resolve(1) .then(x => x + 1) .catch(err => console.log(err)) .finally(() => console.log('Cleanup')); // Always runs

Master Interviews
Anywhere, Anytime

ES6+ Advanced Features – Javascript interview questions

Set overview

Javascript – ES6+ Advanced Features questions (12)

1. Explain destructuring in JavaScript. Cover object and array destructuring with advanced patterns.

Continue your preparation

2. Compare Promises and async/await. Explain error handling, parallel execution, and best practices for each.

3. What does the spread operator (...) do?

4. What is the difference between rest parameters and the arguments object?

5. What is the main difference between Map and Object?

6. What does obj?.prop?.nested return if obj is null?

7. What is the difference between named exports and default exports?

8. When should you NOT use arrow functions?

9. Can you use await outside an async function?

10. What will be the output? const {a, b, c = 3} = {a: 1, b: 2}; console.log(c);

11. What is unique about Symbol?

12. What is the output? Promise.resolve(1) .then(x => x + 1) .then(x => { throw new Error('error'); }) .catch(() => 1) .then(x => x + 1) .then(x => console.log(x));

More sets in Javascript

Explore related subjects

Master Interviews Anywhere, Anytime

ES6+ Advanced Features – Javascript interview questions

Set overview

1. Explain destructuring in JavaScript. Cover object and array destructuring with advanced patterns.

Continue your preparation

2. Compare Promises and async/await. Explain error handling, parallel execution, and best practices for each.

3. What does the spread operator (...) do?

4. What is the difference between rest parameters and the arguments object?

5. What is the main difference between Map and Object?

6. What does obj?.prop?.nested return if obj is null?

7. What is the difference between named exports and default exports?

8. When should you NOT use arrow functions?

9. Can you use await outside an async function?

10. What will be the output? const {a, b, c = 3} = {a: 1, b: 2}; console.log(c);

11. What is unique about Symbol?

12. What is the output? Promise.resolve(1) .then(x => x + 1) .then(x => { throw new Error('error'); }) .catch(() => 1) .then(x => x + 1) .then(x => console.log(x));

More sets in Javascript

Explore related subjects

Master Interviews
Anywhere, Anytime