JavaScript — Lesson 7
ES6+ Features
Modern JavaScript features you should know.
ES6+ Features
ES6 (ECMAScript 2015) introduced many powerful features that modern JavaScript developers use every day.
Arrow Functions
Shorter function syntax with lexical this binding.
// Traditional
const add = function(a, b) { return a + b; };
// Arrow
const add = (a, b) => a + b;
// Single parameter doesn't need parens
const double = n => n * 2;
Template Literals
Strings with embedded expressions using backticks ``.
const name = "Alice";
const age = 25;
// Old way
console.log("My name is " + name + " and I am " + age);
// With template literals
console.log(`My name is ${name} and I am ${age}`);
Destructuring
Extract values from arrays or objects into variables.
// Array destructuring
const [first, second] = [10, 20];
console.log(first); // 10
// Object destructuring
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // "Alice"
Spread Operator (...)
Spread arrays or objects into individual elements.
// Array spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
// Object spread
const defaults = { theme: "dark", lang: "en" };
const config = { ...defaults, lang: "ar" };
// { theme: "dark", lang: "ar" }
Rest Parameters
Collect remaining arguments into an array.
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10
Optional Chaining (?.)
Safely access nested properties without checking each level.
const user = { profile: { name: "Alice" } };
// Without optional chaining
const name = user && user.profile && user.profile.name;
// With optional chaining
const name = user?.profile?.name;
Nullish Coalescing (??)
Use default value only when value is null or undefined.
const value = 0;
const result = value ?? 10; // 0 (not 10, because 0 is not null/undefined)
// vs || (which treats falsy values as defaults)
const result2 = value || 10; // 10 (0 is falsy)
Tip: Modern JavaScript (ES6+) makes code cleaner and less error-prone. Use these features daily - they will become second nature quickly.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →