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]

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");