Start learning free

LESSON 9 OF 348 · VARIABLES

The Power of Variables in TypeScript: Change a Value Once

Lesson Read the full explanation

Now that we've learned about variables, let's see why they are so important in our prgrammers' life:

Consider this simple program wich prints a story:

console.log("My name is John and I am 40 years old");
console.log("Coding at age 40 is really fun");
console.log("My son is named after me, John");
console.log("I'd love him to be as cool as me at age 40");
console.log("It's so funny when my wife calls John we both respond");

Changing the story:

This is a perfectly working program. But what if I come back to it and want to change the character's name to Andy and his age to 32?

Well, I'm going to have to go through the entire program and manually change the name John to the name Andy and the age 40 to the age 32:

console.log("My name is Andy and I am 32 years old");
console.log("Coding at age 32 is really fun");
console.log("My son is named after me, Andy");
console.log("I'd love him to be as cool as me at age 32");
console.log("It's so funny when my wife calls Andy, we both respond");

This is not horrible as I had to go through only 5 lines of code. But what if my story consisted of hundreds of lines?

It's a disaster. Going through the whole code and manually changing the name and age is boring. But more importantly, it's super easy to make mistakes.


The story with variables:

This is where variables shine. If I used a variable to store the name of the character and another variable to store his age when I first wrote this code, it would have looked like this:

let name = "John";
let age = 40;

console.log("My name is " + name + " and I am " + age + " years old");
console.log("Coding at age " + age + " is really fun");
console.log("My son is named after me, " + name);
console.log("I'd love him to be as cool as me at age " + age);
console.log("It's so funny when my wife calls " + name + " we both respond");

Changing the story with variables:

Now whenever I want to change the character's name and age, I only have to change two lines of code, instead of possibly hundreds.

If I want my character to be named Andy and aged 32, I initialize the variables name with Andy and age with 32 and leave the rest of the code untouched:

let name = "Andy";
let age = 32;

console.log("My name is " + name + " and I am " + age + " years old");
console.log("Coding at age " + age + " is really fun");
console.log("My son is named after me, " + name);
console.log("I'd love him to be as cool as me at age " + age);
console.log("It's so funny when my wife calls " + name + " we both respond");

Assignment
Follow the Coding Tutorial and let's witness the power of variables!


Hint
Look at the examples above if you get stuck.


STEP 1 OF 1
    Ctrl + Enter to check

    TYPESCRIPT · VARIABLES

    The Power Of Variables in TypeScript, explained

    The problem with repeated values

    Imagine a program that tells a short story, and the same name and age appear in several lines:

    console.log("My name is John and I am 40 years old");
    console.log("Coding at age 40 is really fun");
    console.log("My son is named after me, John");
    console.log("I'd love him to be as cool as me at age 40");
    

    This works. The trouble starts when the story changes. To turn John, aged 40, into Andy, aged 32, you must find every occurrence of the name and the age and edit each one by hand. With four lines that is easy. With hundreds of lines it is slow, and one missed occurrence leaves the story contradicting itself. A bug like that produces no error, because every line is still valid.

    Storing the values once

    A variable gives a value a name. Write the value in one place, and use the name everywhere else:

    let storyName = "John";
    let age = 40;
    
    console.log("My name is " + storyName + " and I am " + age + " years old");
    console.log("Coding at age " + age + " is really fun");
    console.log("My son is named after me, " + storyName);
    console.log("I'd love him to be as cool as me at age " + age);
    

    Inside each console.log, the quoted text stays fixed and the names outside quotes are replaced by their current values. Now changing the character takes two edits, whatever the length of the story:

    let storyName = "Andy";
    let age = 32;
    

    Every line below those declarations now tells the Andy story, and none of them was touched. That is the power of variables: a value that is used many times lives in exactly one place.

    Printing several values

    The lesson's own program prints with commas instead of +:

    console.log("I have", experience, "years of experience with", language);
    

    console.log accepts any number of arguments and prints them in order with a single space between each one. This means you do not have to type the spaces around the variables yourself, and the number does not need to be joined onto text. Both approaches give the same output here, so you can pick whichever reads better.

    Why the types matter here

    The variables in the exercise are annotated: experience: number and language: string. The annotation tells TypeScript what kind of value each variable holds. A number goes without quotes and a string goes with them. If you replace the number 5 with "13" in quotes, the compiler reports that a string is not assignable to type number.

    Choosing names and values

    A variable earns its keep when its name says what it stores. experience and language are better than x and y, because anyone reading the print line can tell what the output will say. Likewise, storyName says more than a bare name would when a program has several people in it.

    The lesson's exercise

    The starter code tells a story about someone with 5 years of experience in Python. The task is to change it into a story about 13 years of experience in Java, without touching the console.log line.

    1. Find the declarations. They are the two lines under the comment that asks you to create variables.
    2. Change the number. Replace 5 with 13. Keep the name, the annotation and the =.
    3. Change the string. Replace "Python" with "Java". Keep the quotes, because it is still text.
    4. Leave the printing alone. It reads the variables, so it already reflects the new values.
    // Create variables here:
    let experience: number = 13;
    let language: string = "Java";
    
    // Print story here:
    console.log("I have", experience, "years of experience with", language);
    

    It prints:

    I have 13 years of experience with Java
    

    Common mistakes

    • Editing the print line instead of the variables. That defeats the purpose, and the lesson asks you to leave it alone.
    • Removing the type annotation or the quotes by accident. Change only the value to the right of =.
    • Typing the value in two places. If a value must appear more than once, give it a variable.

    Key takeaways

    • A variable stores a value once and lets many lines use it.
    • To change the program's data, change the declaration, not every use.
    • Quoted text is fixed. A name without quotes means the variable's value.
    • console.log with commas prints its arguments separated by spaces.
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free