Back

Activity 1.4 Variables

divider

Introduction

Activity 1.4

Variables

Topics

  • Introduction to Variables
  • Variable assignment
  • Variable scope
  • Naming rules
  • Naming conventions

Introduction to Variables

Variables allow us to store data during our program's execution. Sometimes, variables are described as containers for storing information.

Introduction to Variables

What data is being kept track of in this game?

Terminator Screenshot

Declaring a Variable

Using the let keyword creates a variable and gives it a name. You my assign it a value later in the program.

let health;

Declaring a Variable

Using the let keyword creates a variable and gives it a name. You my assign it a value later in the program.

let health;

health = 100;

Declaring a Variable

You can also initialize a variable and give it a value immediately.

let health = 100;

Declaring a Variable

A variable can be used anywhere a typical value would be used. 

let health = 100;
console.log("Health: " + health);
Terminal window
Health: 100

The Assignment Operator

The equal sign (=) used to assign a value to a variable.

It is not used to check for equality; it is only used for assigning a value to a variable.

Variable Scope

Variables must be declared before they can be used.

console.log(health);
let health = 100;

Demo: Declare and Use Variables

let health;
let score = 14000;
let lives = 3;
let vehicle = "Motorcycle";


console.log(vehicle);
console.log("Lives left: " + lives);
console.log("Score: " + score);

Demo: Declare and Use Variables

let health;
let score = 14000;
let lives = 3;
let vehicle = "Motorcycle";


console.log(vehicle);
console.log("Lives left: " + lives);
console.log("Score: " + score);
Terminal window
Motorcycle
Lives left: 3
Score: 14000

Naming Rules and Conventions

Variables names cannot:

  • Contain spaces
  • Start with a number

let 1st; let first name;

For names containing multiple words, use camelCase.

let firstName;

'F' → Fullscreen

Objectives

  • icon Declaring and assigning values to variables.
  • icon Using variables in formatted strings.
divider

Activity Tasks

  • icon Create a new project named 1-4-variable.js.
  • icon Initialize each variable when instructed.
  • icon Use each variable within console output.

Task 1: About Me

1-4-variables.js
// String Variables
console.log("- About Me -");
let person = ""; // Insert your name into the string
let food = "Pizza Hut Pepperoni Pizza"; // Replace pizza with your favorite food


console.log(`Hello, my name is ${person}!`);
console.log(`I, ${person}, love to eat ${food}.`);
console.log();
//

Task 2: Tongue Twister

1-4-variables.js
// String Variables
console.log("- About Me -");
let person = ""; // Insert your name into the string
let food = "Pizza Hut Pepperoni Pizza"; // Replace pizza with your favorite food


console.log(`Hello, my name is ${person}!`);
console.log(`I, ${person}, love to eat ${food}.`);
console.log();


console.log("- Tongue Twister -");
let item = ""; // Insert a generic item
console.log(`Try saying this five times fast:`);
console.log(`Peter Piper picked a peck of pickled ${item}.`);
console.log(`A peck of pickled ${item} Peter Piper picked.`);
console.log(`If Peter Piper picked a peck of ${item},`);
console.log(`Where's the peck of ${item} Peter Piper picked?`);
console.log();
//

Task 3: Health Demo

1-4-variables.js
// String Variables
console.log("- About Me -");
let person = ""; // Insert your name into the string
let food = "Pizza Hut Pepperoni Pizza"; // Replace pizza with your favorite food


console.log(`Hello, my name is ${person}!`);
console.log(`I, ${person}, love to eat ${food}.`);
console.log();


console.log("- Tongue Twister -");
let item = ""; // Insert a generic item
console.log(`Try saying this five times fast:`);
console.log(`Peter Piper picked a peck of pickled ${item}.`);
console.log(`A peck of pickled ${item} Peter Piper picked.`);
console.log(`If Peter Piper picked a peck of ${item},`);
console.log(`Where's the peck of ${item} Peter Piper picked?`);
console.log();


// Number Variables
console.log("- Health Demo -");
let health = 100;
let damage = 55;
console.log(`You've taken ${damage} damage. You have ${health - damage} health left.`);
console.log();
//

Task 4: Age Demo

1-4-variables.js
// String Variables
console.log("- About Me -");
let person = ""; // Insert your name into the string
let food = "Pizza Hut Pepperoni Pizza"; // Replace pizza with your favorite food


console.log(`Hello, my name is ${person}!`);
console.log(`I, ${person}, love to eat ${food}.`);
console.log();


console.log("- Tongue Twister -");
let item = ""; // Insert a generic item
console.log(`Try saying this five times fast:`);
console.log(`Peter Piper picked a peck of pickled ${item}.`);
console.log(`A peck of pickled ${item} Peter Piper picked.`);
console.log(`If Peter Piper picked a peck of ${item},`);
console.log(`Where's the peck of ${item} Peter Piper picked?`);
console.log();


// Number Variables
console.log("- Health Demo -");
let health = 100;
let damage = 55;
console.log(`You've taken ${damage} damage. You have ${health - damage} health left.`);
console.log();


console.log("- Age Demo -");
let age; // Set the age variables to your age with the assignment operator (=)
console.log(`you will reach age 100 in ${100 - age} years.`);
console.log();
//

Task 5: Money Demo

1-4-variables.js
// String Variables
console.log("- About Me -");
let person = ""; // Insert your name into the string
let food = "Pizza Hut Pepperoni Pizza"; // Replace pizza with your favorite food


console.log(`Hello, my name is ${person}!`);
console.log(`I, ${person}, love to eat ${food}.`);
console.log();


console.log("- Tongue Twister -");
let item = ""; // Insert a generic item
console.log(`Try saying this five times fast:`);
console.log(`Peter Piper picked a peck of pickled ${item}.`);
console.log(`A peck of pickled ${item} Peter Piper picked.`);
console.log(`If Peter Piper picked a peck of ${item},`);
console.log(`Where's the peck of ${item} Peter Piper picked?`);
console.log();


// Number Variables
console.log("- Health Demo -");
let health = 100;
let damage = 55;
console.log(`You've taken ${damage} damage. You have ${health - damage} health left.`);
console.log();


console.log("- Age Demo -");
let age; // Set the age variables to your age with the assignment operator (=)
console.log(`you will reach age 100 in ${100 - age} years.`);
console.log();


console.log("- Money Demo -");
let balance = 100.25;
let withdraw = 0; // Replace 0 with a positive number of your choice.
let leftover = balance - withdraw;
console.log(`You have a balance of $${balance} in your bank account`);
console.log(`If you take out $${withdraw}, you will have $${leftover} left.`);
//
divider

Sample Output

Your program output should something similar to the sample output below.

Sample Output
- About Me -
Hello, my name is Anthony!
I, Anthony, love to eat Pizza Hut Pepperoni Pizza.


- Tongue Twister -
Try saying this five times fast:
Peter Piper picked a peck of pickled sausages.
A peck of pickled sausages Peter Piper picked.
If Peter Piper picked a peck of sausages,
Where's the peck of sausages Peter Piper picked?


- Health Demo -
You've taken 55 damage. You have 45 health left.


- Age Demo -
you will reach age 100 in 65 years.


- Money Demo -
You have a balance of $100.25 in your bank account
If you take out $50, you will have $50.25 left.
divider

Reflection Questions

You may write your reflection answers as comments at the bottom of your code.

  1. How do variables make your code easier to read and understand?
  2. Why is it important to choose a descriptive name for a variable, like health or age, instead of a simple name like h or a?
divider

Submission

Submit your activity and reflection answers to the appropriate dropbox.

Activity Complete