📌What are arrays and why is it important to know arrays well?

Firstly, javascript is an ocean, whose depth can never be measured, but arrays in javascript can be considered as a boat 🚣 which can probably help us to cross this ocean!

📌What are arrays?

Arrays are a sequence of items or elements which are stored together under a single variable name. In javascript, we have the liberty to store elements of various datatypes like number, string, boolean etc inside an array. Array can be identified with the help of square brackets [] where each element being separated by comma , The value of these elements can be accessed using index of an element, please note that index of an element in array starts from zero

//Example of array with similar datatype
let authors = ["Lee Child", "James Patterson", "J K Rowling", "Dan Brown" ];

//Example of array with multiple datatypes
let adhocArray = ["Harry Potter", 25, true, "Hermoine Granger"];

Below example will let you understand terminologies associated with array a little better:

📌Now, what are array methods and property and why are they required?

There are two important concepts that we are required to know of before we start further.

🪄Property

There is one important array property that is required to be known i.e 'length' Syntax is arrayname.length. It will return the count of all the elements present inside an array. This property is used mostly while iterating through an array. For an empty array, the length of an array is 0.

let authors = ["Lee Child", "James Patterson", "J K Rowling", "Dan Brown" ];
console.log(authors.length);
//4

//Empty Array declaration
let companies = [];
console.log(companies.length);
//0

🪄Methods

🔖 .push()

push() is used to insert one or more new element in an array, this array can be an empty array or it can be an array having existing values.

let cameras=["Nikon","Sony","Canon","Panasonic"]
console.log(cameras);
//[ 'Nikon', 'Sony', 'Canon', 'Panasonic' ]
cameras.push("Kodak");
console.log(cameras);
//[ 'Nikon', 'Sony', 'Canon', 'Panasonic', 'Kodak' ]

🔖 .pop()

pop() removes the last element of an array. PS - If the array is empty and we are trying to use pop(), then it will result in undefined. Hence it is always advised to check the length of an array before using pop()

let cameras = ['Nikon', 'Sony', 'Canon', 'Panasonic'];
console.log(cameras);
//[ 'Nikon', 'Sony', 'Canon', 'Panasonic' ]
console.log(cameras.pop()); 
//Panasonic
console.log(cameras);
//[ 'Nikon', 'Sony', 'Canon' ]

let companies = [];
console.log(companies.pop());
//undefined

🔖 .indexOf()

indexOf() returns first index of the provided element and returns -1 if the provided element is not found.

let cameras = ['Nikon', 'Sony', 'Canon', 'Panasonic'];
console.log(cameras.indexOf('Canon'));
//2
console.log(cameras.indexOf('Olympus'));
//-1

🔖 .slice()

slice() slice as in plain english means, slicing a piece of cake or a pizza. Please note whenever we provide a range as parameter the start value is always inclusive but the end value is always exclusive For Example:

let clockArray = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
let slicedArray = clockArray.slice(4, 6);
console.log(slicedArray);
//[4,5]
let slicedArrayWithSingleParam = clockArray.slice(3);
console.log(slicedArrayWithSingleParam);
//[ 3, 4,  5,  6, 7, 8, 9, 10, 11]

🔖 .splice()

splice() changes the elements provided by removing the existing elements of an array.

let names = ['Jon', 'Jack', 'Jill', 'Joe', 'Jay', 'Jim'];
names.splice(1, 3, 'Remo');
console.log(names);
//[ 'Jon', 'Remo', 'Jay', 'Jim' ]

🔖 .shift()

shift() removes the first element of an array.

let tenses = ['present', 'past', 'future'];
console.log(tenses.shift());
//present

🔖 .unshift()

unshift() adds element at the start of an array. This method returns the new length of an array.

let dataArray = [2, 4, 6, 8, 10, 12];
console.log(dataArray.unshift(14)); 
//7
console.log(dataArray);
//[14,2,4,6,8,10,12]

🔖 .concat()

concat() is used to concatenate two arrays together.

let tenses = ['present', 'past', 'future'];
let dataArray = [2, 4, 6, 8, 10, 12];
let concatArray = dataArray.concat(tenses);
console.log(concatArray);
//[ 2, 4, 6, 8, 10, 12, 'present', 'past', 'future' ]

🔖 .reverse()

reverse() this method reverses the current array elements. the first element becomes the last and vice a versa.

let dataArray = [2, 4, 6, 8, 10, 12];
console.log(dataArray.reverse());
//[ 12, 10, 8, 6, 4, 2 ]

🔖 .includes()

includes() helps in determining whether the array consists of provided value and returns a boolean value

let names = ['Jon', 'Jack', 'Jill', 'Joe', 'Jay', 'Jim'];
console.log(names.includes('Joe')); //true
console.log(names.includes('Lily')); //false

🔖 .map()

map() provides a new array with the functionality as provided in the parameter of array.

let simpleArray = [1, 2, 3, 4, 5];
let squaredArray = simpleArray.map((x) => x * x);
console.log(squaredArray);
//[ 1, 4, 9, 16, 25 ]

🔖 .filter()

filter() as the name itself suggests, it filters out the array on the basis of condition provided.

let simpleArray = [1, 2, 3, 4, 5];
let results = simpleArray.filter((x) => x < 3);
console.log(results);
//[1,2]

🔖 .every()

every() iterates through every element of an array and checks if the condition is satisfied for each and every element. It provides a boolean result.

let simpleArray = [1, 2, 3, 4, 5];
console.log(simpleArray.every((x) => x % 2 == 0)); 
//false
let anotherSimpleArray = [2, 4, 6, 8, 10];
console.log(anotherSimpleArray.every((x) => x % 2 == 0));
//true

On an ending note, there are other such array methods, but I have tried to cover the most used, must knowns and popular ones above.

Give a thumbs up 👍 and share if this blog has helped you in any way!