Understanding javascript arrays for beginners

Arrays are the most common data structure used in computer programming. In this article we are going to talk about using arrays in javascript, don’t worry if you are not familiar with arrays in any programming language, we are going to talk about javascript arrays from scratch.

Definition

Javascript arrays can be considered as containers to store items that can fetched using a single variable.The best thing about arrays in javascript unlike other programming languages is that you can store items of different datatypes in a single array.Lets check an example that justifies my above claim.

var arr = ["Hello", 1 , 2 , "World"];

The array arr has two String elements i.e “Hello” and “World” and also two Number elements i.e 1 and 2 which is completely fine in javascript unlinke other languages.

Creating array

We can create an array in two ways. Let’s check them one by one

Method One

Arrays in javascript can be easily created using the array literal.

Syntax

var array_name = [element1 , element2 , element3,....];

Example

var arr = ["Hello", 1 , 2 , "World"];

Method two

Another way to create array in javascript is using the Array constructor and new keyword.

Syntax

var array_name = new Array(array_length);
var array_name = new Array(element1,element2,element3,...);


Example

var arr = new Array(5);
var arr = new Array("Hello", 1 , 2 , "World");


So if you closely observe the above two snippets you would understand that passing a single parameter into the Array constructor will create an empty array of the parameter length but if you pass multiple parameters , it will create an array with the parameters as elements of the array.

Accessing elements of array

The elements of an array can be accessed by indices, which are integers used to compute offset.

Example

Iterating elements of array

The iteration of array can be achieved using several pre-defined methods .These methods can be broadly divided
two parts:
1. Non-array generating methods
2. Array generating methods

Lets take a look at these categories and the methods under them

Non-array generating methods

The non-array generating methods iterate the array without creating any new array. Let’s talk about the methods that come under this category

forEach()

This method takes a function as parameter and applies it to each element of the array while iterating it’s elements.

Example

Output

 5,10,15,20,25,30,35

every()

This method takes a boolean function as parameter and returns true if the parameter function returns true for every element of the array

Example

Output

 Not all elements are multiple of 3

Value of multipleOfThree will be False because all elements in the array are multiples of 3 except the last element i.e 10

some()

This method takes a boolean function as parameter and returns true if the parameter function returns true for any element of the array

Example

Output

Few elements are multiple of 2

Value of multipleOfTwo will be True because we have alteast one element i.e 18 which is multiple of 2

reduce()

This method applies a function to an accumulator and the successive elements of an array until it reaches the last element. Thus, it yields a single value

Example

The below source code uses reduce() to calculate the sum of all elements of an array

Output

Sum of all elements is, 55

reduceRight()

This method works similar to reduce(), the only difference is that it operates from the right hand side.Let’s see an example of how it can be used to concat string elements of an array to form a complete sentence.

Example

Output

Javascript is love

Array generating methods

These methods return new array after they successfully iterate through all elements of the array.Let’s take a look at the methods that are of this category.

map()

This method works similar to forEach(),the difference is that it return a new array. Let’s see an example where we will use map() to multiple all elements of an array with 5 and return the result as a new array

Example

Output

(5) [5, 10, 15, 20, 25]

Please note that result is a new array.

filter()

This method works similar to every() but instead of returning true if all the elements satisfy a boolean function, it returns a new array with elements that satisfy the boolean function.

Example

Output

The array with even elements:
(2) [2, 4]

Copying javascript arrays

When you assign an array to another it is copied by reference and not by value.What i mean by it that if you modify the later array then the original array will also be changed automatically, which we will never want in general circumstances.let’s understand this with an example.

Example

Output

(3) ["Apple", "Mango", "Pineapple"]
(3) ["Apple", "Mango", "Pineapple"]

As you can see both the arrays fruits and anotherFruits gets modified when we add another element to the anotherFruits arrays. The result will also be same if we modify the fruits array. This way of assigning arrays in javascript is called Shallow copying.

An alternative to this is called Deep copying. It makes sure that just the elements of each array gets copied and not the complete array.let’s try to achieve this with the help of a function.

Example

Output

(3) ["Apple", "Mango", "Pineapple"]
(2) ["Apple", "Mango"]

So, the moment we assign each element of an array to another, we are no more under threat of auto modification of original array contents.

Other important array methods in javascript

concat()

This method joins two or more arrays. Please note that it doesn’t change the existing array rather returns a new array containing values of the joined array.

Example

Output

(4) ["Prabhat", "Subhajit", "Ankita", "Sarita"]

join()

It creates a string from the array with the elements seperated by the specified seperator.The default is comma(,)

Example

Output

 Prabhat is friend with Subhajit

shift()

It removes and returns the first element of an array.

Example

Output

 Prabhat

pop()

It removes and returns the last element of an array.

Example

Output

 Subhajit

push()

It adds new elements at the end of an array and returns the length of the updated array.Please note that it modifies the original array.

Example

Output

 (4) ["Prabhat", "Subhajit", "Ankita", "Sarita"]

reverse()

This method reverses the order of elements of an array.

Example

Output

 (4) ["Sarita", "Ankita", "Subhajit", "Prabhat"]

slice()

This method selects elements from a specified point to an end point without including the end point element.Please note that it doesn’t modify the original array.

Syntax

Example

Output

     (2) ["Subhajit", "Ankita"]
      (2) ["Subhajit", "Ankita"]

splice()

This method adds or removes elements of an array at specified positions and returns the added/removed elements.

Syntax

Example

Output

      (3) ["Prabhat", "Ankita", "Sarita"]
      (2) ["Prabhat", "Subhajit"]

sort()

This method sorts the element of an array.The order can be numeric or alphabetic and ascending or descending.By default the sorting is alphabetical and in ascending order.There is a problem when you sort numbers as strings.For example when you sort 21 and 100 , logically 21 should come first but when you sort it as strings “1” is less than “2” so 100 will come first.This problem can be solved by using a comparison function with sort().Please note that this method changes the original array.

Example

Output

     (6) [7, 10, 19, 25, 42, 234]

toString()

It works similar to join(), the only difference is it doesn’t need any argument and returns comma (,) separated string form of all elements of the array.

Example

Output

      Prabhat,Subhajit,Ankita,Sarita

indexOf()

This method return the position(index) of an element in an array.It return -1 if the element is not found.

Example

Output

     1
     -1

Huh ! i know it was a long one but i am sure by now you have decent knowledge of Arrays in javascript, I can’t wait to have some good discussions in the comments.Feel free to ask your queries or let me know how helpful you found this article.

Happy coding !!!!!