Thursday, 31 January 2019

Arrays in JavaScript : Part 3

In this article, we are going to discuss "Arrays" in Javascript in great detail. Following is the list of topics we are going to cover:

Let us go through it in a bit detail:

Filtering and Sorting of Arrays:

Let's start with Filtering in Arrays:


Basically, Filtering is the process where we take an existing array and create a whole new array out of it with some of the items based on whatever the filter is.

Sunday, 27 January 2019

Arrays in JavaScript : Part 2


In this article, we are going to discuss "Arrays" in Javascript in great detail. Following is the list of topics we are going to cover:

Let us go through it in a bit detail:

Looping and Searching over Arrays:

You can use forEach() API (provided by Javascript) which accepts a function as a callback and runs one time for each element present inside the array.

Arrays in JavaScript : Part 1

In this article, we are going to discuss "Arrays" in Javascript in great detail. Following is the list of topics we are going to cover:

  1. Manipulating Arrays. (Discussed on this page).
  2. Looping and Searching over Arrays.
  3. Filtering and Sorting Arrays.

Let us go through it in a bit detail:


Manipulating Arrays:

In the manipulation of Arrays, we have largely 5 methods that are being commonly used:


Method Name
Type
push()
Adds elements at the end of the array and returns the length of the array after the addition of the elements.
pop()
Removes an element from the end of the array and returns the popped element itself.
shift()
Removes an element from the beginning of the array and returns the removed element itself.
unshift()
Adds elements at the beginning of the array and returns the length of the array after the addition of the elements
splice()
It can be used to add/remove the element(s) from the specified index.


Monday, 21 January 2019

Functions in JavaScript

Functions in Javascript behaves pretty much the same way as they do in other languages.  Consider a simple example of a function:

 let cube = function(number) {  
   return number * number * number;  
 }  
 let result = cube(4);  
 console.log(result);  

It gives 64 as output.

Undefined and Null Values:

Sunday, 20 January 2019

Variables Scope in JavaScript

In general, the Scope of a variable refers to the visibility of a variable.

Consider a code snippet as an example :
 let varOne = 'varOne';  
 if(true) {  
   console.log(varOne);  
   let varTwo = 'varTwo';  
 }  
 console.log(varTwo);  

Here as you can potentially guess, we have output:
 varOne  
 /home/ayush/Desktop/js/scope.js:8  
 console.log(varTwo);  
       ^  
 ReferenceError: varTwo is not defined  
   at Object.<anonymous> (/home/ayush/Desktop/js/scope.js:8:13)  
   at Module._compile (internal/modules/cjs/loader.js:688:30)  
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)  
   at Module.load (internal/modules/cjs/loader.js:598:32)  
   at tryModuleLoad (internal/modules/cjs/loader.js:537:12)  
   at Function.Module._load (internal/modules/cjs/loader.js:529:3)  
   at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)  
   at startup (internal/bootstrap/node.js:285:19)  
   at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)  


While the "varOne" printed successfully, "varTwo" resulted in an error, why it is so? Let's check it out.

Basically, Javascript uses Lexical Scoping (Also known as Static Scoping) which says a variable defined in one part of your program may not be accessible to the other parts of the program.
A variable declared in this fashion is sometimes called as a private variable. The opposite to this is  Dynamic Scoping which is not at all used by Javascript.

We have Two types of Lexical Scopes: Global Scope and Local Scope

Global Scope: Defined outside of all code blocks.
Local Scope: Defined inside a particular block.

Let us consider an example to understand this:

 let varOne = 'varOne';  
 if(true) {  
   console.log(varOne);  
   let varTwo = 'varTwo';  
   console.log(varTwo);  
 }  
 console.log(varTwo);  


Here, the "if" statement initiates a "block" (which is also the only block present in our example). It produces the output:

 varOne  
 varTwo  
 /home/ayush/Desktop/js/scope.js:9  
 console.log(varTwo);  
       ^  
 ReferenceError: varTwo is not defined  
   at Object.<anonymous> (/home/ayush/Desktop/js/scope.js:9:13)  
   at Module._compile (internal/modules/cjs/loader.js:688:30)  
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)  
   at Module.load (internal/modules/cjs/loader.js:598:32)  
   at tryModuleLoad (internal/modules/cjs/loader.js:537:12)  
   at Function.Module._load (internal/modules/cjs/loader.js:529:3)  
   at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)  
   at startup (internal/bootstrap/node.js:285:19)  
   at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)  

As per our definition of Global and Local Scopes, variable "varOne" is present outside all of the code blocks and hence accessible to each and every block, while the variable "varTwo" which is defined inside an (if) block, it will be accessible only inside that block and nowhere else.

Variable Shadowing In Javascript:

Before jumping to Variable Shadowing in Javascript, one thing you can note that: You can't define a variable more than once within the same scope.

For Example, Consider the following code snippet:
 let varOne = 'varOne';  
 let varOne = 'something else';  

It produces the output:
 let varOne = 'something else';  
   ^  
 SyntaxError: Identifier 'varOne' has already been declared  
   at new Script (vm.js:79:7)  
   at createScript (vm.js:251:10)  
   at Object.runInThisContext (vm.js:303:10)  
   at Module._compile (internal/modules/cjs/loader.js:656:28)  
   at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)  
   at Module.load (internal/modules/cjs/loader.js:598:32)  
   at tryModuleLoad (internal/modules/cjs/loader.js:537:12)  
   at Function.Module._load (internal/modules/cjs/loader.js:529:3)  
   at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)  
   at startup (internal/bootstrap/node.js:285:19)  

As expected, it throws an error as the variable "varOne" is defined more than once within the same scope. However, You can obviously assign a value to a variable any number of times but you can't define that variable more than once within the same scope.

Now, we can move on to Variable Shadowing in javascript:

Consider the following Code Snippet:
 let name = 'Andrew'  
 if (true) {  
   let name = 'Mike'  
   if (true) {  
     let name = 'Jen'  
     console.log(name)  // Checkpoint 1
   }  
 }  
 if (true) {  
   console.log(name)   // Checkpoint 2
 }  

It produces the output:
 Jen  
 Andrew  

In this example, the variable "name" is defined multiple times but still does not produces any error, Can you think why it is so?
Actually, If you carefully observe, the variable "name" is never defined more than once within the same scope and this is what we call as Variable Shadowing in Javascript.

When we wrote "console.log(name) // Checkpoint 1", Its gonna look for a variable "name" and would find it here: "let name = 'Jen'" and hence won't go 1 level up.

Every time, we use a variable, It searches for the variable first within the same block, if it gets there then ok but if not, then it would go one level up and search for the variable and so on. This is what we call as Variable Shadowing in Javascript.

If you have any doubts, write down in comments so that we can discuss that further.
Thanks!