{"id":3929,"date":"2021-02-01T04:51:32","date_gmt":"2021-02-01T04:51:32","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3929"},"modified":"2021-02-01T06:04:35","modified_gmt":"2021-02-01T06:04:35","slug":"ecmascript-es","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/ecmascript-es\/","title":{"rendered":"ECMAScript (ES)"},"content":{"rendered":"

ECMAScript is a simple standard for JavaScript and adding new features to JavaScript.
\nECMAScript is a subgroup of JavaScript. We will cover ES6, ES7, and ES8 versions in this doc.<\/p>\n

ECMAScript 6:<\/h2>\n

It is also known as ES6 and It is the second major revision in javascript. ES6 includes the following new features:<\/p>\n

    \n
  1. let:<\/strong> The let keyword allows to declare of the variable with block scope.
    \n\"\"\/\n<\/li>\n
  2. const:<\/strong> The const keyword allows us to assign a constant value to javascript variables. Constants are the same as the let keyword but with const, the value cannot be changed.
    \n\"\"\/\n<\/li>\n
  3. Arrow Function, Template Literals, and Default parameter:<\/strong> Arrow functions allow a short syntax for writing function and don’t need the function <\/strong>keyword, the return <\/strong>keyword, and the curly brackets.\n

    We don\u2019t need to use plus(+)<\/strong> to concatenate strings, or when we want to use a variable inside a string.
    \n\"\"\/<\/p>\n

    Default parameters allow us to define a parameter in advance.
    \n\"\"\/<\/p>\n<\/li>\n

  4. Import and Export:<\/strong> Import and Export allow us to create separate and reusable components. Export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.
    \nFor example<\/strong>, we have two files. The first is named ExportComponent.js and the second is named ImportComponent.js. And If we want to import multiple functions from any file then we can simply put them in curly brackets.<\/p>\n

    \"ECMAScript\n<\/li>\n

  5. Array and object destructing:<\/strong> With Destruction, we can easily assign the value of an array or object to a variable with ES6 standard.\n

    \"ECMAScript\n<\/li>\n

  6. Classes:<\/strong> Classes make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.\n

    \"ECMAScript<\/p>\n

    ECMAScript 7(ES7):<\/strong> ES7 introduces two new features i.e.
    \nArray.prototype.includes() and Exponentiation operator.
    \nArray.prototype.includes()<\/strong> determines whether an array contains a given element and returns either true <\/strong>or false<\/strong>.<\/p>\n

    \"ECMAScript\n<\/li>\n<\/ol>\n

    ECMAScript 8, ECMAScript 9, ECMAScript 10(ES8, ES9, ES10):<\/h3>\n

    In ES8<\/strong>, here are the additional available features:<\/p>\n

      \n
    1. Padding a String:<\/strong> ES8 introduce two string function for padding i.e. String. padStart() and String.padEnd().
      \n String. padStart() :<\/strong> This function pads the current string with a given input string repeatedly from the start, till the current string reaches the given length.<\/p>\n

      Syntax :<\/strong> string_value.padStart(targetLength [, padString])<\/p>\n

      The padStart() function accepts two parameters which are as follows \u2212<\/p>\n

      targetLength \u2212<\/strong> A numeric value that represents the target length of the string after padding.
      \npadString \u2212<\/strong> This is an optional parameter. This parameter specifies the characters that should be used to pad the string. <\/p>\n

      String. padEnd():<\/strong> This function pads the current string with a given input string repeatedly from the end, till the current string reaches the specified length.
      \n Syntax :<\/strong> string_value.padEnd(targetLength [, padString])
      \n\"ECMAScript\"\/<\/p>\n<\/li>\n

    2. Trailing Commas:<\/strong> A trailing comma is simply a comma after the last item in a list. Trailing commas are also known as final commas.
      \n\"ECMAScript<\/p>\n<\/li>\n
    3. Object:entries() and values():<\/strong> ES8 introduces the following new methods to the built-in Object type:-
      \nObject.entries:<\/strong> The Object.entries() method can be used to access all the properties of an object.
      \nObject.values():<\/strong> The Object.values() method can be used to access values of all properties of an object.
      \nObject.getOwnPropertyDescriptors() <\/strong>: This method returns an object containing all own property descriptors of an object. An empty object may be returned if the object doesn’t have any properties.<\/p>\n

      \"\"\/\n<\/li>\n

    4. Async and Await:<\/strong> Async\/Await is a very important feature in ES8. It is syntactic sugar for Promises in JavaScript. The await keyword is used with promises. This keyword can be used to pause the execution of a function till a promise is settled.
      \nThe await keyword returns the value of the promise if the promise is resolved while it throws an error<\/a> if the promise is rejected. <\/p>\n

      Syntax:<\/h3>\n

      async function function_name(){
      \n let result_of_functionCall = await longRunningMethod();
      \n }
      \n \/\/invoking async function
      \n function_name().then(()=>{})
      \n .catch(()=>{})<\/code><\/p>\n

      Consider an example that has an asynchronous function that takes two seconds to execute and returns a string value. The function can be invoked in two ways as shown below<\/p>\n