Es6features in Javascript

Learn about es6features in javascript with practical examples and code snippets.

Example 1

ES6+ FEATURES IN JAVASCRIPT Modern JavaScript features that are commonly asked in interviews 1.

ARROW FUNCTIONS Traditional function Arrow function Single parameter (no parentheses needed) No parameters Multiple statements Key differences: - No 'this' binding (lexical this) - No 'arguments' object - Can't be used as constructors - No hoisting 2.

DESTRUCTURING Array destructuring Object destructuring Renaming Default values Nested destructuring 3.

SPREAD OPERATOR Array spread Object spread Copying Function arguments 4.

REST PARAMETERS "Hello, Kuldeep Hello, Ramesh Hello, Suresh" 5.

TEMPLATE LITERALS Old way Template literal Multi-line 6.

DEFAULT PARAMETERS 7.

LET AND CONST let - block scoped, can be reassigned const - block scoped, cannot be reassigned y = 2; // Error const with objects/arrays obj = {}; // Error (reference cannot change) arr = []; // Error 8.

MODULES (ES6) export.

js export const name = "Kuldeep"; export function greet() { return "Hello"; } export default class Person { } import.

js import Person, { name, greet } from '.

js'; import as utils from '.

PROMISES (ES6) 11.

ASYNC/AWAIT (ES2017) 12.

MAP AND SET Map - key-value pairs Set - unique values 14.

OF LOOP With entries 15.

OBJECT METHODS Object.

assign() Object.

keys(), Object.

values(), Object.

Code

function add(a, b) {
  return a + b;
}
const addArrow = (a, b) => a + b;
const square = x => x * x;
const greet = () => "Hello";
const process = (x) => {
  const doubled = x * 2;
  return doubled + 1;
};
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
const person = { name: "Kuldeep", age: 25, city: "Mumbai" };
const { name, age } = person;
console.log(name); // "Kuldeep"
console.log(age); // 25
const { name: personName, age: personAge } = person;
console.log(personName); // "Kuldeep"
const { name: name2, age: age2, country = "India" } = person;
console.log(country); // "India"
const user = {
  name: "Kuldeep",
  address: {
    city: "Mumbai",
    state: "Maharashtra"
  }
};
const { address: { city, state } } = user;
console.log(city); // "Mumbai"
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }
const arrCopy = [...arr1];
const objCopy = { ...obj1 };
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
function greet(greeting, ...names) {
  return names.map(name => `${greeting}, ${name}`).join(" ");
}
console.log(greet("Hello", "Kuldeep", "Ramesh", "Suresh"));
const name = "Kuldeep";
const age = 25;
const message = "Hello, I'm " + name + " and I'm " + age + " years old";
const message2 = `Hello, I'm ${name} and I'm ${age} years old`;
const multiLine = `
  Line 1
  Line 2
  Line 3
`;
function greet2(name = "Guest", greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
console.log(greet2()); // "Hello, Guest!"
console.log(greet2("Kuldeep")); // "Hello, Kuldeep!"
console.log(greet2("Kuldeep", "Hi")); // "Hi, Kuldeep!"
let x = 1;
x = 2; // OK
const y = 1;
const obj = { a: 1 };
obj.a = 2; // OK (property can change)
const arr = [1, 2, 3];
arr.push(4); // OK
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  static create(name, age) {
    return new Person(name, age);
  }
}
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
  study() {
    return `${this.name} is studying`;
  }
}
const student = new Student("Kuldeep", 25, "A");
console.log(student.greet()); // "Hello, I'm Kuldeep"
console.log(student.study()); // "Kuldeep is studying"
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success"), 1000);
});
promise.then(result => console.log(result));
async function fetchData() {
  try {
    const result = await promise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}
const sym1 = Symbol("description");
const sym2 = Symbol("description");
console.log(sym1 === sym2); // false (unique)
const obj3 = {
  [sym1]: "value"
};
console.log(obj3[sym1]); // "value"
const map = new Map();
map.set("name", "Kuldeep");
map.set("age", 25);
console.log(map.get("name")); // "Kuldeep"
const set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set { 1, 2, 3, 4 }
const arr3 = [1, 2, 3];
for (const item of arr3) {
  console.log(item);
}
for (const [index, value] of arr3.entries()) {
  console.log(index, value);
}
const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
const obj4 = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj4)); // ["a", "b", "c"]
console.log(Object.values(obj4)); // [1, 2, 3]
console.log(Object.entries(obj4)); // [["a", 1], ["b", 2], ["c", 3]]

---

Summary

Understanding es6features is essential for mastering javascript. Practice these examples and experiment with variations to deepen your understanding.

Key Takeaways

• es6features is a fundamental concept in javascript
• Practice with these examples to build confidence
• Experiment with variations to explore edge cases
• Understanding es6features will help you in technical interviews