Arrays in JS

Arrays in JS

An array is a collection of data. It is widely used in all programming languages Including JavaScript. It is often used when we want to store list of elements and access them by a single variable. A pair of square brackets [] represents an array in JavaScript. All the elements in the array are comma(,) separated.

const arr = ["jan", "feb", "mar", "apr"];

There are two types of data types in JavaScript. 1-Primitive data type & 2-Non-primitive (reference) data type.

Arrays in JS are a special type of objects. so array's are Non-primitive (reference) data type. JavaScript arrays are resizable and can contain a mix of different data types.
eg an array can contain string, boolean, even objects or other arrays.

const arr = [  "jan",  "feb",  3 ,  { id: 45, city: "NYK" },  [200, 56, "not available"],];

**Creating an Array **

1 Using array literal notation

const months = ['jan', 'feb'];

we can declare arrays with let keyword ,It's a common practice to declare arrays with the** const** keyword.

2 using the Array() constructor,

const months = new Array('jan', 'feb');

For simplicity, readability use the array literal method.

**Accessing Array Elements **

The position of an element in the array is known as its index. In JavaScript, the array index starts with 0 and ends with array length-1.

const arr = ["jan", "feb", "mar", "apr"];
console.log(arr[0]); //output jan
console.log(arr[2]);//output mar
// array length 4
// array start index 0, end index 3

Common Array operations in JavaScript.

  • Find the index of an item in an array -- indexOf() method
const month = ["jan", "feb", "mar", "apr"];
console.log(month.indexOf("feb"));

// output 1
  • Check if an array contains a certain item -- includes()-- (or)-- indexOf() method

const month = ["jan", "feb", "mar", "apr"];

using includes()
console.log(month.includes("jan")); //true
console.log(month.includes("nov")); //false

using indexOf()
console.log(month.indexOf("jan")); // output 0
console.log(month.indexOf("nov")); // output -1
  • Append an item to an array push() method
const month = ["jan", "feb", "mar", "apr"];

const newLength = month.push('nov');
console.log(newLength); //output  5
console.log(month); //[ 'jan', 'feb', 'mar', 'apr', 'nov' ];
  • Remove the last item from an array pop() method

const month = ["jan", "feb", "mar", "apr"];
const removedItem = month.pop();

console.log(month); //output [ 'jan', 'feb', 'mar' ]
console.log(removedItem); //apr
  • Remove multiple items from the end of an array splice() method.
const month = ["jan", "feb", "mar", "apr"];

const start = -2;
const removedItems = month.splice(start);
// the splice() method to remove the last 2 items from the fruits array.
console.log(month); //[ 'jan', 'feb' ]

console.log(removedItems); //[ 'mar', 'apr' ]
  • Remove the first item from an array shift() method.
const month = ["jan", "feb", "mar", "apr"];

const removedItem = month.shift();
console.log(month);
// [ 'feb', 'mar', 'apr' ]
console.log(removedItem);
// jan
  • Add a new first item to an array unshift() method.
const month = ["jan", "feb", "mar", "apr"];

const newLength = month.unshift("dec");
console.log(month);//[ 'dec', 'jan', 'feb', 'mar', 'apr' ]

console.log(newLength);//5
  • Iterate over an array using for...of loop to iterate over the month array.
const months = ["jan", "feb", "mar", "apr"];

for (const month of months) {
  console.log(month);
}
// output jan feb mar apr
  • Call a function on each element in an array **forEach() **method.
const months = ["jan", "feb", "mar", "apr"];

months.forEach((item, index, array) => {
  console.log(item, index, array);
});

output
//jan 0 [ 'jan', 'feb', 'mar', 'apr' ]
//feb 1 [ 'jan', 'feb', 'mar', 'apr' ]
//mar 2 [ 'jan', 'feb', 'mar', 'apr' ]
//apr 3 [ 'jan', 'feb', 'mar', 'apr' ]
  • Merge multiple arrays together** concat()** method
const months = ["jan", "feb", "mar", "apr"];

const newMonths = ["may", "june"];
const combinedMonths = months.concat(newMonths);
console.log(combinedMonths); //output [ 'jan', 'feb', 'mar', 'apr', 'may', 'june' ]

console.log(months); //output [ 'jan', 'feb', 'mar', 'apr' ]

console.log(newMonths); //output [ 'may', 'june' ]

//months and newMonths remain unchanged.
  • Copy an array
const months = ["jan", "feb", "mar", "apr"];

// Create a copy using spread syntax.
const monthsCopy1 = [...months];
console.log(monthsCopy1);
// outPut [ 'jan', 'feb', 'mar', 'apr' ]

// Create a copy using the from() method.
const monthsCopy2 = Array.from(months);
console.log(monthsCopy2);
// outPut [ 'jan', 'feb', 'mar', 'apr' ]

// Create a copy using the slice() method.
const monthsCopy3 = months.slice();
console.log(monthsCopy3);
// outPut [ 'jan', 'feb', 'mar', 'apr' ]

Further reading:MDN Web Docs