Skip to content

JavaScript Basics: A Beginner's Guide

Welcome to JavaScript! This guide will walk you through the very basics of the language. We'll start simple and build up your knowledge step by step.

1. Variables, Data Types, and Operators

Variables: Storing Information

Think of a variable as a labeled box where you can store data. In modern JavaScript, we use let and const to create (declare) these boxes.

  • let: Use this when you expect the value inside the box to change later.
  • const: Use this when the value should remain constant (never change).
// Using let (can change)
let myAge = 25;
myAge = 26; // It's my birthday!

// Using const (cannot change)
const myName = "Alice";
// myName = "Bob"; // ERROR! You can't change a const variable.

Data Types: Kinds of Information

What kind of things can we put in those boxes?

  1. Numbers: Just regular numbers (e.g., 42, 3.14).
  2. Strings: Text, wrapped in quotes (e.g., "Hello World!", 'JavaScript').
  3. Booleans: True or False values (e.g., true, false).
  4. Undefined: A variable that has been declared but not assigned a value yet.
  5. Null: A special value meaning "nothing" or "empty".
let score = 100;           // Number
let playerName = "Mario";  // String
let isGameOver = false;    // Boolean
let nextLevel;             // Undefined (no value yet)
let bonusPoints = null;    // Null (explicitly set to nothing)

Operators: Doing the Math

We use operators to perform actions on variables and values.

  • Math Operators: + (add), - (subtract), * (multiply), / (divide).
  • Comparison Operators: > (greater than), < (less than), === (equal to).
let a = 10;
let b = 5;

let sum = a + b; // 15
let isGreater = a > b; // true

// ALWAYS use === (three equals) to check if two things are exactly the same
let isSameName = myName === "Alice"; // true

2. Control Flow (Making Decisions and Repeating code)

If/Else: Making Decisions

Sometimes you only want code to run if a certain condition is true. We use if and else statements for this.

let temperature = 30;

if (temperature > 25) {
    console.log("It's a hot day!");
} else {
    console.log("The weather is nice.");
}

Loops: Repeating Code

If you want to do the same thing multiple times, you use a loop. The most common is the for loop.

// This loop will run 5 times, counting from 0 to 4
for (let i = 0; i < 5; i++) {
    console.log("Counting: " + i);
}

3. Functions (Reusable Blocks of Code)

A function is a block of code designed to perform a particular task. You write it once, and you can use it as many times as you like.

Regular Functions

// 1. Defining the function
function greetUser(userName) {
    console.log("Hello, " + userName + "!");
}

// 2. Calling (using) the function
greetUser("Alice"); // Outputs: Hello, Alice!
greetUser("Bob");   // Outputs: Hello, Bob!

Arrow Functions

Arrow functions are a newer, shorter way to write functions in JavaScript. They are very common!

// The same greet function, written as an arrow function
const greetUserArrow = (userName) => {
    console.log("Hello, " + userName + "!");
};

greetUserArrow("Charlie"); // Outputs: Hello, Charlie!

// Even shorter! If it's a simple math operation:
const addNumbers = (x, y) => x + y;

let result = addNumbers(10, 20); // result is 30

4. Arrays and Objects (Storing Collections of Data)

Arrays: Lists of Things

An array is a special variable that can hold more than one value at a time. Think of it like a shopping list.

// An array of strings
let fruits = ["Apple", "Banana", "Orange"];

// Accessing items (Arrays start counting at 0!)
console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana

// Adding a new item to the end of the list
fruits.push("Mango");

Objects: Things with Properties

An object is a collection of named properties. Think of it like a dictionary definition or a describing a physical object (like a car).

// An object describing a person
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    isStudent: false
};

// Accessing object properties
console.log(person.firstName); // John
console.log(person.age);       // 30

// Changing a property
person.age = 31;

Next Steps: These are the foundational building blocks. Take your time practicing writing variables, functions, and working with arrays before moving on to the more complex topics!