Modern Concepts in JavaScript(Part 1)
JavaScript is a lightweight, dynamic, text-based programming language that is used on both client-side and server-side in order to make web pages more interactive. Javascript was first introduced in 1995 with the name LiveScript. Later on, with the popularity of Java, Netscape changed its name to JavaScript. JavaScript is the only programming language that is native to the web browser and it's a relatively easy language to learn. Therefore the popularity of Javascript increased rapidly over the past few years. Almost all web Browsers contain a JavaScript Engine. JavaScript Engine is a computer program that is used to execute Javascript code. These are the JavaScript engines used by popular browsers.
- Chrome — V8
- Mozilla — SpiderMonkey
- Safari — JavaScriptCore
- Edge — Chakra
Advantages of JavaScript
- Fast on the Client-side as it can be run immediately within the browser.
- Interoperability.
- Simplicity and easy to Learn.
- Easily create attractive web interfaces.
- Reduce the server load as JavaScript runs on the client-side.
- Frequent updates with the latest functionalities.
Disadvantages of JavaScript
- Security. Can be easily exploited as Javascript code executes on the client’s computer.
- Different interpretations by different browsers.
Javascript is actually based upon a Standard Scripting Language called ECMAScript.
Evolution of ECMAScript
ECMAScript is a famous scripting language that creates the basis of JavaScript.
ES6 or ECMAScript 6 is the major revolution done to modern Javascript.
Through this article, let’s discuss some of the key concepts in JavaScript which each and every developer must be aware of. These are some of the new changes that were introduced to Javascript with recent updates(Especially with ES6).
1. Scope
The scope of a variable is used to determine its accessibility within the program. This scope is controlled by the location of the variable declaration. There are 3 main ways to declare a variable in JavaScript — “var”, “let”, and “const”.
Javascript has 2 main scopes.
- 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.
So,
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.
2. Constants
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.
4. Handling Objects in JavaScript
A JavaScript object is a variable that can contain many values. They are basically containers for named values properties and methods. Important points -
- 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.
Dynamic Properties
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.
Example —
We can see that the property “Key” has been replaced by the value “service”.
5. Freezing in JavaScript
“Object.freeze()” is a method used in JavaScript to freeze an object. This will result in —
- 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.
Part 02 of this article will discuss more concepts related to JavaScript. I have used the following video by Mr.Krishntha Dinesh to gather the required information.
