https://github.com/kpollich/array-methods

Lunch and Learn talk on Array Methods in JavaScript
https://github.com/kpollich/array-methods

Last synced: about 24 hours ago
JSON representation

Lunch and Learn talk on Array Methods in JavaScript

• Host: GitHub
• URL: https://github.com/kpollich/array-methods
• Owner: kpollich
• Created: 2019-07-24T23:08:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:17:34.000Z (almost 2 years ago)
• Last Synced: 2023-02-28T22:51:09.225Z (over 1 year ago)
• Language: JavaScript
• Size: 1.75 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Array Methods in JavaScript

Shift Lunch and Learn 7-26-19

## Overview

- Why do native array methods matter?

- Common array methods and what they do

- Determine which array method to use in which situation

- Practical (sort of) examples in React, etc

## Why do array methods matter?

- _Declarative_ vs _imperative_

  - "Do this thing" vs "execute these steps"

- Typically more succinct, more grok-able syntax

```js

function getResults(arr) {

  const results = [];

  for (let i = 0; i < arr.length; i++) {

    const element = arr[i];

    if (someValidationFunction(element)) {

      results.push(element);

    }

  }

  return results;

}

// vs

function getResults(arr) {

  return arr.filter(someValidationFunction);

}

```

- Chainable

- Encourage reusability and composability

- Standardized - handle edge cases, usable across environments

## Common Array Methods

- forEach

- map

- filter

- reduce

- some

- every

- find

- includes

Let's look at code!

## When do I use which Array method?

Use [this](https://sdras.github.io/array-explorer/)

tl;dr

| Method  | When to Use                                                                      |

| ------- | -------------------------------------------------------------------------------- |

| forEach | Run some code for every element, don't care about return value                   |

| map     | Run some code for every element, and track every return value separately         |

| filter  | Only want part of the array that satisies a condition                            |

| reduce  | Run some code for every element, and "boil it down" to a single value at the end |

| some    | Is there at least one element that satisfies this condition?                     |

| every   | Do all elements satify this condition?                                           |

| find    | Give me the first element that satisfies this condition                          |

| inclues | Does this array contain this exact value?                                        |

## Quick React Demo

Note: Extremely contrived and bad

## Questions?

## Additional Reading

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype

- https://sdras.github.io/array-explorer/

- https://syntax.fm/show/043/20-javascript-array-and-object-methods-to-make-you-a-better-developer

## There's a Quiz!

Clone this repo, then get started with these commands:

```sh

# Install dependencies

$ yarn

# Run the quiz - your goal is to make the tests pass! The tests will re-run as

# you update the code.

$ yarn test --watch

```

Open up `quiz.test.js` and update each test so that it passes. Good luck!