JavaScript ES6 Condensed: Part 2/3 - Arrays, objects, maps & sets

function restFunc(...args) { // ... tells code `args` is a rest parameter (puts it in array).
  console.log(args)
} // ::[ 2, 3, 4, 5, 6 ]

function restFunc(...theArgs) {
  return args.reduce((prev,curr) =>  prev + curr)
} // :: 20 (2+3+4+5+6)

function restFunc(a, b, ...nums) { // uses 1st & 2nd argument separately from rest of array.
  return nums.map((i) =>  (a+b) * i)
} // :: [20, 25, 30] ((2+3)*[4,5,6])

console.log( restFunc(2,3,4,5,6) )

let numArray = [2,3,4,5,6]

// Old-school 'apply' method:
// let max = Math.max(numArray) // Will not work because same as Math.max([2,3,4,5,6]) :: NaN
let max = Math.max.apply(null, numArray) // Same as Math.max(2,3,4,5,6) :: 6

// ES6 spread operator method:
let max = Math.max(...numbers)

console.log(max)

// Old-school 'concat' method:
let numArray = [2,3,4,5,6]
let newArray = [7,8,9]

let concatArray = newArray.concat(numArray)
console.log(concatArray)

// ES6 spread operator method:
let numArray = [2,3,4,5,6]
let newArray = [7,8,...numArray,9,...numArray] // ::[ 7, 8, 2, 3, 4, 5, 6, 9, 2, 3, 4, 5, 6 ]

console.log(newArray)

let myArray = ["longing", "rusted", "seventeen"]
let myObject = {
  keyD: "daybreak",
  keyE: "furnace",
  keyF: "nine"
}
// Old-school destructuring:
let a = myArray[0]
let b = myArray[1]
let c = myArray[2]

let d = myObject.keyD
let e = myObject.keyE
let f = myObject.keyF

console.log(a,b,c) // :: longing, rusted, seventeen
console.log(d,e,f) // :: daybreak, furnace, nine

// ES6 destructuring:
let [a,b,c] = myArray
let {keyD,keyE,keyF} = myObject

console.log(a,b,c) // :: longing, rusted, seventeen
console.log(keyD,keyE,keyF) // :: daybreak, furnace, nine

let { keyD: whatsD } = myObject
console.log(whatsD) // ::daybreak. Shorthand version uses keyD directly as above.

// Remember, you can use rest params in destructuring statements
let [a,...theRest] = myArray
console.log(a,theRest) // :: longing [ "rusted", "seventeen"]

import React from 'react';
import ReactDom from 'react-dom';
import { Router, Route, Link } from 'react-router'; // ES6 destructuring shorthand

// Non-ES6 method:
let Router = require('react-router').Router
let Route = require('react-router').Route
let Link = require('react-router').Link

let myLetters = ["A","B","C"]

// Old way
for(let i=0; i < myArray.length; i++) {
  console.log(`I'm ${myLetters[i]}`)
}

// ES6 for...of loop
for(let letter of myLetters){
  console.log(`I'm ${letter}`)
}

function sum() {
  arguments = Array.from(arguments) // This line turns 1,2,3 into [1,2,3] for .reduce() to work
  return arguments.reduce((prev,cur) => prev + cur)
}

console.log( sum(1,2,3) ) // ::6
console.log( Array.from("Hello")) // :: ["H", "e", "l", "l", "o"]

let developers = [
  { name: "Mark",
    skill: "Ruby" },
  { name: "Steve",
    skill: "Swift" },
  { name: "Rose",
    skill: "Ruby" }
]

let rubyDev = developers.find((dev) => { // Finds the first object that matches criteria
  return dev.skill === "Ruby"
})
let rubyDevs = developers.filter((dev) => { // Finds all that matches criteria
  return dev.skill === "Ruby"
})
let rubyDevIndex = developers.findIndex((dev) => { // Finds all that matches criteria
  return dev.skill === "Ruby"
})
console.log(rubyDev) // :: [object Object] { name: "Mark", skill: "Ruby"}
console.log(rubyDevs) // :: [[object Object] { name: "Mark", skill: "Ruby"}, [object Object] { name: "Rose", skill: "Ruby"}]
console.log(rubyDevIndex) // :: 0

var obj = {
  // Previously:
  foo: function() {},
  // Now, use shorthand method:
  foo() {}
}

let height = 200
let weight = 120

let cat = {
  // Previously:
  height: height,
  weight: weight
  // Now, use shorthand assignment:
  height,
  weight
}

function modulePattern() {
  function add() {
    /* some code */
  }
  return {
    // Previously:
    add: add
    // Now:
    add
  }
}

let guy1 = {
  size: "S"
}

let guy2 = guy1
guy2.size = "L"

console.log(guy1) // :: [object Object] { size: "L"}, even though we only changed guy2.
// Why? Because guy2 refers to the same object as guy1. You've just given it another name.

// How to actually create a copy:
let guy2 = Object.assign({}, guy1)
guy2.size = "M"
// OR
let guy2 = Object.assign({}, guy1, {size: "M"})

console.log(guy1) // :: [object Object] { size: "S"}

let person = {
  name: 'Stephen',
  height: 200,
  strength: 5
}

let superSaiyan = {
  height: 300,
  strength: 9001
}

let mySaiyan = Object.assign({}, person, superSaiyan) // Note, put target first i.e. {}, then source objects (person, superSaiyan) in the order you want to overwrite them.

console.log(mySaiyan) // :: [object Object] { name: 'Stephen', height: 300, strength: 9001 }

let handler = {
  get: function(target, name) { // Here we're altering `get`. "target" is the proxy you're calling it on, "name" is the thing we're searching for.
    // custom logic:
    if (name in target) {
      return target[name]
    } else {
      return "Error."
    }
  }
}

let p = new Proxy({}, handler)

p.foo = "bar"
console.log(p.foo) // ::"bar"
console.log(p.baz) // ::"Error."

let example = {}
console.log(example.foo) // ::undefined. No worries, just referred to 1 non-existent key
console.log(example.foo.bar.baz.hi) // ::typeError. You mis-referred to >1 non-existent key & you have no idea which one's wrong.

let handler = {
  get: function(target, name) {
    // custom logic:
    if (name in target) {
      return target[name]
    } else {
      return target // this displays the target
    }
  }
}

let example = new Proxy({}, handler)

example.a = "1"
example.b = "2"
console.log(example.a.bar.baz.hi) // ::"1"

let aObject = { // A normal object
  "fruit" : "banana"
}

let aMap = new Map()
console.log(aMap.size) // ::0
aMap.set("fruit","banana")
console.log(aMap) // ::[object Map] { ... }
console.log(aMap.size) // ::1
console.log(aMap.get("fruit")) // ::"banana"

aMap.set(function(){}, "foo") // Can use function as a key.
aMap.set(12, "bar")
aMap.set({"greeting":"hi"}, "baz")

let aMap = new Map()
let aWeakMap = new WeakMap()

let object1 = {"foo":"bar"}
let object2 = {"bar":"baz"}

aMap.set(object1, "hi")
aWeakMap.set(object2, "hi")
console.log(aMap.get(object1)) // ::"hi"
console.log(aWeakMap.get(object2)) // ::"hi"

object1 = null
object2 = null

aMap.forEach((key,val) => { // List key value pairs
  console.log(key,val) // :: hi [object Object] { foo: "bar" }. Remains. Must be explicitly deleted if desired.
})

// Not can't use forEach on WeakMaps, so list it manually instead:
console.log(aWeakMap.get(object2)) //::undefined. If nothing else is pointing at the reference, WeakMap is garbage collected.

var aSet = new Set()

aSet.add(10)
aSet.add("foo")
aSet.add({"foo":"bar"}) // like a usual array, this is treated as a value.
console.log(aSet.size) // ::2
console.log(aSet.has(10)) // ::true
aSet.delete("foo")

for (let item of aSet) {
  console.log(item) // :: 10, { foo: "bar"}
}