DEV Community

miku86
miku86

Posted on

Diary - 2018.10.19

React: Summary of useful Array Methods

I see a lot of React beginners having problems with functional programming methods when working on the state of an array.

In the end, we need three operations, like the C, U, D in CRUD:

  • Creating new data / adding data to the array
  • Deleting / removing data from the array
  • Updating data in the array

From a functional standpoint,

  • Creating is using existing data and concating it with other data: concat
  • Deleting is using existing data and filtering out the (un)needed data: filter
  • Updating is using existing data and mapping it onto something new: map
const origNumbers = [1, 2, 3];

// creating new data => add the number 4
const addedNewNumber = origNumbers.concat(4); // [1,2,3,4]

// deleting data => remove even numbers
const removedSomeNumbers = origNumbers.filter((number) => number % 2); // [1,3]

// updating data => update number by adding 1 to it
const numbersPlusOne = origNumbers.map((number) => number + 1); // [2,3,4]
Enter fullscreen mode Exit fullscreen mode

Dev Tools

We can use $ instead of document.querySelector
and $$ instead of document.querySelectorAll.

That's not related to the jQuery $.

Example:

// old
document.querySelectorAll(".myClass");

// new
$$(".myClass");
Enter fullscreen mode Exit fullscreen mode

Top comments (0)