MODERN JAVASCRIPT
=======================================
What is JavaScript?
❉ JavaScript can be introduced as a multi-paradigm and dynamic language which was initially created with the purpose of making web pages alive.
❉ The syntactic structure of JavaScript is mostly based on Java and C languages.
❉ The programs written using JavaScript are called ‘Scripts’ and do not require any special compilation to run as they automatically executes when the page loads.
❉ JavaScript is a quite popular language which did not evolve much. But recently, when the Mean Stack came out, MongoDB, Express, Angular, Node and JavaScript had reasonable changes in its life cycle.
❉ It has now become an independent programming language based on ECMAScript.
❉ ECMAScript (ES) is a scripting language specification in which the main purpose is providing standardized JavaScript to its users.
❉ The Sixth Edition of ECMAScript which is initially known as ECMAScript 6 (ES6) was in high demand because of the new conventions and OOP concepts that introduced to its users.
❉ In 2015, they made a significant release and since then, it upgrades almost every year.
❉ The most special feature of Modern JavaScript is its diversity.
Let us take some new features into consideration that are added to modern JavaScript.
💥 Scope
❉ There are 2 types of scopes used in JavaScript.
◾️ Local scope — The variables that are declared and can only be accessed within the function are known as local variables. They cannot be accessed nor modified outside the function declaration.
◾️ Global scope — The variables that are declared and can be accessed and modified from any function are known as global variables.
❉ In JavaScript, each function forms a new scope and visibility of variables is determined through the scope.
Let’s take a simple example and implement.
We can run this program;
node 1-scope.js
Output:
● last value is 10, since i gets incremented. And k is 9 as it is inside the loop.
● Let is a same type of keyword as var that we can use to define variables.
In the above program, if we change the var of ‘k’ into let.
Output is:
● An error is occurred saying “k is not defined”. This has happened because we have defined ‘k’ inside the for loop. Therefore, you cannot access that variable outside the for loop.
RULE 01:
🔸 If you use keyword ‘let’ to define a variable, that variable will not be visible outside its scope.
🔸 Advantage: This is useful when writing lengthy scripts, multiple functions etc.
🔸Disadvantage: You might mix up when debugging in case if you have used the same variable in another place. You may get unexpected results at runtime. Therefore, debugging will be hard because the value of your variable may be changing from somewhere else.
❉ There is another keyword you can use instead of let, that is const.
In the above program, if we use ‘const’ when declaring ‘k’.
● An error has occurred saying “k is not defined” similar to the previous code. This is because let and const work almost the same way.
Let us modify the program again.
● This happens because it is a constant.
Let us use ‘let’ instead of const.
● Now this works well since let is declared outside the scope.
💥 Constants
❉ Constants are block-scoped, very much similar to variables declared using the ‘let’ keyword.
❉ The value of a constant cannot be changed through reassignment nor redeclared.
Output:
If we try to reassign another value;
● This error occurs because assigning a value to a constant variable is not allowed.
Let us use an array.
In order to add values to the array;
● The value is added although the variable is a constant.
RULE 02:
🔸 Const is only protecting a variable which is not an object or an array. We can change values inside arrays and objects although it is a constant.
💥 Arrow Functions
❉ Arrow functions were introduced in ES6 and they allow us to write functions in a way where the syntax is much shorter.
Let us see the implementations using arrow functions.
Output:
Let us take each of these functions separately and see how they work along with their outputs.
● This is a normal function without arrow functions that calculates the area.
● This program does not have the ‘function’ keyword. Instead of that, it assigns into a different variable.
● It takes the same arguments as in the previous program that used ‘function’ keyword. => is connecting function and function body. These are called arrow functions.
● You can write the program written above in this way too. Curly braces are not needed since there is only one line.
There is another way you can write the above function.
● It takes only one argument and you do not need to use parenthesis since there is only one argument.
● You do not need curly braces nor parenthesis because there is only one.
Let us take another example.
● Here, ‘print’ is the object variable. function1 is a normal function while function2 is an arrow function.
Output:
● This is the most common confusion that most developers go through.
📌 Normal Function (function1) — prints entire function inside that which means if you write a normal function (if it is not an array function), ‘this’ keyword represents the caller of the function.
📌 Arrow Function (function2) — ‘this’ keyword does not represent the caller.
💥 Object Handling
❉ All the values except for the primitives are known as objects in JavaScript.
❉ JavaScript objects can contain multiple values.
Let us see how objects can be implemented in a program.
● In this code, drive() is a normal function while stop is an arrow function. status is a dynamic property.
● SQRT2 does not have any key-value pair.
● If you define any variable and taking from another module such as Math, you can specify same thing on your object and value is not needed for that.
● This is equal to; SQRT2 : SQRT2
If you add more line,
Output:
Let us modify this one more time.
● [status] is a dynamic property.
Dynamic Property:
▶︎ It can have a placeholder as a key if yo do not know what the key would be at execution time.
▶︎ Dynamic properties can be used when you want to define an object to be sent to user through your service, but you do not know what the key would be.
▶︎ Key is highly dynamic and you do not know what the key would be at the coding time.
💥 Freezing
❉ freeze() is an object constructor method that is used to freeze an object.
❉ If you call Object.freeze(), it will not allow to change the value.
❉ You can you ‘freeze’ keyword if you have an object that goes from service to service and if you want to make sure that object does not change from function to function.
● This is a normal function.
now, let us use freeze() function and see what happens.
● “USA” is not printed since we have used Object.freeze() function here.
Let us change the code completely.
● A new ‘flower’ object is used here. In this case, name has not changed, but t1 has changed.
RULE 03:
🔸 If you call Object.freeze() method, that will only freeze first level values.
🔸 It does not freeze second level objects. (Inner objects)
💥 Templates
❉ These are string literals that allows embedded expressions. Multi-line strings and string interpolation features along with them can be used in templates.
Let us see how we can implement this.
Output:
💥 Classes
❉ JavaScript Classes can be known as templates for JavaScript Objects that were introduced with ECMAScript 2015 ( ES6 )
❉ Objects can be created using classes.
Let us see how to implement classes.
● In Line 20, two arguments are taken as the second class constructor expects two arguments.
● In Java, constructor has the same name of the class. But in JavaScript, we use constructor keyword. And there are no local variables in constructor.
● In Line 24, the function can be overridden with anything when calling through objects.
Output:
● The last line of the output is an overridden banner function.
● You may have functions on your classes and you can override your functions if you want on runtime.
💥 Destructuring
❉ Destructuring assignment is a syntax used in JavaScript expressions with the purpose of unpacking values from arrays, or properties from objects into distinct variables.
Let us see how we can implement in different ways.
1️⃣ First way :
● We can use one line instead of the 2 lines in Line 3 and Line 4 as shown below.
● As we can see, the same output is received in both cases.
● If you have defined 5-6 variables from the same module, you can have one line like this.
2️⃣ Second way : With a function
This can be extended this way.
● If you do not pass any value to ‘round’, it takes ‘3’ as the default value when rounding off.
3️⃣ Third way : Can use with a function
Let us see how we can implement this in the normal way.
● Sample text file is created!
Now let us see how we can implement this in the using destruct.
● Sample2 text file is created!
● We can directly call writeFile() method instead of ‘fs.writeFile’.
4️⃣ Fourth way : Using Arrays
● It automatically skips 40 as it is empty.
5️⃣ Fifth way : Using Rest Operator
● 3 dots […] are the spread / rest operator.
● Arrays are merged here.
Use Rest To Eliminate
Complete code:
Callback Function
📲 We can invoke a function and then ask to provide results to a particular function if results are available. When that result comes, it automatically invokes the function and we call this is “Callback Function”. Then it will take care of the rest of the job.
💥 Promises
❉ A JavaScript Promise object includes producing code as well as calls to the consuming code.
❉ A JavaScript Promise object has 3 main states namely,
- Pending — Result cannot be defined when it is on pending state.
- Fulfilled — If the result is a value, the promise object is in this state.
- Rejected — If the result is an error object, the promise object is in this state.
❉ Apart from that, the Promise object reinforces two properties namely; state and result.
● You wrap this up with new Promise because;
➣ HTTP takes some time to go to server and take response.
➣ When the response is ready, it will trigger the promise is completed.
● ‘catch’ statement in Line 17 pass and print the error when an error occurs.
● In ‘finally’, it does not matter which method triggered ( whether it is an error or a success), it will execute this. (Equal to try-catch in Java)
Let us remove some code segment for a while and have another function.
● Why does it say ‘undefined’ in the output?
➣ Before fetchWebpage result comes, the length is defined. Therefore, function does not wait until results come.
The same function can be written in this way too.
● The same function with 2 keywords. ➜ async, await
● It calls fetchWebpage that returns a promise object and wait until promise resolves. Once the promise resolves, it continues the next line.
In output,
2 ➜ This displays immediately because it did not wait until promise resolved.
3 243 ➜ It waits for sometime because of the keyword ‘await’.
Lets see the output after removing ‘await’ keyword.
Lets see the output after removing ‘async’ keyword.
Complete Code:
Advantages of using JavaScript
✨ Supports all modern browsers and compatible with older standards.
✨ Provide users with coherent experience.
✨ Stable
✨ Gains performance
✨ Implementation using JavaScript is easy.
Disadvantages of using JavaScript
🧨It may create client-side security issues as JavaScript code can be viewed by the user.
🧨Different browsers interpret JavaScript differently.
