Day 1 of Learning JavaScript: Core Foundations (Variables, Functions, and Syntax)

A beginner-friendly guide to understanding how data and logic actually work under the hood.

It's not a bug it's a lifestyle

What is JavaScript?

Before you write a single line of code, you need to understand what you are actually dealing with. JavaScript was not meticulously planned over a decade by an architecture committee. It was famously prototyped in exactly ten days in May of 1995 by Brendan Eich at Netscape.

Originally, it was just a tiny scripting language designed to make websites slightly interactive. It allowed a web page to validate a form before submitting it to the server, or perhaps make an image swap when you hovered over it. Nobody expected it to become the backbone of the global economy.

Because of this rushed birth, JavaScript has deep structural flaws. It has bizarre quirks. It will let you do things that other, stricter languages would immediately crash over. But because it shipped in the browser, it won the monopoly. It is the only native programming language that every single web browser on earth understands. You cannot build a modern web application without it.

Where Does JavaScript Run?

For the first fourteen years of its existence, JavaScript was trapped inside the web browser. If you wanted to run JavaScript, you had to write an HTML file, link a JavaScript file to it using a <script> tag, and open the HTML file in Internet Explorer or Chrome.

The browser provides a specific environment. It gives JavaScript tools to interact with the webpage, like the Document Object Model (DOM), allowing it to create buttons, change colors, and read user input.

In 2009, a developer named Ryan Dahl did something revolutionary. He ripped the JavaScript engine (called V8) straight out of the Google Chrome browser. He wrapped it in a standalone program that could be installed directly onto a computer's operating system. He called this creation Node.js.

Node.js liberated JavaScript. It allowed developers to write backend servers, interact with file systems, and build desktop applications using the exact same language they were already using for the front of the website.

When you write JavaScript today, you are almost always writing it for one of those two environments. The core language (variables, functions, loops) remains exactly the same in both places.

How to Setup and Run Your Code

We will not be touching the browser for a while. Learning core logic while simultaneously fighting with HTML and CSS is a recipe for overwhelming frustration. We will run our code exclusively in the terminal using Node.js.

To get started, you must install Node.js onto your machine. Go to the official Node.js website (nodejs.org) and download the LTS (Long Term Support) version. Run the installer just like any standard application.

Once it is installed, open your terminal. On Mac, this is the Terminal app. On Windows, open Command Prompt or PowerShell. Type the following command and hit enter:

node -v

If it prints out a version number (like v20.11.0), your installation was successful.

To actually run code, create a completely empty folder on your computer. Open your code editor (Visual Studio Code is the industry standard) and open that folder. Create a new file named index.js.

Inside index.js, write the following instruction:

console.log("System initialized.");

Save the file. Open the terminal directly inside your code editor. Run the file by typing the word node followed by a space and the name of your file:

node index.js

If you see System initialized. print in the terminal, you have successfully set up a professional JavaScript development environment.

The Grammar of the Web

The Console, Statements, and Punctuation

Before we write any complex logic, we need to understand how JavaScript expects us to talk to it. Every language has punctuation and structure. JavaScript relies heavily on a few specific symbols to understand your intent.

The very first tool you need is console.log(). This is your window into the code. It prints whatever you give it directly to the terminal. When you are building a complex application and something breaks, your first instinct will be to print the data to see what it actually looks like.

console.log("Hello, World!");
// "Hello, World!"

Notice the parentheses () immediately after the word log. In JavaScript, parentheses are the trigger. They tell the JavaScript engine to execute an action right now. If you drop the parentheses, you are just pointing at the action instead of doing it.

When you need to group multiple actions together, you use curly braces {}. Think of curly braces as a container or a room. They wrap around a block of code so the engine knows those specific lines belong together and should be treated as a single unit. You will see these everywhere when we start writing functions and loops.

You might also notice the semicolon ; at the end of the line. Semicolons are the periods of JavaScript. They tell the engine that a specific thought (called a statement) is finished. JavaScript has a feature called Automatic Semicolon Insertion (ASI). If you forget a semicolon, the engine tries to guess where it belongs and inserts it for you behind the scenes. This sounds helpful, but it is actually a massive trap. I once spent four hours debugging a broken application because ASI guessed wrong and cut a mathematical statement in half. Always write your own semicolons to explicitly tell the engine when your thought is complete.

Now for the equals sign. In regular math, an equals sign means two things are identical. In JavaScript, a single equals sign = means assignment. It takes whatever value is on the right side and stuffs it into the container on the left side.

// Assignment: Put the number 10 into the score container
let score = 10;

If you actually want to ask a question and check if two things are identical in value and type, you must use a triple equals sign ===.

// Equality: Is the score exactly equal to 10?
console.log(score === 10);
// true

Mixing up = (assignment) and === (comparison) is the single most common mistake you will make in your first month of writing code.

Variables — Three Ways to Store a Value

What is a Variable?

Before we talk about the specific keywords in JavaScript, we need to understand what a variable actually is. In the simplest terms, a variable is a labeled box in your computer's memory. You create the box, you write a name on the outside of it, and you put some data inside it. Later in your program, instead of remembering the exact data, you just ask the computer to look inside the box with that specific label.

Why Do We Need Them?

Let's say you're building a video game, and the player starts with 100 health. If you just hardcoded the number 100 everywhere in your code, your program would have no way to remember when the player gets hit. You need a way to store that data dynamically. A shopping cart needs to remember what items you clicked. A login screen needs to remember your email address. Without variables, a program has zero memory. It would forget everything the millisecond after it happened.

The Basic Syntax

To create a variable, you need two things: a special keyword that tells JavaScript you are building a box, and the name you want to write on the outside of the box. You then use the equals sign = to put data inside.

let playerHealth = 100;

Let, Const, and the Ghost of Var

Programs need to remember things. A shopping cart needs to remember what items you clicked. A game needs to remember your health. We store this memory in variables. You can think of a variable as a labeled box in your computer's RAM.

JavaScript gives us three ways to create these boxes, but you only need to care about two of them.

The absolute default choice should always be const. It stands for constant. When you put a primitive value into a const variable, you are locking the box. The engine guarantees that the label on that box will never be peeled off and slapped onto a different box. This removes an entire category of bugs where data changes unexpectedly while your program is running.

const maxLives = 3;

If you try to cheat and change a const value later, JavaScript will immediately throw a TypeError: Assignment to constant variable and crash your program.

Sometimes, data actually needs to change. A game score goes up. A loading state finishes. When you know the value will definitely be updated later in the program's lifecycle, use let.

let currentScore = 0;
//
// Later in the program, you can change it without using the 'let' keyword again
currentScore = 10;

You might stumble across old tutorials using var. Ignore them entirely. var was the original way to declare variables in JavaScript. It has bizarre, outdated scoping rules that cause variables to leak out of their intended blocks and overwrite each other. Modern development abandoned var years ago.

When naming these variables, JavaScript is extremely strict about case-sensitivity. The variable myScore is completely different from myscore. The standard convention in the JavaScript ecosystem is camelCase, where the first word is lowercase and every subsequent word is capitalized.

The Primitive Data Types

Variables are just empty boxes. The actual data you put inside the box is called a type. You will spend your entire career working with five basic primitives. A primitive is the simplest form of data. It is not an object, and it has no methods attached to it.

// 1. Number (Decimals and integers are exactly the same type under the hood)
const price = 19.99;
//
// 2. String (Text wrapped in single, double, or backtick quotes)
const greeting = "Hello Alice";
//
// 3. Boolean (Strictly true or false, used for logic)
const isLoggedIn = false;

The final two primitives represent emptiness, but they do it in vastly different ways. This trips up many beginners.

// 4. Undefined (JavaScript's empty)
let userAge;
console.log(userAge); // undefined
//
// 5. Null (The Developer's empty)
let activeSubscription = null;

When you create a variable and forget to put anything inside it, JavaScript automatically fills it with undefined. It essentially means, "I know this box exists, but I have no idea what goes here yet."

When you want to explicitly declare that a box is empty on purpose, you use null. You are telling the next developer reading your code that you intentionally wiped this value, or that the data specifically does not exist.

Functions — Reusable Blocks of Code

What is a Function?

A function is a self-contained block of code designed to perform one specific task. You can think of a function as a recipe. It is a set of instructions that you write down once. After you write it, you can tell the computer to execute those instructions (or "cook the meal") as many times as you want, from anywhere in your application.

Why Do We Need Them?

Say you're building a checkout page that calculates sales tax. If you didn't have functions, you'd be stuck copy-pasting the exact same math formula every single time a customer clicked 'Add to Cart'. This causes two massive problems. First, your file becomes thousands of lines long. Second, if the tax rate changes next year, you have to manually find and update that formula in hundreds of different places. Functions solve this by letting you write the logic once and reuse it endlessly.

The Basic Syntax

To create a function, you use the function keyword, give it a descriptive name, and wrap your instructions inside curly braces {}.

function sayHello() {
  console.log("Hello there!");
}
//
// Tell the computer to actually run the instructions
sayHello();

Defining and Calling Functions

Now that we know the basic structure, we need to understand how functions handle real data. The most traditional way to create one is a function declaration. You use the function keyword, give it a name, and wrap the instructions in curly braces.

// Defining the function (writing the recipe)
function greet(firstName) {
  return "Welcome, " + firstName;
}
//
// Calling the function (cooking the meal)
const message = greet("Alice");
console.log(message); // "Welcome, Alice"

There is a vital vocabulary distinction here that many developers mix up. When you define the function, firstName is the parameter. It is just an empty parking spot waiting for data. When you actually call the function and pass in "Alice", that specific string is the argument. The argument is the actual car parking in the spot.

Notice the return keyword. A function is like a vending machine. You put arguments in, it does some internal work, and it spits a finalized value back out. If you forget to include a return statement, JavaScript does not crash. It simply assumes you meant to return nothing, and secretly returns undefined behind your back.

Sometimes other developers (or you, an hour later) forget to pass the required arguments. You can protect your functions from breaking by setting default parameters.

function calculateTax(amount, rate = 0.05) {
  return amount * rate;
}
//
console.log(calculateTax(100)); // 5 (uses the default 0.05 rate)
console.log(calculateTax(100, 0.10)); // 10 (overrides the default)

There is a nasty trap here regarding emptiness. If you explicitly pass undefined into that function, it will trigger the default 0.05 rate. If you pass null, JavaScript sees that as a real, intentional value (the Developer's empty) and will attempt to multiply 100 * null, which bizarrely results in 0.

Arrow Functions and Implicit Returns

Modern JavaScript introduced a shorter way to write functions called arrow functions. They strip away the function keyword and use a fat arrow => instead. While they do handle the this context differently (which we will cover in advanced topics), their primary benefit for beginners is cleaner syntax.

Arrow functions come in several distinct variations depending on how much boilerplate syntax you want to cut.

1. Full Block Body. This looks very similar to the traditional function. You need curly braces to define the block, and you must use an explicit return keyword if you want to pass data back out.

const add = (a, b) => {
  return a + b;
};

2. Concise Body (Implicit Return). If your function only does one single mathematical or logical operation, you can delete the curly braces and the return keyword entirely. The arrow automatically returns whatever follows it on the same line.

const multiply = (a, b) => a * b;

3. Single Parameter. If your function takes exactly one parameter, you can completely delete the parentheses around it for maximum minimalism.

const double = number => number * 2;

4. Zero Parameters. If your function takes no parameters at all, you must use empty parentheses. You cannot just leave the left side of the arrow blank.

const rollDice = () => 4;

5. Returning an Object Literal (The Trap). This is where beginners get stuck for hours. If you want to implicitly return an object using the concise syntax, JavaScript gets incredibly confused. It sees the curly braces of your object and thinks they are the curly braces of a function block. It then looks for a return keyword, fails to find one, and returns undefined.

You fix this by wrapping the entire object in parentheses, forcing the engine to evaluate it as an expression.

// WRONG: The engine thinks the braces are a block. Returns undefined.
const getBadUser = () => { name: "Alice" };
//
// RIGHT: The parentheses force it to evaluate the object. Returns the object.
const getGoodUser = () => ({ name: "Alice" });

Conditionals — Making Decisions

What is a Conditional?

A conditional is a crossroads in your code. It is a way to ask the computer a yes-or-no question. Based on the answer to that question, the computer will travel down one path and completely ignore the other.

Why Do We Need Them?

If your code didn't have conditionals, it would just be a rigid, brainless list of instructions that runs identically every single time. It would be impossible to build a login screen, because you would have no way to check if the password was correct. Conditionals give your application a brain. They allow it to react differently depending on what the user does or what data it receives.

The Basic Syntax

The most fundamental conditional is the if statement. It evaluates a condition inside parentheses (). If that condition is true, it executes the block of code inside the curly braces {}.

let isRaining = true;
//
if (isRaining === true) {
  console.log("Bring an umbrella!");
}

If, Else, and Truthiness

Code needs to make decisions based on the data it receives. We handle this using conditional statements. The most fundamental conditional is the if statement. It evaluates a condition inside parentheses, and if that condition evaluates to true, it executes the block of code inside the curly braces.

const temperature = 85;
//
if (temperature > 80) {
  console.log("Turn on the AC.");
}

You can chain multiple conditions together using else if, and provide a final fallback using else. The JavaScript engine reads these from top to bottom. The very first condition that evaluates to true wins. The engine then completely ignores the rest of the chain, even if other conditions might also be true.

const userRole = "guest";
//
if (userRole === "admin") {
  console.log("Show full dashboard.");
} else if (userRole === "editor") {
  console.log("Show drafting tools.");
} else {
  console.log("Show basic login screen.");
}

When you have a massive chain of else if checks looking at the exact same variable, it gets extremely tedious to read. You can rewrite this using a switch statement. A switch looks at a single value and attempts to match it against multiple case clauses. You must manually use the break keyword to stop the execution, otherwise the engine will bleed into the next case accidentally (a bug known as "fall-through").

const orderStatus = "shipped";
//
switch (orderStatus) {
  case "pending":
    console.log("Order is waiting in the queue.");
    break;
  case "shipped":
    console.log("Order has left the warehouse.");
    break;
  default:
    console.log("Unknown status. Please contact support.");
}

Sometimes you need to make a quick decision and assign the result directly to a variable. Writing five lines of if...else just for a simple toggle is exhausting. We use the ternary operator for this. It asks a question, provides an answer for true, and an answer for false, all on one line.

const isLoggedIn = true;
//
// Syntax: condition ? trueResult : falseResult
const bannerMessage = isLoggedIn ? "Welcome back!" : "Please log in.";

You will notice that conditions do not always involve the === operator. You can pass raw variables directly into an if statement. JavaScript forces that value into a boolean behind the scenes. This is called truthiness.

Every single value in JavaScript is considered "truthy" (meaning it acts exactly like true in a conditional) except for exactly eight specific "falsy" values:

false
0
0
0n (BigInt zero)
"" (Empty string)
null
undefined
NaN (Not a Number)

If a value is not on that exact list, it is truthy. This catches many beginners off guard. The text string "false" is truthy because it is not an empty string. An empty array [] is truthy because it is an object, and all objects are truthy.

Loops — Repeating Code

What is a Loop?

A loop is a programming tool that tells the computer to repeat a specific block of code over and over again until a certain condition is met.

Why Do We Need Them?

You've got a database of 10,000 users and need to email all of them. Good luck copying and pasting the sendEmail() function 10,000 times manually. This is unmanageable. Loops fix this by letting you write the instruction once and telling the computer to handle the repetition.

The Basic Syntax

The most fundamental loop is the while loop. It acts exactly like an if statement, but instead of running the code block once, it keeps running it repeatedly as long as the condition inside the parentheses () remains true.

let count = 1;
//
while (count <= 3) {
  console.log("Running...");
  count = count + 1;
}

The Standard Loops

Writing the exact same instruction over and over is what computers were designed to avoid. When you need to repeat an action, you use a loop.

The most traditional approach is the for loop. It looks terrifying at first because it packs three separate instructions into one set of parentheses. You have the starting point, the condition to keep going, and the action to take after every cycle.

// Start at 0; Keep going as long as i < 3; Add 1 each time
for (let i = 0; i < 3; i++) {
  console.log("Iteration number:", i);
}
// Outputs: 0, 1, 2

If you do not know exactly how many times you need to loop (for example, reading a file until you hit the end), you use a while loop. It acts like a recurring if statement. As long as the condition evaluates to true, the block keeps running.

let attempts = 0;
//
while (attempts < 3) {
  console.log("Retrying database connection...");
  attempts++; // Forgetting this line creates a catastrophic infinite loop
}

There is a slight variation called the do...while loop. The standard while loop checks the condition before it runs the code. A do...while loop executes the code first, and then checks the condition. This guarantees that your code runs at least once, even if the condition is completely false from the start.

let isRunning = false;
//
do {
  console.log("This will print exactly once, despite the false condition.");
} while (isRunning);

When you are working with lists of data, manually tracking index numbers with let i = 0 is tedious. Modern JavaScript provides the for...of loop specifically for iterating over iterables like arrays and strings. It grabs the actual item directly.

const colors = ["red", "green", "blue"];
//
for (const color of colors) {
  console.log("Paint color:", color);
}

If you need to iterate over the keys of an object, you use the for...in loop. The naming is confusing, but remember it this way: for...of is for lists of data, for...in is for inspecting inside objects.

const user = { name: "Alice", role: "Admin" };
//
for (const key in user) {
  console.log("Found property:", key);
}
// Outputs: Found property: name, Found property: role

You do not always have to wait for a loop to finish naturally. If you find what you are looking for early, you can smash the emergency exit using the break keyword. It immediately destroys the loop and moves the engine on to the rest of your code.

If you just want to skip the current cycle but keep the loop running, you use continue.

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue; // Skips the printing step for 3
  if (i === 5) break;    // Destroys the loop entirely before printing 5
  console.log(i);
}
// Outputs: 1, 2, 4

Arrays — Ordered Lists

What is an Array?

An array is a specialized container that holds an ordered list of items. Instead of putting one piece of data into one box (like a standard variable), an array is like a filing cabinet with numbered drawers. You can store as many pieces of data as you want inside this single cabinet, and they stay in the exact order you put them in.

Why Do We Need Them?

Think about building a social media app where a user has 50 friends. Creating 50 separate variables (friend1, friend2, friend3...) for a single user's friends list is a nightmare. If they add a 51st friend, you have to write new code. An array solves this by letting you store all 50 names under one single variable name called friends.

The Basic Syntax

You will almost always create an array using square brackets []. Inside the brackets, you separate your items with commas.

const friends = ["Alice", "Bob", "Charlie"];
//
console.log(friends);

Creating and Accessing

When you need to store fifty usernames, creating fifty separate variables is not going to work. You need an array. An array is just an ordered list of items, stored in a single box in memory.

You will almost always create arrays using square brackets [], but JavaScript provides several utility methods on the global Array object for specific situations.

// 1. Array.of(): Creates an array strictly from the arguments
const scores = Array.of(10, 20, 30); // [10, 20, 30]
//
// 2. Array.from(): Converts an iterable (like a string) into an array
const letters = Array.from("HELLO"); // ["H", "E", "L", "L", "O"]

Because arrays are technically just specialized objects in JavaScript, checking their type with typeof returns "object". This is useless when you actually need to know if a variable holds a list. You must use the explicit Array.isArray() method.

const myData = [1, 2, 3];
//
console.log(typeof myData); // "object" (Not helpful at all)
console.log(Array.isArray(myData)); // true (Helpful)

There is a massive trap when creating arrays using the new Array() constructor. If you pass a single number, JavaScript does not create an array holding that number. It creates an empty array with that specific length, full of empty slots. These are called sparse arrays, and they cause bizarre bugs because the slots are not actually undefined; they genuinely do not exist.

// WRONG: Creates an array with 3 empty slots, not the number 3
const badArray = new Array(3);
console.log(badArray.length); // 3
console.log(badArray[0]); // undefined

Once you have an array, you access the data using zero-based indexing. The first item is at index 0, the second is at index 1.

Historically, getting the very last item of an array was obnoxious. You had to calculate the length and subtract one: items[items.length - 1]. Modern JavaScript fixed this by introducing the .at() method. It allows you to use negative numbers to count backwards from the end of the array.

const queue = ["Alice", "Bob", "Charlie"];
//
// The old, annoying way
console.log(queue[queue.length - 1]); // "Charlie"
//
// The modern, clean way using negative indexing
console.log(queue.at(-1)); // "Charlie"
console.log(queue.at(-2)); // "Bob"

Mutating vs Non-Mutating Methods

Arrays come with dozens of built-in methods. Before you touch any of these methods, you have to know if it mutates (permanently alters) the original array, or if it returns a brand new copy. Mixing these up will destroy data in production.

If you want to add or remove items from the end of an array, use push() and pop(). If you need to manipulate the front of the array, use unshift() and shift(). All four of these methods mutate the original array directly.

const cart = ["Apple", "Banana"];
//
// Add to the end
cart.push("Orange"); // cart is now ["Apple", "Banana", "Orange"]
//
// Remove from the end
const lastItem = cart.pop(); // cart is now ["Apple", "Banana"]
//
// Add to the front
cart.unshift("Mango"); // cart is now ["Mango", "Apple", "Banana"]
//
// Remove from the front
const firstItem = cart.shift(); // cart is now ["Apple", "Banana"]

When you need to carve out a chunk from the middle, you have two options that sound identical but behave entirely differently: splice() and slice().

splice() is the destructive one. It permanently removes, replaces, or adds items directly into the original array. You tell it where to start, how many items to delete, and optionally what to insert.

const users = ["Alice", "Bob", "Charlie", "Dave"];
//
// Start at index 1, delete 2 items, insert "Eve"
users.splice(1, 2, "Eve");
console.log(users); // ["Alice", "Eve", "Dave"]

slice() is the safe one. It copies a section of the array and hands you a brand new one. The original array remains completely untouched. You give it a start index and an end index. It copies up to, but does not include, the end index.

const numbers = [10, 20, 30, 40, 50];
//
const middle = numbers.slice(1, 4);
console.log(middle); // [20, 30, 40]
console.log(numbers); // [10, 20, 30, 40, 50] (Untouched)

Sometimes you need to overwrite an entire array with a single value. The fill() method does this, and yes, it mutates the original.

const emptySlots = new Array(3).fill("Empty");
console.log(emptySlots); // ["Empty", "Empty", "Empty"]

Historically, developers constantly accidentally mutated arrays when trying to sort or reverse them. JavaScript solved this in 2023 by releasing a suite of immutable methods. These methods do exactly what their old counterparts did, but they guarantee the original array is never touched.

const scores = [40, 10, 30];
//
// The old, destructive way
// scores.sort(); (Permanently alters scores)
//
// The modern, safe ES2023 way
const sortedScores = scores.toSorted();
console.log(sortedScores); // [10, 30, 40]
console.log(scores); // [40, 10, 30] (Untouched)

The new ES2023 methods are toSorted(), toReversed(), toSpliced(), and with() (which safely replaces a single item by index). Use these by default whenever possible.

Iteration, Transformation, and Searching

Modern JavaScript leans heavily into functional programming for arrays. Instead of writing manual for loops, we use built-in methods that take a function as an argument and run it against every item in the list.

If you just need to execute some side effect, like printing to the console, use forEach(). It returns nothing.

const animals = ["Cat", "Dog"];
animals.forEach(animal => console.log(animal));

When you want to transform data, you use map(). It takes your original array, runs your function on every item, and returns a brand new array with the transformed results. The new array is always the exact same length as the original.

const rawPrices = [10, 20];
const formattedPrices = rawPrices.map(price => `$${price}.00`);
console.log(formattedPrices); // ["$10.00", "$20.00"]

There is a classic trap here. If you try to run .map(parseInt) to convert strings to numbers, it breaks horribly. parseInt accepts two arguments (the string and the radix base), and map passes three arguments (value, index, array) to its callback. You end up passing the array index as the radix base. Always write it out explicitly: .map(str => parseInt(str)).

If you need to remove items based on a condition, use filter(). If your function returns true, the item is kept in the new array. If false, it is dropped.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(n => n % 2 === 0);
// evens is [2, 4]

When you need to squash an entire array down into a single value, like calculating a total sum for a shopping cart, you reach for reduce(). It keeps a running accumulator value.

const cartPrices = [10, 20, 30];
//
// reduce( (accumulator, currentItem) => ..., initialValue )
const total = cartPrices.reduce((sum, price) => sum + price, 0);
// total is 60

Sometimes you have an array of arrays and you need to flatten it out into one single list. flat() does exactly this.

const messyData = [1, [2, 3], [4, 5]];
console.log(messyData.flat()); // [1, 2, 3, 4, 5]

To search for a specific item, you have several choices. If you need to find an object based on its properties, use find(). It returns the very first item that matches your condition, then stops searching. If you need its position instead, use findIndex().

const users = [{ name: "Alice", id: 1 }, { name: "Bob", id: 2 }];
const target = users.find(user => user.id === 2);
console.log(target.name); // "Bob"

If you just need a yes-or-no answer on whether an array contains certain data, use some() or every(). some() returns true if at least one item matches. every() returns true only if all items match.

Finally, if you have a simple array of strings or numbers and just want to know if a specific value exists, use includes(). Older tutorials will tell you to use indexOf() !== -1. Avoid that. indexOf() uses strict equality and fails to find NaN. includes() handles NaN correctly and is much easier to read.

const temperatures = [72, 85, NaN, 90];
//
// The old way (fails on NaN)
console.log(temperatures.indexOf(NaN) !== -1); // false
//
// The modern way
console.log(temperatures.includes(NaN)); // true

Sorting and Gotchas

There is one specific array method that behaves so strangely it deserves its own warning: sort().

By default, JavaScript converts every single item in the array to a string, and then sorts them alphabetically (lexicographically). This is perfectly fine for an array of names. It is an absolute disaster for an array of numbers.

const highScores = [10, 5, 20, 100];
//
// The default sort converts numbers to strings
highScores.sort();
console.log(highScores); // [10, 100, 20, 5] (Alphabetical order, not numerical)

Because "100" starts with a "1", it gets placed before "20", which starts with a "2". To fix this, you must provide a compare function. This function takes two arguments (conventionally a and b) and returns a number. If it returns a negative number, a is sorted before b. If positive, b is sorted before a. If zero, they stay in place.

// Ascending numerical sort
const correctScores = [10, 5, 20, 100];
//
correctScores.sort((a, b) => a - b);
console.log(correctScores); // [5, 10, 20, 100]

This tiny quirk has crashed enterprise applications. Always explicitly provide a callback when sorting numbers.

Strings — Immutable Sequences

What is a String?

A string is just a sequence of text characters. It can be a single letter, a full sentence, or a massive paragraph. In programming, any text data that you want the computer to read as literal text (rather than reading it as a command or variable name) is a string.

Why Do We Need Them?

If we couldn't use strings, our apps would be completely mute. You could calculate the math for a shopping cart, but you wouldn't be able to display the words "Your Total:" or "Welcome back, Sarah!" Strings are the bridge between raw data logic and human-readable interfaces.

The Basic Syntax

You create a string by wrapping your text in quotation marks. You can use single quotes '', double quotes "", or backticks `.

const greeting = "Hello, world!";
const username = 'Alice';
//
console.log(greeting);

Basic Methods and Modification

The absolute most important rule about strings in JavaScript is that they are completely immutable. Unlike arrays, where you can push or pop items, you can never change a string once it is created in memory. Every single method you run on a string returns a brand new string. The original remains perfectly intact.

When you need to clean up messy user input, you chain formatting methods together. trim() rips off accidental whitespace from the edges, while toLowerCase() standardizes the casing.

const rawInput = "   Alice@Example.com   ";
const cleanEmail = rawInput.trim().toLowerCase();
//
console.log(cleanEmail); // "alice@example.com"
console.log(rawInput); // "   Alice@Example.com   " (Untouched)

If you are looking for specific text inside a string, you have several modern options. includes() gives you a simple boolean answer. If you need to know exactly where a word is located, indexOf() returns the starting position, while lastIndexOf() starts searching from the end of the string backwards.

const sentence = "The quick brown fox jumps over the lazy dog";
//
console.log(sentence.includes("fox")); // true
console.log(sentence.startsWith("The")); // true
console.log(sentence.indexOf("brown")); // 10

Sometimes you need to rip a chunk of text out of a larger string. You have two choices: slice() and substring(). They look identical on the surface. They both take a start index and an end index. The difference reveals itself when you accidentally pass negative numbers.

slice() handles negative numbers perfectly, counting backward from the end of the string. substring() completely panics when it sees a negative number and immediately treats it as zero. This often results in substring silently returning the wrong text instead of throwing an error. Always default to slice().

const url = "https://example.com/login";
//
// Grabs the last 5 characters
console.log(url.slice(-5)); // "login"
//
// Panics, treats -5 as 0, and returns the whole string
console.log(url.substring(-5)); // "https://example.com/login"

If you need to swap out text, be incredibly careful with replace(). It only replaces the very first match it finds and then gives up. If you want to replace every instance, you must use the newer replaceAll() method.

const bio = "I love cats. Cats are great. I own two cats.";
//
// Only replaces the first lowercase "cats"
console.log(bio.replace("cats", "dogs"));
"I love dogs. Cats are great. I own two cats."
//
console.log(bio.replaceAll("cats", "dogs"));
"I love dogs. Cats are great. I own two dogs."

If you need to break a string apart into an array, you use split(). If you pass it a comma, it splits at the commas. If you pass it an empty string "", it shatters the string into an array of individual letters.

const csv = "apple,banana,orange";
const fruits = csv.split(","); // ["apple", "banana", "orange"]

Unicode and Emojis

JavaScript was designed in the 1990s. At that time, it was assumed every character on earth could be represented in 16 bits of memory. This system is called UTF-16.

Then emojis were invented.

An emoji is often too large to fit into a single 16-bit slot. To solve this without breaking the entire internet, JavaScript splits large characters across two 16-bit slots. This is called a surrogate pair.

Because of this ancient architecture, string methods that count or isolate characters are fundamentally broken when they encounter emojis. The .length property literally just counts the number of 16-bit blocks, not the actual characters you see on screen.

const plainText = "Cat";
console.log(plainText.length); // 3
//
const emoji = "🚀";
// You see 1 rocket. JavaScript sees 2 blocks of memory.
console.log(emoji.length); // 2

If you try to isolate a specific character using charAt(), it will rip the surrogate pair in half, returning a corrupted, unreadable symbol.

const message = "Hi 🚀";
console.log(message.charAt(3)); // Returns a broken half-character

If you actually need to work with the raw numeric codes of emojis, do not use charCodeAt(), as it only reads a single block. You must use the modern codePointAt(), which is smart enough to read the entire pair together.

Objects — Named Collections of Data

What is an Object?

An object is a collection of related data. While an array is just a numbered list, an object allows you to attach a specific name (a "key") to every single piece of data (a "value"). You can think of an object like a real-world dictionary: you look up a word (the key) to find its definition (the value).

Why Do We Need Them?

When you store data about a user in an array — like ["Alice", 28, "Admin"] — you're forced to mentally juggle what index 0 means versus index 1. If you add a middle name, the entire numbering system breaks. Objects solve this by explicitly naming the data. Instead of asking for "item number 1," you just ask for the "age".

The Basic Syntax

You create an object using curly braces {}. Inside, you define your properties as key: value pairs, separated by commas.

const user = {
  name: "Alice",
  age: 28,
  role: "Admin"
};
//
console.log(user);

Keys and Values

Arrays are great for ordered lists, but terrible for structured data. If you have an array ["Alice", 28, "Admin"], you have to memorize that the age is specifically at index 1. Objects solve this by letting you attach a readable name (a key) to every single piece of data (the value).

You create an object using curly braces {}. Beginners often confuse JavaScript objects with JSON (JavaScript Object Notation). While they look similar, JSON is strictly a text format used for sending data across the internet. An object is a living, breathing structure in your computer's memory.

const userProfile = {
  name: "Alice",
  age: 28,
  role: "Admin",
  address: {
    city: "Seattle",
    zip: "98101"
  }
};

When you know exactly what key you want, you access it using dot notation. It is clean and easy to read. You can also use this exact same syntax to add brand new properties or update existing ones on the fly.

// Reading data
console.log(userProfile.name); // "Alice"
console.log(userProfile.address.city); // "Seattle"
//
// Updating data
userProfile.age = 29;
//
// Adding new data
userProfile.isActive = true;

Sometimes you do not know the key name ahead of time. Maybe it is stored inside a variable based on user input. Here, dot notation completely fails. Bracket notation is your only way forward.

const targetKey = "role";
//
// WRONG: Looks for a literal key named "targetKey"
console.log(userProfile.targetKey); // undefined
//
// RIGHT: Evaluates the variable and looks for "role"
console.log(userProfile[targetKey]); // "Admin"

If you try to access a key that does not exist, JavaScript does not throw an error. It just returns undefined. If you actually want to check if a key exists before blindly accessing it, use the in operator.

console.log("age" in userProfile); // true
console.log("salary" in userProfile); // false

Finally, if you need to permanently destroy a property from an object, you use the delete keyword.

delete userProfile.age;
console.log("age" in userProfile); // false

Take a Breath

If you made it this far, take a breath. We just covered environments, variables, data types, function architecture, looping mechanisms, array manipulation, string gotchas, and object structures in a single pass. That is an overwhelming amount of syntax for day one.

The goal here is not perfect memorization. No senior developer writes code from pure memory. The goal is familiarity. You now know that Array.isArray() exists, even if you have to look up the exact capitalization tomorrow. You know const is safer than let. You know emojis break string counts.

Open up a terminal. Write a function. Pass an object into it. Break the code intentionally, read the error message, and fix it. That is how you actually learn JavaScript.