Variable — is one of the key terms in programming. Luckily it’s not that complicated to learn.

You can imagine a variable as a spreadsheet cell or a box in the warehouse. You can place something in it or leave it empty.

Creating JavaScript Variables

You can create variables in JavaScript using the keyword let.

Don’t forget to write all commands from the new line!

let x;
let y;

We’ve created 2 variables. The first one is named — x, the second one — y.

These variable are empty after creation, but we can place something in them:

let x;
let y;

x = 'hello';
y = 'world';

Note that strings must be wrapped in quotes. If you write hello and world without quotes, the program will throw an error, and the code won’t work.

Now, we can use variables x and y in our program. Let’s try to print them to the screen using the command console.log.

let x;
let y;

x = 'hello';
y = 'world';

console.log(x);
console.log(y);

You’ll see the following output:

hello
world

Initializing variables and undefined

When you save some value in your variable for the first time — it’s called “initialization” or setting the initial value.

You can initialize the variable right after creation.

let x = 'hello';
let y = 'world';

console.log(x);
console.log(y);

Same output will appear on the screen:

hello
world

If you forget to initialize the variable, it will stay empty. In JavaScript there’s a special value that described this case — it’s undefined.

let x = 'hello';
let y;

console.log(x);
console.log(y);

We forgot to set the value of the variable y, and now it’s value is undefined.

hello
undefined

Changing the variables

After initialization, you can change the value of the variable.

let x = 'hello';
console.log(x);

x = 'olleh';
console.log(x);

Let’s break down this example line-by-line:

  • In the first line we’ve done 2 things: created the variable x and initialized it with the value hello.
  • In the second line, we’ve printed out the value of x to the screen.
  • In the third line, we’ve assigned x a new value — olleh. The value of x has changed!
  • In the fourth line we’ve printed out the value x once again to make sure that it was updated and is equal to olleh, and not hello.

After running this code, we’ll see two strings on the screen:

hello
olleh

Coding tasks

Let’s get some practice by creating variables, initializing them and printing their value to the screen.

Task 1

Let’s create a variable message, place a string hello in it and log its value to the screen.

Type the following commands in the code editor:

let message = 'hello';

console.log(message);

And hit “RUN”.

Task 2

Create 2 variables x and y, save the strings hello and world in them and try to add them.

Type the following commands in the code editor:

let x = 'hello';
let y = 'world';

console.log(x + y);

And hit “RUN”.

Task 3

This code snippet has an error that breaks the code.

let greeting = hello world;
console.log(greeting);

Find the problem, fix it with single quotes and hit “RUN”.

Task 4

Print the string I will become a programmer! to the screen in any way you like. You can create a new variable and print it to the screen using console.log, or you can get away without using a variable. It’s your call. I’ll only check the output of your program.

As usual, don’t forget to hit “RUN” to verify the task.