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 -
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 oneitem
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
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.
Top comments (2)
You mention splice method incorrectly. Can you edit the article?
developer.mozilla.org/en-US/docs/W...
Oh just notice thank you. I will change it.