JavaScript tutorial for beginners

From small projects to big tech companies like Google, Facebook, and Netflix, JavaScript powers the web. Whether you want to become a Javascript developer or explore coding as a hobby, learning JavaScript opens up endless opportunities.

Let’s start by understanding what JavaScript is and its importance.

What is JavaScript?#

JavaScript is the language of the web. If you’ve ever seen pop-ups, interactive forms, or animations on a web page, JavaScript is behind it.

Here’s why JavaScript is a great choice for beginners:

• Beginner-friendly: JavaScript is easy to learn because it runs right inside your web browser—no setup needed! You can start coding instantly.

• In high demand: Tech companies love JavaScript! It’s used in web development, mobile apps, and artificial intelligence. Learning it can help you land a job.

• Used everywhere: Websites, mobile apps, games, chatbots, and even smart home devices use JavaScript. No matter what interests you, JavaScript has a place for you.

JavaScript input/output#

This is exactly how JavaScript handles input and output—it allows users to enter data, process it, and then display the result.

JavaScript input#

When you order coffee, you provide details like the type, size, and customizations. In JavaScript, we use the prompt() function to collect input from the user:

As a barista waits for your response before preparing your drink, JavaScript waits for user input before continuing.

JavaScript output#

Once your coffee is ready, the barista calls out your name and hands you the drink. In JavaScript, we use the console.log() function to display messages, results, or calculations:

This is how JavaScript communicates results back to the user!

What are JavaScript variables?#

A variable in JavaScript is like a labeled pocket in Alex’s backpack. Each pocket holds specific items, such as:

• A notebook labeled "mathNotes" (stores math-related notes)

• A water bottle labeled "water" (stores drinking water)

• A lunchbox labeled "lunch" (stores food)

Similarly, in JavaScript, variables hold different types of data:

Declaration and reassignment#

Alex can replace his notebook with a new one when the old one is full. Similarly, in JavaScript, you can reassign a variable to store a new value:

JavaScript variables are flexible—just like Alex’s backpack contents can change!

Input and output variables#

When Alex buys a snack, he updates his backpack. He can ask his friends for suggestions and then add them. In JavaScript, we can take user input and store it in a variable:

Operations on variables#

Alex can combine things in his backpack, like adding two snacks together.
In JavaScript, we can perform operations on variables:

Variable types#

Alex organizes his backpack by checking if an item is a notebook, a snack, or a water bottle.
Similarly, in JavaScript, we can check a variable’s data type using typeof:

Typecasting variables#

Sometimes, Alex wants to measure his water in liters instead of milliliters.
In JavaScript, we can convert data types using typecasting:

Like Alex changes units, JavaScript allows us to convert numbers to strings, integers to floats, and more!

Constants#

Alex’s school ID number stays the same—it never changes.
In JavaScript, we use constants (declared with const) for values that should not change:

JavaScript data types#

Think of Jake’s smartwatch as JavaScript’s data types:

• Numbers track his steps and heart rate.

• Strings store his workout names.

• Booleans check if he has met his daily goal.

• Arrays store his weekly workout schedule.

• Objects hold detailed information about each workout.

• Sets ensure he doesn’t log duplicate exercises.

Let’s explore these data types using Jake’s fitness tracking.

Primitive data types#

Primitive data types store individual values, like Jake’s smartwatch records single data points.

Example in JavaScript

Reference data types#

Jake’s smartwatch doesn’t just track single values—it organizes multiple workout records, schedules, and exercise details. For this, JavaScript provides reference data types.

JavaScript arrays#

Jake follows a weekly fitness routine, which he stores in an array. Arrays help store ordered lists of data.

Example in JavaScript

JavaScript objects#

Jake’s smartwatch logs detailed workout information, such as duration, calories burned, and heart rate. JavaScript objects store data as key-value pairs.

Example in JavaScript

JavaScript sets#

Jake wants to track unique exercises, ensuring no duplicates are logged. JavaScript sets automatically remove duplicate values.

Example in JavaScript

JavaScript comments#

Let’s explore JavaScript comments by stepping into Jake’s world!

Why are comments important?#

Imagine Jake works on a game today but revisits the code after months—will he remember every detail?

Comments help Jake and his team:

• Understand complex logic quickly

• Collaborate with others effectively

• Debug and update code efficiently

JavaScript provides different types of comments to keep code readable and structured.

Single-line comments#

Single-line comments help Jake briefly explain what each part of the game does.

Example in JavaScript

Inline comments#

Inline comments provide quick explanations next to the code without adding extra lines.

Example in JavaScript

Multi-line comments#

Jake uses multi-line comments to document complex game logic properly when he writes complex game logic.

Example in JavaScript

JavaScript booleans#

Let’s explore JavaScript Booleans by stepping into Alex’s world!

Booleans are like the ON/OFF switches in Alex’s smart home.

• If the lights are ON, the system sees it as true.

• If the lights are OFF, the system sees it as false.

Example in JavaScript

Like Alex’s smart home system, booleans help make decisions in JavaScript.

The Boolean() method#

The Boolean() method converts values into true or false.
Alex’s smart home checks whether it’s night before turning on the lights.

Example in JavaScript

The Boolean() function helps check conditions like a home automation system!

Evaluating expressions#

Alex’s smart home decides when to turn on heating or lock doors.
Booleans help by evaluating expressions using comparison operators (>, <, ==, !=).

Example in JavaScript

The system evaluates conditions to take action—just like JavaScript Booleans!

Booleans as numbers#

In JavaScript, true is 1, and false is 0.
Alex’s smart home uses Booleans in calculations, like estimating electricity usage.

Example in JavaScript

This works because Booleans behave like numbers in JavaScript.

JavaScript operators#

Let’s explore JavaScript operators using Mia’s coffee shop as an example.

Arithmetic operators#

Mia uses arithmetic operators (+, -, *, /, %, **) to calculate customer bills.

Example in JavaScript

Assignment operators#

Mia needs to track coffee bean stock using assignment operators (=, +=, -=, *=, etc.).

Example in JavaScript

Comparison operators#

Mia offers discounts for orders above $10 using comparison operators (>, <, >=, <=, ==, !=).

Example in JavaScript

Logical operators#

Mia offers a special deal if a customer buys both coffee and cake. Logical operators (&&, ||, !) help.

Example in JavaScript

Identity operators#

Mia’s shop accepts different payment methods. She must check if a customer paid with cash or card using identity operators (===, !==).

Example in JavaScript

JavaScript loops#

She follows these steps every day—just like a loop in JavaScript! JavaScript loops automate repetitive tasks, making them efficient and error-free.

JavaScript for loops#

A for loop repeats actions a fixed number of times—like checking off each task on Emma’s checklist.

Example in JavaScript

How it works:

• The loop goes through each item in tasks.

• It prints every task until the list is complete.

JavaScript while loops#

A while loop keeps running until a condition is met—like sipping coffee until the cup is empty.

Example in JavaScript

How it works:

• The loop runs until coffeeSips reaches 0.

• Each sip reduces the count, and when it’s gone, the loop stops.

Loop control statements: break, continue, pass#

You can control loops using:

• break: Stops the loop early.

• continue: Skips a step but keeps looping.

• pass: Not needed in JavaScript (use comments instead).

Example in JavaScript

JavaScript functions#

JavaScript functions work the same way! They store reusable blocks of code so we don’t have to repeat the same steps repeatedly. Let’s explore JavaScript functions using Emma’s café as an example!

A function in JavaScript is like a predefined recipe that performs a specific task. Instead of writing the same code multiple times, we define a function once and use it whenever needed.

Example: Emma’s coffee recipe

How it works:

• The makeCoffee() function stores the steps for making coffee.

• Calling makeCoffee(); executes the function.

Declaring and calling functions#

We can write functions to perform various tasks like Emma preparing different drinks.

How it works:

• The greetCustomer(name) function accepts a customer’s name and displays a greeting.

• Calling greetCustomer("Alex") prints a personalized message.

Functions with parameters and return values#

Sometimes, a function needs inputs (parameters) to customize its behavior.

How it works:

• The function takes price and quantity as inputs.

• It calculates and returns the total bill.

Arrow functions in JavaScript#

JavaScript provides a shorter way to write functions using arrow functions.

How it works:

• The arrow function add performs addition in a single line.

• It’s a concise way to define simple functions.

Local vs. global variables in JavaScript#

Emma organizes her café supplies—some are used only in the kitchen, while others are available throughout the café.

JavaScript handles variables the same way:

• Local variables exist only inside a function.

• Global variables can be accessed anywhere in the program.

Local Variables#

How it works:

• order is a local variable, meaning it only exists inside makeOrder().

• We get an error if we try to access it outside the function.

Global variables#

How it works:

• cafeName is a global variable that can be used inside and outside functions.

Final word#

You are now one step closer to mastering Javascript!

If you’re ready to choose your career path after learning the basics of JavaScript, take a look at these Javascript courses ready to guide you step by step: