DEV Community

Cover image for All about arrays in JavaScript
Kumar Kalyan
Kumar Kalyan

Posted on

All about arrays in JavaScript

Introduction

Arrays are something that we can't ignore, one must have heard about this term before. And I am pretty sure that you must be thinking about list of data, or collection of same elements stored collectively in a contagious memory that can be accessed by an index, and you are right to some extent but there is something more about arrays that you must know and, in this article, I'm going to break down every single concept about arrays and will make it as a piece of cake for you. And all I want is your precious time to read this article

What is an array?

An array is basically a collection or a list of similar items stored in a contagious memory location using a single variable name, where each item can be accessed by an index number. like storing all the student names in a class according to their roll numbers. Or storing the number of items required for cooking a dish. In simple words we can consider an array as a list of items indexed by numbers. In JavaScript arrays are not primitive type instead they are of object type i.e. arrays are not immutable. Arrays can be single or multidimensional. Single dimensional are basically what we call a list and multi-dimensional arrays are basically what we call matrices who's each element can be accessed by their index number, just like an excel sheet where box can be accessed by row and column number.

Defining an array & accessing the its elements

In JavaScript we can define an array using let or var keyword and putting the element in within third brackets [ ]

//defining a single dimensional array in JavaScript 
let array = [1, 2, 3, 4, 5];
console.log(array)

//define a 2d array
var arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(arr);


Enter fullscreen mode Exit fullscreen mode

Array image

2d array

As I have mentioned earlier that every element in an array has an index number though which we can access it. In JavaScript we can access any element of an array using the syntax arrayname [indexnumber ]. One important note , an array index always starts from zero so if you want to access the 2nd element of an 1d array you have to use the 1 in place of index number

//define 1d array
let array = [1, 2, 3, 4, 5];
console.log(array);
//syntax arrayname[index]
console.log("4th element is" + array[3]);
//define a 2d array
var arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(arr);
//syntax arrayname[row][col]
console.log("2nd element in the second column " + arr[1][1]);

Enter fullscreen mode Exit fullscreen mode

accessing array elements

Array methods simplified

A method is basically a predefined block code or a function that performs a particular task. In JavaScript , we have a set of predefined methods that we can use in arrays

## length
This is not a method but a property which determines the length of an array

let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.length);

Enter fullscreen mode Exit fullscreen mode

length
see this is giving us the length or the number of elements that our array contains

toString()

this method converts the array elements to a string


let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.toString());

Enter fullscreen mode Exit fullscreen mode

tostring

join()

this method also works like the toString() but you can add an operator to make your string look a bit different

let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.join(" "));

Enter fullscreen mode Exit fullscreen mode

join

I am passing here space (" ") so our elements are separated by space

push(element)

If you want to dynamically add an element to an array you can use this method


let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.push(6));
console.log(array);
Enter fullscreen mode Exit fullscreen mode

push

pop()

This method is used to remove the last element from an array

let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.pop());
console.log(array);

Enter fullscreen mode Exit fullscreen mode

pop

See 5 is popped out from our array

shift()

this method is used to remove the first element of an array


let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.shift());
console.log(array);
Enter fullscreen mode Exit fullscreen mode

shift
See 4 is shifted from our array

unshift()

This method is used to add an element in the beginning

let array = [4, 2, 3, 1, 5];
console.log(array);
console.log(array.unshift(7));
console.log(array);
Enter fullscreen mode Exit fullscreen mode

unshift

one thing you can notice here is that unshift() adds 7 in the beginning of our array in the other hand it returns the length of the new array

concat()

This method joins two arrays and return's a new one

let array = [4, 2, 3, 1, 5];
let newarr = [3, 2, 1, 4, 5];
console.log(array);
console.log(newarr);
console.log(array.concat(newarr));
console.log(array);

Enter fullscreen mode Exit fullscreen mode

concat

See this returns a new array of length 10

splice()

This method adds new items to an array at a particular position and can also remove elements

let array = ['a', 'b', 'c'];
console.log(array);
console.log(array.splice(2, 1, 'a', 'b'));
console.log(array);
Enter fullscreen mode Exit fullscreen mode

look at the code the splice method contains a pw parameters splice(startnumber,itemstobedeleted, items to be added)

splice

here in our example it is removing 1 element i.e. c from the 2 index and adding a,b there

slice()

this method removes a part from an array and returns a new one without affecting the original one

let array = ['a', 'b', 'c','e','f','g'];
console.log(array);
console.log(array.slice(2, 4));
console.log(array);

Enter fullscreen mode Exit fullscreen mode

slice

Iteration in an array

Iteration means repeating, now suppose you want to access a few elements of an array in an ordered way or simply you want to iterate over an array, and there are several ways to do so but I am going to show you the most used one's

forEach()

It is used to iterate over the whole array from beginning to end

let array = [4, 2, 3, 1, 5];

array.forEach(function (element) {
  console.log(element);
});

Enter fullscreen mode Exit fullscreen mode

foreach

map()

It basically creates a new array and performs a particular task within it

let array = [4, 2, 3, 1, 5];

let result = array.map((item) => {
  return item * 2;
});
console.log(result);
console.log(array);
Enter fullscreen mode Exit fullscreen mode

map

See a new array is created and the old array didn't change

filter()

This also creates a new array but only returns the values that pass a test or a condition

let array = [4, 2, 3, 1, 5];

let result = array.filter((item) => {
  return item > 3;
});
console.log(result);
console.log(array);
Enter fullscreen mode Exit fullscreen mode

filter
see this also creates a new array having values greater than 3

Sorting an array

In JavaScript you can use the sort() method for sorting an array in alphabetical order for numeric arrays just pass a compare function within it as the sort function considers every array element as a String

let array = [4, 2, 3, 1, 5];
let strArray = ["d", "e", "a", "c", "b"];
console.log(array);
console.log(strArray);
console.log("arrays after sorting");
console.log(array.sort((a, b) => a - b));
console.log(strArray.sort());

Enter fullscreen mode Exit fullscreen mode

sort an array

Conclusion

So, guys this was all about arrays in JavaScript and the methods, feel free to comment if you have any queries, and do share this article with your friends and peers if you like it. Stay tuned for the next :)

Connect

Top comments (0)