JavaScript Introduction

What you'll learn

Declare variables with const, let, and understand their scope rules

Master JavaScript data types: primitives and reference types

Write functions using declarations, expressions, and arrow syntax

Work with objects and arrays using modern methods

Understand type coercion and strict equality (===)

Use template literals and destructuring for cleaner code

JavaScript is a dynamic programming language that powers interactivity on the web. It runs in the browser and on servers (Node.js).

Variables

Three ways to declare variables:

const name = "React" // Cannot be reassigned (preferred)
let count = 0 // Can be reassigned
var old = "avoid" // Function-scoped, avoid in modern code

count = 1 // OK
name = "Vue" // Error: can't reassign const

Data Types

// Primitive types
const str = "hello" // string
const num = 42 // number
const bool = true // boolean
const und = undefined // undefined
const nul = null // null
const sym = Symbol("id") // symbol
const big = 9007199254740991n // bigint

// Reference types
const obj = { key: "value" } // object
const arr = [1, 2, 3] // array
function greet() {} // function

Functions

// Function declaration
function add(a, b) {
  return a + b
}

// Arrow function
const multiply = (a, b) => a * b

// Default parameters
const greet = (name = "World") => `Hello, ${name}!`

Objects and Arrays

// Object
const user = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hi, I'm ${this.name}`
  },
}

// Access
user.name // "Alice"
user["age"] // 30

// Array
const items = ["a", "b", "c"]
items.push("d") // Add to end
items.pop() // Remove from end
items[0] // "a"

// Destructuring
const { name, age } = user
const [first, second] = items

Control Flow

// Conditionals
if (score >= 90) {
  grade = "A"
} else if (score >= 80) {
  grade = "B"
} else {
  grade = "C"
}

// Loops
for (const item of items) {
  console.log(item)
}

for (const key in user) {
  console.log(key, user[key])
}

items.forEach((item) => console.log(item))

DOM Manipulation

// Select elements
const button = document.querySelector("button")
const container = document.getElementById("app")

// Modify content
container.textContent = "Hello!"
container.innerHTML = "<strong>Bold text</strong>"

// Events
button.addEventListener("click", () => {
  alert("Button clicked!")
})

Modern ES6+ Features

// Template literals
const greeting = `Hello, ${name}!`

// Spread operator
const merged = [...arr1, ...arr2]
const clone = { ...user, age: 31 }

// Optional chaining
const zip = user?.address?.zip ?? "N/A"

// Promise / async-await
async function fetchData() {
  const res = await fetch("/api/data")
  return res.json()
}

Best Practices

Use const by default, let only when reassigning
Prefer arrow functions for callbacks
Use destructuring for cleaner code
Handle async errors with try/catch
Use strict equality (===) over loose equality (==)

Next Steps

TypeScript Introduction — Type-safe JavaScript
React Introduction — Build UIs with React

Key Takeaways

const prevents reassignment but objects declared with const can still be mutated

let is block-scoped and the modern replacement for var, which is function-scoped

JavaScript has seven primitive types: string, number, boolean, undefined, null, symbol, bigint

Arrow functions don't have their own 'this' — they inherit it from the enclosing scope

=== (strict equality) checks value and type, while == (abstract equality) performs type coercion

const name = "React" // Cannot be reassigned (preferred) let count = 0 // Can be reassigned var old = "avoid" // Function-scoped, avoid in modern code count = 1 // OK name = "Vue" // Error: can't reassign const