Web Foundations Lesson 6 of 7

JavaScript variables: let and const

25 min, 4 exercises

Builds on lessons 1 to 5. Start at lesson 1

Learn

const and let

A variable is a name you stick on a value so you can use it later. JavaScript gives you two ways to make one:

const gamerTag = "NovaFox";
let coins = 0;
  • const means the name always points at the same value. Try to reassign it and you get an error.
  • let means you are allowed to change it later: coins = coins + 10;

Which one should you use? Start with const every time. Switch to let only when you actually need to change the value. That way, when you read const, you know that value never moves, which makes code easier to follow. (You may also see var in old tutorials. It is the older way and has some weird behaviour; skip it.)

Learn

Naming and updating

Names can use letters, digits, _ and $, but cannot start with a digit. The convention is camelCase: highScore, gamerTag. Names are case sensitive, so coins and Coins are two different variables.

Updating a number has shortcuts: coins += 5 means coins = coins + 5, and coins++ adds one.

Learn

Template literals

Gluing strings with + gets ugly fast. Template literals use backticks instead of quotes, and let you drop values straight in with a dollar sign and curly brackets:

const player = "Sam";
const lives = 3;
console.log(`${player} has ${lives} lives left`);

That prints Sam has 3 lives left. Anything inside the curly brackets is real JavaScript, so you can even do maths in there. The backtick key is usually at the top left of your keyboard, hiding under Esc.

Try

Run it: a growing coin count

The example is already in the editor. Run it, change one thing, and run it again.

example.js to run
const gamerTag = "NovaFox";
let coins = 0;
console.log(gamerTag, coins);

coins = coins + 10;
coins += 5;
coins++;
console.log(`${gamerTag} now has ${coins} coins`);
console.log(`Double that is ${coins * 2}`);

Practice

Fix the counter

This code crashes with "Assignment to constant variable". Fix it so score ends up as 15.

exercise_1.js to run
const score = 10;
score = score + 5;

Practice

Build a message

Use the two variables and a template literal to print exactly: PixelKnight reached level 14

Constraint

  • Work it out with code. Printing the answer as text doesn't count.
exercise_2.js to run
const gamerTag = "PixelKnight";
const level = 14;
console.log("gamerTag reached level level");

Practice

A basket that adds up

Three items go into a basket, one at a time. Keep a running total that starts at 0, add each price to it with +=, then print exactly 3 items, total 11.5 using a template literal and your variables.

Constraint

  • Add each price with +=.
  • Print it with a template literal.
exercise_3.js to run
const crisps = 1.5;
const sandwich = 3.75;
const drink = 6.25;
// make a total, add each price, then print it

Your turn

Stats after a fight

A character starts with 100 health and 0 XP. During a fight they take a hit of 35, drink a potion that heals 20, then win and earn 150 XP. Keep health and XP in variables, change them one event at a time with -= and +=, then print exactly:

HP 85/100, XP 150

The 100 in the output should come from a const for the maximum health.

Constraint

  • Take the hit off with -=.
  • Keep the maximum health in a const.
  • Let JavaScript work out the 85.
  • Print it with a template literal.

On your own. Hints open after your first check.

exercise_4.js to run

  
  

  

  





    
    

    
  

  

    
JavaScript