Understanding Arrays in JavaScript

Arrays are fundamental data structures in JavaScript that allow you to store and manipulate collections of data. In this article, we'll explore various ways to declare arrays, use common array methods, and understand how to manipulate arrays effectively.

Array is a linear data structure where all elements are arranged sequentially. It is a collection of elements of the same/different type at contiguous memory location.

Declaring Arrays

You can declare arrays in JavaScript in a couple of different ways. Here are some examples:

// Basic array declaration
const myArr = [0, 1, 2, 3, 4, 5];

// An array can hold different types of values
const myArr = [0, 1, 2, 3, 4, 5, true, "harsh"];

// Array of strings
const myHeroes = ["Hulk", "Antman"];

// Using the Array constructor
const myArr2 = new Array(1, 2, 3, 4);

• Elements can be of same data type inside an array.

• Elements can also be of different data types inside an array.

• Javascript arrays are resizeable and can contain a mixture of different data types.

• Indexing in Javascript from 0.

Javascript array copy operations create shallow copies.

Shallow copy of an object is a copy whose properties share the same references as those of the source from which the copy was made. i.e changes made in the copy will be reflected in the orignal array.

Similarly, we also have deep copies in javascript

Deep copy of an object is a copy whose properties does not share the same references, i.e changes in copy are not reflected in orignal array.

How to access elements in an array using their index:

const myArr = [0, 1, 2, 3, 4, 5, true, "harsh"];
console.log(myArr[7]); //outputs: harsh

//type of array 
console.log(typeof(myArr)); //outputs: object

Array Methods

JavaScript provides a variety of methods to manipulate arrays. Let's look at some of the most commonly used ones:

Adding and removing elements

• push(): Adds an element to the end of the array.

• pop(): Removes the last element from the array.

• unshift(): Adds an element to the beginning of the array.

• shift(): Removes the first element from the array.

myArr.push(6); // Adds 6 to the end of myArr
// outputs: [0, 1, 2, 3, 4, 5, true, "harsh", 6];

myArr.push(7); // Adds 7 to the end of myArr
// outputs: [0, 1, 2, 3, 4, 5, true, "harsh", 6, 7];

myArr.pop(); // Removes the last element (7) from myArr
// outputs: [0, 1, 2, 3, 4, 5, true, "harsh", 6];

myArr.unshift(9); // Adds 9 to the beginning of myArr
// outputs: [9, 0, 1, 2, 3, 4, 5, true, "harsh", 6];

myArr.shift(); // Removes the first element (9) from myArr
// outputs: [0, 1, 2, 3, 4, 5, true, "harsh", 6];

Checking for Elements

• includes(): Checks if an array contains a certain element.

• indexOf(): Returns the first index at which a given element can be found, or -1 if it is not present.

const myArr = [0, 1, 2, 3, 4, 5, true, "harsh"];
console.log(myArr.includes(9)); // Outputs: false
console.log(myArr.indexOf(3)); // Outputs: 3
console.log(myArr.indexOf(9)); // Outputs: -1, as there is no 9 present in the arrat

Join Method

• join(): Joins all elements of an array into a string.

const newArr = myArr.join();
console.log(typeof newArr); // Outputs: "string"
console.log(newArr); // Outputs: "0,1,2,3,4,5,true,harsh"

Slicing and Splicing Arrays

Slice()

The slice() method returns a shallow copy of a portion of an array into a new array object. It does not modify the original array.

If you make changes to primitive data types (like numbers or strings) in the shallow copy, those changes will not affect the original array. However, if the array contains objects or other arrays, only the references are copied. This means that changes to the objects or arrays within the shallow copy will be reflected in the original array.

console.log(myArr);
// outputs: [0, 1, 2, 3, 4, 5, true, "harsh"];

const myN1 = myArr.slice(1, 3);

console.log(myN1);
// outputs: [1, 2]

console.log(myArr);
//outputs: [0, 1, 2, 3, 4, 5, true, "harsh"], here orignal array remains unchanged

Splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

console.log(myArr);
//outputs: [0, 1, 2, 3, 4, 5, true, "harsh"]

const myN2 = myArr.splice(1, 3);

console.log(myN2);
 // Outputs: [1, 2, 3]

console.log(myArr);
 // Outputs: [0, 4, 5, true, "harsh"]

In summary, arrays in JavaScript are powerful and versatile. They come with numerous methods to help you manage and manipulate your data efficiently. Understanding how to use these methods effectively will make your code more robust and easier to read.