Don't ForgetJavaScript
Cheat Sheet

// Stack Overflow 2023 Survey
JavaScript: 63.6%
HTML/CSS: 52.0%
Python: 49.2%
SQL: 47.7%
TypeScript: 40.5%

// Frontend (browsers)
websites, web apps

// Backend (Node.js)
servers, APIs

// Mobile (React Native)
iOS, Android apps

// Desktop (Electron)
Windows, Mac, Linux apps

// Average US Salaries (2024)
Junior Dev: $76,526
Mid-Level: $108,431
Senior: $147,192

// Job Openings
178,000+ JavaScript jobs
on LinkedIn USA

// NPM Package Registry
Total Packages: 2.1M+
Weekly Downloads: 25B+
Active Users: 17M+

// To run JavaScript you need:
1. A web browser
2. A text editor

// That's it! No complex
// setup required

// let - can be changed later
let score = 0
score = 10

// const - can't be changed
const name = 'John'
// name = 'Jane' // Error!

// var - avoid (outdated)

typeof "hello"    // text (string)
typeof 42       // number
typeof true     // true/false (boolean)
typeof {}       // object
typeof []       // array (special object)

Number("42")     // turns "42" into 42
String(42)      // turns 42 into "42"
Boolean(1)      // turns 1 into true

function greet(name) {
  return `Hello ${name}!`
}

greet('John')  // call the function

const greet = function(name) {
  return `Hello ${name}!`
}

greet('John')

function greet(name = 'friend') {
  return `Hello ${name}!`
}

greet()        // uses default
greet('John')  // uses 'John'

function add(a, b) {
  return a + b
  // code after return is never run
}

const sum = add(2, 3)  // returns 5

// counts from 0 to 2
for (let count = 0; count < 3; count++) {
  console.log(count)
}

const fruits = ['apple', 'banana', 'orange']

for (let fruit of fruits) {
  console.log(fruit)
}

let count = 0

while (count < 3) {
  console.log(count)
  count = count + 1
}

if (age >= 18) {
  console.log('Adult')
} else if (age >= 13) {
  console.log('Teen')
} else {
  console.log('Child')
}

const status = age >= 18 ? 'Adult' : 'Minor'

switch (fruit) {
  case 'apple':
    console.log('Selected apple')
    break
  default:
    console.log('No fruit selected')
}

[1, 2, 3].slice(0, 1)

"Jun-1".split("-")

["Jun", "1"].join("-")

[4, 2, 3].splice(0, 1)

[1, 2, 3].map(num => num * 2)

[1, 2, 3].filter(num => num > 1)

[1, 2, 3].reduce((sum, num) => 
  sum + num, 0)

const add = (num1, num2) => {
  return num1 + num2
}

(num1, num2) => num1 + num2

(num1, num2) => (
  num1 + num2
)

word => word.toUpperCase()

obj.a OR obj["a"]

obj[a]

for (let key in obj) ...

Object.keys({a: 1, b: 2})

const {a} = {a: 1}

const a = 1
const obj = {a}

document.createElement('div')

<Node>.style.color = "blue"

<Node>.classList.add(".myClass")

<Node>.innerHTML = "<div>hey</div>"
<Node>.innerText = "hey"

<Node1>.appendChild(<Node2>)

document
.querySelector("#my-id")

document
.querySelectorAll(".my-class")

<Node>.addEventListener("click",
function() {...}
)

fetch('https://google.com')

.then(result => console.log(result))

.then(...).then(...)

.catch(err => console.error(err))

Promise.all([fetch(...),fetch(...)])
  .then(allResults => ...)

const res = await fetch(URL)

const getURL = async (URL) => {
  await fetch(URL)
}

// = is for setting values
let x = 5

// == checks if values are equal
"5" == 5  // true

// === checks if values AND types are equal
"5" === 5  // false

if (true) {
  var x = "I exist everywhere"
  let y = "I only exist in here"
}
console.log(x)  // works
console.log(y)  // error!

const arr = [1, 2, 3]
arr.length = 0  // Oops! Empties the array
console.log(arr)  // []

0.1 + 0.2 === 0.3  // false!
0.1 + 0.2  // gives 0.30000000000000004

try {
  riskyOperation()
} catch (error) {
  console.error(error)
} finally {
  cleanup()
}

class Dog {
  constructor(name) {
    this.name = name
  }
  bark() {
    return `${this.name} says woof!`
  }
}

class Puppy extends Dog {
  constructor(name) {
    super(name)
  }
  playful() {
    return `${this.name} wants to play!`
  }
}

const arr = [1, 2]
const newArr = [...arr, 3]

const obj = {a: 1}
const newObj = {...obj, b: 2}

const value = null ?? 'default'
const zero = 0 ?? 'default'

const value = obj?.deep?.property

npm init              // start a new project
npm install package    // add a package
npm start             // run your app
npm run dev           // start dev mode

{
  "dependencies": {
    "react": "^18.0.0"
  },
  "scripts": {
    "start": "node index.js"
  }
}

const express = require('express')
// or
import express from 'express'