JavaScript — Variables & Types

Start coding! Learn how to store data, work with text and numbers, and understand the basic building blocks of JavaScript.

Playwright Automation • Prep • Lesson 4
15 min read

What you'll learn

  • Declare variables with let and const
  • Work with strings, numbers, and booleans
  • Use template literals for string formatting
  • Understand undefined and null
Playwright AutomationlessonsJump to another lesson

JavaScript --- Variables & Types

Time to write actual code! You installed Node.js. Now let’s learn the first building blocks of JavaScript.

What is a Variable?

userName
""Alice""

can change (let)

PI
3.14

cannot change (const)

let name = "Alice";
  • let --- create a new variable
  • name --- the label
  • = --- put this value in the box (NOT “equals”)
  • "Alice" --- the value

let vs const

let — value can change

  • Like a whiteboard: erase and rewrite
  • Use when a value will change
  • Example: score = 0 then score = 10

const — value is locked

  • Like a permanent marker: stays forever
  • Use by default for most values
  • Reassigning it throws an error

VerdictDefault to const. Reach for let only when the value truly needs to change.

 
let score = 0;
score = 10;       // ok

const birthYear = 1998;
birthYear = 2000; // ERROR!

Quick check

Question 1 of 10 correct

Which keyword should you use for a value that will NEVER change, like a birth year?

Data Types

text
""hi""
age
25
isOn
true
empty
null
nothing
undefined
const greeting = "Hello!";      // string
const age = 25;                 // number
const isLoggedIn = true;        // boolean
let username;                   // undefined (no value yet)
let selectedUser = null;        // null (intentionally empty)

typeof --- Check the Type

node
# Check the type of each value$ typeof 'hello''string'$ typeof 42'number'$ typeof true'boolean'$ typeof undefined'undefined'$ typeof null'object'  // famous JS bug since 1995!

Try it in your terminal!

console.log() --- Your Best Friend

Print anything to see what it is. Developers use this constantly to debug.

const name = "Alice";
console.log(name);        // Alice
console.log(typeof name); // string
console.log("Name:", name, "Age:", 25);  // Name: Alice Age: 25

Template Literals

Old way: glue strings with +. New way: backticks + ${}.

Old: concatenation with +

  • Uses regular quotes + plus signs
  • Hard to read with many variables
  • Easy to mess up spacing

New: template literals

  • Uses backticks and ${variable}
  • Reads like a sentence
  • Math works too: ${age + 1}
 
const name = "Alice";
const age = 25;

// Old
const old = "Hello, " + name + "! You are " + age + ".";

// New
const modern = `Hello, ${name}! You are ${age}.`;
// Math inside too:
`Next year you'll be ${age + 1}`;

Quick check

Template literals are wrapped with (the key left of 1 on your keyboard).

Naming Variables

Rules: start with letter/_/$, no spaces, no reserved words. Booleans often start with is, has, can.

Common Mistakes

Practice Time

Exercise 1: Declare Variables and Use Template Literals

Fill in the blanks to declare variables and create a greeting using a template literal.

// Declare a constant for the user's name
 username = "Sam";

// Declare a variable for the score (it will change later)
 score = 0;

// Create a greeting using a template literal
const greeting = Hello, ! Your score is .;

console.log(greeting);
// Output: Hello, Sam! Your score is 0.

Exercise 2: Fill in the Blank

To create a variable that cannot be changed later, use

Exercise 3: Match Values to Their Types

Match each value to its JavaScript data type:

Exercise 4: Check Your Understanding

Question 1 of 30 correct

What happens if you try to run this code? const color = "blue"; color = "red";