{"id":483,"date":"2020-08-22T19:30:37","date_gmt":"2020-08-22T19:30:37","guid":{"rendered":"https:\/\/datatype.co.in\/blog\/?p=483"},"modified":"2020-09-19T18:04:18","modified_gmt":"2020-09-19T18:04:18","slug":"what-is-new-in-es6","status":"publish","type":"post","link":"https:\/\/datatype.co.in\/blog\/what-is-new-in-es6\/","title":{"rendered":"What is New in ES6"},"content":{"rendered":"\n

ES<\/strong> (E<\/strong>CMAS<\/strong>cript) is the official name of JavaScript. ES6<\/strong> was released in June 2015, which is stated as the sixth edition of the language. It is also known as ECMAScript 2015<\/strong> or ES 2015<\/strong>. This edition includes several new features. Some of the important new features are given below:<\/p>\n\n\n\n

  1. let and const Keywords<\/li>
  2. Default Parameters<\/li>
  3. Template Literals<\/li>
  4. Arrow Functions<\/li>
  5. Object Literals<\/li>
  6. Destructuring Assignments<\/li>
  7. Rest and Spread Operators<\/li>
  8. Modules, export and import Keywords<\/li>
  9. Classes<\/li><\/ol>\n\n\n\n

    1. let and const Keywords:<\/strong><\/p>\n\n\n\n

    let <\/strong>and const <\/strong>are two new keywords introduced in ES6 to declare variables. Both have different usage.<\/p>\n\n\n\n

    let<\/code><\/strong> keyword is similar to var<\/code><\/strong> except it allows declaring variable with block scope. Variables declared with let<\/code><\/strong> inside a block are not accessible from outside code.<\/p>\n\n\n\n

    var x = 5;\nif(some_condition){\n  let y = 0;\n}\nconsole.log(y); \/\/ Error: y is not defined\n<\/code><\/pre>\n\n\n\n
    A variable declared with const<\/code><\/strong> is immutable and block scoped. Immutable means the value of the variable cannot be changed or reassigned (variable with const<\/strong>ant value). The variable will have block scope similar to let.<\/p>\n\n\n\n
    let x = 5;\nif(some_condition){\n  const y = 0;\n  y = 5; \/\/  TypeError: Assignment to constant variable.\n}\nconsole.log(y); \/\/ Error: y is not defined<\/code><\/pre>\n\n\n\n
    2. Default Parameters:<\/strong><\/p>\n\n\n\n
    With ES6 now we can define function with default or optional value for some argument. It allow named parameters to be initialized with default values if no value or undefined<\/code> is passed.<\/p>\n\n\n\n
    function multiply(num1, num2 = 1) {\n  return num1 * num2;\n}\n\nlet result1 = multiply(5); \/\/ 5\nlet result2 = multiply(5, 3); \/\/ 15\n<\/code><\/pre>\n\n\n\n
    3. Template Literals:<\/strong><\/p>\n\n\n\n
    Template literals are string literals allowing embedded expressions.. It provides an easy way of creating multiline strings and perform string interpolation. The syntax for interpolation is ${}<\/code><\/strong> and ``<\/code><\/strong> is used to create multiline string.<\/p>\n\n\n\n
    let str1 = \"Hello\";  \nlet str2 = \"World\";  \n   \nlet str = `${str1} ${str2}`;  \/\/ String Interpolation\nconsole.log(str); \/\/ Hello World\n\nlet multiline = `string text line 1\nstring text line 2`;\nconsole.log(multiline);\n\/\/Output:\n \"string text line 1\n  string text line 2\"<\/code><\/pre>\n\n\n\n
    4. Arrow Functions:<\/strong><\/p>\n\n\n\n
    Arrow function is syntactically compact alternative to a regular function expression.<\/p>\n\n\n\n
    const functionName = (param1, param2, ...) => {  \n    \/\/Body of the function  \n}  <\/code><\/pre>\n\n\n\n
    There is no need to use the function<\/code><\/strong> keyword. If the function body contains single line, the functional curly braces {}<\/code><\/strong> and return<\/code><\/strong> statement are also optional.<\/p>\n\n\n\n
    \/\/ Regular Function Expression\nvar multiply = function(x, y) {\n   return x * y;\n}\n\n\/\/ ES6 Arrow Function\nconst multiply = (x, y) => x * y;\n\n\/\/ ES6 Arrow Function with {}\nconst multiply = (x, y) => {\n   let result = x * y;\n   return result;\n}<\/code><\/pre>\n\n\n\n
    5. Object Literals:<\/strong><\/p>\n\n\n\n
    Object literal provides short hand syntax for common Object<\/code><\/strong> property definition. If Object keys resemble local variables name, assigning value to key is optional.<\/p>\n\n\n\n
    let firstName = 'Jhon',\nlet lastName = 'Cena';\n\n\/\/ ES6 Object Literals Short Syntax\nlet userName = { firstName, lastName };\n\nconsole.log(userName);\n\/\/ Output: \n{ \n   firstName: \"Jhon\", \n   lastName: \"Cena\"\n};<\/code><\/pre>\n\n\n\n
    6. Destructuring Assignment: <\/strong> <\/p>\n\n\n\n
     The destructuring assignment<\/strong> syntax is a JavaScript expression that makes it possible to extract values from arrays, or properties from objects, into distinct variables. <\/p>\n\n\n\n
    Array  destructuring example:<\/p>\n\n\n\n
    let name, age;\n[name, age] = [\"Sam\", 35];\n\nconsole.log(name); \/\/ Sam\nconsole.log(age); \/\/ 35<\/code><\/pre>\n\n\n\n
    Object  destructuring example: <\/p>\n\n\n\n
    const user = {name: \"Sam\", age: 35, city: \"Bengaluru\"};  \nconst {name, age, city} = user;  \n  \nconsole.log(name); \/\/ Sam\nconsole.log(age); \/\/ 35\nconsole.log(city); \/\/ Bengaluru<\/code><\/pre>\n\n\n\n
    7. Rest and Spread Operators:<\/strong><\/p>\n\n\n\n
    The rest <\/strong>and spread<\/strong> operators  have same syntax – three dots (...)<\/code><\/strong>, but the usage depends on context. The rest operator is used with destructuring assignment and it represents collection of all remaining elements. Let’s try to understand this with array and object destructuring examples:<\/p>\n\n\n\n
    \/\/ Rest Operator With Array Destructuring \nlet a, b, rest;\n[a, b] = [10, 20];\n\nconsole.log(a); \/\/ 10\nconsole.log(b); \/\/ 20\n\n[a, b, ...rest] = [10, 20, 30, 40, 50];\nconsole.log(rest); \/\/ [30,40,50] \n<\/code><\/pre>\n\n\n\n
    \/\/ Rest Operator With Object Destructuring \nlet {a, b, ...args} = {a: 10, b: 20, c: 30, d: 40, e: 50}  \nconsole.log(a); \/\/ 10  \nconsole.log(b); \/\/ 20  \nconsole.log(args); \/\/ {c: 30, d: 40, e: 50} <\/code><\/pre>\n\n\n\n
    The spread operator<\/strong> allows expansion of iterables such as arrays, objects, and function\u2019s arguments in place where zero or more elements (for array), zero or more key-value pairs (for object literals) and zero or more arguments (for function calls) are expected. <\/p>\n\n\n\n
    Learn more about spread operator :  Spread Operator in JavaScript<\/a><\/p>\n\n\n\n
    8. Modules, <\/strong> export and import Keywords :<\/strong><\/p>\n\n\n\n
    Modules are piece of JavaScript code written in a file. Modules help organize related code and enhance code re-usability. A module can have variables and functions. Variables and functions defined within a module should be exported using the keyword export<\/code><\/strong> so that they can be accessed from other files. Other files can use module code by using the keyword import<\/code><\/strong>.<\/p>\n\n\n\n
    \/\/ calculator.js\nlet add = function(x, y){\n   return x + y;\n}\nlet multiply = function(x, y){\n   return x * y;\n}\nexport {add, multiply}<\/code><\/pre>\n\n\n\n
    \/\/ app.js\nimport {add, multiply} from '.\/calculator.js';\nconsole.log(add(10, 15)) \/\/ 25<\/code><\/pre>\n\n\n\n
    Instead of importing each module functions by name, we can also import entire module.<\/p>\n\n\n\n
    import * as calc from '.\/calculator.js';\nconsole.log(calc.add(10, 15)) \/\/ 25<\/code><\/pre>\n\n\n\n
    9. Classes:<\/strong><\/p>\n\n\n\n
    Another important feature introduced in ES6 is Object Oriented Programming (OOP) Concept class<\/strong>.  A class <\/strong>in terms of OOP is a blueprint for creating objects. It is defined using the keyword class<\/code><\/strong> and properties are assigned inside a constructor()<\/strong><\/code> method. The constructor method is called each time an object is initialized. <\/p>\n\n\n\n
    The Syntax:<\/p>\n\n\n\n
    class className{\n}<\/code><\/pre>\n\n\n\n
    Here is an example:<\/p>\n\n\n\n
    class User{\n  constructor(name, age) {\n    this.name = name;\n    this.age = age;\n  }\n  test() { \n      console.log(\"User age is :\"+ this.age); \n   } \n}\n\/\/ Create Object \nlet user1 = new User(\"Lokesh\", 35);\nconsole.log(user1.name); \/\/ Lokesh\n\n\/\/ Calling member function\nconsole.log(user1.test()); \/\/ User age is :35\n<\/code><\/pre>\n\n\n\n
    We can also have static<\/code><\/strong> member functions in a class. We can create a child class by extending parent class using extends<\/code><\/strong> keyword (Inheritance).<\/p>\n","protected":false},"excerpt":{"rendered":"
    ES (ECMAScript) is the official name of JavaScript. ES6 was released in June 2015, which is stated as the sixth edition of the language. It is also known as ECMAScript [ … ]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[97,184,188,178,190,179,185,186,181,182,187,183,180],"class_list":["post-483","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-arrow-function-in-js","tag-default-parameters","tag-destructuring-in-js","tag-es6","tag-es6-class-example","tag-features","tag-js-class","tag-js-module","tag-let-and-const","tag-object-literals","tag-rest-and-spread-operators","tag-template-literals","tag-what-is-new-in-es6","list-style-post"],"_links":{"self":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/comments?post=483"}],"version-history":[{"count":73,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/483\/revisions"}],"predecessor-version":[{"id":588,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/posts\/483\/revisions\/588"}],"wp:attachment":[{"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/media?parent=483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/categories?post=483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datatype.co.in\/blog\/wp-json\/wp\/v2\/tags?post=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}