No history yet

JavaScript Fundamentals

Storing Information

At its heart, programming is about working with information. The first step is to have a way to store and label that information. In JavaScript, we do this using variables.

variable

noun

A named container for storing a piece of data. The value in the container can change or vary.

Think of a variable as a labeled box where you can put something. You give the box a name, and later you can look inside to see what's there, or even replace it with something else. We create variables using the keywords let and const.

Use let for values that might change. Use const for values that should never change (constants).

// Use 'let' for a value that might change.
let currentScore = 0;
currentScore = 10; // This is fine

// Use 'const' for a value that won't change.
const pointsPerGoal = 5;
// pointsPerGoal = 10; // This would cause an error!

These boxes don't just hold anything; they hold specific types of data. JavaScript has several fundamental data types you'll use all the time.

Data TypeDescriptionExample
stringText, wrapped in quotes."Hello, world!" or 'JavaScript'
numberAny kind of number, including decimals.42 or 3.14
booleanA simple true or false value.true or false
undefinedA variable that has been declared but not set.let name; // name is undefined
nullAn intentional absence of any value.let user = null;

Knowing the type of your data is crucial because it determines what you can do with it. You can add two numbers, but you can't divide a string by a boolean.

Making Things Happen

Once you have data stored in variables, you need a way to work with it. That's where operators come in. Operators are the symbols that perform actions, like addition or comparison.

// Arithmetic Operators
let total = 10 + 5; // total is 15
let difference = 10 - 5; // difference is 5
let product = 10 * 5; // product is 50
let quotient = 10 / 5; // quotient is 2

// Assignment Operators
let score = 100;
score += 10; // Same as score = score + 10. score is now 110.

// Comparison Operators
let a = 5;
let b = "5";

console.log(a == b);  // true, because it only checks value
console.log(a === b); // false, because it checks value AND type

A key distinction to remember is between == (loose equality) and === (strict equality). The strict version, ===, is safer because it doesn't just check if the values are the same; it also checks if their data types are the same. It's a best practice to always use === for comparisons.

We can also combine conditions using logical operators.

&& (AND): Both conditions must be true. || (OR): At least one condition must be true. ! (NOT): Flips a boolean value from true to false, or false to true.

Making Decisions

Your code often needs to make choices and run different lines depending on the situation. This is called conditional logic, and it's the foundation of how programs seem "smart." The most common way to do this is with an if...else statement.

let temperature = 75;

if (temperature > 80) {
  console.log("It's hot outside!");
} else if (temperature < 60) {
  console.log("Better bring a jacket.");
} else {
  console.log("The weather is perfect.");
}

Sometimes you need to repeat an action multiple times. Instead of copying and pasting code, you can use a loop. A for loop is great when you know exactly how many times you want to repeat something.

// This loop will run 5 times
for (let i = 1; i <= 5; i++) {
  console.log("This is loop number " + i);
}

A while loop is useful when you want to keep repeating an action as long as a certain condition is true, but you don't know ahead of time how many repetitions that will be.

Reusable Blocks of Code

As your programs grow, you'll find yourself writing the same logic over and over. Functions are the solution. They are reusable blocks of code that you can name and run whenever you need them. They can take inputs (called parameters) and produce an output (a return value).

// This function is defined once
function greet(name) {
  return "Hello, " + name + "!";
}

// And can be used many times
let message1 = greet("Alice"); // "Hello, Alice!"
let message2 = greet("Bob");   // "Hello, Bob!"

A function's job is to perform a specific task. By breaking your code into small, focused functions, your programs become much easier to read, debug, and maintain.

One of the most important concepts related to functions is scope. Scope determines where your variables are accessible. A variable declared inside a function is only available within that function. This is called local scope.

function calculateTip(bill) {
  let tipAmount = bill * 0.20; // tipAmount is local to this function
  return tipAmount;
}

// console.log(tipAmount); // This would cause an error! tipAmount doesn't exist out here.

This is a good thing! It prevents variables in different parts of your code from accidentally interfering with each other.

A powerful feature related to scope is a closure. A closure happens when a function remembers the variables that were in its scope when it was created, even if it's executed in a different scope later. This allows an inner function to access variables from its outer, containing function.

function createGreeter(greeting) {
  // The inner function 'remembers' the 'greeting' variable
  return function(name) {
    console.log(greeting + ", " + name);
  };
}

// Create a specialized greeter function
const sayHello = createGreeter("Hello");

// Now use it
sayHello("Zoe"); // Prints: "Hello, Zoe"

Here, sayHello is a closure. It was created by createGreeter and it holds onto the greeting variable ("Hello") from its parent's scope. Closures are a cornerstone of more advanced JavaScript patterns.

Quiz Questions 1/5

In JavaScript, a variable declared with the const keyword ________.

Quiz Questions 2/5

What is the primary reason to prefer the strict equality operator (===) over the loose equality operator (==)?

These are the fundamental building blocks of JavaScript. Mastering variables, operators, control structures, and functions will give you the solid base you need to build anything you can imagine.