JavaScript Basics

Storing Information

Think of your computer's memory as a giant collection of labeled boxes. To do anything useful in programming, we need a way to store information in these boxes and retrieve it later. In JavaScript, we do this using variables.

A variable is just a name for a box. We can put data inside it, and then use the name to refer to that data. We create variables using the keywords let and const. Use let for values that might change, and const for values that should never change.

let userAge = 30;
userAge = 31; // This is fine, the value can change.

const birthYear = 1993;
// birthYear = 1994; // This would cause an error!

The information we store comes in different forms, called data types. JavaScript is flexible, but it's important to know the basic types you'll be working with.

Numbers: For any kind of number, including decimals. let price = 19.99; Strings: For text. Always wrap them in quotes. const name = "Alice"; Booleans: For true or false values. let isLoggedIn = true; Null: Represents the intentional absence of a value. let selectedUser = null; Undefined: A variable that has been declared but not yet assigned a value is undefined.

Making Things Happen

Once we have data stored in variables, we need to be able to work with it. That's where operators come in. They are the symbols that perform actions, like addition or comparison.

Operator Type	Symbol	Example	Description
Arithmetic	`+`, `-`, `*`, `/`, `%`	`5 + 2`	Performs math calculations.
Assignment	`=`, `+=`	`x += 5`	Assigns a value to a variable.
Comparison	`===`, `!=`, `>`, `<`	`age > 18`	Compares two values and returns `true` or `false`.
Logical	`&&`, `		`,` !`

One of the most important distinctions to remember is between the strict equality operator (===) and the loose equality operator (==). The strict version checks if two values are equal and of the same data type. The loose version tries to convert the types before comparing. To avoid unexpected behavior, it's best practice to always use the strict operator.

console.log(7 === "7"); // false (number vs. string)
console.log(7 == "7");  // true (string is converted to number)

Making Decisions

Programs rarely run the same way every time. They need to respond to different inputs and conditions. We control this flow using conditional statements and loops.

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

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 we need to repeat an action multiple times. That's what loops are for. A for loop is great when you know exactly how many times you want to repeat something.

// This loop will print numbers 1 through 5
for (let i = 1; i <= 5; i++) {
  console.log("Count:", i);
}

A while loop is better when you want to keep repeating an action as long as a certain condition remains true.

let battery = 100;

while (battery > 0) {
  console.log("Using the device...");
  battery = battery - 10;
  console.log("Battery level:", battery + "%");
}

console.log("Battery empty! Please charge.");

Reusable Code Blocks

If you find yourself writing the same lines of code over and over, it's time to create a function. A function is a reusable block of code that performs a specific task. You can give it data (called parameters) and it can give you data back (a return value).

// This function takes two numbers and returns their sum
function add(num1, num2) {
  return num1 + num2;
}

const result = add(5, 10); // result is now 15

Functions also introduce the concept of scope. Variables declared inside a function are only accessible within that function. This is called local scope, and it prevents conflicts with variables elsewhere in your code.

Finally, let's look at a simple way to group related data: objects. An object is a collection of key-value pairs. Think of it like a real-world object. A car has a color, a make, and a model. In JavaScript, we can represent that like this:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2022,
  isRunning: false
};

// Accessing properties with dot notation
console.log(car.model); // "Camry"

// Changing a property
car.isRunning = true;

Objects are incredibly powerful for organizing complex information in a structured way.

Time to check your understanding of these core concepts.

Quiz Questions 1/5

When declaring a variable in JavaScript, which keyword should you use if you know the value will never be reassigned?

Quiz Questions 2/5

What is the result of the following expression in JavaScript: 5 == "5"?

These are the fundamental building blocks of JavaScript. Mastering variables, operators, control structures, functions, and objects will give you a solid foundation for building anything you can imagine on the web.

JavaScript Fundamentals for TypeScript