Dive into JavaScript Functions(Basics only)

When I first started learning JavaScript, functions felt simple… until they didn’t.

I knew how to write them.

I knew how to call them.

But terms like parameters, arguments, function expressions, and arrow functions made everything feel more complicated than it needed to be.

So in this post, I’ll explain them the way I wish someone explained them to me when I was starting out.

When you first learn JavaScript, functions can feel abstract.

add(a, b)
sum(2, 3)

But in real projects, functions are doing things like:

• Calculating total price in a cart
• Validating a login form
• Sending data to a server

So let’s understand functions using examples that feel more like real life.

First, What Is a Function?

• A function is just a reusable block of code.
• Instead of writing the same code again and again, you write it once inside a function and reuse it.

Think about an e-commerce website.

You might need to calculate the total price of items in a shopping cart.

Instead of writing the calculation again and again, you create a function:

function calculateTotal(price, quantity) {
  return price * quantity;
}

Now whenever someone adds something to their cart:

calculateTotal(50, 3); // 150

That’s practical. That’s real.

Parameters vs Arguments:

This confuses almost everyone at first — so let’s simplify it.

Imagine a food delivery app.

You create a function to place an order:

function placeOrder(foodItem) {
  console.log("Your order for " + foodItem + " has been placed!");
}

Here:

foodItem→ is a parameter

It’s just a placeholder

Now when a user orders pizza:

placeOrder("Pizza");

Here:

"Pizza" → is the argument

It’s the real value

Simple way to remember:

Parameter→ the empty box

Argument → what you put inside the box

Function Declaration:

This is the most common way beginners write functions.

Let’s say we want to check if a user entered the correct password:

function checkPassword(inputPassword) {
  const correctPassword = "12345";
  return inputPassword === correctPassword;
}

Now we call it:

checkPassword("12345"); // true
checkPassword("wrong"); // false

This is called a function declaration.

One cool thing about it:

You can use it before writing it in the file — and it still works.

That’s just how JavaScript handles this type of function.

Function Expression:

Now imagine you’re building a shopping website and want to apply a discount.

Here’s another way to create a function:

const applyDiscount = function(price, discountPercentage) {
  return price - (price * discountPercentage / 100);
};

Now use it:

applyDiscount(200, 10); // 180

This works perfectly.

But if you try to use it before defining it, you’ll get an error.

So just remember:

With function expressions → define first, use after.

Arrow Functions:

Arrow functions are shorter and very common in modern JavaScript.

Let’s say we want to format a username:

const formatUsername = (username) => {
  return username.trim().toLowerCase();
};

Even shorter:

const formatUsername = username => username.trim().toLowerCase();

Now:

formatUsername("  Ahmed123  "); 
// "ahmed123"

Much cleaner.

Final Thoughts:

When Should You Use What?

If you’re just starting:

• Use function declarations for normal reusable logic
• Use function expressions when storing functions in variables
• Use arrow functions for short operations and array methods

In real projects, functions are everywhere:

• Calculating totals
• Validating forms
• Formatting data
• Handling clicks
• Processing payments

They are not just coding exercises.

They are actions.

Functions aren’t complicated.

They only feel complicated when we try to memorize everything at once.

Focus on this:

• Functions store reusable code
• Parameters are placeholders
• Arguments are real values
• Declarations are beginner-friendly
• Arrow functions are shorter and modern

Once this becomes natural, you’re already ahead of many beginners.

Some Final Words

Not today but Oneday the imagine term i used in this post will become a real for sure...