ES6 Mini Crash Course: How to Write Modern JavaScript

aditya1922 — Sun, 06 Dec 2020 06:54:43 +0000

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

DEV Community: aditya1922

ES6 Mini Crash Course: How to Write Modern JavaScript

Check the console for output

Check the console for output

Check the console for output

Check the console for output

Check the console for output