Lesson 4

Variables in JavaScript

let declares a variable that CAN be changed later, e.g. let score = 10;
const declares a variable that CANNOT be changed later, e.g. const birthYear = 2015;
= assignment operator, used to store a value inside a variable, e.g. let name = "Maya";
+ addition operator, also used to update a number variable, e.g. coins = coins + 3;
- subtraction operator, used to update a number variable, e.g. health = health - 20;
* multiplication operator, e.g. boxD = boxC * 2;

Working with variables
`...${variable}...` template literal, lets you combine text and variables together, e.g. `My name is ${name}.`
// comment a note left in the code that JavaScript ignores, used to explain what a line does, e.g. // took damage
A variable can be built using the value of another variable, e.g. let futureAge = age + 10;
Two variables can be swapped using a third "helper" variable, e.g. let temp = a; a = b; b = temp;

Variable names should use camelCase (no spaces, each new word starts with a capital letter), e.g. favoriteFood, numberOfPets. Using a space in a name, like "favorite food", will cause an error.

Store Your Name

Task: Store your own name in a variable and print it.

let name = "Maya";
console.log(name);

Multiple Variables

Task: Create 3 variables about yourself (name, age, city) and print each one.

let name = "Maya";
let age = 10;
let city = "Jakarta";
console.log(name);
console.log(age);
console.log(city);

let vs const

Task: Try changing birthYear after it's set and see the error. Why should some things never change?

let score = 10;
score = 20;
console.log(score);

const birthYear = 2015;
console.log(birthYear);

Updating a Variable

Task: Start with a number of "coins" or "points" and add to it in a second line, then print the new total.

let coins = 5;
coins = coins + 3;
console.log(coins);

Combine Variables in a Sentence

Task: Write a sentence combining 2+ variables using a template literal.

let name = "Maya";
let pet = "cat";
console.log(`My name is ${name} and I have a ${pet}.`);

Swap Two Values

Task: Predict the output before running it. Why do we need temp? What happens if we skip it?

let a = "apple";
let b = "banana";

let temp = a;
a = b;
b = temp;

console.log(a);
console.log(b);

Variable Naming Practice

Task: Create 2 variables using camelCase naming for things you choose (favorite game, number of siblings, etc).

let favoriteFood = "pizza";
let numberOfPets = 2;
console.log(favoriteFood);
console.log(numberOfPets);

Digital ID Card

Task: Fill in your own details and run it as a pop-up ID card.

const name = "Maya";
let age = 10;
let grade = 5;
let favoriteSubject = "Art";

alert(`🪪 STUDENT ID
Name: ${name}
Age: ${age}
Grade: ${grade}
Favorite Subject: ${favoriteSubject}`);

Variable Tracker

Task: Create your own "health bar" story with at least 4 changes, printing the value after each change. What would happen if health went below 0?

Mystery Box Challenge

Task: Change the starting values of boxA and boxB and predict what boxC and boxD will be before running the code.

let boxA = 15;
let boxB = 8;
let boxC = boxA - boxB;
let boxD = boxC * 2;

console.log(`Box A: ${boxA}`);
console.log(`Box B: ${boxB}`);
console.log(`Box C: ${boxC}`);
console.log(`Box D: ${boxD}`);

Back