ECMAScript6 Tutorial

Introduction of ES6 Features of ECMAScript 6 ECMAScript 6 Syntax Spread Operator in ECMAScript 6 Variables in ECMAScript 6 Decision Making in ECMAScript 6 Function in ECMAScript 6 Generator in ECMAScript 6 Immediately Invoked Function Expression Loops in ECMAScript 6 Loop Control Statement in ECMAScript 6 Operator in ECMAScript 6 Arrow Functions in ECMAScript 6 Array in ECMAScript 6 Array Methods in ES6 Array Destructuring in ES6 Map in ES6 Sets in ES6 Class in ES6 Types of Inheritance in ES6 Object in ES6 Object Destructuring in ES6 Strings in ES6 Template Literals in ES6 Event in ES6 Dialog box in ES6 Cookie in ES6 Number in ES6 Page Redirect in ES6 Boolean in ES6 Validation in ES6 Void Keyword in ES6 Animation in ES6 Promises in ES6

ES6 | ECMAScript 6 Syntax
2020-04-15 17:41:25

ES6 | ECMAScript 6 Syntax

The term 'syntax' defines the grammar and spelling of any programming language. In Computer science, “Term syntax is a collection of some rules and regulations that determines the group of symbols used in a structured fragment and document for any particular language.” Every programming language has its own syntax. The syntax is implemented in bothprogramming language and markup language. In a Programming language, the syntax represents the source code, and in a Markup language, the syntax is used to determine the data.

The syntax of any language (Programming or Markup) specifies the surface form of a particular language. In JavaScript, the syntax of a program includes-

ECMAScript 6 Syntax
  • Variables
  • Operators
  • Literals
  • Keywords
  • Identifiers
  • Comments
  • Modules

Variables

In computer programming, a variable is a memory block address that has a symbolic name and use to contain some information or data, known as value. In simple words, the variable can be defined as a keyword that holds value in the programming language.

ECMAScript 6 Syntax

Operators

In a programming language, the Operators are some special functions used to perform some operation on the variables. It takes more than one or one argument and generates a new value. In simple words, the operator is a character that defines an action or process. Generally, the operator has so many types such as Logical Operator (!! Or NOT), Arithmetic Operator (=, -, *, /), Assignment Operator (=), etc.

Literals  

In Computer programming, the term Literal can be defined as the Constant value/ Fix value/ Non-Changeable value in source code. The Literal is also treated as a notation. For Example

ECMAScript 6 Syntax

Keywords

In a programming language, the term 'keyword' can be defined as some words that are restrained for a program. The keyword has a special meaning. Every programming language has a collection of keywords. Sometimes keywords can be parameters, commands, variable names, labels, and function names. The Keywords are also known as reserved names.  

In simple words, the keywords are some words used to define the content of code. Wecan also use it as metadata to determine the text documents, database records, images, and webpages.  For Example

There are some keywords mentioned below in the table used in ECMAScript or JavaScript.

           As           Super         Null        Type of
           If           Return         Static        Get
           Case           Break         Any        Else
           Number         Var         Throw        Switch
           Type         Module         String        True
           For           Finally         Instance of        Catch
           Void           While         Enum        This
           Export           New         Let         False

Identifiers

In a programming language, identifiers give the identity to some specific aspects of a program. The term 'identifier' can be defined as a name used to identify the unique objects or a class of objects. For example, Variable name, function name, etc.

Some guidelines or regulations for identifiers are given below. They are-

  • The identifier cannot begin from a digit, but we can use both digits and characters in the identifier.
  •  For example, id1 is a correct identifier, and 1id is incorrect.
  • The Identifiers must be unique; It cannot be a Keyword.
  • We cannot use the special symbols in the identifier, except for Dollar sign ($) and Underscore (_).
  • The Spaces are not allowed in Identifiers.
  • The Identifiers are Case-sensitive.

For Example-

               Invalid Identifiers                     Valid Identifiers
                  Login name                         $Login name
                  Login name@                         Login name66
                  Login-name                         Login_name
                  22Login name                         Loginname

Comments

In a programming language, the term comments are the programmer-readable notation (extra information)used in computer program code. Comments are used to make source code easy to understand for a developer. Interpreters and compilers commonly neglect comments. Comments also help us to enhance the readability of the source code.

In ECMAScript 6, we can use the following types of Comments-

Single-Line Comments

The Single-Line Comments hide or discard the single line of source code. For Example

// The line of source code to be discarded.

Multi-Line Comments

The Multi-Line comments discard or hide the multiple lines of source code. For Example

/*The lines of source code to be discarded or hide*/.

Modules

In Computer Science, the modules can be defined as a piece of a program, separately built and maintained, used in various computer programs. An individual module contains variousroutines.

Whitespaces and Line Breaks  

A Whitespace is the arrangement of the spaces created using the Space key or tab key. A Line Break refers to breaking the line or starting a new line, using <br/>, or Enter key. The ECMAScript 6 specification provides a facility to discard the spaces, new lines, and tabs that occur in the source code. The developer can easily use tab, spaces, and newlines in the source code of the program. It makes the program easy to read and understandable. 

Here are some important aspects of JavaScript given below-

Camel Cases in JavaScript

The Camel Case is defined as a naming convention. In the Camel Case, each word between a compound word is in capital letters and the first word in small letters. The Camel Case helps us to make the source code more readable. The Camel case is significant in programming languages. The name Camel Case is derived from the Camel’s hump. For Example- WordPress, CamelCase, etc.

We should always use the lower letter or lower camel Case in JavaScript. For Example- lastName, wordPress, loginName etc.

The hyphen sign (-) is not allowed in JavaScript. The hyphens are reserved for subtraction.

ECMAScript 6 is a case sensitive language

ECMAScript 6 is a case sensitive language; it means the lower-case and upper-case letters are different in ECMAScript. The term Case sensitive refers to the continued capitalization of the letter. It means the variables, functions names, and identifiers should always be typed in the continuous capitalization of characters. For Example- A keyword hello must betyped as “hello” not “Hello” “HELLO.”   

 We will understand it by an example-

ECMAScript 6 Syntax

The Semicolons are Optional in JavaScript

JavaScript provides the facility for the developers to use semicolon optionally. It means when the single line has only a single statement, then no need to use a semicolon. Still, when the single line has multiple or more than one statements, then we use a semicolon. They are needed there to separate the statements. For Example-

ECMAScript 6 Syntax

The basic JavaScript code execution

Here we are going to execute a basic code of JavaScript programming language.

ECMAScript 6 Syntax

Steps to execute the code of JavaScript

Some steps are mentioned below to execute the code-

Step 1: Save the file using .js extension. We will save the program with its name, such as Sample.js.

Step 2: Now, right-click on the file that stored in the working files option in visual studio project explorer. Now select the “open in command prompt” option.

Step 3: Now, we will type a following mentioned command in command prompt.

ECMAScript 6 Syntax

Step 4: Afterthe execution of the code, we will get the below given-output.

ECMAScript 6 Syntax

ECMAScript 6 and Hoisting

The term Hoisting is a mechanism used in JavaScript. In Hoisting, the JavaScript engine moves the functions and variable declarations to the top of scope before the execution of the code. The feature hoisting allows the use of the elements of the program before the declaration. We cannot apply this (Hoisting) mechanism when our code run in strict mode.

Strict Mode in JavaScript

The Strict Mode is an aspect used in JavaScript. The developer can use the strict mode easily in all programs. The Strict mode helps the developer to put the program code or a function in strict operating mode. The Strict mode will help us to avoid some actions, exceptions, and undeclared variables.

How to enable Strict Mode in JavaScript

We can easily use Script mode by using “use strict”; function. The strict mode is declared at the beginning of the strict or a function. The code declared in the script will execute in the Strict mode. For Example

ECMAScript 6 Syntax

If we are going to run the above sample code, then an error occurs because variable a is not declared.

Declare the variable inside the scope

Now, we are going to declare the variable inside the function scope. The variable becomes a local variable now. We will write it as follows-

ECMAScript 6 Syntax

In the example mentioned above, the code that is outside the function sample will run in the non-strict mode. The code that is inside the function will be treated in the Strict mode.