{"id":1102,"date":"2025-03-22T07:50:31","date_gmt":"2025-03-22T07:50:31","guid":{"rendered":"https:\/\/sitegator.in\/?p=1102"},"modified":"2025-09-15T13:20:43","modified_gmt":"2025-09-15T13:20:43","slug":"javascript-es6-features-explained-with-examples","status":"publish","type":"post","link":"https:\/\/sitegator.in\/cms\/javascript-es6-features-explained-with-examples\/","title":{"rendered":"JavaScript ES6+ Features Explained with Examples"},"content":{"rendered":"\n
\n
\"JavaScript<\/figure>\n<\/figure>\n\n\n\n

Introduction<\/h2>\n\n\n\n

JavaScript has evolved significantly with the introduction of ES6 (ECMAScript 2015) and later versions. These updates brought powerful new features that improve code readability, maintainability, and efficiency. In this blog, we\u2019ll explore key ES6+ features with examples to help you write better JavaScript code.<\/p>\n\n\n\n

\n\n\n\n

Table of Contents<\/h2>\n\n\n\n
    \n
  1. Let & Const vs Var<\/strong><\/li>\n\n\n\n
  2. Arrow Functions<\/strong><\/li>\n\n\n\n
  3. Template Literals<\/strong><\/li>\n\n\n\n
  4. Destructuring Assignment<\/strong><\/li>\n\n\n\n
  5. Spread & Rest Operators<\/strong><\/li>\n\n\n\n
  6. Default Parameters<\/strong><\/li>\n\n\n\n
  7. Enhanced Object Literals<\/strong><\/li>\n\n\n\n
  8. Promises & Async\/Await<\/strong><\/li>\n\n\n\n
  9. Modules (import\/export)<\/strong><\/li>\n\n\n\n
  10. Map & Set Data Structures<\/strong><\/li>\n\n\n\n
  11. Optional Chaining & Nullish Coalescing<\/strong><\/li>\n\n\n\n
  12. BigInt & Symbol<\/strong><\/li>\n\n\n\n
  13. New String & Array Methods<\/strong><\/li>\n\n\n\n
  14. Conclusion<\/strong><\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    1. Let & Const vs Var<\/h2>\n\n\n\n

    Before ES6, JavaScript only had var<\/code> for variable declaration. ES6 introduced let<\/code> and const<\/code>, which provide better scoping and immutability.<\/p>\n\n\n\n

    Example:<\/h3>\n\n\n\n
    var x = 10; \/\/ Function-scoped\nlet y = 20; \/\/ Block-scoped\nconst z = 30; \/\/ Cannot be reassigned\n<\/code><\/pre>\n\n\n\n
    \u2705 Use let<\/code> for variables that change and const<\/code> for fixed values.<\/p>\n\n\n\n
    \n\n\n\n
    2. Arrow Functions<\/h2>\n\n\n\n
    Arrow functions provide a concise syntax and lexical this<\/code> binding.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const add = (a, b) => a + b;\nconsole.log(add(5, 10)); \/\/ Output: 15\n<\/code><\/pre>\n\n\n\n
    \u2705 No need for function<\/code> keyword and explicit return<\/code> statement for single expressions.<\/p>\n\n\n\n
    \n\n\n\n
    3. Template Literals<\/h2>\n\n\n\n
    Template literals allow for easier string interpolation.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const name = \"John\";\nconsole.log(`Hello, ${name}!`); \/\/ Output: Hello, John!\n<\/code><\/pre>\n\n\n\n
    \u2705 Use backticks “ instead of quotes for multi-line and dynamic strings.<\/p>\n\n\n\n
    \n\n\n\n
    4. Destructuring Assignment<\/h2>\n\n\n\n
    Extract values from arrays and objects easily.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const person = { name: \"Alice\", age: 25 };\nconst { name, age } = person;\nconsole.log(name, age); \/\/ Output: Alice 25\n<\/code><\/pre>\n\n\n\n
    \u2705 Helps in cleaner code and improved readability.<\/p>\n\n\n\n
    \n\n\n\n
    5. Spread & Rest Operators<\/h2>\n\n\n\n
    The spread operator (...<\/code>) expands arrays\/objects, while the rest operator collects function arguments.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const arr = [1, 2, 3];\nconst newArr = [...arr, 4, 5]; \/\/ [1, 2, 3, 4, 5]\n<\/code><\/pre>\n\n\n\n
    \u2705 Used for copying, merging, and flexible function parameters.<\/p>\n\n\n\n
    \n\n\n\n
    6. Default Parameters<\/h2>\n\n\n\n
    Set default values for function parameters.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    function greet(name = \"Guest\") {\n    console.log(`Hello, ${name}!`);\n}\ngreet(); \/\/ Output: Hello, Guest!\n<\/code><\/pre>\n\n\n\n
    \u2705 Avoids undefined<\/code> when arguments are missing.<\/p>\n\n\n\n
    \n\n\n\n
    7. Enhanced Object Literals<\/h2>\n\n\n\n
    Simplifies object creation and methods.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const age = 30;\nconst person = { name, age, greet() { console.log(\"Hi!\"); } };\n<\/code><\/pre>\n\n\n\n
    \u2705 Cleaner and more readable object syntax.<\/p>\n\n\n\n
    \n\n\n\n
    8. Promises & Async\/Await<\/h2>\n\n\n\n
    Handling asynchronous operations made easier with Promises and async\/await.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const fetchData = async () => {\n    let data = await fetch(\"https:\/\/api.example.com\");\n    console.log(await data.json());\n};\nfetchData();\n<\/code><\/pre>\n\n\n\n
    \u2705 No more callback hell!<\/p>\n\n\n\n
    \n\n\n\n
    9. Modules (import\/export)<\/h2>\n\n\n\n
    Allows modular code structure.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    \/\/ file1.js\nexport const greet = () => console.log(\"Hello!\");\n\/\/ file2.js\nimport { greet } from \".\/file1.js\";\ngreet();\n<\/code><\/pre>\n\n\n\n
    \u2705 Enables code reusability.<\/p>\n\n\n\n
    \n\n\n\n
    10. Map & Set Data Structures<\/h2>\n\n\n\n
    Efficient data structures introduced in ES6.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    let mySet = new Set([1, 2, 3]); \/\/ Unique values only\nlet myMap = new Map([[\"name\", \"Alice\"]]);\n<\/code><\/pre>\n\n\n\n
    \u2705 Useful for unique collections and key-value pairs.<\/p>\n\n\n\n
    \n\n\n\n
    11. Optional Chaining & Nullish Coalescing<\/h2>\n\n\n\n
    Handle nested objects without errors.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const user = { profile: { name: \"John\" } };\nconsole.log(user.profile?.name ?? \"Guest\");\n<\/code><\/pre>\n\n\n\n
    \u2705 Prevents undefined<\/code> errors.<\/p>\n\n\n\n
    \n\n\n\n
    12. BigInt & Symbol<\/h2>\n\n\n\n
    New primitive data types.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    const bigNum = 12345678901234567890n;\nconsole.log(bigNum);\n<\/code><\/pre>\n\n\n\n
    \u2705 BigInt handles large numbers safely.<\/p>\n\n\n\n
    \n\n\n\n
    13. New String & Array Methods<\/h2>\n\n\n\n
    Useful methods introduced in ES6+.<\/p>\n\n\n\n
    Example:<\/h3>\n\n\n\n
    console.log(\"Hello\".padStart(10, \"*\") );\nconsole.log([1,2,3].includes(2));\n<\/code><\/pre>\n\n\n\n
    \u2705 Enhances string and array manipulation.<\/p>\n\n\n\n
    \n\n\n\n
    14. Conclusion<\/h2>\n\n\n\n
    ES6+ has transformed JavaScript into a more powerful and readable language. Understanding and utilizing these features will make your code more efficient and maintainable.<\/p>\n\n\n\n
    \u2705 Start applying these ES6+ features in your projects today!<\/p>\n\n\n\n
    Next Steps<\/h3>\n\n\n\n
    The next blog post will cover “Mastering JavaScript Asynchronous Programming”<\/strong> \u2013 Stay tuned! \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"
    Introduction JavaScript has evolved significantly with the introduction of ES6 (ECMAScript 2015) and later versions. These updates brought powerful new features that improve code readability, maintainability, and efficiency. In this blog, we\u2019ll explore key ES6+ features with examples to help you write better JavaScript code. Table of Contents 1. Let & Const vs Var Before […]<\/p>\n","protected":false},"author":1,"featured_media":1103,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,94,43],"tags":[99,98,95,97,96],"class_list":["post-1102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-javascript","category-website","tag-frontenddevelopment","tag-fullstackdevelopment","tag-javascript","tag-jsdevelopment","tag-webdevelopment"],"_links":{"self":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/1102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/comments?post=1102"}],"version-history":[{"count":1,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/1102\/revisions"}],"predecessor-version":[{"id":1104,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/posts\/1102\/revisions\/1104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/media\/1103"}],"wp:attachment":[{"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/media?parent=1102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/categories?post=1102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitegator.in\/cms\/wp-json\/wp\/v2\/tags?post=1102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}