Index

Functions

Functions are one of the core building blocks in JavaScript. They allow you to encapsulate blocks of code into reusable, named procedures. Understanding how to create and use functions is crucial for writing clean, efficient, and modular code.

What are Functions?

A function is a set of statements that performs a task or calculates a value. You can think of functions as “mini-programs” that can be called whenever needed to perform an operation.

Example

function greet() {
  console.log("Hello, World!");
}
greet(); // Output: "Hello, World!"

Defining and Calling Functions

To define a function in JavaScript, you use the function keyword, followed by the name of the function, parentheses (), and a block of code {}.

Syntax

function functionName() {
  // code to be executed
}

You call or invoke a function by writing the function’s name followed by parentheses.

Example

function sayHello() {
  console.log("Hello!");
}
sayHello(); // Output: "Hello!"

Function Parameters and Arguments

Parameters are placeholders used when defining a function, and arguments are the actual values passed to the function when calling it.

Example

function greetPerson(name) {
  // 'name' is a parameter
  console.log("Hello, " + name + "!");
}
greetPerson("Alice"); // 'Alice' is an argument
// Output: "Hello, Alice!"

You can have multiple parameters:

function addNumbers(a, b) {
  return a + b;
}
console.log(addNumbers(3, 4)); // Output: 7

Return Values

A function can return a value using the return keyword. This allows the function to produce an output that can be used elsewhere.

Example

function multiply(a, b) {
  return a * b;
}
let result = multiply(5, 6);
console.log(result); // Output: 30

When the return statement is executed, the function stops executing.

Function Expressions

In JavaScript, functions can also be defined using function expressions, where you assign a function to a variable.

Example

const greet = function () {
  console.log("Hello from a function expression!");
};
greet(); // Output: "Hello from a function expression!"

Function expressions can be anonymous (i.e., without a name), unlike function declarations.

Arrow Functions (ES6)

Arrow functions provide a shorter syntax for defining functions. They are particularly useful for simple tasks and are commonly used in modern JavaScript.

Syntax

const functionName = (parameters) => {
  // code to be executed
};

Examples:

const add = (a, b) => {
  return a + b;
};
console.log(add(3, 7)); // Output: 10

// Shorter syntax when there is only one statement
const square = (x) => x * x;
console.log(square(5)); // Output: 25

Scope

Scope refers to where variables and functions are accessible in your code. There are two primary types of scope in JavaScript:

  • Global Scope: Variables defined outside any function are in the global scope. They can be accessed from anywhere in the program.
  • Local Scope: Variables declared within a function are in the local scope, meaning they can only be accessed within that function.

Example

let globalVar = "I'm a global variable";

function myFunction() {
  let localVar = "I'm a local variable";
  console.log(globalVar); // Accessible
  console.log(localVar); // Accessible
}

myFunction();
console.log(globalVar); // Accessible
// console.log(localVar);  // Error: localVar is not defined

Default Parameters (ES6)

You can provide default values for function parameters, which will be used if no argument is supplied or if undefined is passed.

Example

function greet(name = "Guest") {
  console.log("Hello, " + name + "!");
}
greet(); // Output: "Hello, Guest!"
greet("Alice"); // Output: "Hello, Alice!"

Rest Parameters (ES6)

The rest parameter syntax (...) allows a function to accept an indefinite number of arguments as an array.

Example

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

Function vs. Method

A method is simply a function that is a property of an object. Methods are used for behavior specific to an object.

Example

let person = {
  name: "Alice",
  greet: function () {
    console.log("Hello, my name is " + this.name);
  },
};

person.greet(); // Output: "Hello, my name is Alice"

Higher-Order Functions

Functions that take other functions as arguments or return functions are called higher-order functions. They are very useful for abstraction and code reuse.

Example

function executeFunction(callback) {
  callback();
}

executeFunction(() => {
  console.log("This is a callback function");
});
// Output: "This is a callback function"

Summary

In this section, you’ve learned about functions, which are reusable blocks of code that allow you to organize and simplify complex tasks. You’ve seen how to create and use functions with different kinds of syntax, including function declarations, function expressions, and arrow functions. Additionally, you’ve learned about important concepts like scope, parameters, return values, and higher-order functions. Understanding these concepts is essential for creating clean, maintainable, and reusable JavaScript code.

On this page