Mihai Stanciu

Posted on Jan 13, 2021

JavaScript Arrays - all you need to know

#datastructures #beginners #programming #javascript

Arrays are, basically, lists of elements. They are a very important part of programming. In this article, I will introduce this data structure's usage and aspects in the JavaScript language.

How to declare an array

In JavaScript there are multiple ways of declaring an array.

1.using the bracket([]) notation
It can be declared as an empty array

const array = [];

// or we can also declare the values inside the array:
const array = [10, 15, 44, 39, 75, 99, 87];

2.using the Array keyword

const array = new Array();

// or
const array = new Array(10, 15, 44, 39, 75, 99, 87);

Fun fact: In JavaScript we can have arrays of objects or even arrays that have different types of elements. For example, this is valid:

const array = [12, "string", [1, "another string"]];

How to access elements in the array

As discussed above, an array is a list. So how would we access elements from this list?
We can use the brackets([]) notation like this:

const firstElement = array[0];

const secondElement = array[1];

Remember: In most programming languages, arrays start at 0 not at 1. So the first element is array[0] and the second is array[1].

Iterating through the array

In order to have access to all elements of the array we need to iterate through the it. Of course, we could just use the bracket notation([]), but in cases where we don't know how many elements in the array or the array has too many elements we need to iterate through it with a loop(while/for).

Example:

for (var i = 0; i < array.length; i++) {
  //now you have access through array[i]
  console.log(array[i])
}

We can also iterate through an array uisng the forEach() or map() functions.
Examples:

array.forEach((element, <index>) => {
  //the index parameter is optional and it returns the current index to be accessed
  console.log('Element at index ' + index + ' is ' + element)
})

array.map((element, <index>) => {
  //the index parameter is optional and it returns the current index to be accessed
  console.log('Element at index ' + index + ' is ' + element)
})

Common Array Functions

In JavaScript, any array has some available methods. These are basics of the JavaScript language and any developer needs to know them.

We will be working on this array for now:

var array = [21, 33, 11, 43, 97, 86, 10, 9];

1.length of array

array.length

This returns the number of elements in the array(in our case 8)

2.sorting the array

array.sort()

Sorts the array(so the array will become [9, 10, 11, 21, 33, 43, 86, 97]).

3.filter function

array.filter(element => element > 30)

Creates a new array that only has elements that check the condition(in this case [33, 43, 97, 86])

4.the push function

array.push(newElement)

This function adds a new element at the end of the array

5.the pop function

array.pop()

Removes the last element of the array and returns it; if this is assigned to a variable we have access to the removed value

6.the splice function

array.splice(<start>, <count>, <item1>, <item2>, [...])

Changes an array based on the parameters.
Parameters:

start - specifies the index where the changes start
count - optionalspecifies the amount of elements to be removed - if it is 0 or negative no elements will be removed(in this case at least one item is necessary)
[item1, item2, ...] - optionalelements to be added to the array starting at the given index(if it is not provided, the function will only remove elements)

7.the slice function

array.slice(<positionA>, <positionB>)

Returns an array with elements from the original array in the closed interval [positionA, positionB]

8.the concat function

array.concat([22, 34])

Adds the parameter to the array(in this case it will become [21, 33, 11, 43, 97, 86, 10, 9, 22, 34])

9.the indexOf function

array.indexOf(21)//returns 0 in our case

Returns the index of the passes element from the array.

10.the find function

var element = array.find(findFunction);

function findFunction(element, <index>) {
  return element > 39;
}

Returns the first element that fit the condition(in our case, returns 43).

11.the findIndex function

var element = array.findIndex(findFunction);

function findFunction(element, <index>) {
  return element === 43;
}

Does the same thing as the find function, but returns the index of the element instead of the value.

Conclusions

Presented above, we have functions and properties of the Array object in JavaScript. Of course, these are helpers and can be implemented as well, but is is easier to use them(no need to reinvent the wheel). You don't need to remember them exactly, you can just remember that something like this exists and google them. I hope this was helpful and informative.

Thank you for your attention.