Array

Array.pop - not pure. Do not recommend to use. Array.splice - not pure. Do not recommend to use.

const schools = [
    "Yorktown",
    "Washington & Lee",
    "Wakefield"
]


Join

console.log( schools.join(", ") )
// "Yorktown, Washington & Lee, Wakefield"

Filter


sample 1

const wSchools = schools.filter(school => school[0] === "W")
console.log( wSchools )
// ["Washington & Lee", "Wakefield"]


sample 2

const cutSchool = (cut, list) =>
        list.filter(school => school !== cut)
        
        
console.log(cutSchool("Washington & Lee", schools).join(" * "))
// "Yorktown * Wakefield"


console.log(schools.join("\n"))
// Yorktown
// Washington & Lee
// Wakefield


Map


sample 1

const highSchools = schools.map(school => `${school} High School`)

console.log(highSchools.join("\n"))
// Yorktown High School
// Washington & Lee High School
// Wakefield High School

console.log(schools.join("\n"))
// Yorktown
// Washington & Lee
// Wakefield


sample 2

const highSchools = schools.map(school => ({ name: school }))
console.log( highSchools )
// [
// { name: "Yorktown" },
// { name: "Washington & Lee" },
// { name: "Wakefield" }
// ]


sample 3

let schools = [
    { name: "Yorktown"},
    { name: "Stratford" },
    { name: "Washington & Lee"},
    { name: "Wakefield"}
]
const editName = (oldName, name, arr) =>
    arr.map(item => {
        if (item.name === oldName) {
            return {
                ...item,
                name
            }
        } else {
            return item
        }
    })
let updatedSchools = editName("Stratford", "HB Woodlawn", schools)
console.log( updatedSchools[1] )
console.log( schools[1] )

or


const editName = (oldName, name, arr) =>
    arr.map(item => (item.name === oldName) ?
        ({...item,name}) :
        item
    )


sample 4

const schools = {
  "Yorktown": 10,
  "Washington & Lee": 2,
  "Wakefield": 5
}
const schoolArray = Object.keys(schools).map(key =>
    ({
        name: key,
        wins: schools[key]
    })
)
console.log(schoolArray)


reduce


sample 1

const ages = [21,18,42,40,64,63,34]
const maxAge = ages.reduce((max, age) => {
  console.log(`${age} > ${max} = ${age > max}`)
  if (age > max) {
      return age
  } else {
      return max
  }
}, 0)
console.log('maxAge', maxAge)


sample 2

const ages = [21,18,42,40,64,63,34];
// less syntax
const max = ages.reduce(
    (max, value) => (value > max) ? value : max,
    0
)
console.log('max', max)


sample 3

const colors = [
    {
        id: '-xekare',
        title: "rad red",
        rating: 3
    },
    {
        id: '-jbwsof',
        title: "big blue",
        rating: 2
    },
    {
        id: '-prigbj',
        title: "grizzly grey",
        rating: 5
    },
    {
        id: '-ryhbhsl',
        title: "banana",
        rating: 1
    }
]
const hashColors = colors.reduce(
    (hash, {id, title, rating}) => {
        hash[id] = {title, rating}
        return hash
    },
    {}
)
console.log(hashColors)


sample 4

const colors = ["red", "red", "green", "blue", "green"];
const distinctColors = colors.reduce(
    (distinct, color) =>
        (distinct.indexOf(color) !== -1) ?
            distinct :
            [...distinct, color],
    []
)
console.log(distinctColors)


Links:

https://github.com/MoonHighway/learning-react/tree/master/chapter-03