JavaScript Fundamentals: Variables and Types

Every JavaScript program starts with data. Before you can build anything useful, you need to understand how to store and manipulate information. This tutorial covers the foundation every JavaScript developer needs: variables and types.

Declaring Variables

JavaScript gives you three ways to declare variables: var, let, and const. Each serves a different purpose.

let — Block-Scoped Variables

The modern way to declare variables that change:

let score = 0;
score = score + 10;  // Reassignment works
console.log(score);  // Output: 10

Variables declared with let are scoped to the block where they’re defined:

if (true) {
  let message = "Hello from inside";
  console.log(message);  // Works here
}
console.log(message);  // ReferenceError: message is not defined

const — Constants That Don’t Change

Use const for values that won’t be reassigned:

const API_URL = "https://api.example.com";
const MAX_RETRIES = 3;

// This throws an error:
// MAX_RETRIES = 5;  // TypeError: Assignment to constant variable

Objects and arrays declared with const can still be modified:

const user = { name: "Alice" };
user.name = "Bob";  // This works - we're mutating the object
// user = {};       // This throws - can't reassign

var — The Old Way

Avoid var in modern code. It has function scope (not block scope) and hoisting behavior that causes confusing bugs:

function oldStyle() {
  if (true) {
    var secret = "I'm hoisted to function scope";
  }
  console.log(secret);  // Works - var ignores blocks
}

Rule of thumb: Use const by default. Use let when you need to reassign. Never use var.

Primitive Types

JavaScript has seven primitive types.

string

Textual data enclosed in quotes:

let greeting = "Hello, World!";
let name = 'Alice';
let template = `Welcome, ${name}!`;  // Template literal
console.log(template);  // Output: Welcome, Alice!

number

All numbers are floating-point (no separate integer type):

let age = 25;
let price = 19.99;
let negative = -10;
let scientific = 2.5e6;  // 2,500,000

Special values: Infinity, -Infinity, and NaN (Not a Number):

console.log(10 / 0);       // Infinity
console.log(Math.sqrt(-1)); // NaN

boolean

True or false values:

let isActive = true;
let isComplete = false;

// Boolean context examples
if (isActive) {
  console.log("Running");
}

undefined

A variable declared but not assigned:

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

null

Intentional absence of value:

let user = null;  // Explicitly set to nothing

symbol

Unique identifiers (often used as object keys):

const id = Symbol("user-id");
const anotherId = Symbol("user-id");
console.log(id === anotherId);  // false - each is unique

bigint

For integers larger than 2^53 - 1:

const bigNumber = 9007199254740991n;
const calculated = bigNumber + 1n;

The typeof Operator

Check a value’s type at runtime:

typeof "hello"     // "string"
typeof 42          // "number"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof Symbol("x") // "symbol"
typeof 123n       // "bigint"
typeof {}          // "object"
typeof []          // "object"  - arrays are objects!
typeof null        // "object"  - historical bug, still exists

Type Coercion

JavaScript automatically converts types in certain situations:

String Coercion

"5" + 3    // "53" - number becomes string
"5" - 3    // 2    - string becomes number

Boolean Coercion

Falsy values: false, 0, "", null, undefined, NaN

if ("") {
  console.log("truthy");
} else {
  console.log("falsy");  // This runs
}

Boolean(1)   // true
Boolean(0)   // false
Boolean("x") // true

Equality Comparisons

Use === (strict) instead of == (loose):

5 === "5"   // false - different types
5 == "5"    // true - type coercion happens

null == undefined  // true
null === undefined // false

Best practice: Always use === to avoid surprising behavior.

Working with Numbers

Math Operations

Math.floor(4.9);   // 4
Math.ceil(4.1);    // 5
Math.round(4.5);   // 5
Math.abs(-5);      // 5
Math.max(1, 5, 3); // 5
Math.min(1, 5, 3); // 1

Parsing Strings to Numbers

parseInt("42");       // 42
parseFloat("3.14");   // 3.14
Number("42");         // 42
+"42";                // 42 (unary plus)

parseInt("42px");     // 42 - parses until invalid char
Number("42px");       // NaN - entire string must be valid

Working with Strings

Common Methods

let text = "JavaScript";

// Case
text.toUpperCase();   // "JAVASCRIPT"
text.toLowerCase();   // "javascript"

// Search
text.indexOf("Script");    // 4
text.includes("Java");    // true
text.startsWith("Java");  // true

// Modify
text.replace("Java", "Type");  // "TypeScript"
text.trim();                    // removes whitespace
text.split("");                 // ["J","a","v","a","S","c","r","i","p","t"]

Template Literals

const name = "Alice";
const age = 30;

const intro = `My name is ${name} and I am ${age} years old.`;
console.log(intro);  // My name is Alice and I am 30 years old.

// Multi-line
const html = `
  <div>
    <h1>${name}</h1>
  </div>
`;

Summary

You now understand:

• let for variables that change
• const for constants and objects you won’t reassign
• Seven primitive types: string, number, boolean, undefined, null, symbol, bigint
• Type coercion and why === matters
• How to work with numbers and strings

In the next tutorial, we’ll build on this foundation and explore functions and scope.