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!"
Top comments (0)