Function Expression vs Function Declaration | JavaScript for Web Development - Software Development PDF Download

Function Declaration

A function declaration defines a named function using the function keyword. It has the following structure:

function functionName(parameters) {

  // Function body

  // Code to be executed

  // Return statement (optional)

}

Here's an example of a function declaration:

function greet(name) {

  console.log(`Hello, ${name}!`);

}

greet("John");

Output

Hello, John!

In the above code, we define a function named greet that takes a parameter name. When the function is called with the argument "John", it logs the greeting "Hello, John!" to the console.
Function declarations are hoisted in JavaScript, meaning they are recognized and can be called before they are declared. This allows you to use the function anywhere in your code, regardless of its position.

Function Expression

A function expression involves assigning a function to a variable or a constant. It typically uses an anonymous function, which means it doesn't have a name. The syntax for a function expression is as follows:

const functionName = function(parameters) {

  // Function body

  // Code to be executed

  // Return statement (optional)

};

Let's look at an example:

const greet = function(name) {

  console.log(`Hello, ${name}!`);

};

greet("Emily");

Output

Hello, Emily!

In this code, we create a function expression by assigning an anonymous function to the greet constant. The function behaves the same as the one in the function declaration example, greeting the provided name.
One key difference between function expressions and function declarations is that function expressions are not hoisted. They must be defined before they are used, similar to variables.

Arrow Function Expression

In addition to function expressions, ES6 introduced arrow function expressions, which provide a more concise syntax for defining functions. Arrow functions are especially useful for writing shorter, simpler functions. The syntax for an arrow function is as follows:

const functionName = (parameters) => {

  // Function body

  // Code to be executed

  // Return statement (optional)

};

Take a look at this example:

const multiply = (a, b) => a * b;

console.log(multiply(4, 5));

Output

20

In this code, we define an arrow function expression named multiply. It takes two parameters, a and b, and returns their product. The result is then logged to the console.
Arrow functions have a concise syntax and automatically bind this to the surrounding context, making them particularly useful in certain scenarios.

Function Declarations

Defined using the function keyword.

• Hoisted in JavaScript, meaning they can be called before they are declared.
• Can be used anywhere in the code.

Example:

function functionName(parameters) {

  // Function body

  // Code to be executed

  // Return statement (optional)

}

Function Expressions

• Involves assigning a function to a variable or constant.
• Must be defined before they are used.

Example:

const functionName = function(parameters) {

  // Function body

  // Code to be executed

  // Return statement (optional)

};

Arrow Function Expressions

• Introduced in ES6 as a more concise syntax.
• Ideal for shorter, simpler functions.
• Automatically bind this to the surrounding context.

Example:

const functionName = (parameters) => {

  // Function body

  // Code to be executed

  // Return statement (optional)

};

Sample Problems

Now, let's test your understanding with a couple of sample problems:

Problem 1: Write a function expression named isEven that takes a number as a parameter and returns true if the number is even, and false otherwise.

const isEven = function(number) {

  return number % 2 === 0;

};

console.log(isEven(4)); // Output: true

console.log(isEven(7)); // Output: false

Problem 2: Convert the following function declaration into a function expression:

function square(number) {

  return number * number;

}

Solution:

const square = function(number) {

  return number * number;

};

console.log(square(5)); // Output: 25