Suggest an edit

Improve this article

Refine the answer for “Scope of a function”. 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. Definition

> A **function's scope** is the internal "visibility zone" created when a function is called.
>
> All variables declared with `var`, `let`, `const`, or `function` inside the function
> are **accessible only inside that function and its nested functions**.

In other words:

- variables "live" **only inside the function** where they are declared;
- they **cannot be seen** from outside.

---

## 2. Example

```javascript
function sayHi() {
  const name = 'Bohdan';
  console.log('Hello,', name);
}

sayHi();
console.log(name); // ReferenceError: name is not defined
```

The variable `name` is available only **inside the function** `sayHi()`.
It does not exist outside - because this is **function scope**.

---

## 3. A function creates its own "lexical environment"

Every function call creates a **new environment (scope)**,
where its own variables live.

```javascript
function counter() {
  let count = 0;
  return () => ++count;
}

const c1 = counter();
const c2 = counter();

console.log(c1()); // 1
console.log(c1()); // 2
console.log(c2()); // 1
```

Here `c1` and `c2` have **different scopes** with different `count` variables.

---

## 4. Scopes are nested inside one another

JS uses **lexical (static) scope** -
a function "remembers" where it was declared, not where it was called.

```javascript
let a = 10;

function outer() {
  let b = 20;

function inner() {
    let c = 30;
    console.log(a, b, c);
  }

inner();
}

outer(); // 10 20 30
```

- `inner` has access to `a`, `b`, `c`;
- `outer` has access to `a`, `b`;
- the global scope has access only to `a`.

This is the scope hierarchy (scope chain).

---

## 5. `var` scope vs `let` / `const` scope

| Declaration | Scope |
|---|---|
| `var` | **Function** scope (the whole function) |
| `let`, `const` | **Block** scope (inside `{ ... }`) |

Example:

```javascript
function test() {
  if (true) {
    var x = 1;
    let y = 2;
  }
  console.log(x); // 1
  console.log(y); // ReferenceError
}
test();
```

---

## 6. Example of "leaking" without function scope

```javascript
if (true) {
  var x = 10;
}
console.log(x); // 10 - the variable "leaked"
```

`var` has no block scope, only **function** scope.
If you wrap the code in a function, it becomes safe:

```javascript
function run() {
  var x = 10;
}
console.log(x); // ReferenceError
```

---

## 7. Global vs local scope

| Level | Where the variable is visible | Example |
|---|---|---|
| Global | Everywhere in the code | `let appName = "MyApp"` |
| Function | Only inside the function | `function foo() { let x = 1; }` |
| Block | Only inside `{}` | `if (...) { let y = 2; }` |

---

## 8. Scope and closures

Closures **use function scope**
to "capture" variables from the outer scope:

```javascript
function makeCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
```

The function "remembers" the scope where it was created.

---

## SUMMARY

| Property | Description |
|---|---|
| What it is | The area where variables and functions are visible |
| When it is created | When a function is called |
| Where variables are visible | Inside the function and nested functions |
| What is not visible | Variables outside the function |
| `var`'s scope type | Function |
| `let`/`const`'s scope type | Block |
| Related to | Closures, lexical environment, scope chain |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.