No history yet

JavaScript Basics

Storing Information

Think of variables as labeled boxes where you can store information. In JavaScript, you can create a box, give it a name, and put something inside it. We mostly use let to create variables whose contents might change, and const for variables that will stay the same.

// A variable for a score that can change
let score = 0;

// A constant for a name that won't change
const playerName = "Alex";

// We can update the score
score = 10;

// But trying to change playerName would cause an error!
// playerName = "Ben"; // This is not allowed

The information you store has a specific type. JavaScript is flexible, but it's helpful to know the basic data types you'll encounter.

Data TypeDescriptionExample
StringText, wrapped in quotes."Hello, world!"
NumberAny number, with or without decimals.42 or 3.14
BooleanA simple true or false value.true
ObjectA collection of related data.{ color: "red", speed: 120 }
NullAn intentional absence of any value.null
UndefinedA variable that has been declared but not assigned a value.let x; (x is undefined)

Packaging Instructions

Functions are reusable blocks of code that perform a specific task. Think of a function like a recipe. You define the steps once, give it a name, and then you can "call" that recipe whenever you want to cook that dish, without rewriting the steps each time.

// Define a function named 'greet'
function greet() {
  console.log("Hello there!");
}

// Call the function to run its code
greet(); // Outputs: Hello there!

Functions become even more powerful when you can give them ingredients, called parameters, and get a result back, called a return value. This allows you to create flexible, general-purpose tools.

// 'name' is a parameter (an ingredient)
function createGreeting(name) {
  const message = "Hello, " + name + "!";
  return message; // This is the return value (the result)
}

// Call the function with an argument and store the result
let myGreeting = createGreeting("Maria");
console.log(myGreeting); // Outputs: Hello, Maria!

It's important to know that variables declared inside a function are generally only accessible within that function. This is called scope. It prevents variables from different parts of your program from accidentally interfering with each other.

Making Decisions

Code doesn't just run from top to bottom. It often needs to make decisions and repeat actions. Control structures let you direct the flow of your program.

The most common way to make a decision is with an if...else statement. It checks if a condition is true. If it is, one block of code runs; otherwise, another block runs.

let temperature = 15;

if (temperature > 25) {
  console.log("It's a hot day!");
} else {
  console.log("It's not so hot.");
}
// Outputs: It's not so hot.

When you need to repeat a task multiple times, you use a loop. A for loop is great when you know exactly how many times you want to repeat an action.

// This loop runs 3 times
for (let i = 1; i <= 3; i++) {
  console.log("This is loop number " + i);
}
// Outputs:
// This is loop number 1
// This is loop number 2
// This is loop number 3

If you need to check multiple specific values, a switch statement can be cleaner than a long series of if...else if statements.

let day = "Tuesday";

switch (day) {
  case "Monday":
    console.log("Start of the work week.");
    break;
  case "Friday":
    console.log("Almost the weekend!");
    break;
  default:
    console.log("It's some other day.");
}
// Outputs: It's some other day.

Grouping Related Data

As programs grow, you need a way to organize related information. In JavaScript, the primary way to do this is with objects. An object is a collection of key-value pairs. Think of a real-world object, like a car. It has properties (color, make, model) and can perform actions (start, stop, accelerate).

In JavaScript, properties are the data, and the actions are functions attached to the object, which we call methods.

// An object representing a car
const car = {
  // Properties
  make: "Honda",
  model: "Civic",
  color: "Blue",
  isRunning: false,

  // Method
  start: function() {
    this.isRunning = true;
    console.log("Engine started!");
  }
};

You can access an object's properties and call its methods using dot notation.

// Accessing a property
console.log("My car is a " + car.make);
// Outputs: My car is a Honda

// Calling a method
car.start();
// Outputs: Engine started!

console.log(car.isRunning);
// Outputs: true

Ready to check your understanding?

Quiz Questions 1/6

When declaring a variable in JavaScript, which keyword should you use if you expect its value to be reassigned later in the program?

Quiz Questions 2/6

What is the primary role of a return statement in a JavaScript function?

These are the fundamental building blocks of JavaScript. With variables, functions, control structures, and objects, you have the tools to start building powerful and interactive programs.