InnoMarts logo
InnoMarts
Fast websites
← Back to course

Variables and Data Types

Variables and Data Types

Welcome back.

In the previous lesson, you connected JavaScript to HTML.

You wrote console.log().

You changed text on the page.

You made a button react to a click.

Very good.

The browser is no longer ignoring you completely.

Today we learn one of the most important ideas in JavaScript:

variables.

Variables let JavaScript remember information.

Without variables, JavaScript would be like a very confused waiter who forgets your order before reaching the kitchen.

With variables, JavaScript can store values and use them later.

Names.

Numbers.

Messages.

User choices.

Prices.

Booleans.

Tiny digital memories.

Very useful.

Sometimes very dangerous if you name them badly.

But we will survive.

What You Will Learn

In this lesson, you will learn:

By the end of this lesson, you will be able to store values in JavaScript and understand what kind of data you are working with.

That sounds simple.

It is simple.

Until you meet undefined.

Then JavaScript smiles politely and hands you a small puzzle.

What Is a Variable?

A variable is a named container for a value.

Example:

const name = "Viktor";

Here:

You can use the variable later:

console.log(name);

The console will show:

Viktor

Think of a variable like a labeled box.

The label says what is inside.

The value is what you put in the box.

Good variable names are important.

Bad name:

const x = "Viktor";

Better name:

const userName = "Viktor";

JavaScript will understand both.

Humans will not.

And humans are usually the problem.

Especially future you.

Future you will open your code and ask:

“Who wrote this?”

Then you will realize.

It was you.

Create the Project

Create a folder for this lesson:

mkdir javascript-lesson2
cd javascript-lesson2
touch index.html
touch script.js

Your project should look like this:

javascript-lesson2/
  index.html
  script.js

Open the folder in your editor.

We will use the browser console for most examples.

No complicated setup.

Just JavaScript learning to remember things.

Like a tiny elephant with syntax.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variables and Data Types</title>
</head>
<body>
  <h1>Variables and Data Types</h1>
  <p>Open the browser console to see JavaScript output.</p>

  <script src="script.js"></script>
</body>
</html>

Open the file in your browser.

Then open the console:

Now we are ready.

The console is waiting.

Judgmentally, but ready.

Using const

Open script.js and add:

const firstName = "Viktor";
const age = 33;

console.log(firstName);
console.log(age);

Refresh the browser.

You should see:

Viktor
33

const creates a variable that cannot be reassigned.

That means this is okay:

const city = "Vigevano";

console.log(city);

But this is not okay:

const city = "Vigevano";

city = "Milan";

JavaScript will throw an error.

Why?

Because const means the variable binding cannot be changed.

You told JavaScript:

“This value should stay here.”

Then you tried to replace it.

JavaScript said:

“No.”

Very Italian bureaucracy energy.

But useful.

Using let

Sometimes you need a value that can change.

For that, use let.

Example:

let score = 0;

console.log(score);

score = 10;

console.log(score);

The console will show:

0
10

This works because let allows reassignment.

Use let when the value needs to change.

Examples:

let counter = 0;
let userInput = "";
let isMenuOpen = false;

These values may change later.

A counter goes up.

User input changes.

A menu opens and closes.

Life happens.

JavaScript adapts.

const or let?

Use this simple rule:

Use const by default.

Use let only when the value must change.

Good:

const userName = "Anna";
const country = "Italy";

let points = 0;
points = points + 10;

Why prefer const?

Because it makes your code safer.

If a value should not change, const protects it.

It is like putting a small fence around your variable.

Not a very high fence.

But enough to stop beginner chaos.

Do Not Use var for Now

You may see older JavaScript code using var.

Example:

var name = "Old JavaScript";

For this course, avoid var.

Use:

var has older behavior that can confuse beginners.

We do not need that drama today.

JavaScript already has enough personality.

Strings

A string is text.

You create strings with quotes:

const language = "JavaScript";
const message = "Hello, world!";
const country = 'Italy';

Both double quotes and single quotes work.

Choose one style and be consistent.

You can print strings:

const message = "JavaScript is fun.";

console.log(message);

You can combine strings:

const firstName = "Viktor";
const greeting = "Hello, " + firstName;

console.log(greeting);

The console shows:

Hello, Viktor

This is called string concatenation.

It works.

But there is a cleaner way.

Template Literals

Template literals use backticks:

const firstName = "Viktor";
const age = 33;

const message = `My name is ${firstName} and I am ${age} years old.`;

console.log(message);

The console shows:

My name is Viktor and I am 33 years old.

This is very useful.

Inside ${}, you can insert variables.

Template literals are usually easier to read than string concatenation.

Compare this:

const message = "My name is " + firstName + " and I am " + age + " years old.";

with this:

const message = `My name is ${firstName} and I am ${age} years old.`;

The second one looks cleaner.

Less punctuation soup.

More dignity.

Numbers

Numbers are used for math.

Example:

const price = 100;
const quantity = 3;
const total = price * quantity;

console.log(total);

The console shows:

300

JavaScript can do basic math:

const a = 10;
const b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

Output:

13
7
30
3.3333333333333335

That last number is very JavaScript.

Not wrong.

Just unnecessarily honest.

Computers do decimal math in ways that can sometimes look strange.

For beginner work, do not panic.

Just know that decimals can sometimes be weird.

Like people before coffee.

Booleans

A boolean is either true or false.

Example:

const isLoggedIn = true;
const isAdmin = false;

console.log(isLoggedIn);
console.log(isAdmin);

Booleans are used for decisions.

Example:

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("Welcome back!");
}

The console shows:

Welcome back!

Booleans are very important in programming.

They answer yes-or-no questions.

Is the user logged in?

Is the menu open?

Is the password valid?

Is JavaScript behaving today?

Usually false.

Just kidding.

Mostly.

undefined

A variable is undefined when it exists but has no value yet.

Example:

let userName;

console.log(userName);

The console shows:

undefined

This means:

“The variable exists, but nothing has been assigned to it.”

It is like an empty box with a label.

The box exists.

But inside?

Nothing.

A tiny existential crisis.

null

null means an intentional empty value.

Example:

const selectedUser = null;

console.log(selectedUser);

null usually means:

“There is no value here, and I did that on purpose.”

Difference:

let userName;
const selectedUser = null;

userName is undefined because no value was assigned.

selectedUser is null because we intentionally set it to empty.

Think of it like this:

Very philosophical.

Very useful.

typeof

The typeof operator tells you the type of a value.

Example:

const name = "Viktor";
const age = 33;
const isStudent = false;

console.log(typeof name);
console.log(typeof age);
console.log(typeof isStudent);

Output:

string
number
boolean

Try this too:

let city;
const selectedItem = null;

console.log(typeof city);
console.log(typeof selectedItem);

Output:

undefined
object

Yes.

typeof null gives "object".

This is an old JavaScript quirk.

Do not try to fix it.

Many brave developers have stared at it.

It remains.

Like a strange monument.

Variable Naming Rules

Variable names can contain:

But they cannot start with a number.

Good:

const userName = "Anna";
const userAge = 25;
const totalPrice = 300;

Bad:

const 1user = "Anna";

Also, variable names are case-sensitive:

const userName = "Anna";
const username = "Marco";

These are two different variables.

JavaScript sees them as different.

Humans see them and begin to suffer.

Use clear names.

Good:

const productPrice = 49;
const userEmail = "hello@example.com";
const isMenuOpen = true;

Bad:

const p = 49;
const x = "hello@example.com";
const thing = true;

The computer does not care.

Your brain does.

Respect your brain.

It already has enough tabs open.

Build a Small Example

Replace script.js with this:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

console.log(`Product: ${productName}`);
console.log(`Original price: €${price}`);
console.log(`Discount: €${discount}`);
console.log(`Final price: €${finalPrice}`);
console.log(`Available: ${isAvailable}`);

Refresh the browser.

You should see:

Product: JavaScript Course
Original price: €49
Discount: €10
Final price: €39
Available: true

This example uses:

Small example.

Many important ideas.

JavaScript is already doing useful work.

No fireworks.

But definitely a small spark.

Show Data on the Page

Now let us show the data in HTML.

Update index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variables and Data Types</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border-radius: 18px;
      border: 2px solid #e5e7eb;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Variables and Data Types</h1>

  <div class="card">
    <h2 id="productName"></h2>
    <p id="productPrice"></p>
    <p id="productStatus"></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Now update script.js:

const productName = "JavaScript Course";
const price = 49;
const discount = 10;
const isAvailable = true;

const finalPrice = price - discount;

const productNameElement = document.getElementById("productName");
const productPriceElement = document.getElementById("productPrice");
const productStatusElement = document.getElementById("productStatus");

productNameElement.textContent = productName;
productPriceElement.textContent = `Final price: €${finalPrice}`;
productStatusElement.textContent = `Available: ${isAvailable}`;

Refresh the browser.

Now JavaScript stores data in variables and writes that data into the page.

This is important.

You are not just printing things in the console anymore.

You are using JavaScript to control page content.

The page is becoming dynamic.

Very nice.

The HTML is probably feeling important now.

Common Mistakes

Forgetting Quotes Around Strings

Wrong:

const name = Viktor;

Correct:

const name = "Viktor";

Without quotes, JavaScript thinks Viktor is a variable name.

Then it looks for that variable.

Then it does not find it.

Then it complains.

Classic JavaScript.

Reassigning const

Wrong:

const score = 0;
score = 10;

Correct:

let score = 0;
score = 10;

Use let if the value changes.

Use const if it does not.

Simple rule.

Strong result.

Confusing Strings and Numbers

This is a number:

const age = 33;

This is a string:

const age = "33";

They look similar.

But they are not the same.

Numbers are for math.

Strings are text.

JavaScript sometimes converts values automatically.

This can be useful.

It can also create chaos in a nice jacket.

Be careful.

Bad Variable Names

Bad:

const data = "Anna";
const thing = 25;
const value = true;

Better:

const userName = "Anna";
const userAge = 25;
const isLoggedIn = true;

Good names make code easier to understand.

Code is read more often than it is written.

Write for humans.

The computer already understands nonsense.

Practice

Create variables for a user profile:

Then print a sentence using a template literal.

Example output:

Viktor Holovin is 33 years old and lives in Italy. Online: true

Use:

const firstName = "Viktor";
const lastName = "Holovin";
const age = 33;
const country = "Italy";
const isOnline = true;

const profile = `${firstName} ${lastName} is ${age} years old and lives in ${country}. Online: ${isOnline}`;

console.log(profile);

Then change the values and create your own profile.

Do not only copy.

Modify.

Break.

Fix.

That is where learning hides.

Mini Challenge

Create a small product card.

Variables:

Show the result in the browser page, not only in the console.

Use:

Bonus:

If the product is available, show:

This product is available.

If not, show:

This product is not available.

You will need an if statement.

We will study conditions properly in the next lesson, but you can already try.

A little struggle is healthy.

Like gym for the brain.

Without the sweaty towel.

Summary

Today you learned:

This is a big step.

Variables are everywhere in JavaScript.

If JavaScript were a kitchen, variables would be the bowls where you put ingredients.

Without bowls, you are just holding eggs in your hands and hoping for the best.

Not a good strategy.

Next Lesson

In the next lesson, we will learn operators and conditions.

You will teach JavaScript how to make decisions.

If this happens, do that.

If not, do something else.

Basically, JavaScript will begin judging situations.

Politely.

Mostly.