Variables and Data Types

What is JavaScript?

JavaScript (JS) is the programming language of the web. While HTML provides structure and CSS provides style, JavaScript adds behaviour: responding to clicks, fetching data, animating elements, and building interactive user interfaces.

Every browser can run JavaScript natively, which makes it the only programming language that works directly in the browser without any installation.

Declaring Variables

A variable is a named container that stores a value. JavaScript gives you three keywords to declare variables: var, let, and const.

var (avoid in modern code)

var was the original way to declare variables. It has function scope and can be redeclared, which leads to confusing bugs:

var name = "Alice";
var name = "Bob"; // No error — redeclares silently
console.log(name); // "Bob"

Avoid var in new code. Use let or const instead.

let (for values that change)

let declares a block-scoped variable that can be reassigned:

let score = 0;
score = 10; // Allowed — reassignment works
console.log(score); // 10

const (for values that do not change)

const declares a block-scoped variable that cannot be reassigned. Use it by default:

const siteName = "CareerEx";
// siteName = "Other"; // Error: Assignment to constant variable
console.log(siteName); // "CareerEx"

Rule of thumb: use const by default. Switch to let only when you know the value will change.

Primitive Data Types

JavaScript has six primitive data types. A primitive is a simple value, not an object.

String

A string is a sequence of characters wrapped in quotes. You can use single quotes, double quotes, or backticks:

const firstName = "Amara";
const lastName = 'Okonkwo';
const greeting = `Hello, ${firstName}!`; // Template literal

console.log(greeting); // "Hello, Amara!"

Backtick strings are called template literals. They allow you to embed expressions with ${expression} syntax and span multiple lines.

Number

JavaScript has one number type for both integers and decimals:

const age = 24;
const price = 9.99;
const negativeTemp = -5;

console.log(typeof age); // "number"
console.log(typeof price); // "number"

Boolean

A boolean is either true or false:

const isLoggedIn = true;
const hasSubscription = false;

console.log(typeof isLoggedIn); // "boolean"

null

null represents the intentional absence of a value:

let selectedUser = null; // No user selected yet

undefined

undefined means a variable has been declared but not assigned a value:

let emailAddress;
console.log(emailAddress); // undefined

The typeof Operator

The typeof operator returns a string describing the type of a value:

console.log(typeof "hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (a known JavaScript quirk)
console.log(typeof function(){}); // "function"

Note: typeof null returns "object" — this is a historical bug in JavaScript that was never fixed to avoid breaking existing code.

Type Coercion

JavaScript will sometimes automatically convert one type to another. This is called type coercion:

console.log("5" + 2);  // "52" (number coerced to string)
console.log("5" - 2);  // 3   (string coerced to number)
console.log(true + 1); // 2   (true coerced to 1)
console.log(false + 1); // 1  (false coerced to 0)

The + operator triggers string coercion when one side is a string. The -, *, and / operators trigger numeric coercion.

To convert types explicitly (which is safer):

const numStr = "42";
const num = Number(numStr);   // 42
const str = String(100);      // "100"
const bool = Boolean(0);      // false (0 is falsy)
const bool2 = Boolean("hi");  // true  (non-empty string is truthy)

Template Literals

Template literals (backtick strings) are the modern way to build dynamic strings:

const name = "Fatima";
const course = "Frontend Engineering";
const progress = 45;

const message = `Hi ${name}, you are ${progress}% through ${course}.`;
console.log(message);
// "Hi Fatima, you are 45% through Frontend Engineering."

// Multi-line strings
const card = `
  Name: ${name}
  Course: ${course}
  Progress: ${progress}%
`;

You can include any JavaScript expression inside ${}, including calculations and function calls.

Key Takeaways

• Use const by default and let when you need to reassign; avoid var
• JavaScript has six primitive types: string, number, boolean, null, undefined, and symbol
• The typeof operator returns a string identifying a value's type
• Type coercion happens automatically; use explicit conversion (Number(), String(), Boolean()) for clarity
• Template literals use backticks and allow embedded expressions with ${} syntax

Practice Exercise

Open the JavaScript tab and complete the following:

1. Declare a const called yourName with your name as a string
2. Declare a let called currentYear with the number 2026
3. Declare a const called isStudent with the value true
4. Use console.log(typeof yourName) to check each variable's type
5. Build a template literal that says "My name is [name] and I started learning in [year]"
6. Try adding a string and a number together and log the result