Web Development

The Complete JavaScript Array Methods guide

This is a complete JavaScript Array Methods guide. In this series I will take you through all of JavaScript Array Methods.

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:

https://volere.life/web-development/web-dev-courses/

Modern JavaScript and NodeJS from Beginner to Advanced

Popular course:

https://www.udemy.com/course/30-html-css-javascript-projects-in-30-days-for-beginners/?couponCode=APR2021

30 HTML, CSS & JavaScript projects in 30 Days for Beginners

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: