JavaScript Fundamentals

The Building Blocks

At its heart, programming is about storing and manipulating information. In JavaScript, we store information in variables. Think of a variable as a labeled box where you can keep a value. You give it a name so you can refer to it later.

Modern JavaScript gives us two main ways to declare a variable: let and const. Use let for values that might change, and const for values that should never change (constants). While you might see var in older code, it's best to stick with let and const because they have more predictable behavior.

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

// Use 'const' for a value that won't change.
const birthday = '1990-01-15';
// birthday = '1991-02-20'; // This would cause an error!

The values we store in variables come in different flavors, called data types. The most common ones are strings (text), numbers, and booleans (true or false).

let greeting = "Hello, world!"; // A string
const year = 2024;           // A number
let isLoggedIn = true;         // A boolean

You'll also encounter two special values: null, which represents the intentional absence of any value, and undefined, which means a variable has been declared but not yet assigned a value. They seem similar, but null is something you set on purpose, while undefined is usually the default.

Making Decisions and Repeating Actions

Code isn't very useful if it just runs straight from top to bottom. We need it to make decisions and perform repetitive tasks. That's where control structures come in.

The most common way to make a decision is with an if...else statement. It's simple: if a condition is true, do one thing. Otherwise, do something else.

let temperature = 75;

if (temperature > 80) {
  console.log("It's a hot day!");
} else {
  console.log("It feels great outside.");
}

When you have many possible conditions to check against a single value, a switch statement can be cleaner than a long chain 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('Just another day.');
}

For repetitive tasks, we use loops. The for loop is a workhorse for running a block of code a specific number of times.

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

Another option is the while loop, which continues to run as long as its condition remains true. It's useful when you don't know in advance how many times you need to loop.

Packaging Your Code

As your programs grow, you'll find yourself writing the same bits of logic over and over. Functions let you package up a block of code, give it a name, and run it whenever and wherever you want. Think of a function as a recipe: you define the steps once, then you can follow that recipe anytime you want to make the dish.

Functions help you write DRY code: Don't Repeat Yourself.

Functions can take inputs, called parameters, and can produce an output, called a return value.

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

// Now we can call the function.
const result = add(5, 3); // result is now 8

An important concept related to functions is scope. Scope determines where your variables are accessible. Variables declared inside a function are generally not available outside of it. This is a good thing—it prevents different parts of your code from accidentally interfering with each other.

Modern JavaScript Features

JavaScript is constantly evolving. A major update in 2015, known as ES6, introduced features that are now standard. We've already seen let and const, which provide better scoping rules than the old var keyword.

Another great addition is the arrow function (=>), which offers a more concise syntax for writing functions, especially for simple, one-line operations.

// Traditional function expression
const multiply_old = function(a, b) {
  return a * b;
};

// Arrow function version
const multiply_new = (a, b) => a * b;

console.log(multiply_new(4, 5)); // Outputs 20

Finally, ES6 introduced Promises. A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. While we won't dive deep into asynchronous programming here, it's helpful to recognize what a Promise is.

Think of a Promise as an IOU. You might not have the value right now, but you have a placeholder for it that will eventually be resolved or rejected.

These fundamentals—variables, control structures, and functions—are the bedrock of JavaScript. Mastering them will give you a solid foundation for building complex applications on both the front-end with React and the back-end with Node.js.

MERN Stack Web Development