DEV Community: MichaelVini

(Array Methods Part 3) What are Iteration Methods?

MichaelVini — Mon, 20 Feb 2023 21:17:02 +0000

Today, finally, I will explain the last type of array methods.

If you have had contact with JavaScript at some point, you have probably come across one (or maybe all) of the methods that I will show in this post.

Iteration methods are very important because we generally need to work with a group of information that is most of the time inside arrays.

This type of method directly interacts with each element of the array, facilitating the handling of the data that we want to obtain.

Iteration Methods

.forEach(callback(item, index, array)) - This method take a callback function as an argument. The callback function is called for each element in array.

The callback function take three arguments: item (current item), index (position of item in array) and original array.

For example,

const fruits = [
  {
    name: "Apple",
    price: 2.0,
  },
  {
    name: "Banana",
    price: 4.0,
  },
  {
    name: "Orange",
    price: 3.0,
  },
];

fruits.forEach((fruit, index, originalArray) => {
  console.log(`${fruit.name} costs ${fruit.price}`); // (Name of fruit) costs (price of fruit)
  console.log(`Its in position ${index} of the array`); // Its in position (0, 1 or 2) of the array
  console.log(originalArray); // [{ name: 'Apple', price: 2 }, { name: 'Banana', price: 4 }, { name: 'Orange', price: 3 }]
});

In this case, I used forEach just to display the name of the fruit along with its price, show the item's position in the array, and display the original array.

.map(callback(itemAtual, index, array)) - This method works the same as forEach, the only difference is that map method return new array with the changes made by callback function

const fruits = [
  {
    name: "Apple",
    price: 2.0,
  },
  {
    name: "Banana",
    price: 4.0,
  },
  {
    name: "Orange",
    price: 3.0,
  },
];

const fruitsWithIndex = fruits.map((fruit, index) => {
  return {
    name: fruit.name,
    price: fruit.price,
    index,
  };
});

console.log(fruitsWithIndex);

/*
  [
    { name: 'Apple', price: 2, index: 0 },
    { name: 'Banana', price: 4, index: 1 },
    { name: 'Orange', price: 3, index: 2 }
  ]
*/

In this case, I used the map method to generate a new array fruitsWithIndex, which adds an index to the object related to each fruit in the iterated array.

As usual I'll leave some others important Iteration Methods that I think you should know:

.reduce()
.reduceRight()
.some()
.every()

That's all for today!!

(Array Methods Part 2) What are Accessor Methods?

MichaelVini — Sat, 12 Nov 2022 22:30:47 +0000

Weeks ago I create a post to explain about types of array methods, I started talking that there are three types of array methods: Mutator Methods, Accessor Methods and Iteration Methods. In case you haven't seen the last post I recommend you see in What are Mutator Methods?.

Today I will explain about second type of array methods.

Accessor Methods

The difference between accessor methods and mutator methods is that accessor methods not change the original array, they return a new array with the changes, for example:

.concat() - This method is used to merge two or more arrays

The return of this method is a new array with all values of array that were merged.

const animals1 = ['cat', 'dog'];
const animals2 = ['fish', 'frog'];
const animals3 = animals1.concat(animals2);

console.log(animals3);
// expected output: Array ['cat', 'dog', 'fish', 'frog']

.filter() - Method is used to filter an array based on the test implemented by the provided function.

The return of this function is the elements that pass in the test implemented by the provided function.

const animals = ['cat', 'dog', 'turtle', 'fish', 'duck'];

const result = animals.filter(animal => animal.length > 3);

console.log(result);
// expected output: Array ['turtle', 'fish', 'duck']

.includes() - Includes method determines whether an array includes a value and returns true or false as appropriate.

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('turtle'));
// expected output: false

Some others important Accessor Methods that I think you should know:

.join()
.slice()
.indexOf()
.lastIndexOf()
.toString()

That's all for today!!

(Array Methods Part 1) What are Mutator Methods?

MichaelVini — Thu, 20 Oct 2022 20:36:04 +0000

When we started to learn javascript anytime we will meet the famous array methods. Array methods can be separated in three types:

Mutator Methods
Accessor Methods
Iteration Methods

I will create one post for each array type methods, but today I will explain about the first type.

Mutator Methods

Mutator methods besides return a value, they also change original array, such as:

.sort() - sort method organize array in alphabetical order.

The return of this method is the array itself with the changes.

const animals = ['dog', 'cat', 'turtle', 'bird'];
animals.sort();
console.log(animals) // output: ['bird', 'cat', 'dog', 'turtle']

Some others examples:

.push() - push method insert elements into the end of an array

This method change the original array and return the new length, so we can classify as mutator method.

const animals = ['dog', 'cat', 'turtle'];
const count = animals.push('bird');
console.log(count); // output: 4
console.log(animals); // output: ['dog', 'cat', 'turtle', 'bird']

There are a lot of types of mutator methods and if I explain about all methods I think this post will be very big, but that's not my intention, so I will list some important mutator methods that I think you should be study:

.unshift()
.shift()
.pop()
.reverse()
.splice()
.fill()

See you soon!!!