JavaScript Arrays - all you need to know
Tags: javascript, programming, datastructures, beginners
Published: 2021-01-13 14:43:30

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

```js
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
```js
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: 
```js
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:
```js
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:
```js
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:

```js
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)
})
```

```js
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:
```js
var array = [21, 33, 11, 43, 97, 86, 10, 9];
```

1.length of array
```js
array.length
```
This returns the number of elements in the array(in our case _8_)

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

3.`filter` function
```js
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
```js
array.push(newElement)
```
This function adds a new element at the end of the array

5.the `pop` function
```js
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
```js
array.splice(<start>, <count>, <item1>, <item2>, [...])
```
Changes an array based on the parameters.
Parameters:
* start - specifies the index where the changes start
* count - `optional`specifies 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, ...] - `optional`elements 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
```js
array.slice(<positionA>, <positionB>)
```
Returns an array with elements from the original array in the closed interval [positionA, positionB]

8.the `concat` function
```js
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
```js
array.indexOf(21)//returns 0 in our case
```
Returns the index of the passes element from the array.

10.the `find` function
```js
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
```js
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.