Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      ECMAScript 2022

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      ECMAScript 2022

      The ECMAScript 2022 standard was released in 2022. Important features added to this update include private methods and fields, Array at() and String at() methods etc. This chapter discuss all the newly added features in ECMAScript 2022.

      New Features Added in ECMAScript 2022

      Here are the new methods, features, etc., added to the ECMAScript 2022 version of JavaScript.
      • Array at() Method
      • String at() Method
      • Private methods and fields
      • Object.hasOwn()
      • error.cause
      • await import
      Here, we have explained each feature in detail.

      Array at() Method

      ECMAScript 2022 (ES2022) introduced Array at() method to arrays. In JavaScript, array at() method used to access the array element from the particular index. You can't use the negative index in the arr[index] representation, but with the array.at() method, you can also use the negative index to access array elements.
      When you use the negative index, it returns the array from the last.

      Example

      In the below code, we access the last and third-last elements from the array using the negative indexes and array.at() method.
      
      <body>
         <div id = "demo1">The last array element is:  </div>
         <div id = "demo2">The third last array element is:  </div>
         <script>
            const arr = [10, 20, 60, 72, 6, 12, 23];
            document.getElementById("demo1").innerHTML += arr.at(-1);
            document.getElementById("demo2").innerHTML += arr.at(-3);
         </script>
      </body>
      </html>

      Output

      The last array element is: 23
      The third last array element is: 6

      String at() Method

      ECMAScript introduced String at() method to strings. In JavaScript, the String at() method is used to access the characters from the particular string index. It also accepts the negative index as an argument.

      Example

      In the code below, we access the last and fourth last characters from the string using the negative indexes and string.at() method.
      <html>
      <body>
         <div id = "demo1">The last string character is:  </div>
         <div id = "demo2">The fourth last string character is:  </div>
         <script>
            let str = "Hello world";
            document.getElementById("demo1").innerHTML += str.at(-1);
            document.getElementById("demo2").innerHTML += str.at(-4);
         </script>
      </body>
      </html>

      Output

      The last string character is: d
      The fourth last string character is: o

      Private Methods and Fields

      ECMAScript 2022 introduced the way to write private methods and fields. In JavaScritp, you can write the field name or method name followed by the hash sign ('#') to make them private. You can't access the private fields and methods using the class instance. However, you can access them inside the class.

      Example

      In the below code, the car class contains the 'brand' private field and the 'carBrand' private method. The getBrand() method is public.
      We have created the instance of the car class and invoked the getBrand() method using it. The getBrand() method calls the carBrand() method.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            class car {
               #brand;
               constructor(brand) {
                  this.#brand = brand;
               }
               getBrand() {
                  return this.#carBrand();
               }
               #carBrand() {
                  return "The car brand is " + this.#brand;
               }
            }
            const BMW = new car("BMW");
            document.getElementById("output").innerHTML = BMW.getBrand();
         </script>
      </body>
      </html>

      Output

      The car brand is BMW

      Object hasOwn() Method

      The Object.hasOwn() method is a replacement for the Object.hasOwnProperty() method. It is used to check whether the object contains a particular property.

      Example

      In the code below, we use the hasOwn() method to check whether the obj object contains the name property.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            const obj = {
               name: "sam",
               age: 50,
            }
            document.getElementById("output").innerHTML = 
      	  "Does obj contain name property? " + obj.hasOwnProperty("name");
         </script>
      </body>
      </html>

      Output

      Does obj contain name property? true

      The error.cause Property

      The 'cause' is a property of the JavaScript object. It represents the reason for the error. It is introduced in ECMAScript 2022.

      Example

      In the below code, we throw a new error from the 'try' block. Also, we specify the reason for the error using the cause property.
      We access the 'cause' property value in the catch block to know the reason.
      <html>
      <body>
         <div id = "demo"> </div>
         <script>
            let output = document.getElementById("demo");
            try {
               output.innerHTML += "Inside the try block <br>";
               throw new Error("New error", { cause: "Testing with error." })
            } catch (error) {
               output.innerHTML += "The reason for the error is: " + error.cause + "<br>";
            }
         </script>
      </body>
      </html>

      Output

      Inside the try block
      The reason for the error is: Testing with error.

      The Await Import

      You can use the asynchronous import to import the dynamic modules. You need to use the 'await' keyword for the asynchronous import.
      For example, the below code contains the self-invoking asynchronous function. Also, the 'await' keyword is used inside the function to await the import.
      (async function () {
         await (await import('./math.js')).default();
         await (await import('./operations.js')).default();
      })();
      Warning – Some of the above features are not supported by some browsers. So, you can use the polyfill to avoid errors.