Functions are often referred to as "first-class citizens" in JavaScript because they can be treated like any other value, such as a number or a string. This means that they can be assigned to variables, passed as arguments to other functions, and returned as values from functions.

Basic Syntax

Here is the basic syntax for defining a function in JavaScript:

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

Where:

• The function keyword is used to define a function.
• functionName is the name of the function.
• parameters are variables that are passed to the function.
• The code inside the function is executed when the function is called.

Here are some examples of defining and calling functions in JavaScript:

// Define a function that takes two parameters and returns their sum
function add(a, b) {
  return a + b;
}

console.log(add(5, 3)); // Output: 8

In this example, the add function takes two parameters a and b and returns their sum. The function is then called with the arguments 5 and 3, and the result is stored in the variable result.

Function Expressions

In addition to defining functions using the function keyword, you can also define functions using function expressions. A function expression is a function that is assigned to a variable.

Here is an example of a function expression:

let greet = function (name) {
  return "Hello, " + name + "!";
};

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

In this example, the function expression function(name) { return "Hello, " + name + "!"; } is assigned to the variable greet. The function is then called with the argument "Alice", and the result is printed to the console.

Arrow Functions

Arrow functions are a more concise way to define functions in JavaScript. They provide a shorter syntax for writing function expressions.

Here is an example of an arrow function:

let greet = (name) => {
  return "Hello, " + name + "!";
};

console.log(greet("Bob")); // Output: Hello, Bob!

In this example, the arrow function (name) => { return "Hello, " + name + "!"; } is assigned to the variable greet. The function is then called with the argument "Bob", and the result is printed to the console.

Arrow functions are especially useful when you need to define short, anonymous functions.

Default Parameters

You can specify default values for function parameters in JavaScript. If a parameter is not provided when the function is called, the default value will be used.

Here is an example of using default parameters in a function:

function greet(name = "World") {
  return "Hello, " + name + "!";
}

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

In this example, the greet function has a default parameter name = "World". If no argument is provided when the function is called, the default value "World" is used.

Function inside a Function

You can define a function inside another function in JavaScript. This is known as a nested function or a function within a function.

Here is an example of defining a function inside another function:

function outerFunction() {
  function innerFunction() {
    return "Hello from the inner function!";
  }
  return innerFunction();
}

console.log(outerFunction()); // Output: Hello from the inner function!

In this example, the outerFunction contains an innerFunction that returns a string. When the outerFunction is called, it also calls the innerFunction and returns its result.

Callback Functions

A callback function is a function that is passed as an argument to another function and is executed inside that function. Callback functions are commonly used in JavaScript to perform asynchronous operations, such as fetching data from a server or handling user input.

Here is an example of using a callback function:

function fetchData(callback) {
  setTimeout(() => {
    const data = "Data fetched from the server";
    callback(data);
  }, 2000);
}

function displayData(data) {
  console.log(data);
}

fetchData(displayData); // Output: Data fetched from the server

In this example, the fetchData function takes a callback function as an argument and simulates fetching data from a server after a delay of 2 seconds. When the data is fetched, the callback function displayData is called with the fetched data.

Conclusion

• Functions are reusable blocks of code that perform a specific task.
• You can define functions using the function keyword, function expressions, or arrow functions.
• Default parameters allow you to specify default values for function parameters.
• You can define functions inside other functions and use callback functions to perform asynchronous operations.