Javascript Array Methods

This is my first blog on javascript. In this blog, we are going to discuss javascript array methods.

⚠️Disclaimer

This blog is for absolute beginners. If you are an experienced developer, you should refer to Mdn docs or other detailed info.

So, let's get started...

Instructions:

Open this link on the other tab of your browser. You will read this blog and after reading one topic, you will refer to the link I have given and practice some exercises.

A brief discussion of Array:

In many programming languages, an array is a data structure that can hold only similar types of elements i.e. only numbers or only characters. But, in javascript, we do not have this type of barrier. A Javascript array can hold multiple types of elements such as numbers, characters even Javascript objects.

Real-life use case: Many of us like to binge-watch tv shows on many ott platforms and on every platform, we can find small boxes that contain a thumbnail with the name of the particular show. The collection of those boxes is an array at the back end of the ott website.

Javascript array has many methods that come in handy when we write code and they reduce many lines of code. You do not have to write many loops and conditions🥳.

Javascript "concat" method:

The concat method is used to concatenate two arrays together. For those who do not know what concatenate means, it is to join two arrays.

let arr = ["apple", "banana", "cherry"]
let arr2 = ["mango", "plum"]
console.log(arr.concat(arr2))
//Output:[ 'apple', 'banana', 'cherry', 'mango', 'plum' ]

Now, your task is to read Mdn docs and try a few difficult methods.

Javascript "at" method:

Suppose, your name is Suresh and right now you are in your home and seeing this blog(no pun intended). So, if someone asks who is at home now? Then the answer would be that Suresh. Thus we can use the Javascript array method "at" for finding an element that is at a particular index in an array.

let diff = ["apple", 1, "🥑", "banana", true, "cherry"];
console.log(diff.at(2));
//Output: 🥑

Javascript "copywithin" method:

Let's break down the word copywithin and we get "copy" and "within". So, we understand that copywithin means to copy elements within its original array and as per the rules in Javascript, this method does not change the length of the original array.

let arr = ["apple", "banana", "cherry"]
console.log(arr.copyWithin(2,0))
//Output: [ 'apple', 'banana', 'apple' ]
let fruits = ["apple", "banana", "cherry", "Peach", "pineapple", "grapes", "kiwi", "mango"]
console.log(fruits.copyWithin(6,3,6))
//Output: [
  'apple',     'banana',
  'cherry',    'Peach',
  'pineapple', 'grapes',
  'Peach',     'pineapple'
]

In the first example, the first argument of the copywithin method is the index from where we start to copy. The second argument is the index we want to copy from.

In the second example, the first argument of the copywithin method is the index from where we start to copy. The second argument is the index we want to copy from. The third argument(optional) is the index up to which we are going to copy elements.

Javascript "entries" method:

This method is used to generate array iterator object with key-value pairs.

let fruits = ["apple", "banana", "cherry", "Peach", "pineapple", "grapes", "kiwi", "mango"]
let it = fruits.entries();
console.log(it.next().value)
console.log(it.next().value)
console.log(it.next().value)
console.log(it.next().value)
//Output: [ 0, 'apple' ] [ 1, 'banana' ] [ 2, 'cherry' ] [ 3, 'Peach' ]

Javascript "every" method:

This method is used to iterate over every element of an array to check specific condition(s) on every element and return a boolean output.

let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.every((a)=> (a % 2 == 0)));
//Output: false

Javascript "fill" method:

This method is used to add a certain element in an array from a start index(default 0) to an end index(default array.length).

let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.fill(2, 3, 5))
//Output: [
  1, 2, 3, 2,  2,
  6, 7, 8, 9, 10
]

Javascript "filter" method:

This method is used to filter out the unwanted array elements which do not satisfy the condition(s) we imply. It is just like the filter used in water purifiers(weird example but useful isn't it?).

let num = [1,2,3,4,5,6,7,8,9,10]
console.log(num.filter(num => num % 2 == 1))
//Output: [ 1, 3, 5, 7, 9 ]

Javascript "find" and "findlast" methods:

The find method is used to find the first element which satisfies the condition we imply and findlast is used to find the last element which satisfies the condition we imply.

let num = [1,2,3,4,6,7,8,9]
console.log(num.find(num => num > 4))
console.log(num.findLast(num => num > 4))
//Output: 6 9

Javascript "findindex" and "findlastindex" methods:

These methods are similar to the previous two methods and the only difference is that the previous ones return the elements and these return the index numbers.

let num = [1,2,3,4,5,6,7,8,9]
console.log(num.findIndex(num => num > 4))
console.log(num.findLastIndex(num => num > 5))
//Output:  4 8

Javascript "flat" method:

This method is used to create a new array by adding up all the elements of the sub-arrays that are present within the array.

let num = [1,2,3,[4,5],[6,7,[[8,9]]]]

console.log(num.flat());
//Output: [ 1, 2, 3, 4, 5, 6, 7, [ [ 8, 9 ] ] ]

Javascript "foreach" method:

This method is used to iterate over the array and perform specific operations on each and every array element.

let num = [1,2,3,4,5,6,7,8,9]
num.forEach(num => console.log(num*2))
//Output: 2 4 6 8 10 12 14 16 18

Javascript "from" method:

This method is used to get a new, shallow copied array from the given array.

let num = [1,2,3,4,5,6,7,8]
console.log(Array.from(num, x => x * 2))
//Output: [2,  4,  6,  8,10, 12, 14, 16]

Javascript "includes" method:

This method is used to check if there exists any similar element in the array. This method returns a boolean value.

let num = [1,2,3,4,5,6,7,8,9]
console.log(num.includes(10))
//Output: false

Javascript "indexof and lastindexof" method:

This method(indexof) is used to take an argument and return the first index if that element is present inside that array and the lastindexof is used to return the last index if that element is present inside that array. If that element is not present, then it returns -1.

let num = [1,2,3,4,5,6,7,8,9]
console.log(num.indexOf(7))
//Output: 6
let num = [1,2,3,4,5,6,1,8,9]
console.log(num.lastIndexOf(1))
//Output: 2

Javascript "isarray" method:

This method is used to check if a particular element is an array or not.

let num = [1,2,3,4,5,6,7,8,9]
console.log(Array.isArray(num))
//Output: true

Javascript "join" method:

This method is used to join all the elements of an array to a single element. It can inject any character between the elements.

let array = ["fire", "water", "sand", "grass"]
console.log(array.join("🔥"))
console.log(array.join())
//Output: fire🔥water🔥sand🔥grass 
// fire,water,sand,grass

Javascript "keys" method:

This method is used to return a new iterator object which contains the keys for each index in the array.

let array = ["fire", "water", "sand", "grass"]
let keys = array.keys()
for (const key of keys) {
  console.log(key)
}
//Output:0 1 2 3

Javascript "map" method:

This method is used to create a new array by applying a specific function on every array element.

let words = ["fire", "water", "sand", "grass"]
let pics = ["🔥", "💧", "⏳", "🍏"]

let map1 = words.map(word => word + pics[words.indexOf(word)])
console.log(map1)
//Output: [ 'fire🔥', 'water💧', 'sand⏳', 'grass🍏' ]

Javascript "push" and "pop" methods:

These two methods are used to add and remove element(s) from an array from the end index.

let num = [1, 2, 3, 4, 5, 6, 7, 8]
num.push(9,10,11)
console.log(num)
num.pop()
console.log(num)
//Output: [
// 1, 2, 3, 4,  5,
// 6, 7, 8, 9, 10,
// 11
//]
//[
//  1, 2, 3, 4,  5,
//  6, 7, 8, 9, 10
//]

Javascript "reduce" and "reduceRight" methods:

These two methods are used to return a single value by processing all the array elements in a single function. The function in reduce method moves from left to right and it is in reverse order in reduceRight.

let num = [1,2,3,4,5,6,7,8]
console.log(num.reduce((a, b) => a * b ))
console.log(num.reduceRight((a, b) => a + (b/2)))
//Output: 40320 22

Javascript "reverse" method:

This method is used to arrange the elements in reverse order.

let num = [1,2,3,4,5,6,7,8]
console.log(num.reverse())
//Output: [ 8, 7, 6, 5, 4, 3, 2, 1]

Javascript "shift" and "unshift" methods:

These two methods are used to clear and add element(s) in an array from the beginning of that array respectively.

let array = ["fire", "water", "sand", "grass"]
console.log(array.shift())
console.log(array)
let one = [1,2,3,4,5,6,7,8]
console.log(one.unshift(8,5))
console.log(one)
//Output: fire
//[ 'water', 'sand', 'grass' ]
//10
//[
//  8, 5, 1, 2, 3,
//  4, 5, 6, 7, 8
//]

Javascript "some" method:

It is the opposite of every method. It returns true if any element present in the array pass the conditions applied or else it returns false.

const num = [1, 3, 7]
console.log(num.some(n => n % 2 === 0))
//Output: false

Javascript "sort" method:

This method is used to sort elements of an array. It sorts the elements in lexicographical order. It can be directly used to sort string elements but for array elements, we have to apply some tricks(To know that, we have to follow the documentation).

const array = ["fire", "water", "sand", "grass"]
const num = [1,2,4,5,6,7,8,9,10,17,11,12,13,14,15,16,18,3]
console.log(array.sort())
console.log(num.sort((a, b) => a - b))
//Output: [ 'fire', 'grass', 'sand', 'water' ]
//[
//   1,  2,  3,  4,  5,  6,  7,
//   8,  9, 10, 11, 12, 13, 14,
//  15, 16, 17, 18
//]

Javascript "slice" method:

This method is used to separate a chunk of array elements from an array.

let array = ["fire", "water", "sand", "grass"]
console.log(array.slice(1,4))
//Output: [ 'water', 'sand', 'grass' ]

Javascript "splice" method:

This method is used to change an array by removing or replacing or adding elements.

const num = [1,2,3,4,5,6,7,8]
num.splice(1, 5 ,4, 5)
console.log(num)
//Output: [ 1, 4, 5, 7, 8 ]

In this above method, the first argument of the splice method is the start index, the second argument is the number of items to be deleted thereafter and the third and fourth argument is the elements that are going to be added.

So, this pretty much wraps up array methods.

Find all the code here.

See you in next blog👋.