Functions in JavaScript (Beginner-Friendly Guide)

When we write JavaScript program often repeat the same code or logic again and again. Instead of repeating a same code and logic JavaScript gives us functions to make our code clean, reusable and easy to understand.

In this article ,we will learn about functions step by step with simple and clear examples.

What is function?

A function is a block of code that are used to perform a specific task. Function provide better modularity and high degree of code reusability.

In simple words: A function is a piece of code that runs when we call it.

A function is a reusable block of code that:

• Takes data or input (optional)
• Does some work on that data
• Returns output/result (optional)

Real-Life Examples:

· A calculator function for adding numbers

· A form validation checks for every new user

· A washing machine that performs a same step every time when we use it.

Why Do we need functions?

· Avoid code repetition

· Make debugging easier

· Easy to understand code (readable)

· Make code reusable

· Divide long code into a small piece

Without functions our code become long and messy.

Function Syntax:

function functionName(){

//block of code

}

Here

function — keyword (reserve word)

functionName- Name of function

()- where we may pass a parameters

{}- function body where we write our code

Function declaration and Function calling :

function greet (){
console.log (“good morning”);
}

greet ();//function calling

A function runs only when we call it. Nothing happens until you call the function.

Output:

good morning

Function with parameters and Arguments:

function add(a,b)      //add is function name where a,b are parameters
{
console.log(a+b);
}
add(7,3);        //calling function add with 2 arguments

Parameters are placeholders and Arguments are real values that we passed.

Here a, b is parameter and 7,3 is arguments.

Default Values/Parameters in Function:

If user does not give values, then we pass a function to some default values (parameters) these values are call default Parameters.

Real-Life Example: Think we order pizza and not choose spice level then restaurant use medium spice level as a default and deliver our pizza.

Get Swati Agrawal’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

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

Here output is 0;

Default values are used only when we are not passed values or value is undefined.

Function with Return Value:

In a function body, we often use a return statement to send data back to user. A return statement returns one specific value and stops the function execution. Means after the return statement function not going to execute any code. That’s why the return statement should always be in last.

Example:

function add(a,b){
return a+b;
}
let result=add(5+7);
console.log(result);

Once return is executed, the function stops running.

Function Expression:

Function can also be stored inside a variables this type of function we call function expression this are anonymous or without name functions.

Example:

const multiply=function(a,b){
return a*b;
};
console.log(multiply(4,3));

Arrow Function:

Arrow function expressions were introduced in ES6.These is the short and modern way to write functions. Arrow function expressions are clean and concise. The syntax for an arrow function expression does not require the function keyword. They use a fat arrow => that’s why we call it arrow function.

Syntax:

let myArrowFunction = (arg1, arg2, …argN) => {

//code or statement(s)

}

Here,

• myArrowFunction is the name of the function.
• arg1, arg2, …argN are the function arguments.
• statement(s) is the function body.

If the body has single statement or expression, you can also write the arrow function in one line like:

let myArrowFunction=(arguments)=>expression;

Example:

const square=(num)=>{
return num*num;
}
console.log(square(5));

In one line

Const square=num=>num*num;

Best Practices for Writing Functions

• ✅ Keep functions small and focused
• ✅ Use meaningful names
• ✅ Avoid excessive parameters
• ✅ Prefer pure functions when possible
• ✅ Use arrow functions wisely

Common Beginner Mistakes?

❌ Forgetting return keyword
❌ Not passing required values or parameters
❌ Wrong parameter order
❌ forgetting function calling

Practice Questions:

1.create a function to add 3 numbers also pass default values.

2.create arrow function in one line to find cube of number.

3.write down the difference between function expression and function declaration.

Conclusion

Functions are the heart of JavaScript. They help us to write clean, efficient, and scalable code. If you understand functions well, you understand JavaScript.