Advanced JavaScript Topics Part 1

If you are writing Hybrid Mobile Applications than JavaScript should in your blood. So, I am trying to write something about JavaScript today.

Some Resources

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide : It is Mozilla Developer Network also known as MDN. It is an open source Wiki also, which I  think not known to most of the people. It is one link that should be bookmark in your browser.

• https://github.com/rwaldron/idiomatic.js : It is a write up of idiomatic code that is widely accepted across the developer to write consistent JavaScript code. You may not agree with all the code which is there but it is a great place to start. There are couple of quotes written on the git page, which I like it is

         "Arguments over style are pointless. There should be a          style guide, and you should follow it"                

         Rebecca Murphey

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/ : This is one stop shop for design patterns in JavaScript and if you are going to write a clean code in JavaScript and Follow a Design to solve the problems in JavaScript you should go through this.
• 
  
•     http://www.ecma-international.org/ecma-262/6.0/ : JavaScript is EEMA Script if you don’t know. This is the language specification and I am sure many of you have not referred to this. If you are referring to this means you are writing some serious efficient JavaScript Code.

So if we talk about Advanced JavaScript what comes in my mind is

1. Scope
2. Hoisting
3. This
4. Closures
5. Object Oriented JavaScript

Scope

So what is scope? Scope is when we use a variable we need to define where that variable is declared and who is looking for this variable. Currently JavaScript scope is defined to a function means smallest element of scope is function.

Function Scope

Variable is referenced to the Scope in which it is declared. If compiler is not able to find the reference to the variable in the scope it will go one step top and check if the reference is available and it do it until it reaches the global scope. This is called Nested Scopes which we will discuss later in this article. Now if you have the “Use Strict” than if the variable is not declared in Global Variable there will be error but if it is not set to use strict mode Global scope will declare that variable in his scope. If we have a variable declared without a var keyword in a function than it will be automatically declared in the global scope in non-strict mode but not in strict mode, but not in the case of functions if you make a call to a function which is not declared you will get a reference error.

With this one thing came to my mind about the difference between the function declaration and function expression. How can identify a function declaration and function expression? If function keyword is the first thing in the statement means it is function declaration. However, if it is not than it is an expression. Now function expression can be Anonymous function or name function. Anonymous function as the name suggest which does not have a name. So, a function expression without a name is called anonymous function expression and one with a name is called named function expression.

What is the difference between Anonymous and Named function expression?

• If it is named than you can refer to the function within the function scope. If you want to write a recursive function.
• It helps in the debugging, if there is no name to the function you will see anonymous function in the debug log. However,if you would have given the name than it would have been there in the Stack trace.
• Named function methods are self-documented. If we are using a name than we can understand that function would be doing but if it is anonymous than we need to check the function context to understand it.

You all must be aware of undefined in JavaScript. Undefined does not means it is not declared. It means it is set to value undefined. If there is nothing it is undefined. But the thing is undeclared and undefined are not similar. Undefined is more like not initialized.

Block Scope in ES6

In ES6 we have new keyword let keyword which make the variable scope implicit to the block in which is defined and not to the function scope. Block scope is pair of curly braces, and it is powerful enough and help us defined the least disclosure principle.

Let us look at the code examples

As you see you will get error if you refer j outside for loop, If you would have declared j using “var” if would be available outside for loop.

Note: to use let keyword you should defined the scope with ‘use strict’ mode. Otherwise it will give you an error.

You can always go to MDN (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let) for more details.