What Is Functions and Why It Matters?

Functions are a reusable block of code that performs a specific task. Imagine a function like a vending machine: it accepts input, does processing inside, and gives output back. Functions help organize code, reduce redundancy, and improve readability, so you do not need to copy, paste, or write the same logic everywhere. You can call a function whenever you need something, and it works the same once it receives the required inputs and returns outputs. For example, functions calculate the area of rectangles, so you only know how to provide the required values instead of repeating the calculation in many places.

How Do You Create a Function?

Creating a function starts with the function keyword, which declares the function name, such as sayHello. Parentheses () hold parameters that define inputs, and Curly braces contain the code that run when the function is used. The basic anatomy includes the keyword, function name, parentheses, and curly braces containing executable code. Functions accept input through parameters, which define the values a function can receive.

Example:

// Creating variables in JavaScript

let name = "Alice";

const age = 25;

var city = "London";

console.log(name);

console.log(age);

console.log(city); 

What Are Parameters and Arguments?

Parameters define expected inputs, while Arguments are the actual values you pass during a function call. A function can give different results because each call can pass different arguments into the defined parameters.

// 'a' and 'b' are parameters

function add(a, b) {

  return a + b;

}

// 10 and 5 are arguments

console.log(add(10, 5));   // 15

console.log(add(20, 8));   // 28 

You can also pass different types of arguments:

JavaScript

// 'product' and 'price' are parameters

function showProduct(product, price) {

  console.log(product + " costs $" + price);

}

// "Laptop" and 899 are arguments

showProduct("Laptop", 899);   // Laptop costs $899

showProduct("Phone", 499);    // Phone costs $499

How Do Return Values Work in Functions?

Functions send back a result using the return statement. A function can return “Done” or another value, and the returned data becomes the function’s output. The return statement exits the function immediately, so later code becomes unreachable after execution hits that statement. After return runs, console.log runs Never if it appears after the return statement inside the same function.

Example:

function multiply(a, b) {

  return a * b;

}

let result = multiply(4, 5);

console.log(result); // 20 

Arrow Functions

Arrow functions are a concise syntax for creating functions in modern JavaScript. They use the => operator instead of the function keyword while supporting parameters and return values.

Example:

// Arrow function

const greet = (name) => {

  return "Hello, " + name + "!";

};

console.log(greet("Alice")); // Hello, Alice! 

Default Parameters

A parameter can have default values, which are used when no argument is provided during a function call.

function greet(name = "Guest") {

  console.log("Hello, " + name + "!");

}

greet();          // Hello, Guest!

greet("Alice");   // Hello, Alice! 

Functions Calling Functions

Functions can call other functions, which helps build complex programs from simple parts.

function sayHello(name) {

  return "Hello, " + name;

}

function welcome(name) {

  console.log(sayHello(name) + "! Welcome.");

}

welcome("Alice"); // Hello, Alice! Welcome. 

Scope

Variables created inside a function are available only inside that function.

function showMessage() {

  let message = "Hello!";

  console.log(message); // Hello!

}

showMessage();

// console.log(message); // Error: message is only available inside the function

Key Takeaways

• Functions are reusable blocks of code that perform specific tasks and reduce repeated code.
• Parameters define the inputs a function accepts, while Arguments provide the actual values that pass into those parameters during a function call.
• The return statement sends a value back to the calling code after the function finishes execution.
• Arrow functions use shorter syntax than many traditional function declarations while providing the same core behavior in many cases.
• Variables are accessible within function scope, which controls where values can be used during execution.