Arrays and Arrays Methods in Javascript

Arrays in Javascript

When we have to hold multiple values in a single Variable, then we need array.

Let’s take an example of Students in a school. Student is a single variable but will hold multiple values. like, class, age, gender, marks etc.. So, If we want to hold all these values in a student, then we can use Array for that.

• Arrays can hold multiple values under a single name.
• Arrays Index will always start with 0.
• Arrays are Mutable.

let arr = [12, 24, 56, 43]

Console.log(arr)
Console.log(arr[0])
Console.log(arr[1])
Console.log(arr[2])
Console.log(arr[3])
Console.log(arr[4])

Array returns undefined for the values not present in an Array.

We can store many types of value in a single array.

let arr1 = [12,24, 56, 43, true, "QAPeddia"]

Console.log(arr1)
Console.log(arr1[0])
Console.log(arr1[1])
Console.log(arr1[2])
Console.log(arr1[3])
Console.log(arr1[4])
Console.log(arr1[5])
Console.log(arr1[6])

Array Methods and Operstors in Javascript

Now, Let’s see the operators and methods related to Arrays.

Find the length of Array

1. length is an operator.
2. This operator finds out the length of the array.

Console.log(arr1.length)

Add the values in the array

arr1[6] = 89
Console.log(arr1)

Change the value of an element in the array

arr1[0] = 96
Console.log(arr1)

Find the type of Arrays

1. Arrays are Object Type.
2. We can find out the type of array using type of operator.

Console.log(typeof, arr1)

toString() Method

1. This is a method or function
2. Change the array to String.
3. Actually this function creates a new string with Array’s Element.
4. this function doesn’t modify the original array.

let num = [1, 2, 3, 34, 4]
let b = num.toString() // b is a string now
Console.log(b)
Console.log(b, typeof b)
Console.log(num)

join() method

This function joins all the Elements of array and returns a string.
This function doesn’t modify the original array.

let c = num.join("_") // c is also a string now
Console.log(c, typeof c)
Console.log(num)

pop() method

• pop method will remove the last element from the array.
• This method modify the origial array.
• This method returns the deleted element from the array.

Console.log(num)
let r = num.pop
Console.log(num)
Console.log(r)

push() method

• push will add an element at the end of the array and returns the length og the array.
• This method modify the origial array.

Console.log(num)
let s = num.push(56)
Console.log(num)
Console.log(s)

shift() method

• This method removes first element from the array
• This method returns the remove element from the array.
• This method modify the origial array.

Console.log(num)
let sh = num.shift
Console.log(num)
Console.log(sh)

unshift() method

1. This method adds an element at the start of the Array.
2. This method returns the length of the Array.
3. This method modify the origial array.

Console.log(num)
let us = num.unshift(78)
Console.log(num)
Console.log(us)

delete operator

• delete is not a method but an operator.
• delete is not a method, so it doesn’t return anything.
• This deletes the specified the element from the array.
• This modify the origial array.
• Delete Operator doesn’t change Array length.
• The element removed will create an empty space there.

delete  num[0]
Console.log(num)
Console.log(num.length)

Concat() method

• Concat method doesn’t modify the origial array.
• It creates a new Array and returns it.

let num = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let num1 = [11, 12, 13, 14, 15, 16, 17, 18, 19]
let newArray = num.concat(num1)
Console.log(newArray)

sort() method

Sort method modifies the sorting order of the origial array.

let num = [551, 22, 3, 14, 5, 6, 7, 8, 229]
num.sort()
Console.log(num)

The problem with this method is that, this method sorts alphabetically, which means, number starting with 1 will be sorted first, then number starting with 2 will be sorted, then number starting with 3 will be sorted and so on.

Now, if I want to sort the array in ascending order, then I need to use a function compare, Let’s see it

function compare(a, b) {
  return a - b;
}
let num = [551, 22, 3, 14, 5, 6, 7, 8, 229]
num.sort(compare)
Console.log(num)

Now, if I want to sort the array in descending order, then I need to use compare function in a different way, Let’s see it

function compare(a, b) {
  return b - a;
}
let num = [551, 22, 3, 14, 5, 6, 7, 8, 229]
num.sort(compare)
Console.log(num)

reverse() function

• reverse function will reverse the element in the original array.
• This method modify the original array.
• This method returns the reversed array.

let num = [551, 22, 3, 14, 5, 6, 7, 8, 229]
num.reverse()
Console.log(num)

Splice and Slice method

Splice method

• This function will modify the original array.
• This function will delete some values from the array.
• This function returns deleted values.
• Values are deleted from the specified index.
• Specified number of values are deleted from the specified index.
• Specified Values are added at the specified index.

let num = [551, 22, 3, 14, 5, 6, 7, 8, 229]
let deletedValues = num.splice[2, 3, 1021, 1022, 1023, 1024, 1025] //This function will perform function from an index of 2, will remove 3 numbers from index of 2 and then add the numbers from index of 2

Console.log(num)
Console.log(deletedValues)

Slice() method

• This function takes elements from the specified index till the end of the array, and put them in a new Array, if we provide only 1 parameter.
• This function takes elements from and to the specified index of the array, and put them in a new Array, if we provide 2 parameters.
• This function does not modify the original array and will create a new array.
• This function returns the new Array which is created using this function.

let num = [551, 22, 3, 14, 5, 6, 7, 8, 229]
let newNum = num.slice(3)
Console.log(num)
Console.log(newNum)
let newNum1 = num.slice(3,5)
Console.log(newNum1)

Summary

We have covered Arrays and Arrays methods in this session.

1. Arrays in Javascript
2. Array Methods and Operstors in Javascript
3. Find the length of Array
4. Add the values in the array
5. Change the value of an element in the array
6. Find the type of Arrays
7. toString() Method
8. join() method
9. pop() method
10. push() method
11. shift() method
12. unshift() method
13. delete operator
14. Concat() method
15. sort() method
16. reverse() function
17. Splice method
18. Slice() method