tg-me.com/webdevcoursefree/1554
Last Update:
JavaScript ES6+: Modern Features You Must Know
Now that you’ve mastered Responsive Design, it’s time to dive into JavaScript ES6+, which introduced powerful features that make JavaScript more efficient, readable, and developer-friendly.
1. Why Learn ES6+?
Before ES6, JavaScript had many limitations. ES6 (ECMAScript 2015) and later versions introduced:
✔ Cleaner syntax
✔ Better performance
✔ Enhanced functionality for modern web apps
2. Let & Const: Block-Scoped Variables
Before ES6, we only had var, which had function scope and caused issues in large projects.
How let and const Work
let → Can be reassigned but is block-scoped.
const → Cannot be reassigned (constant value).
Example:let name = "John"; name = "Doe"; // Works const age = 30; age = 31; // ❌ Error: Cannot reassign a constant
Always use const unless you need to reassign a value.
3. Arrow Functions: Shorter & Cleaner Syntax
Arrow functions provide a concise way to write functions.
Before ES6 (Traditional Function)function add(a, b) { return a + b; }
After ES6 (Arrow Function)const add = (a, b) => a + b;
✔ Less code
✔ Implicit return (no need for { return ... } when using one expression)
4. Template Literals: Easy String Formatting
Before ES6, string concatenation was tedious.
Old way:let name = "Alice"; console.log("Hello, " + name + "!");
New way using Template Literals:let name = "Alice"; console.log(Hello, ${name}!);
✔ Uses backticks () instead of quotesHello, ${name}!`); } greet(); // Output: Hello, Guest! greet("Alice"); // Output: Hello, Alice!
✔ Easier variable interpolation
5. Destructuring: Extract Values Easily
Destructuring makes it easy to extract values from objects and arrays.
Array Destructuring
const numbers = [10, 20, 30]; const [a, b, c] = numbers; console.log(a); // 10 console.log(b); // 20
Object Destructuring
const person = { name: "Alice", age: 25 }; const { name, age } = person; console.log(name); // Alice console.log(age); // 25
✔ Cleaner syntax
✔ Easier data extraction
6. Spread & Rest Operators (...): Powerful Data Handling
Spread Operator: Expanding Arrays & Objects
const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4, 5]; console.log(newNumbers); // [1, 2, 3, 4, 5]
✔ Copies array elements
✔ Prevents modifying the original array
Rest Operator: Collecting Arguments
function sum(...nums) { return nums.reduce((total, num) => total + num); } console.log(sum(1, 2, 3, 4)); // 10
✔ Handles unlimited function arguments
7. Promises: Handling Asynchronous Code
A Promise is used to handle asynchronous tasks like API calls.
Promise Example:
const fetchData = new Promise((resolve, reject) => { setTimeout(() => resolve("Data loaded"), 2000); }); fetchData.then(data => console.log(data)); // Output (after 2 sec): Data loaded
✔ Prevents callback hell
✔ Handles success & failure (resolve/reject)
8. Async/Await: Simplifying Promises
async/await makes working with Promises easier.
Before (Using .then())
fetch("https://api.example.com/data") .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
After (Using async/await)
async function fetchData() { try { let response = await fetch("https://api.example.com/data"); let data = await response.json(); console.log(data); } catch (error) { console.error(error); } } fetchData();
✔ Looks more like synchronous code
✔ Easier to read and debug
9. Default Parameters: Set Function Defaults
function greet(name = "Guest") { console.log(
✔ Prevents undefined values
✔ Provides default behavior
10. Modules: Organizing Code into Files
ES6 introduced import and export to organize code into multiple files.
Export (In math.js)export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
Import (In main.js)import { add, subtract } from "./math.js"; console.log(add(5, 3)); // Output: 8
Web Development Best Resources
Share with credits: https://www.tg-me.com/us/Web Development/com.webdevcoursefree
ENJOY LEARNING 👍👍
BY Web Development
Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283
Share with your friend now:
tg-me.com/webdevcoursefree/1554