EduFlow
JavaScript Fundamentals
0%

Section 1 · First Steps

Values, Types and Variables

17 min3 min readCode playground

Lesson at a glance

Recognise JavaScript’s basic value types, check them with typeof, and store values in variables with const and let, choosing the right one each time.

  1. 1Values and their types
  2. 2Naming values with const and let
  3. 3The value has the type, not the variable
  4. 4Names: the rules and the habits

No video here — just the real thing: a written lesson, runnable examples, a quiz and practice.

Pocket needs to remember things: the app’s name, how much you have spent today, whether you are over budget. A program remembers by keeping values and giving them names. Before you can do anything interesting, you need to know what kinds of values exist and how to name them.

Values and their types

A value is a single piece of data. Every value has a type, which decides what you can do with it. These five cover almost everything you will touch in your first weeks:

Type Examples Used for
number 42, 4.5, -3 amounts, counts, measurements
string "Coffee", 'food' any text
boolean true, false yes/no answers
undefined undefined “no value has been given yet”
null null “deliberately empty”

The typeof operator tells you the type of any value. Run this and compare each line with the table:

JavaScript
console.log(typeof 42);
console.log(typeof "Coffee");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);

Four answers match the table. The last one says "object", which is a bug from 1995 that can never be fixed because millions of websites depend on it. When you need to know whether something is null, compare it directly: value === null.

There are two more basic types, bigint (for huge whole numbers) and symbol (for unique labels), which you will rarely need as a beginner. Everything else, such as lists and records, is an object, and section 3 is all about those.

Naming values with const and let

A variable is a name that points at a value. You create one with a declaration:

JavaScript
const appName = "Pocket";
let spentToday = 0;

spentToday = spentToday + 4.5;
spentToday = spentToday + 12;

console.log(appName, "spent today:", spentToday);

Read line 4 the way the engine does: first it evaluates the right side, spentToday + 4.5, which is 0 + 4.5, so 4.5. Then it points the name spentToday at that new value. The = sign means “point this name at”, not “is equal to”. That is why x = x + 1 makes sense in code even though it is nonsense in maths.

The name appName points to the string Pocket and can never move. The name spentToday first points to 0, then 4.5, then 16.5, each reassignment moving the arrow to a new value. const appName "Pocket" let spentToday 0 4.5 16.5 current value
Reassigning a let moves the name to a new value

const creates a name that can never be pointed anywhere else. let creates one that can. Use this rule: declare with const by default, and change it to let only when you find you need to reassign. Most names in real programs never change, and a const tells the next reader that they can stop worrying about it.

You will also see a third keyword, var, in older tutorials and Stack Overflow answers. It is the original way to declare variables and has scoping rules that cause bugs (you will see why in the scope lesson). Modern code does not use it.

The value has the type, not the variable

In JavaScript a variable does not have a type of its own. It points at a value, and the value has a type. So a let can point at a number now and a string later:

JavaScript
let note = 12;
console.log(typeof note);
note = "twelve dollars";
console.log(typeof note);

This flexibility is called dynamic typing. It is convenient, and it is also how many beginner bugs start: a number quietly becomes a string and your sum turns into "1212". The next two lessons show exactly when that happens.

Names: the rules and the habits

The rules: a name can contain letters, digits, _ and $, cannot start with a digit, and cannot be a reserved word such as const or if. Names are case-sensitive, so total and Total are two different variables.

The habits, which every JavaScript codebase follows: write names in camelCase (spentToday, monthlyBudget), and make them say what the value means, not what type it is. spentToday beats num1; isOverBudget beats flag. Booleans usually start with is, has or can.

Two errors you will meet while practising:

  • ReferenceError: spent is not defined means you used a name that was never declared, often a typo.
  • ReferenceError: Cannot access 'spent' before initialization means you used a let or const on a line above its declaration. Declare first, use after.

Next lesson you start doing arithmetic with your numbers, and you will find out why 0.1 + 0.2 is not quite 0.3.

Key takeaways

  • Every value has a type; the basic ones are number, string, boolean, undefined and null, and typeof tells you which one you have.
  • A variable is a name that points at a value; the value has a type, the variable does not.
  • Declare with const by default and switch to let only when the name must point at a different value later.
  • Reassigning a const throws a TypeError, and using a name before declaring it throws a ReferenceError.

Further reading

Check your understanding

4 questions

Question 1 of 4

What does this code print?

JavaScript
let total = 10;
total = total + 5;
console.log(typeof total, total);
Question 2 of 4

You store the name of the app, "Pocket", which never changes, and the number of expenses entered so far, which grows. Which declarations fit best?

Question 3 of 4

What does typeof null return?

Question 4 of 4

Which line throws TypeError: Assignment to constant variable.?

Practice

Code playground

Track what you have spent

Pocket has a monthlyBudget of 2000. Declare a variable spent that starts at 0, then reassign it twice to add an expense of 45 and one of 120. Declare remaining as monthlyBudget minus spent, and log the type of remaining. Keep monthlyBudget a const.

const appName = "Pocket";
const monthlyBudget = 2000;

// 1. Declare spent, starting at 0
// 2. Add an expense of 45 to spent, then one of 120
// 3. Declare remaining: the budget minus what was spent
// 4. Log the type of remaining
Loading the editor…

Ctrl/⌘ + Enter to run · Runs in a sandbox in your browser. Nothing leaves your device.

Console

(no output)

Checks

  • spent ends at 165
  • remaining is 1835
  • Logs the type of remaining (number)
  • monthlyBudget is still a const that cannot be reassigned