Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • icon picker
          Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS
youhoc
/
/
Array Method

Array Method

Methods that returns new Array:
map()
filter()
Methods that mutates Array:
push()
Methods that perform actions:
forEach()

map()

The `map()` method is probably the most common when it comes to React. It is used for creating what are called "lists", which are essentially arrays of elements. These elements could be React components or HTML tags with content.
The `map()` method creates a new array with the results of calling a provided function on every element in the calling array.
So the function we passed into the `map()` method is called for each element in the `notes` array. The `note` parameter is the current element being processed. The function returns the `title` property of the `note` object, which is then added to the `noteTitles` array.

filter()

The `filter()` method creates a new array with all elements that pass the test implemented by the provided function. So it is similar to the `map()` method, but instead of transforming the elements, it filters them based on a condition.
In React, this method is often used for deleting or removing elements from the UI.

reduce()

The `reduce()` method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
This is useful for summing up numbers, concatenating strings, or any other operation that requires combining elements of an array.
The function we pass in takes in two parameters: the `total` accumulator and the current `number` being processed.
total (hoặc các tên tương tự): là số tổng hay kết hợp sẽ được cộng dồn
number (hoặc các tên tượng tự): là giá trị hiện tại của Array đang chạy
0 (hoặc bất cứ giá trị nào truyền vào): là giá trị khởi đầu của cộng dồn
The function returns the sum of the `total` and `number`, which is then passed to the next iteration. The `0` at the end is the initial value of the `total` accumulator.

forEach()

The `forEach()` method executes a provided function once for each array element.
It is similar to the `map()` method, but it does not return a new array.
It is useful when you want to perform an action on each element in the array.
notes.forEach((note) => console.log(note.title));

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.