ES6 Mini Crash Course: How to Write Modern JavaScript
Tags: javascript, css, computerscience, angular
Published: 2020-12-06 06:54:43

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Check the console for output</h1>
`;

for(var i = 0; i < 10; i++) {

}
// i should be undefined here:
console.log("i", i)
// SURPRISE! It's not

let counter = 0
counter += 1
console.log(counter)

const newCounter = 0
// doNotChange += 1 // this will throw an error!

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Check the console for output</h1>
`;

// Traditional functions define `this` at running time
// Arrow functions define `this` at definition time,

class MyClass {
  regular() {
    return function() {
      console.log("regular this: ", this) // undefined
    }
  }

  arrow() {
    return () => {
      console.log("arrow this: ", this) // MyClass
    }
  }
}

const c = new MyClass()
c.regular()()
c.arrow()()


// Three different function types

const functionType1 = (arg1, arg2) => {
  const sumValue = arg1 + arg2
  return "Sum is: " + sumValue
}

const functionType2 = (arg1, arg2) => 
  "Values are: " + arg1 + " and " + arg2

const functionType3 = onlyArg =>
  "Only 1 arg here: " + onlyArg


console.log(functionType1(1, 3))
console.log(functionType2("a", "b"))
console.log(functionType3("a"))


// Default values

const plusTenOrX = (arg1, arg2 = 10) => {
  const sumValue = arg1 + arg2
  return "Sum is: " + sumValue
}

console.log(plusTenOrX(1))
console.log(plusTenOrX(1, 5))

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Check the console for output</h1>
`;

const pullOutKey = (myObject) => {
  const { first } = myObject
  console.log("First? ", first)
  // First?  1 
}

const pullOutOfArray = (myArr) => {
  const [first, second] = myArr
  console.log("First two elements: ", first, second)
  // First two elements:  a b 
}

const namedParams = ({ first, second }) => {
  console.log("params: ", first, second)
  // params:  1 2 
}

const obj = {
  first: '1',
  second: '2',
  third: '3'
}
pullOutKey(obj)

const arr = ['a', 'b', 'c', 'd']
pullOutOfArray(arr)

namedParams(obj)




import "./styles.css";

import { people, droids } from './data'
import data from './data'

console.log("people: ", people)
// ["Luke", "Leia", "Han"]

console.log("droids: ", droids)
// {C-3PO: "protocol droid", R2-D2: "astromech droid"}

console.log("data keys: ", Object.keys(data))
// ["people", "droids"]




document.getElementById("app").innerHTML = `
<h1>Check the console for output</h1>
`;
import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Check the console for output</h1>
`;


const restOfArray = myArray => {
  const [one, ...rest] = myArray
  console.log("one: ", one)
  // "Luke"
  console.log("rest arr: ", rest)
  // ["Leia", "Han"]
}

const restOfObject = myObject => {
  const { C3PO, ...rest } = myObject
  console.log("C3PO: ", C3PO)
  // "protocol droid"
  console.log("rest obj: ", rest)
  // {R2D2: "astromech droid"}
}

const people = [
  "Luke",
  "Leia",
  "Han"
]
restOfArray(people)

const droids = {
  C3PO: "protocol droid",
  R2D2: "astromech droid"
}
restOfObject(droids)


const moreDroids = {
  K2SO: "security droid",
  BB8: "astromech",
  ...droids
}

console.log(moreDroids)
// {K2SO: "security droid", BB8: "astromech", C3PO: "protocol droid", R2D2: "astromech droid"}


const myStr = `New way to define strings`
console.log(typeof myStr)
// string  // notice that it's still a string!

const value1 = "Chris"

const hello = `Hello, ${value1}!`

console.log(hello)
// "Hello, Chris!"