An array is a widely used data structure in the JavaScript language.

An array is a list-like data structure consisting of a collection of elements. Each element is determined by its index. The count of the index start's from 0 and the last index decides the length of an array.

While learning I encountered a lot of places where the array was implemented and JavaScript array methods made a lot of things easier. Array provides plenty of methods. So I decided to write a blog about it. Documenting what I Have learned.

All this content is freely available to read on the internet. I referred to the MDN Web docs for understanding.

Functions

push() -

The push() method is used to add one or more elements to the end of the array. This method changes the length of an array.

• parameters :

  the element(s) that are added to the end of an array.

• return :

  the new length of an array.

pop() -

The pop() method removes only the last element in an array.

• return :

  the removed element.

>let tech=['html','css']

>tech.push('JS')
<(3) //returns new length ['html','css','JS']
>tech.push('react','angular') //adding more than one element
<(5) //['html', 'css', 'JS', 'react', 'angular']

>let tech=['html', 'css', 'JS', 'react', 'angular']
>tech.pop()
< 'angular' // return the removed element

shift() -

The shift() method removes the first element from an array. This method changes the length of an array. It removes the 0th element and shifts the indexes of all consecutive elements down.

• return :

  the removed element

unshift() -

The unshift() method add one or more elements to the start of an array. If more than one element is added then it is added as a chunk to the start.

• parameters :

  the elements to add at the front of an array.

• return :

  new length of array

>let arr1=[3,4,5,6]
>arr1.shift()
< 3 //returns 1
//arr1=[4,5,6]

>arr1.unshift(3)
< 4 //returns the new length
//arr1 = [3, 4, 5, 6]

>arr1.unshift(1,2) //adding more than 1 elements
< 6 //returns the new length
//arr1=[1, 2, 3, 4, 5, 6]

reverse() -

The reverse() as the name suggest's reverses an array. The original array is changed.

• return :

  reversed array

let arr=[1,2,3,4,5]
let revArr=arr.reverse()
//revArr = [5,4,3,2,1]

join() -

The join() method creates and returns a string concatenating all the elements of an array it is called upon.

• parameters [optional] :

  separator that concatenates all array element, if nothing is passed the array elements are separated with a comma (",")

• return :

  The string with all array elements joined

let letters=['s','u','s','h','a','n','t']
let joinedLetters=array.join()
//joinedLetters = 's,u,s,h,a,n,t' //returns string joined with (",")
let joinedLetters2=array.join("-")
//joinedLetters2 = 's-u-s-h-a-n-t' //returns string joined with separator ("-")

slice() -

The slice method creates a shallow copy of part of the array into a new array-like object from start and end values passed as parameters. The original array is unchanged.

• parameters :

  takes two parameters and both are optional. The first is a start, it's the starting index from where to start extraction. Another is end the index where to end the extraction. The element at end index is not included in the new array. The negative index can also be passed here. If the end is not present then the extraction goes on till the last index.

• return :

  new array object containing the extracted elements.

let itemInBag= ["apple","oranges","banana","cherry","cabbage","spinach","milk","butter"]
let fruits=itemInBag.slice(0,4) //starts extraction from 0th index and ends at 4th(done not include end index)
//fruits = ['apple', 'oranges', 'banana', 'cherry']

let dairy=itemInBag.slice(-2) //extracts the last to index
//dairy = ['milk', 'butter']

let veggies=itemInBag.slice(-4,-2) //extract last 4th to last 2nd(doesn't include 2nd) index
//veggies=['cabbage', 'spinach']

Higher-Order Functions

While learning JavaScript we may have come across the term "higher-order functions".These functions are used heavily in JavaScript, which makes it suitable for functional programming. It may sound like a really complex thing to understand, but it isn't.

Higher-Order Functions are functions that operate on other functions, either by taking them as arguments or returning them.

Let's discuss some of the most used functions:

map() -

The map() method transforms an array by applying a function to its elements and building a new array from its returned values. The map function will take returned values from callback functions and create a new array. The new array created has the same length. The original array remains unchanged.

• parameters (callback function) :

currentValue : The current element being processed.

currentIndex[optional] : The index of the current element.

array [optional] : The array map is used upon.

• return :

  a new array with each array being the result of a callback function.

let arr=[1,2,3,4,5]
let doubleArr=arr.map(elem => elem*2 ) //callback function to get double of each element
//arr = [2, 4, 6, 8, 10]

filter() -

The filter() method finds all the elements that satisfy the condition or of same type and build a new array out of it. Each element is tested by a callback function. Rather than deleting the elements from original array based on return value from callback function it builds a new array.

• parameters (callback function) :

currentValue : The current element being processed.

currentIndex[optional] : The index of current element being processed.

array [optional] : The array filter() is called upon.

• return -

  A new array that passes the test(callback function). An empty array is returned if no element pass the test.

let students = [{id:1,dept:"CS",name:"Sachin"} , {id:2,dept:"MECH",name:"Ram"},{id:3,dept:"CS",name:"Virat"},{id:4,dept:"ENTC",name:"Sushant"}]
let filteredDept=students.filter(student=> student.dept=="CS") //filtering based on dept="CS"
//filteredDept = [{id: 1, dept: 'CS', name: 'Sachin'},{id: 3, dept: 'CS', name: 'Virat'}]

let filterName=students.filter(student => student.name.length>6) //filter whose name length>6
//filterName = [{id: 4, dept: 'ENTC', name: 'Sushant'}]

reduce() -

The reduce() method applies reducer across all element of array and returns a single value. It returns a single value calculated on each element of array. The reducer is initialized and processed throughout the array, at each step calculates the result and adds to previous steps result till last index of array.

• parameters :

callback function:

• prevoiusValue - The resulting value from last callback function i.e. Accumulator
• currentValue - The value of current element.
• currentIndex - The index of current element.
• array [optional] - The array reduce() is applied upon.

initialValue [optional] -

• If it is provided, then previousValue will be equal to initialValue and currentValue equal to first element.

• If it is not provided, then previousValue is set to first first element and currentValue is the second element of array.

• return :

  The value returned after running reducer function on all array elements.

let report={ id:1,
             marks:[25,32,44,38,29,41],
           }
let totalMarks=report.marks.reduce((previousValue,currentValue) => previousValue+currentValue,0)
//returns total of all elements of array, initialValue is set to 0
report['total']=totalMarks
//report={ id:1,marks:[25,32,44,38,29,41],total:209}

Conclusion

Before we end, I hope you got an insight into the array method that makes our programming easy. To get a better grip over the concept we need to solve some problems and practice them.

Other than this concat(),sort(),find(),findIndex(),fill(),forEach(),some(),every() ... are some very useful array method.

Let's connect. You will find me active on Twitter(@MasterThinking). Please feel free to give a follow.

By the end of this blog, you will understand how is JS code executed in the browser. We will talk about the following topics:

• Execution Context

• Call Stack

So, let's get started and discuss it.

Execution Context

Every JS file has several lines of code, organized with the help of variables, data structures, functions, and many more. The code is straightforward. However, behind the scene, JavaScript does many things.

We all must have heard that

Everything in JavaScript happens inside an Execution Context.

But what is this Execution Context? Let me help to make it simple for you. A Lexical Environment determines how and where we write our code physically. Note that there is more than one Lexical Environment in code, but not all Lexical Environment get executed at once. When the JS engine executes a code, it creates an execution context. The execution context is the environment where a specific portion of the code executes.

Each execution context has 2 phases - the memory creation phase and the execution phase. These might seem some heavy topics but actually, they are pretty easy to learn.

Let me make you absorb this. Think it in a way that our code may or may not be written in a sequence. Some portion may in at the start of the code, or at the very end, or somewhere in the middle, but the actual sequence of code is in what order it is required or called by the compiler or engine. The order of lexically written code and order of execution is not the same. The order in which the code is executed/run by the system is Execution Context.

Global Execution Context

When a script is executed the first time, the Global execution context is created by Javascript Engine. It has 2 phases

1. Memory Creation Phase
2. Execution phase

Creation Phase

In the creation phase, two unique things get created:

• A global object called WINDOW( in browser).
• A global variable called THIS.

Now let's figure out what happens when we open and execute JS files in a browser. Now here is the twist, even when we Execute an empty file Execution context is generated. I will try to explain this with the help of the below example.

The shortest Javascript program ever.(File is Empty )

1. The Global Execution Context gets created when we load the JavaScript file, even when it is empty.
2. It creates 2 special things -
   • window object

value of window

• this

value of this

1. For an empty file window and this are equal.

   window===this //true

2. As the file is empty, there is no execution phase here.

When executes a file with variable and functions:

Wherever variables are declared, memory is created for the following variable. Variable gets initialized with a unique value undefined. There is a difference between not defined and undefined. here the variables are given memory but no value is defined to it, that's why undefined.

If there is a function, then it gets placed directly into the memory, consider that the function copied as it is in memory. For every function in the program, a separate Function Execution Context(FEC) is created. We will talk about it below. When FEC is created, the control is passed to the newly created FEC.

Execution Phase

The code execution starts in this phase. During the execution phase, the JavaScript engine executes the code line by line. Values are assigned to variables and functions are called. The call stack, which is empty now has GEC at its top as it is pushed when the execution starts.

Remember, during the creation phase functions are already stored in the memory.

Now for every function call, the javascript engine creates another Function Execution Context separately. Always keep in mind that

Javascript is a "synchronous single-threaded" language. So not more than one execution can happen at a given time.

Function Execution Context

Whenever we invoke a function, a Function Execution Context(FEC) gets created. Function Execution Context is similar to Global Execution Context and has 2 phases same as Global one - creation and execution. The FEC is similar to GEC and has access to a special value called arguments but instead of a global object, it creates an arguments object.

Argument Object refers to all the parameters passed to the function.

These are points that we need to understand here.

1. All the variables and functions in the GEC are still accessible.
2. When a function calls another function, a new function execution context gets created for the newly called function called and each FEC has its scope of variables.
3. Once the execution phase of the current FEC is over, it returns the control to the Execution Context where it was called.

CALL STACK

To keep a track of all the GEC and FEC, the JS engine uses a data structure called CALL STACK. Stack-based on LIFO (last-in-first-out) principle is used to manage execution contexts and their functioning. Let us discuss the operation performed by call stack maintained by JS engine:

1. At first the stack is empty.
2. When we execute a script, The GEC is created. So it is pushed to the top of the stack.
3. Now whenever a function is called, FEC is created for respective function and it is pushed to the top of a stack and starts executing the function. If the function calls another function, then another FEC is created for the called function, pushed to the top of the stack, and executed first.
4. When the execution of the function is complete, the JS engine pops the FEC off the stack and executes the FEC at the top of the call stack.
5. When the stack is empty the execution stops.

Stack overflow

The size of the stack is fixed depending on various factors. If the number of Execution Context exceed the stack size, Stack overFlow occur.

When a recursive function with no exit condition is called.

For this example, the var n, var double1, and var double2 are given memory, and function double() is copied to the memory as it is. Global Execution Context is pushed to the top of the empty stack

After creating memory, the values are assigned to variables in this phase. Here n=2, that means n is assigned 2 as value. Also, notice that double1 and double2 call function double() , so separate execution context are created for each function call.

double1 = double(n) is called first so FEC for is created and it is pushed to the top call stack.

Function Execution Context for double(n) is created and the memory creation phase is completed. The argument of the function is also given memory and initialized to special value undefined.

In the execution phase of double(n), the variables and arguments are initialized to their values. Even the values from the Global Execution Context can be accessed here. After the encounter of the return keyword, the FEC is ended and gets pop off the stack. double1 is returned with value 4 resulting in double1=4. The call stack would look like this:

Now at double2 = double(4) , the double() is again called. Hence a new FEC for this call is created. FEC of this will be pushed at top of the stack. The memory created would occur and in the execution phase And the context and call stack would be like this:

As soon the double2 = double(4) function context returns the computed value, it is popped off the stack. Now there is no more line to execute in the GEC so it is also popped off the stack and the stack is empty. In the end, the memory component would be similar to:

When Javascript completes the execution, then the Global Execution Context is deleted and Call Stack is empty

Wrap up

Execution Context and Call stack are the very important topic for every Javascript developer. Having an idea of how the code works under the hood will sure help in better understanding the code, debugging, and writing cleaner code. A special thanks to Akshay Saini for explaining these things and encouraging me to help others. It was an honest effort to help beginners like me to have in-depth knowledge about the Foundations of Javascript. Thanks for reading!