famashines

2024-12-17

javascript

Module 3: Understanding Variables

Objective: Learn what variables are, how to create and use them, and why they are fundamental to programming in JavaScript.

1. What Are Variables?

A variable is like a container that holds a value. Imagine you have a box where you can store your favorite toy. Later, you can open the box to use the toy or even replace it with a different one.

Real-Life Analogy:

Think of a variable as a labeled jar:

  • You label a jar "Cookies" (the variable name).
  • You put 10 cookies in it (the value).
  • If you eat some cookies, you update the number in the jar.

2. Declaring Variables

In JavaScript, you can create variables using the keywords let, const, or var. For now, we’ll focus on let and const because they are most commonly used.

Syntax:

let variableName = value;  // Using let
const constantName = value;  // Using const

Examples:

  1. Using let (for values that can change):

    let age = 25; // Create a variable named 'age' with a value of 25
console.log(age); // Prints 25
age = 26; // Update the value of 'age' to 26
console.log(age); // Prints 26

  2. Using const (for values that don’t change):

    const pi = 3.14; // Create a constant named 'pi'
console.log(pi); // Prints 3.14
// pi = 3.15; // This will cause an error because 'pi' is a constant

3. Rules for Naming Variables

Variable names:

  • Must start with a letter, $, or _.
  • Cannot contain spaces or special characters (except $ and _).
  • Are case-sensitive (age and Age are different).

Good Names:

let userName = "Alice";
const maxSpeed = 120;

Bad Names:

let 123abc; // Cannot start with a number
let user-name; // Cannot contain special characters (except $ and _)

4. Working with Values

Variables can store different types of values. These are called data types.

Example:

let name = "Alice";  // Text (string)
let age = 30;        // Number
let isHappy = true;  // Boolean (true/false)

5. Changing Variable Values

You can update a variable’s value if it was declared with let. For example:

let score = 50; // Start with 50
score = 75;     // Update to 75
console.log(score); // Prints 75

6. Why Use const?

If you know a value will never change, use const. It prevents accidental updates, which helps avoid bugs.

Example:

const birthYear = 1995; // This value will never change
// birthYear = 2000; // Error: Assignment to constant variable

7. Practical Exercise: Declaring Variables

Try this exercise to practice declaring variables:

  1. Create variables for the following:
    • Your name.
    • Your age.
    • Whether you like JavaScript (true or false).

Example Solution:

let myName = "John";
let myAge = 20;
let likesJavaScript = true;

console.log("Name: " + myName);
console.log("Age: " + myAge);
console.log("Likes JavaScript: " + likesJavaScript);

8. Understanding Undefined and Null

Sometimes, variables might not have a value right away.

  • Undefined: A variable declared but not given a value.

    let car; // No value assigned
console.log(car); // Prints "undefined"

  • Null: A value that represents “nothing.” You assign it intentionally.

    let bike = null; // Represents no value
console.log(bike); // Prints "null"

9. Common Errors with Variables

  • Using a variable before declaring it:

    console.log(score); // Error: score is not defined
let score = 10;

  • Redeclaring variables with let or const:

    let age = 30;
let age = 25; // Error: 'age' has already been declared

10. Challenge: Interactive Greeting

Create a small interactive program using variables.

Task:

  1. Declare a variable for the user’s name.
  2. Use prompt() to ask for their name (in a browser console).
  3. Use alert() to greet the user by name.

Example Code:

let userName = prompt("What is your name?");
alert("Hello, " + userName + "!");