IIFE(Immediately Invoked Function Expression) & Arrow function

 Immediately Invoked Function Expression(IIFE) is an anonymous function which gets invoked immediately. It is anonymous because it does not have a function name. The nature of this kind of function are self invoking. 

Here we can see that we have declared a function without a name. Inside a block function it has defined a variable with number 30 locally which is not defined outside the block. Therefore, we can see lexical behavior here also.

Below are some related questions to IIFE.

1.What is Name Collision?

2.Normal Function vs IIFE?

• At the time we create normal function we can have name collision but incase of IIFE we don't face this problem.

3.What is the use of IIFE?

• To not have a name collision is the use of IIFE. 

Arrow Function:

Arrow function allows us to shorten the syntax of function as compared to normal function.

What is Closure in JavaScript?

 Closure in JavaScript are the function inside a function that makes a function stately. Moreover, closure in JavaScript is the combination of function bundled together with references with its surrounding which is lexical environment. In other words, closure allows us to give the excess to outer function from inner function.

What is the need of closure?

The use of closure is to create self content functions, self content code, self content module. And, anything we have self content, then we have self content state. And when we are having self content state then we are avoiding global variables. 

From above example we can see that we have a simple() function which has initialized x as 0. Right after that x is incremented to 1. When the function is invoked, x will be shown as 0 at first and 1 later and at the end memory will be cleared. This means, next time again we invoke simple fun(), same values will be shown. This states that the function is stateless. 

On the other hand, there is a closures() function that has got another inner function init(). Variable x is initialized to 0 at first right after that init() function is incrementing the x variable defined in closures() function. We also have a reference variable for closures() function. Here in case of closure function we can have a reference that says don't let go the memory variables. So this makes function stately. 
Therefore, until and unless we end our reference variable in the use, we are able to use the memory memory variables. Here in the example every time we use reference variable we get the incrementation of the varaible.  
   

JavaScript ES6 Syntax.

 ECMAScript or ES as abbreviated is a JavaScript standard that ensures sharing the information across other different browsers. It is standardized by ECMA international according to the document ECMA-262.

ECMAScript 2015 or ES2015 was the major revision edition of ECMAScript after ECMAScript 2009 called ES6.

Here we learn different sections of ES6. Following are the detail note on those different sections accordingly.

1. Section 1: New Syntax

1. let keyword:
1. These variables are not attached to global object.
2. variables declared with let keyword are blocked-scoped.
3. These variables cannot be redeclared.

Variables are not attached to global object.

Variables declared using let are blocked scope.

Variable declared using let cannot be redeclared.

        2. Const keyword:

1. Const keyword provides read-only reference to a value.
2. Const variable must be initialized while declaration.
3. Like let keyword, const keyword also declares blocked-scoped variables.

The blocked-scope variable declared by const keyword are not reassign able.

The variable declared using const are "immutable". This means that the value once assigned cannot be changed.            

   

        3. Default Parameters: Basically we use the term parameters and arguments. And, most of gets confused in these two words while using. So by definition, parameters are what we specify in function declaration and arguments are what we pass into the function.

                    Arguments vs Parameters.

        Default parameters in JavaScript allows us to provide named parameter with default value, if there is no value or undefined value passed to the function.

    4. Object Literals: 

Object Literals in JS is quite popular pattern for creating object in JavaScript. They are very simple to learn and execute, so because of this reason it is used mostly. It uses comma-separated name-value pairs wrapped in curly braces. Object literals encapsulate within it in a tidy package which minimizes the use of global variables which can create problem when combining code.

 From above image we can see that, an object 'myDetail' is created that has enclosed some pairs of name-value. Now, any property name can be called to access its value using the object created.

5. for...of loop:

For loop is used to perform iterative steps as per logic provide.

Section 2: Destructuring

1. Array Destructuring:

This feature in es6 helps us to destructure properties of an object or element of an array into individual variable.

As we can see that we have a structure of array that is returned by a funtion getScores. Now, we need to destucture it in such a way that each value of the array must be assigned to particular variable. So this is shown in above picture.

Another example of array destructuring is shown below.

2. Object Destructuring:

Object destructuring concept is similar to that of array destructuring. Only difference here in object desctructuring is it deals with the objects. Therefore, properties of an object will be assigned as individuals here.

Section 3: Class

1. Class:

A JavaScript Class is blueprint for creating objects. A class encapsulates data and functions that manipulate data. 

Brief Introduction on JavaScript

Introduction

1. JavaScript was first appeared in Dec 4, 1995 has become the most popular programming language at the current time.
2. It is a phenomenal programming language for the web page.
3. Moreover, it is abbreviated as JS, is dynamic in discipline that assist webpage developing.
4. Further, it is an interpreted language whose paradigm is imperative to statement as FIFO phenomenon.

1. Script Tag

1. To write JS code inside the html page, requires a special tag, and that tag is called script tag. It is opened by <script> and closed by </script>.
2. The JS code is written inside the script tag.
3. The script tag can be defined either in the head tag or in the body tag.
4. One thing we must have to consider is script tag defined in the head tag may not be able to access the DOM(Document Object Model) elements because the head tag loads before body tag.
5. Therefore, in order to access DOM elements, script tag must be defined inside body tag.

      The picture below shows how to use script tag.

 

2. Case sensitive JavaScript

1. JS is case sensitive language, it means that language keywords, variables, function names, and any other identifiers must be typed with a consistent capitalization of letters.
2. For example; while keyword must be typed "while" not "While" or "WHILE". Also, food and FOOD are different variables.

We can make out vision clear from the following picture.

3. JavaScript is Dynamically typed not Statically

1. JavaScript is dynamically typed language, this implies that the type of the variable is checked during run time only.
2. Therefore, JavaScript is not statically typed because statically typed language checks the variable type at compile time.
3. Hence, it is stated as loosely typed language.

we can visualize figure below to make ourselves clear.

4. Datatype inference in JS

1. Datatype of JS are inferred, this implies that there is no need to babysit for the compiler in order to define the datatypes everywhere.
2. Further, datatype inference means, just define the value to the variable that we want, and its datatype will be declared according to the nature of value  defined.
3. Therefore, merely we can say JavaScript is autonomous in nature, means it acts freely.

we can look up below for more clarification.

From above figure, we can see that a variable "name" is declared whose datatype is unknown. But after the value="Prashant" of the variable is defined, its datatype will be known to "string". This is datatype inference. JavaScript is inference in nature in such a way that it does not need to define the datatype to the variables declared. Automatically, according to the nature of variable, datatype is set.

5. Role of var in JS.

1. The var keyword is used to create a new variable in the current context or scope being used.
2. Var keyword declares both local and global variables. It depends upon the way it is declared. If the var keyword is used to declare variable outside the function or block then it is declared as global variable. 

From above picture we can see that, a variable name  is declared outside the function, which is defined as name="Prashant". Once is alert inside the function Person() and next time it is again alert outside the function. 

Then, output will be two times alert of name because, global variable is used anywhere throughout the script. We can see the output visualization as.

When the variable is declared inside the function or block then at that time, the variable shows behavior as local variable. This means that the variable can be accessed only inside the block or that function.

6. JavaScript Hoisting

JavaScript Hoisting means that the JavaScript engine moves all the declarations to the top of the script. For example, we can use the variable and then we can declare the variable. This is a kind of flexibility of JavaScript.

From above picture we can see that, the variable is used first without declaration and after that only variable is being declared. That is, Prashant is assigned to name which is not declared yet. And, right after the name being alert, variable name is declared.