# Understanding JavaScript Functions: Declaration vs Expression

In today's blog, we are going to learn about functions in JavaScript and the use cases of functions. Our main focus for today's blog is understanding functions, function declarations, and function expressions.

### What is a Function?

A function is a block of code designed to perform a specific task. Instead of writing the same code again and again, we wrap that logic inside a function and call it whenever we want to use it or needed.

For example, assume you want to add two numbers multiple times.

Let's take an example

```javascript
let result1 = 5 + 10;
let result2 = 7 + 3;
let result3 = 8 + 12;
```

Without a function, if we need to add two numbers multiple time our code looks like this. This does not follow the DRY (Do not Repeat Yourself ) principle.

Instead, we can you function

```javascript
function add(a, b) {
  return a + b;
}

// Now we can reuse it:

add(5, 10); // 15
add(7, 3);  // 10
add(8, 12); // 20
```

It improved code readability and maintainability.

## Function Declaration

A **function definition** (also called a **function declaration**, or **function statement**) consists of the `function` keyword, followed by:

*   The name of the function.
    
*   A list of parameters to the function, enclosed in parentheses and separated by commas.
    
*   The JavaScript statements that define the function, enclosed in curly braces, `{ /* … */ }`.
    

### Syntax

```javascript
function functionName(parameters) {
  // code to execute
}
```

Example:

```javascript
function multiply(a, b) {
  return a * b;
}
```

## Function Expression

A function expression is another way of writing a function, and the syntax is almost similar to a **function declaration**. The main difference between a function expression and a function declaration is that the function name in a function expression can be **omitted** to create an anonymous function. A function expression can be used as an **IFEE ( Immediately Invoked Function Expression)**, which runs as soon as it is defined.

**Syntax**

```javascript
const variableName = function(parameters) {
  // code
};
```

**Example**

```javascript
const getRectArea = function (width, height) {
  return width * height;
};

console.log(getRectArea(3, 4));
// Expected output: 12
```

Here we store the function in a variable.

> Note: Function expressions in JavaScript are not hoisted, unlike function decleartions. You can't use function expression before you create them:

```javascript
console.log(notHoisted); // undefined
// Even though the variable name is hoisted,
// the definition isn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};
```

| Feature | Function Declaration | Function Expression |
| --- | --- | --- |
| Definition style | Defined using `function name()` | Stored inside a variable |
| Naming | Must have a function name | Usually anonymous |
| Hoisting behavior | Fully hoisted | Not fully hoisted |
| Use case | General reusable functions | Dynamic or conditional functions |

![](https://cdn.hashnode.com/uploads/covers/6953c37709349c47ab7f5fc0/44a0303a-1999-4090-9bb8-530747431df8.png align="center")

## Basic Idea of Hoisting

In JavaScript, Hosting is the concept where the JavaScript interpreter moves the function declaration, variables, classes, or imports to the top of their scope before executing the code.

To understand this, let's take a few examples

Example 1:

```javascript
console.log(variable1); // Line 1
var variable1="holding a string"; // Line 2
console.log(variable1); // Line 3

// Instead of throwing a error the output looks like this
// undefined
// holding a string
```

As you can see here, instead of throwing errors in line 1, it says undefined because `variable1` The value is still not defined, but on line 2, the value is defined. `it's holding a string`, so when we use that in line 3, we get our expected output.

Example 2:

```javascript
console.log(value1)
```

Now, in this example, you can clearly see that there is no variable named value1, so it throws an error `value1 is not defined.`

### Function Declaration Hoisting Example

```javascript
sayHello(); // Works

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

// Output 
// Hello!
```

This happens because **function declarations are fully hoisted to the top of their scope** during the creation phase of execution.

> Note that function expression are not hoisted

```javascript
sayHi(); // Error

const sayHi = function () {
  console.log("Hi!");
};

// Output Error
// sayHi is not defined
```

### Conclusion

Functions are one of the most important building blocks in JavaScript. They allow us to write reusable and maintainable code.

Practice Assignment: Try Yourself

### Practice Assignment

Write a function declaration that multiplies two numbers.

Example:

```javascript
function multiply(a, b) {
  return a * b;
}

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

Write the same logic using a function expression.

```javascript
const multiplyNumbers = function(a, b) {
  return a * b;
};

console.log(multiplyNumbers(4, 5));
```