While writing JavaScript we Should take
care of these important concepts and JavaScript will be fun....
1. Take care of Opening braces while
writing functions in JavaScript.
2. Closures in JavaScript
3. Hoisting in JavaScript
4. Module Pattern in JavaScript
5. Less Use Of Global Variable (Scope)
in JavaScript
1. Take care of Opening braces while
writing functions in JavaScript.
JavaScript Interpreter Adds a Semicolon if the statement is not Closed.
JavaScript Interpreter Adds a Semicolon if the statement is not Closed.
function demo()
{
//your code
}
if you are using this style of function
declaration then it may not work as expected because what the interpreter will
do with this is like
function demo();
//notice the closing it adds to the declaration
{
//your code
}
The correct way of writing a JavaScript
function is.
function demo(){
//your code
}
Hence, Take care of your function
declaration and also take care of your closing on your own.
2. Closures in JavaScript
A first-class function that binds to
free variables that are defined in its execution environment is a Closure.
var x=1;
function sum(){
var y=4;
print(x+y);
//x is global variable.
}
with the concept of closure there
is bug that needs to be taken care of while writing functions.
Closure grabs Reference to the variable
not the value.
var yourfunc = [];
for (var i = 0; i <
8; i++) {
yourfunc[i] =
function() {
return i;
};
}
> yourfunc[4]();
8
> yourfunc[6]();
8
Here all the values return is 7 because
only the last value of i is
considered, Remember Closure grabs Reference to the variable not the
value. And the last value of i is
7.
How to take care of this bug?
var yourfunc = [];
for (var i = 0; i < 8;
i++) {
yourfunc[i] = (function(n) {
return function() { return n; }
})(i);
}
> yourfunc[4]();
4
> yourfunc[6]();
6
3. Hoisting in JavaScript
What will be the result of the following
function?
var x= 1;
function
yourfunc() {
if (!x) {
var x= 5; }
alert(x);}
yourfunc();
to your surprise it will be 5, Let me
explain why..
Here the first declaration of x
var x= 1;
Assigns 1
to x. within the scope of if statement there is another declaration of x
Hence when
if condition is checked it sees the declaration of x in its scope and ignores the
global declaration. But here the problem starts, because the x is used before its declaration in if (!x) then the interpreter converts undefined value to false because JavaScript
assumes undefined as false. The code with in if statement is executed and the
final value of x is 5.Hence while declaring variables
in JavaScript you need to consider the Hoisting of variables or you can get
unexpected results.
4. Module
Pattern in JavaScript
It defines and immediately executes an
anonymous function.
syntax:
(function(parameters) {
....yourcodes;//any thing here will be function scope, not
//Global scope.
})(parameters);
Module pattern is a very important
concept to use in JavaScript. It helps to create a new Scope and Closure around
it.
5. Less
Use Of Global Variable (Scope) in JavaScript
Global
scope is the most vulnerable part of the JavaScript if you have an api with
some global variable then while extending that api may result in unwanted
behavior if same variable name is used in the local code.
Also, this
is the place where hackers can use there logic to alter the program logic.
Hence, use Module pattern and give no space for global
variable in your code.