From Basics to Pro: Harnessing Arrays in JavaScript

Ever wondered how to wrangle data like a pro in JavaScript? Arrays are your go-to tool for organizing and manipulating collections of data, but they can feel overwhelming at first. In this post, we’ll dive into the world of JavaScript arrays, exploring their core concepts, essential methods, and practical tips to supercharge your coding.

What is Array?

An array is a special variable, which can hold more than one value that’s it.

An array in JavaScript is a special type of object used to store multiple values in a single variable. It organizes data in a list-like structure, where each value (called an element) is associated with an index, starting from 0. Arrays are versatile, allowing you to store various data types (numbers, strings, objects, etc.) and manipulate them using built-in methods.

Why do we use Array?

If you have a list of items (a list of fruit names, for example), storing the fruits in single variables could look like this:

let fruit1= "Apple"
let fruit2= "Banana"
let fruit3= "Orange"

However, what if you want to loop through the fruits and find a specific one? And what if you had not 3 fruits, but 300?

The solution is an array! An array can hold many values under a single name, and you can access the values by referring to an index number.

Creating Array

there are two ways to do it

Almost all the time, the second syntax is used. We can supply initial elements in the brackets.

const fruitArray1 = ["Apple🍎","Banana🍌","Orange🍊"] //this is the easiest way to create a JavaScript Array
const fruitArray2 =new Array("Apple🍎","Banana🍌","Orange🍊")

Accessing Elements of an Array

We access an array element by referring to the index number:

let fruitsArray = ["Apple","Banana" "Orange"];

let fruit1 = fruitsArray[0];
let fruit2 = fruitsArray[2];
let fruit3 = fruitsArray[3];

Changing Elements of an Array

we can change the value of array element.

let fruitsArray = ["Apple","Banana" "Orange"];

let fruit1 = "Mango";
console.log(fruit1);   //Mango

Length of the Array

The length property returns the length (size) of an array

let fruitsArray = ["Apple","Banana" "Orange"];
console.log(fruitsArray.length)   //3

Built-in methods for working with Arrays

1.push()

push() method is used to insert new element at the end of array.

let fruitsArray = ["Apple","Banana" "Orange"];
fruitsArray.push(5) //yes we can add different type of element in array
console.log(fruitsArray)  //[ 'Apple', 'Banana', 'Orange', 5 ]

2.unshift()

unshift() method is used to insert new element at the beginning of array

let fruitsArray = ["Apple","Banana" "Orange"];
fruitsArray.unshift("Mango") 
console.log(fruitsArray)  //[ 'Mango','Apple', 'Banana', 'Orange', 5 ]

3.pop()

pop() method remove last element from the end of the array and returns it.

let fruitsArray = ["Apple","Banana" "Orange"];
let fruit = fruitsArray.pop();
console.log(fruit) //Orange
console.log(fruitsArray)  //[ 'Apple', 'Banana' ]

4.shift()

shift() method remove first element from the end of the array and returns it.

let fruitsArray = ["Apple","Banana" "Orange"];
let fruit = fruitsArray.shift();
console.log(fruit) //Apple
console.log(fruitsArray)  //[ 'Banana','Orange' ]

5.concat()

The concat() method is used to merge two or more array. This method does not change the existing arrays, but instead returns a new array.

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = array1.concat(array2);
console.log(array3); //[1,2,3,4,5,6]

6.find()

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found); //12

The find() method return the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

7.sort()

The sort() method sorts an array alphabetically. this method is mutable meaning it sorts the elements of array inplace and returns the reference to the same array.

const months = ["March", "Jan", "Feb", "Dec"];
months.sort();
console.log(months);  //["Dec", "Feb", "Jan", "March"]

8.reverse()

The reverse() method reverses the elements in an array.

const months = ["March", "Jan", "Feb", "Dec"];
months.reverse();
console.log(months); //['Dec','Feb','Jan','March']

9.slice()

The slice() method returns selected elements in an array as a new array. It selects from a given start, up to a (not inclusive) given end. This method does not change the original array.

 let array = [23, 56, 87, 32, 75, 13];
 let newArray = array.slice(2, 4);
 console.log(array); //[23, 56, 87, 32, 75, 13]
 console.log(newArray); //[87,32]

10.splice()

The splice() method change the content of an array by removing or replacing existing elements and/or adding new elements

const months = ["Jan", "March", "April", "June"];
months.splice(1, 0, "Feb");
// Inserts at index 1
console.log(months); //["Jan", "Feb", "March", "April", "June"]

In this post, we’ve covered the basics of JavaScript arrays, exploring fundamental techniques for managing and manipulating data effectively. These core concepts provide a solid foundation for working with arrays, but there’s so much more to discover! JavaScript offers a wealth of additional array methods waiting to be explored, each unlocking new possibilities for cleaner, more powerful code. Ready to dive deeper? Experiment with these basics, explore advanced methods, and share your favorite array tricks in the comments below!