Initial commit

Author: kpollich

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+
+# No Cheating!
+quiz-solutions.test.js

README.md

@@ -0,0 +1,83 @@
+# 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

filter.js

@@ -0,0 +1,11 @@
+// `Array#filter` executes a given callback on an array, returning a new array of all
+// elements for which the callback returns `true`
+
+const numbers = [1, 2, 3, 4, 5, 6];
+const evenNumbers = numbers.filter(number => number % 2 === 0);
+console.log(evenNumbers);
+
+// Let's write our own!
+function myFilter(array, callback) {}
+
+console.log(myFilter([2, 4, 5, 6], num => num % 2 === 0));

forEach.js

@@ -0,0 +1,38 @@
+// The Array#forEach method accepts a callback function that gets executed for each element of
+// the given array. The callback is passed the element and the current index as arguments.
+
+// The callback passed to `forEach` doesn't return anything, and the actual `forEach` call doesn't
+// return anything either. Check out the TypeScript hints for this block of and you'll see both the
+// `forEach` method and its callback argument are typed to return `void`.
+
+const numbers = [1, 2, 3, 4, 5];
+
+numbers.forEach(element => {
+  console.log(`Current element is ${element}`);
+});
+
+// Use `forEach` to mutate the original array if necessary
+const mutateMe = [{}, {}];
+
+mutateMe.forEach((element, i) => {
+  element.index = i;
+});
+
+console.log(mutateMe);
+
+// forEach is also useful for updating some outer scope variable that isn't
+// directly represented in the given array
+let myFavoriteColor = "blue";
+
+[{ color: "green", rank: 2 }, { color: "red", rank: 1 }].forEach(element => {
+  if (element.rank === 1) {
+    myFavoriteColor = element.color;
+  }
+});
+
+console.log(myFavoriteColor);
+
+// Let's implement our own forEach method!
+function myForEach(array, callback) {}
+
+myForEach(numbers, element => console.log(element * 2));

map.js

@@ -0,0 +1,39 @@
+// Array#map is similar to `.forEach` in that it executes a given callback for every element in
+// an array, but `.map` actually returns a value. The return value of `.map` is a new array of all
+// the return values returned by the callback.
+
+// Double each number in the array - get back an array of the doubled numbers
+const numbers = [1, 2, 3, 4, 5];
+const doubledNumbers = numbers.map(number => number * 2);
+
+// Or, without shorthand
+const doubledNumbers2 = numbers.map(number => {
+  return number * 2;
+});
+
+console.log(doubledNumbers);
+console.log(doubledNumbers2);
+
+// `.map` is great for transforming data into a new structure
+const data = [
+  { id: 1, is_married: "YES", FIRSTNAME: "John", last: "Doe" },
+  { id: 2, is_married: "NO", FIRSTNAME: "Jane", last: "Doe" }
+];
+
+const sanitizedData = data.map(record => {
+  return {
+    id: record.id,
+    isMarried: record.is_married === "YES",
+    firstName: record.FIRSTNAME,
+    lastName: record.last
+  };
+});
+
+console.log(sanitizedData);
+
+// Let's write our own `.map`!
+function myMap(array, callback) {}
+
+const numbersAgain = [4, 5, 6, 7];
+const squaredNumbers = myMap(numbersAgain, number => number * number);
+console.log(squaredNumbers);

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

others.js

@@ -0,0 +1,17 @@
+// Lightning round: here's a few array methods that don't deserve their own file
+
+// `.some` - return true as long as at least one element satisfies the condition returned by the callback
+const hasEvenNumber = [1, 2, 3, 4].some(num => num % 2 === 0);
+console.log(hasEvenNumber);
+
+// `.every` - return true as long as ALL elements satisfy the condition returned by the callback
+const allEven = [2, 4, 6, 8].every(num => num % 2 === 0);
+console.log(allEven);
+
+// `.find` - return the first value that satifsies the condition returned by the callback
+const firstEven = [1, 2, 3, 4].find(num => num % 2 === 0);
+console.log(firstEven);
+
+// `.includes` - return true if the value is present in the array
+const hasTwo = [1, 2, 3, 4].includes(2);
+console.log(hasTwo);

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "js-arrays",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.19.0",
+    "next": "^9.0.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "scripts": {
+    "start": "next dev",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@types/node": "^12.6.8",
+    "@types/react": "^16.8.23",
+    "jest": "^24.8.0",
+    "typescript": "^3.5.3"
+  }
+}

pages/index.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import axios from "axios";
+import { NextPage } from "next";
+
+import { User, GetUsers } from "./types";
+
+interface Props {
+  users: User[];
+}
+
+const IndexPage: NextPage<Props> = ({ users }) => {
+  const [query, setQuery] = useState<string>("");
+
+  // Filter the set of users based on the provided query
+  const displayedUsers =
+    query === ""
+      ? users
+      : users.filter(
+          user =>
+            user.name.first.match(new RegExp(query)) ||
+            user.name.last.match(new RegExp(query))
+        );
+
+  return (
+    <div className="wrapper">
+      <h1>List Users</h1>
+
+      <label htmlFor="query">Search</label>
+      <input
+        type="text"
+        name="query"
+        value={query}
+        onChange={e => {
+          setQuery(e.target.value);
+        }}
+      />
+
+      <ul>
+        {/* Loop over the set of users and return a JSX Node for each of them */}
+        {displayedUsers.map(user => (
+          <li key={user.id.value}>
+            <img
+              src={user.picture.thumbnail}
+              alt={`${user.name.first} ${user.name.last}`}
+            />
+            <h3>
+              {user.name.first} {user.name.last}
+            </h3>
+          </li>
+        ))}
+      </ul>
+
+      <style jsx>{`
+        ul {
+          list-style: none;
+          padding: 0;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr 1fr;
+          grid-gap: 10px;
+          width: 80%;
+          margin: 25px auto;
+        }
+
+        li {
+          border: 1px solid #dadada;
+          border-radius: 10px;
+        }
+
+        label {
+          display: block;
+        }
+
+        .wrapper {
+          text-align: center;
+        }
+      `}</style>
+
+      <style jsx global>
+        {`
+          body {
+            margin: 0;
+            padding: 0;
+            font-family: sans-serif;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+IndexPage.getInitialProps = async () => {
+  const userUrl = "https://randomuser.me/api?results=25&nat=US";
+  const response = await axios.get<GetUsers>(userUrl);
+
+  return { users: response.data.results };
+};
+
+export default IndexPage;