Functions in JavaScript

In the previous blog, we learned how to control the flow of our program using conditions like if, else, and switch. Now your program can make decisions.

But there is still a problem.

Imagine writing the same logic again and again in different parts of your code. It quickly becomes messy, hard to maintain, and error-prone.

For example, if you need to calculate something in multiple places, you would end up repeating the same code again and again. If that logic changes later, you would have to update it everywhere.

This is where functions come in.

Functions solve this exact problem. They help you organize your code, reuse logic, and make your programs easier to understand.

---

What is a Function?

A function is a block of code designed to perform a specific task.

Instead of writing the same code multiple times, you write it once inside a function and reuse it whenever needed.

function greet() {
  console.log("Hello");
}

greet();

Here:

• greet is the function name

• The code inside {} is the function bodyCalling greet() executes the function

At a basic level, a function is just a reusable piece of logic.

---

Why Do We Need Functions?

Let’s take a simple example without functions:

let a = 10;
let b = 5;
console.log(a + b);

let x = 20;
let y = 10;
console.log(x + y);

You are repeating the same logic.

Now imagine doing this in a real application with hundreds of lines. It becomes difficult to manage.

Now with functions:

function add(num1, num2) {
  console.log(num1 + num2);
}

add(10, 5);
add(20, 10);

Now the logic is written once and reused.

This makes your code:

• cleaner

• easier to maintainless

• error-prone

---

Parameters and Arguments

Functions can take inputs.

function greet(name) {
  console.log("Hello " + name);
}

greet("Shikhar");

• name is a parameter

• "Shikhar" is an argument

Parameters act like placeholders. When you call the function, you pass actual values as arguments.

You can also have multiple parameters:

function add(a, b) {
  console.log(a + b);
}

---

Return Values

So far we are printing values. But in real programs, we usually return values.

function add(a, b) {
  return a + b;
}

let result = add(10, 5);
console.log(result);

The return keyword sends a value back to wherever the function was called.

Important thing to remember:

Once return is executed, the function stops.

function test() {
  return 10;
  console.log("This will never run");
}

---

Function Declaration vs Function Expression

There are two main ways to define functions.

Function Declaration

function greet() {
  console.log("Hello");
}

Function Expression

const greet = function() {
  console.log("Hello");
};

At first glance, they look similar, but there is an important difference.

---

Hoisting Behavior

Function declarations are hoisted.

greet();

function greet() {
  console.log("Hello");
}

This works because JavaScript moves the function declaration to the top.

Now look at function expressions:

greet(); // Error

const greet = function() {
  console.log("Hello");
};

This fails because variables declared with const are in the Temporal Dead Zone until initialized.

So function expressions behave like variables, not like fully hoisted functions.

---

Arrow Functions

Arrow functions are a shorter way to write functions.

const greet = () => {
  console.log("Hello");
};

If there is only one line, you can shorten it further:

const add = (a, b) => a + b;

---

Key Difference: this Keyword

Arrow functions do not have their own this.

This might not matter right now, but later when you work with objects and classes, this becomes very important.

Regular functions have their own this, arrow functions do not.

---

Default Parameters

You can assign default values to parameters.

function greet(name = "Guest") {
  console.log("Hello " + name);
}

greet(); // Hello Guest

If no argument is passed, the default value is used.

---

Function Scope

Variables declared inside a function are not accessible outside.

function test() {
  let x = 10;
}

console.log(x); // Error

This is called function scope.

It helps avoid conflicts and keeps your code predictable.

---

Local Scope vs Global Scope

let globalVar = 10;

function test() {
  let localVar = 20;
}

• globalVar can be accessed anywhere

• localVar exists only inside the function

---

Pure vs Impure Functions

This is an important concept.

Pure Function

function add(a, b) {
  return a + b;
}

Same input always gives same output.

---

Impure Function

let total = 0;

function addToTotal(value) {
  total += value;
}

Depends on external data.

Pure functions are easier to test and debug.

---

Functions Calling Functions

Functions can use other functions.

function square(x) {
  return x * x;
}

function printSquare(num) {
  console.log(square(num));
}

printSquare(5);

This is how complex logic is built step by step.

---

Higher Order Functions (Introduction)

A function can:

• take another function as input

• return a function

function greetUser(fn) {
  fn();
}

function sayHello() {
  console.log("Hello");
}

greetUser(sayHello);

This concept becomes very important later when we learn callbacks and async JavaScript.

---

Putting It All Together

function calculatePrice(price, discount) {
  let finalPrice = price - discount;

  return finalPrice > 50 ? finalPrice - 10 : finalPrice;
}

console.log(calculatePrice(100, 20));

Here we are combining:

• parameters

• return values

• conditions

• operators

This is how real code looks.

---

Common Mistakes

• Forgetting to return values

• Confusing parameters and arguments

• Using functions before understanding hoisting

• Writing very large functions instead of small reusable ones

---

Final Thought

Functions are not just a feature in JavaScript. They are the foundation of how code is structured.

Every major concept you will learn later like callbacks, promises, and async code is built on functions.

If you understand functions properly, you have already crossed one of the biggest hurdles in JavaScript.