DEV Community

loading...

JavaScript Arrays - all you need to know

mstanciu552 profile image Mihai Stanciu ・3 min read

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];
Enter fullscreen mode Exit fullscreen mode

2.using the Array keyword

const array = new Array();

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

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"]];
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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])
}
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode
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)
})
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

1.length of array

array.length
Enter fullscreen mode Exit fullscreen mode

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

2.sorting the array

array.sort()
Enter fullscreen mode Exit fullscreen mode

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

3.filter function

array.filter(element => element > 30)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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

5.the pop function

array.pop()
Enter fullscreen mode Exit fullscreen mode

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>, [...])
Enter fullscreen mode Exit fullscreen mode

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>)
Enter fullscreen mode Exit fullscreen mode

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

8.the concat function

array.concat([22, 34])
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide
Collapse
_bkeren profile image
''

You mention splice method incorrectly. Can you edit the article?

developer.mozilla.org/en-US/docs/W...

Collapse
mstanciu552 profile image
Mihai Stanciu Author

Oh just notice thank you. I will change it.