Introduction
Hi guys, today I'm going to explain the built-in functions in arrays in JavaScript.
This means that you do not need dozens of videos that explain the functions or old documents, and I will try to explain each function in short and well explained.
Arrays
Arrays are used to store multiple values in a single variable. This is compared to a variable that can store only one value.
Each item in an array has a number attached to it, called a numeric index, that allows you to access it. In JavaScript, arrays start at index zero and can be manipulated with various methods. [MDN Reference]
In this lesson, we will explain those methods
Array.push() method
Well, our first function is push, which is to add a new element to the end of an array.
Let's see an example:
// Array
let myArray = [1, 2, 3, 4];
// Add new element
myArray.push(5);
// Print:
console.log(myArray);
Output
[1, 2, 3, 4, 5]
As you can see, a new element has been added to the array.
The push function can add more than one element.
// Array
let myArray = [1, 2, 3, 4];
// Add more than one element
myArray.push(5, 6, 7, 8);
// Print:
console.log(myArray);
Output
[
1, 2, 3, 4,
5, 6, 7, 8
]
push function adds the elements at the end of the array, and there's another function adds the elements at the beginning of the array called unshift.
Array.unshift() method
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
Let's see an example
// Array
let myArray = [1, 2, 3, 4];
// Add elements
myArray.unshift(5, 6, 7, 8);
// Print:
console.log(myArray);
Output
[
5, 6, 7, 8,
1, 2, 3, 4
]
This is how we knew how to add an element at the end of the array and at the beginning of the array, but what about deletion?
Array.pop() method
The pop() function removes the last element of the array.
Example
// Array
let myArray = [1, 2, 3, 4];
console.log("Before deletion", myArray);
// Remove last element
myArray.pop();
console.log("After deletion", myArray);
Output
Before deletion [ 1, 2, 3, 4 ]
After deletion [ 1, 2, 3 ]
As you can see, this function does not take parameters, because it deletes the last element only
Well, now how do I delete the first element in the array?
Array.shift() method
The shift() function removes the first element from the array.
Let's see an example
// Array
let myArray = [1, 2, 3, 4];
console.log("Before deletion", myArray);
// Remove first element
myArray.shift();
// Print:
console.log("After deletion", myArray);
Output
Before deletion [ 1, 2, 3, 4 ]
After deletion [ 2, 3, 4 ]
Now we know the addition and deletion, but there are still a lot of functions in the array.
Array.includes() method
This function performs a check on the array and sees if it contains a specific element or not, It returns true or false.
This function takes a parameter which is the element you want to search for.
// Array
let myArray = [1, 2, 3, 4];
// Search for element
console.log(myArray.includes(1));
console.log(myArray.includes(100));
Output
true
false
As you can see:
- because the first element exists in the array, it returns
true. - Because the second element does not exist in the array, it returns
false.
Array.reverse() method
The reverse() function reverses the elements in the array
Example
// Array
let myArray = [1, 2, 3, 4];
// Reverse elements
myArray.reverse();
// Result:
console.log(myArray);
Output
[ 4, 3, 2, 1 ]
Array.sort() method
The sort() function sort the elements in the array.
Let's see an example
// Array
let myArray = [5, 4, 3, 2, 1];
// Sort elements
myArray.sort();
// Result:
console.log(myArray);
Output
[ 1, 2, 3, 4, 5 ]
Note that if there are two-digit numbers, the order will be incorrect.
// Array
let myArray = [5, 4, 3, 20, 10];
// Sort elements
myArray.sort();
// Result:
console.log(myArray);
Output
[ 10, 20, 3, 4, 5 ]
Is ten and twenty greater than the two? Here you are facing a problem, how are you going to solve that problem?
Solving this problem is easy, let's see how to solve it:
// Array
let myArray = [5, 4, 3, 20, 10];
// Fix Problem:
myArray.sort((a, b) => a - b);
// Result:
console.log(myArray);
Output
[ 3, 4, 5, 10, 20 ]
Array.isArray() static method
The Array.isArray() static method determines whether the passed value is an Array. MDN Reference
the isArray static method returns true if the parameter is an array, otherwise returns false.
Let's see an example:
// Array
let myArray = [5, 4, 3, 20, 10];
let myObject = {};
// isArray
console.log(Array.isArray(myArray));
console.log(Array.isArray(myObject));
Output
true
false
Array.join() method
The join function converts an array into a string.
Let's see an example:
// Array
let myArray = [5, 4, 3, 20, 10];
// Convert to string
let myString = myArray.join("");
// Result:
console.log(myString);
Output
5432010
This function takes a parameter, which is the separator between the elements.
// Array
let myArray = [5, 4, 3, 20, 10];
// Convert to string with sperator
let myString = myArray.join("|||");
// Result:
console.log(myString);
Output
5|||4|||3|||20|||10
Array.at() method
The at function takes the index as a parameter, and returns the value of the index.
Let's see an example
// Array
let myArray = [1, 2, 3, 4, 5];
// `at` method
console.log(myArray.at(0))
console.log(myArray.at(1))
// Last index
console.log(myArray.at(-1))
// `undefined`
console.log(myArray.at(100))
Output
1
2
5
undefined
Array.splice() method
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
// Array
let myArray = [1, 2, 3, 4, 5];
// start from `0` index
// Remove 2 elements
myArray.splice(0, 2)
// Print the array
console.log(myArray);
Output
[ 3, 4, 5 ]
Another example
// Array
let myArray = [10, 40, 50, 60, 70];
// start from `0` index
// Don't delete anything
// Add `20..30` elements
myArray.splice(1, 0, 20, 30)
// Print the array
console.log(myArray);
Output
[
10, 20, 30, 40,
50, 60, 70
]
Array.slice() method
he slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end.
Example
// Array
let myArray = [10, 40, 50, 60, 70];
// Slice
let slice = myArray.slice(0, 2);
// Print slice
console.log(slice);
// The original array will not be modified.
console.log(myArray);
Output
[ 10, 40 ]
[10, 40, 50, 60, 70]
Array.some() method
some function returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false.
For example:
// Array
let myArray = [10, 40, 50, 60, 70];
// Test
console.log(myArray.some((ele) => ele == 10));
console.log(myArray.some((ele) => ele == 20));
Output
true
false
Array.every() method
This function also returns true or false, but all elements must be equal to the element that you are searching for.
Example
// Array
let myArray = [10, 10, 10, 10, 10];
// Test
console.log(myArray.every((ele) => ele == 10));
console.log(myArray.every((ele) => ele == 20));
Output
true
false
Array.map() method
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. MDN
Let's see an example:
// Array
let myArray = [1, 2, 3, 4, 5];
// Create new array
let newArr = myArray.map(ele => {
return ele * 2;
});
// Result:
console.log(newArr);
Output
[ 2, 4, 6, 8, 10 ]
Array.filter() method
filter method filtered down to just the elements from the given array that pass the test implemented by the provided function.
Example
In this example, we only want to return elements greater than five, and we remove the remaining elements
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];
// Filter an array
let newArr = myArray.filter(ele => {
if (ele > 5) {
return ele;
}
});
// Result:
console.log(newArr);
Array.reduce() method
Reduce the array to a single value. The value returned by the function is stored in an accumulator (result/total).
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];
// Reduce
let reduce = myArray.reduce((total, item) => {
return total + item
}, 0);
// Result:
console.log(reduce);
Output
36
Array.reduceRight() method
The same use as the previous function, but starting from right to left.
Example
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];
// reudceRight
let reduce = myArray.reduceRight((prev, curr) => {
return prev + curr;
}, 0)
// Result:
console.log(reduce);
Output
36
Array.fill method
Fill the elements in an array with a specific value.
Example
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];
// Fill
myArray.fill(1);
// Result:
console.log(myArray);
Output
[
1, 1, 1, 1,
1, 1, 1, 1
]
Array.indexOf method
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
Example
// Array
let myArray = [1, 2, 3, 4, 5, 6, 7, 8];
// Tests
console.log(myArray.indexOf(5));
console.log(myArray.indexOf(8));
console.log(myArray.indexOf(11));
Output
4
7
-1
Note that the index was returned to the value that we entered in the first and second examples, and it returned -1 in the third example because it did not find that value.
Conclusion
In that article, we talked about many built-in functions in the array in JavaScript, and if you liked that lesson, I will do a lesson for the built-in functions in the strings.
And you should know that there are more functions than these, but I explained the most popular and most used.
Thank you for reading
Thank you for reading my blog. 🚀 You can find more on my blog and connect on Twitter