Variables & Data Types

Lesson Objectives

By the end of this lesson, you will be able to:

1. Declare variables using let and const, and understand why var is discouraged.
2. Distinguish between primitive types and objects in JavaScript.
3. Render values into the page and apply simple styling based on data.

1. Why Variables Matter

Variables are named containers for storing data. They let you:

• Label a value so you can refer to it later.
• Update data (with let) when it changes.
• Protect constants (with const) when it shouldn’t change.

// A score that will change over time
let score = 0

// A fixed maximum value (by convention, constants use uppercase)
const MAX_SCORE = 100

Comparing let, const, and var

Tip: Prefer const by default. If you find you need to reassign, switch to let.

2. Primitive Types vs Objects

JavaScript has several primitive types and a few object-based types. Understanding the difference is key when copying or passing values.

Copying Behavior

• Primitives: copied by value. Each variable gets its own copy.

  let x = 5
  let y = x
  y = 10
  console.log(x) // 5 (x is unaffected)

• Objects: copied by reference. Multiple variables can point to the same object.

  let a = { count: 1 }
  let b = a
  b.count = 2
  console.log(a.count) // 2 (both reference the same object)

3. Rendering Values into the Page

To display JavaScript values in your HTML, target an element and update its properties:

1. Select the container:

   const root = document.getElementById('app')

2. Insert text:

   root.textContent = `Hello, world!`

3. Style based on data:

   // Change color to red if under 18, green otherwise
   root.style.color = age < 18 ? 'red' : 'green'

Task: Build Your Greeting

In your index.js, add code that:

1. Declares

   const name = 'YourName'
   let age = 30

2. Renders a greeting into <div id="app">, e.g.

   root.textContent = `Hi, I’m ${name} and I’m ${age} years old`

3. Bonus: Use a ternary to color the text:

   root.style.color = age < 18 ? 'red' : 'green'

Hint: If you need to update age later, you’ll need let, not const.

Reflection Questions

1. Why is const preferred for values that shouldn’t change?
2. What surprising behavior can var introduce inside loops or blocks?
3. How does copying primitives differ from copying objects when assigning to a new variable?

Next Steps: Try changing age dynamically (e.g., by reading from an input) and see how the text and color update in real time!