Suggest an edit

Improve this article

Refine the answer for “Difference between FD and FE”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. Function Declaration

### Example:

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

### Features:

- **Hoisted** - i.e. the function is available **before the point of its declaration**.
- The function name is fixed and available in the current scope.
- Can be called **anywhere in the file or block**, even before the declaration code.

### Example of hoisting:

```javascript
greet(); // works, even though the function is declared below

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

**Result:**

```javascript
Hello!
```

---

## 2. Function Expression

### Example:

```javascript
const sayHello = function() {
  console.log("Hello!");
};
```

or the arrow version:

```javascript
const sayHello = () => console.log("Hello!");
```

### Features:

- **Not hoisted like a declaration** - the variable is created, but the function in it is not available until initialization.
- Can be **anonymous** (without a name) or **named**.
- Considered an expression, so it is called **only after** assignment.

### Example:

```javascript
sayHello(); // Error: sayHello is not a function

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

---

## Key differences

| Property | Function Declaration | Function Expression |
|---|---|---|
| **Hoisting** | Available before declaration | Not available until assignment |
| **When created** | On scope initialization | During line execution |
| **Can be called before declaration?** | Yes | No |
| **Function name** | Required (a declaration is always named) | Can be anonymous or named |
| **Suited for** | Main functions needed everywhere | Local functions, passed as arguments, callbacks |
| **Usage example** | `function sum(a,b){}` | `const sum = (a,b)=>{}` |

---

## 3. Example for visual comparison

```javascript
// --- Function Declaration ---
sayHi(); // Works

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

// --- Function Expression ---
sayBye(); // Error

const sayBye = function() {
  console.log("Bye!");
};
```

---

## When to use what

**Function Declaration** - when the function is needed **globally** and can be called anywhere.
**Function Expression / Arrow Function** - when the function is needed **locally**, as a **handler**, **callback**, or part of an expression.

---

## Key takeaway

> `function declaration` **- created in advance (hoisting).**
> `function expression` **- created at the moment of execution.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts365 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.