- Chrome — V8
- Mozilla — SpiderMonkey
- Edge — Chakra
- Fast on the Client-side as it can be run immediately within the browser.
- Simplicity and easy to Learn.
- Easily create attractive web interfaces.
- Frequent updates with the latest functionalities.
- Different interpretations by different browsers.
Evolution of ECMAScript
- Global Scope: The outermost scope is the global scope and any variables declared in this scope are globally accessible(can be accessed anywhere in the program).
- Local Scope: Variables declared within a particular block. These variables are accessible only within that block.
“let” and “const” keywords have a block scope where the “var” keyword is limited to function scope.
Let’s try to further understand these scopes with the help of an example. Consider the following code.
The program will get executed and print the values as in Fig 1.
What if we change the type of variable “k” from var to let? This will throw an error saying that the value k is not Defined.
If you define a variable type as let, it is not accessible outside the Scope.
In this case, “k” is not accessible outside the forloop. What if we change the type of k to const? Still, there will be an error.
Useful: Avoid the declaration of the same variable name in 2 different locations.
As mentioned in the previous section, constants have block scope. A constant cannot be redeclared and reassigned. Constants require an initializer. The developer must specify the value in the same declaration statement.
How does it work?
The declaration process of a constant creates a read-only reference to the value. This variable identifier cannot be reassigned. Therefore the constant value cannot be changed.
Consider the following example —
Let’s create a const Array and add another value. what will happen?
We can see that the value has been added successfully.
“Arrays and objects declared as constants are Mutable.”
3. Arrow Functions
A new feature introduced in ES6. This is basically a mechanism for developers to write shorter function syntax. Arrow functions cannot be used as constructors. Does not have a unique binding to “this” or “super” keywords.
“this” keyword in Arrow Functions
- Arrow functions do not contain a binding of “this”.
- In arrow functions, “this” always represents the object that defined the particular arrow function.
Arrow functions can be written as —
So we can see that the syntax is much simplified.
- If we define a variable that takes value from another module, we can use that variable inside the object and do not need to specify any value inside it. Example —
So we can see that we got the value for “SQRT2” even though we didn't specify any value inside the object.
Refers to the technique of using a placeholder as the key. This is used in situations where the developer doesn't know the exact key at execution time.
Before ES6 (2 step process) —
- Create the Object literal
- Then use the bracket notation.
After ES6 —
- Can directly use a variable as the property key in object literal.
We can see that the property “Key” has been replaced by the value “service”.
- Objects cannot be changed.
- Cannot add new properties to the Object.
- Cannot Remove the existing properties in the object.
- Prevents the prototype from being changed.
Let’s try to understand this with the help of an example.
Now we can see that even though we cannot change the value after freezing.
Does freezing work for all the values inside an object?
Consider this example,
From the above output, we can see that 2nd level values changed even after we call the “Object.freeze” method.
Object.freeze will freeze only 1st level values. It does not freeze inner level objects.
Storing values in variables is a fundamental concept in programming. A variable's "scope" determines when it is and…