ES6+ (Modern JavaScript) Features

ES6 (ECMAScript 2015) and later versions introduced many powerful features that modernized JavaScript. Understanding these features is essential for writing clean, modern JavaScript code.

Arrow Functions

// Traditional function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Arrow function with block
const calculate = (a, b) => {
  const result = a * b;
  return result;
};

// 'this' binding
class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(() => this.tick(), 1000);
  }
  
  tick() {
    this.seconds++;
  }
}

Destructuring

// Object destructuring
const user = { name: 'John', age: 30 };
const { name, age } = user;

// With default values
const { country = 'Unknown' } = user;

// Array destructuring
const numbers = [1, 2, 3];
const [first, second] = numbers;

// Rest pattern
const [head, ...tail] = numbers;

// Parameter destructuring
function printUser({ name, age }) {
  console.log(`${name} is ${age} years old`);
}

Template Literals

// Basic usage
const name = 'John';
const greeting = `Hello, ${name}!`;

// Multiline strings
const html = `
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
`;

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => 
    `${result}${str}${values[i] ? `<em>${values[i]}</em>` : ''}`, 
  '');
}

const highlighted = highlight`Hello ${name}!`;

Classes and Modules

// Class definition
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
}

// Class inheritance
class Dog extends Animal {
  speak() {
    return `${this.name} barks`;
  }
}

// Modules
export const helper = {
  format(text) {
    return text.trim();
  }
};

import { helper } from './helpers.js';

New Data Structures

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

// Map
const userMap = new Map();
userMap.set('john', { age: 30 });
console.log(userMap.get('john'));

// WeakMap and WeakSet
const weakMap = new WeakMap();
let obj = { data: 'value' };
weakMap.set(obj, 'metadata');
obj = null; // object can be garbage collected

Promises and Async

// Promise creation
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 1000);
});

// Async/await
async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

Common Interview Follow-up Questions

1. How do arrow functions differ from regular functions?
2. What are the benefits of using let and const over var?
3. How do ES6 modules improve code organization?
4. When would you use WeakMap over regular Map?

Best Practices

• Use const by default, let when needed
• Prefer arrow functions for callbacks
• Use template literals for string interpolation
• Leverage destructuring for cleaner code
• Use modules for better code organization
• Understand the nuances of new features