This guide is meant to give you a quick overview of the 20 most important JavaScript Array Methods. After defining each method you will also have a couple of examples to work with. All of this Array methods are extremely useful fur your future JavaScript skills and I would recommend to learn them properly.
Remember that you can not remember each Method forever, and this is why I dedicate this webpage strictly for all of the most important methods so each time you forget one of the you can revisit this site.
Welcome to the complete JavaScript Array Methods guid. In this series I will take you through all of JavaScript Array Methods, like:
- concat() method
- every() method
- fill() method
- filter() method
- find() method
- findIndex() method
- forEach() method
- from() method
- map() method
- includes() method
- indexOf() method
- isArray() method
- join() method
- reduce() method
- sort() method
- reverse() method
- push & pop() method
- unshift & shift() method
- splice() method
- some() method
Concat Method
Description
In this video you will learn about the concat array method.
The concat() method is used to join two or more arrays.
This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.
concat.js Code:
const person = ["First Name", "Last Name"];
const info = ["Email", "Age", "Address"];
const personalInfo = person.concat(info);
console.log(personalInfo);
const addressDetails = personalInfo.concat("City", "Street");
console.log(addressDetails);
Every() method
The every() method checks if all elements in an array pass a test (provided as a function).The every() method executes the function once for each element present in the array.
If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values). Overwise If no false occur, every() returns true
every.js Code:
const ages = [32, 33, 16, 40];
function checkAge(age) {
return age >= 10;
// return age <= 39;
// return age >= 18;
}
console.log(ages.every(checkAge));
Fill() method
The fill() method fills the specified elements in an array with a static value.
concat.js Code:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);
fruits.fill("Kiwi");
console.log(fruits);
array.fill(value, start, end)
fruits.fill("Apple", 1, 3);
console.log(fruits);Note: this method overwrites the original array. You can also specify the position of where to start and end the filling. If not specified, all elements will be filled.
Filter() method
The filter() method creates an array filled with all array elements that pass a test (provided as a function).
concat.js Code:
console.log("filter()");
const ages = [32, 33, 16, 40];
console.log(ages.filter(checkAdult));
function checkAdult(array) {
let filterBy = array.age > 18;
return filterBy;
}
const friends = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 12 },
{ name: "Laura", age: 16 },
];
console.log(friends.filter(checkAdult));Note: filter() does not execute the function for array elements without values and filter() does not change the original array.
Find() method
The find() method returns the value of the first element in an array that pass a test (provided as a function)
The find() method executes the function once for each element present in the array
find.js Code:
const friends = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 12 },
{ name: "Laura", age: 16 },
];
//todo: find conditions:
function findMinor(array) {
return array.age < 18;
}
function findAdult(array) {
return array.age >= 18;
}
console.log(friends.find(findMinor));
console.log(friends.find(findAdult));
};The find() does not execute the function for empty arrays and the find() does not change the original array.
FindIndex() method
The findIndex() method returns the index of the first element in an array that pass a test (provided as a function)
The findIndex() method executes the function once for each element present in the array:
findIndex.js Code:
const users = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 16 },
{ name: "Norbert", age: 35 },
{ name: "Laura", age: 14 },
];
// tester function
function testerFunction(array) {
return array.age >= 30;
}
function findUser() {
return users.findIndex(testerFunction);
}
console.log(findUser());
// todo: Short
const getUser = () => users.findIndex((array) => array.age < 20);
console.log(getUser());The findIndex() does not execute the function for empty arrays and the findIndex() does not change the original array.
forEach() method
The forEach() method calls a function once for each element in an array, in order.
Syntax: array.forEach(function(currentValue, index, arr), thisValue);
forEach.js Code:
const users = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 16 },
{ name: "Norbert", age: 35 },
{ name: "Laura", age: 14 },
];
// tester function
function testerFunction(array) {
return array.age >= 30;
}
function findUser() {
return users.findIndex(testerFunction);
}
console.log(findUser());
// todo: Short
const getUser = () => users.findIndex((array) => array.age < 20);
console.log(getUser());the function is not executed for array elements without values
from() method
The Array.from() method returns an Array object from any object with a length property or an iterable object.
Syntax: Array.from(object, mapFunction, thisValue);
from.js Code:
const users = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 16 },
{ name: "Norbert", age: 35 },
{ name: "Laura", age: 14 },
];
// console.log(users[0].name);
function findUser(position) {
let userName = users[position].name;
console.log(userName);
return Array.from(userName);
}
console.log(findUser(0));
const getUserName = (position) => Array.from(users[position].name);
console.log(getUserName(2));
const getUserNameLetter = (position, letter) =>
Array.from(users[position].name)[letter];
console.log(getUserNameLetter(2, 0));
console.log(getUserNameLetter(2, 3).toUpperCase());map() method
The map() method creates a new array with the results of calling a function for every array element. he map() method calls the provided function once for each element in an array, in order.
Syntax: array.map(function(currentValue, index, arr), thisValue)
code:
console.log("map()");
const users = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 16 },
{ name: "Norbert", age: 35 },
{ name: "Laura", age: 14 },
];
const userNames = users.map(function (user) {
return user.name;
});
console.log(userNames);
// Short
const userAges = users.map((user) => user.age);
console.log(userAges);includes() method
The includes() method determines whether an array contains a specified element. This method returns true if the array contains the element, and false if not.
Syntax: array.includes(element, start)
includes.js Code:
console.log("includes()");
const names = ["Arabella", "Carina", "Norbert", "Laura"];
function checkName(name) {
return names.includes(name);
}
console.log(checkName("Tony"));
const users = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 16 },
{ name: "Norbert", age: 35 },
{ name: "Laura", age: 14 },
];
const userNames = users.map((user) => user.name);
console.log(userNames);
function checkUserName(userName) {
if (userNames.includes(userName)) {
console.log(`The user name: ${userName} was found`);
} else {
console.log(`The user name: ${userName} can not be found`);
}
}
console.log(checkUserName("Laura"));indexOf() method
The indexOf() method searches the array for the specified item, and returns its position.
The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array.
Syntax: array.indexOf(item, start)
const names = ["Arabella", "Carina", "Norbert", "Laura", "Norbert"];
function checkName(name) {
return names.indexOf(name);
}
console.log(checkName("Arabella"));
console.log(checkName("Norbert"));
console.log(checkName("Tony"));
function reverseCheckName(name) {
return names.lastIndexOf(name);
}
console.log(reverseCheckName("Norbert"));
console.log(reverseCheckName("Laura"));isArray() method
The isArray() method determines whether an object is an array. This function returns true if the object is an array, and false if not
Syntax : Array.isArray(obj)
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const verifyArray = Array.isArray(fruits);
console.log(verifyArray);
const users = [
{ name: "Arabella", age: 20 },
{ name: "Carina", age: 16 },
{ name: "Norbert", age: 35 },
{ name: "Laura", age: 14 },
];
// get all user ages
const getUserAges = users.map((user) => user.age);
console.log(getUserAges);
// get all user names
const getUserNames = users.map((user) => user.name);
console.log(getUserNames);
const income = { Arabella: 200 + "$", Carina: 400 + "$", Norbert: 100 + "$" };
const checkIfArray = (testArray) => {
if (Array.isArray(testArray)) {
console.log(`The elements ${testArray} are in an Array`);
} else {
console.log(`The elements ${testArray} are NOT in an Array`);
}
};
checkIfArray(users);
checkIfArray(getUserAges);
checkIfArray(getUserNames);
checkIfArray(income);
join() method
!The join() method returns the array as a string. The elements will be separated by a specified separator. The default separator is comma (,)
Syntax : array.join(separator)
Note: this method will not change the original array
console.log("join()");
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let joinElements = fruits.join();
joinElements = fruits.join("");
joinElements = fruits.join(" ");
joinElements = fruits.join(" and ");
joinElements = fruits.join(" & ");
console.log(joinElements);
reduce() method
The reduce() method reduces the array to a single value. The reduce() method executes a provided function for each value of the array (from left-to-right). Also, the return value of the function is stored in an accumulator (result/total)
Syntax : array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
Note: this method will not change the original array
console.log("reduce()");
const users = [
{ name: "Arabella", age: 20, income: 400 },
{ name: "Carina", age: 16, income: 300 },
{ name: "Norbert", age: 35, income: 500 },
{ name: "Laura", age: 14, income: 800 },
];
const usersIncome = users.map((user) => user.income);
// todo: create the reducer callback function for the total amount of income
const getTotalIncome = (total, num) => {
return total + num;
};
console.log(usersIncome.reduce(getTotalIncome, 0));
// todo: now lets get the average age of the users
const usersAge = users.map((user) => user.age);
// console.log(usersAge);
// todo: create the reducer callback function
const getTotal = (total, num) => {
return total + num;
};
const getAverage = (array) => {
return array.reduce(getTotal, 0) / array.length;
};
console.log(getAverage(usersAge));
console.log(getAverage(usersIncome));
sort() method
The sort() method sorts the items of an array. The sort order can be either alphabetic or numeric, and either ascending (up) or descending (down).
Syntax : Array.sort(obj)
Note: this method will not change the original array
console.log("sort()");
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const sortFruits = fruits.sort();
console.log(sortFruits);
const users = [
{ name: "Carina", age: 16, income: 300 },
{ name: "Norbert", age: 35, income: 500 },
{ name: "Arabella", age: 20, income: 400 },
{ name: "Laura", age: 14, income: 800 },
];
const getUsersName = users.map((user) => user.name);
const getUsersAge = users.map((user) => user.age);
const getUsersIncome = users.map((user) => user.income);
const sortArray = (testArray) => console.log(testArray.sort());
sortArray(getUsersName);
sortArray(getUsersAge);
sortArray(getUsersIncome);
reverse() method- coming Jul 2021
push & pop() method- coming Jul 2021
unshift & shift() method- coming Jul 2021
splice() method- coming Jul 2021
some() method- coming Jul 2021
For more information about JavaScript get the Complete Modern JavaScript Course NOW and become a javascript developer
Courses:
Modern JavaScript and NodeJS from Beginner to Advanced
Popular course:
