CHAPTER 6 : HOW JAVASCRIPT BLOW YOUR MIND?
CLOSURES :MECHANISM OF HEART
We all know functions are the JS HEART. Closures is nothing but a function binded together with its lexical environment.
And yeah that's it.
CLOSURES = FUNCTION +LEXICAL SCOPE
function a ()
{
var i=1;
function b()
{
console.log(i)
}
b();
}
a();
We know the output : 1 This is because b() forms a closure or you can say is bided to the variables of a().
One thing to know : b() is not binded to the values of a() , it is binded to the reference of the variables defined in a(). Anytime the value of i in a() i changed for say from i=1 to i=100 , b() will print 100 then . Because it is binded to its function + lexical scope and lexical scope gives reference of the variables and function of parent function a() not values .
That is why JS becomes so powerful because of functions , the way functions remember everything and retain their lexical scope is nothing more than magic.
CALLBACKS ARE CALLING YOU!
In JavaScript, functions are objects.
Because of this, functions can take functions as arguments, and can be returned by other functions.
Functions that do this are called higher-order functions. Any function that is passed as an argument is called a callback function.
We need callbacks because likewise time JS does not wait for anyone , it keeps on executing.
It’s not that JavaScript do not execute our functions in the order we wanted it to, it’s instead that JavaScript never wait for a response .
So we also need some hack to control JS : For that Callbacks are a way to make sure certain code doesn’t execute until other code has already finished execution.
The benefit of using a callback function is that you can wait for the result of a previous function call and then execute another function call.
The callback function is helpful when you have to wait for a result that takes time. For example, the data coming from a server because it takes time for data to arrive.
ARRAYS IN JS ? SOMETHING DIFFERENT
In JavaScript, array is a single variable that is used to store different elements. It is often used when we want to store list of elements and access them by a single variable.
Var fruits = new Array(‘Mango’,’Apple’,’Orange’);
var array = [1, 2, 3]
var number = [1, 2, 3, 4, 5]
var strings = ['name', 'place', 'food' ]
var functions = [ function x(){...}, finction y(){...} ]
var mix = [ 12, 'niceplace', function xy(){...} ]
Arrays can be anything — numbers, strings, functions even other arrays and within the arrays you can mix different type of data freely.
ARRAY JARGONS
JavaScript provides a number of methods for processing arrays.
- One of the most useful is the ability to turn an array into a string.
The join method concatenates all the members of an array into a string, along with a separator. If the separator argument is omitted, a comma is used by default:
You can also convert the Array into a string by the toString() method.
var Avengers = [ 'ironman', 'dr.strange', 'cap.america' ];
var result = Avengers.join('');
var Avengers = [ 'ironman', 'dr.strange', 'cap.america' ];
var result = Avengers.toString();
The only difference is: join() can join an array together by a separator, toString() method join an array by comma separated only.
- You can also add , subtract the elements in an array.
Adding elements : The push() and unshift() method
The unshift() method adds new items to the beginning of an array, and returns the new length.
The push() method appends the given element(s) in the last of the array and returns the length of the new array.
var alpha = ['G', 'V', 'I', 'K'];
alpha.unshift("F");
var alpha = ['G', 'V', 'I', 'K'];
alpha.push("Z");
Removing Elements : The pop() and shift() method
The shift() method removes a first item from an array and returns that removed element. This method changes the length of the array on which we are calling the shift() method.
The pop() method removes a last element of an array and returns that element.
var alpha = ['G', 'V', 'I', 'K'];
alpha.pop();
var alpha = ['G', 'V', 'I', 'K'];
alpha.shift();
Fill, Filter , Slice and Splice
![js2.png] (cdn.hashnode.com/res/hashnode/image/upload/..)
Theoritically:
The splice() method is an inbuilt method in JavaScript which is used to modify the contents of an array by removing the existing elements and/or by adding new elements.
var fruits = [ 'apple', 'banana', 'Chiku', 'orange', 'mango' ];
fruits.splice(2); // remove ["Chiku", "orange", "mango"]
//remove one item only: Chiku
var fruits = [ 'apple', 'banana', 'Chiku', 'orange', 'mango' ];
fruits.splice(2,1);
For Adding as well:
var color = [ 'red', 'Blue', 'green', 'yellow'];
color.splice(2,0,'pink');
//output is : pink,red,blue,green ,yellow
But
The slice() method returns the selected elements in an array, as a new array object. The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.
var life = ['eat', 'sleep', 'code', 'repeat'];
var slice = life.slice(1,3);
alert(slice) // sleep,code
Original array will remain intact.
Last Minute Jargons :
includes() method check whether the item you selected is present in the array or not either true or false depending upon the item present or not in the list
The sort() method will sort an array into alphabetical order. To sort numeric values, we can’t use sort() method directly. For numeric sort we have to write an additional function .
reverse() method reverses the element of an array.