Important Javascript Array methods to know before learning React.js

By Ayobami Ajakaye

What are Arrays in Javascript?

JavaScript arrays are one of the most useful and versatile data structures in the language. They allow developers to store and manipulate collections of data in a straightforward and efficient manner. Before learning React, it is essential to understand the fundamental JavaScript array methods. Here are some important array methods to know:

map()?

The map() method is used to create a new array with the results of calling a function on every element in the original array. It returns a new array with the same length as the original array. Let’s look at an example:?

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((num) => num * 2);

console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

Array map methods are commonly used in React when rendering a list in React.

filter()?

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It returns a new array with only the elements that meet the specified condition.? Let’s look at an example:?

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // Output: [2, 4]

As the name suggests,you can use filter() method when filtering through a list of data.

reduce()?

The reduce() method applies a function to each element in an array and reduces the array to a single value. It takes two parameters, the first being the accumulator and the second being the current value. Let’s look at an example:?

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);

console.log(sum); // Output: 15

forEach()?

The forEach() method executes a provided function once for each array element. It is useful for iterating over an array and performing a specific action on each element. Let’s look at an example:?

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => console.log(num)); // Output: 1 2 3 4 5

find()

The find() method returns the first element in an array that satisfies a provided testing function. It is used to search for an element in an array and return it if it is found.

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find((num) => num === 3);

console.log(foundNumber); // Output: 3

indexOf()

The indexOf() method returns the first index at which a given element can be found in an array. It returns -1 if the element is not found.

const numbers = [1, 2, 3, 4, 5];

const index = numbers.indexOf(3);

console.log(index); // Output: 2

includes()

The includes() method determines whether an array includes a certain element. It returns a boolean value, true if the element is found in the array, and false otherwise.

const numbers = [1, 2, 3, 4, 5];

const hasNumber = numbers.includes(3);

console.log(hasNumber); // Output: true

The rest on the list are good for manipulating your arrays but ensure you don’t use them on a React state as they change the structure of the original array.?

push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

const numbers = [1, 2, 3, 4, 5];

numbers.push(6);

console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

pop()

The pop() method removes the last element from an array and returns that element. It is useful for removing elements from the end of an array.

const numbers = [1, 2, 3, 4, 5];

const poppedNumber = numbers.pop();

console.log(poppedNumber); // Output: 5

shift()

The shift() method removes the first element from an array and returns that element. It is useful for removing elements from the beginning of an array.

const numbers = [1, 2, 3, 4, 5];

const shiftedNumber = numbers.shift();

console.log(shiftedNumber); // Output: 1

Conclusion

Understanding these array methods is crucial for working with JavaScript and React. They provide powerful tools for manipulating and iterating over arrays, which are essential for building complex applications. By mastering these methods, developers can improve their efficiency and productivity when working with JavaScript and React..

References:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript