import "./styles.css"; document.getElementById("app").innerHTML = `

Check the console for output

`; 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 = `

Check the console for output

`; // 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 = `

Check the console for output

`; 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 = `

Check the console for output

`; import "./styles.css"; document.getElementById("app").innerHTML = `

Check the console for output

`; 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!"

aditya1922

ES6 Mini Crash Course: How to Write Modern JavaScript

Join Our Newsletter. No Spam, Only the good stuff.