Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Директива use strict». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`"use strict"` це директива, яка вмикає строгий режим інтерпретації JavaScript: `this` у звичайній функції стає `undefined` замість глобального об'єкта, а присвоєння неоголошеній змінній стає помилкою замість неявного створення глобальної змінної.** Строгий режим допомагає писати безпечніший і передбачуваніший код, бо усуває «тихі» помилки і стару неочевидну поведінку.

## Теорія

### TL;DR
- Директива діє в межах файлу або функції, на початку якої вона написана.
- `this` у звичайному виклику функції стає `undefined`, а не глобальним об'єктом; у методах і стрілкових функціях нічого не змінюється.
- Присвоєння неоголошеній змінній кидає `ReferenceError`, замість того щоб створити глобальну змінну.
- Заборонені: дублікати імен параметрів, `delete` змінної або функції, присвоєння в `undefined`, `NaN`, `Infinity`, оператор `with`.
- `eval` отримує власну область видимості і більше не забруднює довколишній scope.

### Швидкий приклад
```javascript
'use strict';

function showThis() {
  console.log(this);
}

showThis(); // undefined

function test() {
  x = 10; // ReferenceError: x is not defined
}
test();
```

Директиву ставлять першим рядком файлу:

```javascript
'use strict';
```

або першим рядком функції:

```javascript
function foo() {
  'use strict';
  // строгий режим діє тільки всередині цієї функції
}
```

У модулях ES і в тілах класів строгий режим увімкнений завжди, писати директиву там не треба.

### Головна зміна: поведінка `this`

| Контекст | Без `"use strict"` | З `"use strict"` |
| --- | --- | --- |
| У звичайній функції | `this` -> глобальний об'єкт (`window` у браузері) | `this` -> `undefined` |
| У методі об'єкта | `this` -> сам об'єкт | `this` -> той самий об'єкт, без змін |
| У стрілковій функції | успадковується ззовні | успадковується ззовні, без змін |

Приклад без строгого режиму:

```javascript
function showThis() {
  console.log(this);
}

showThis(); // глобальний об'єкт (window у браузері)
```

Тут рушій «підставляє» глобальний об'єкт за замовчуванням.

Приклад зі строгим режимом:

```javascript
'use strict';

function showThis() {
  console.log(this);
}

showThis(); // undefined
```

У строгому режимі, якщо функцію викликано **не як метод об'єкта**, `this` лишається `undefined`: жодних неявних «магічних» прив'язок. Це рятує від випадкових звернень до глобального об'єкта (`window` у браузері, `global` у Node.js) і від непомітного створення глобальних властивостей.

### Заборона неявних глобальних змінних
Без строгого режиму:

```javascript
function test() {
  x = 10; // змінна створиться глобально!
  console.log(x);
}

test();
console.log(globalThis.x); // 10
```

Зі строгим режимом:

```javascript
'use strict';

function test() {
  x = 10; // ReferenceError: x is not defined
}
test();
```

Тепер змінні треба оголошувати явно через `let`, `const` або `var`, інакше буде помилка. Це прибирає цілий клас багів, коли одна друкарська помилка в імені змінної мовчки створює нову глобальну змінну.

### Синтаксичні заборони: дублікати, delete і with
Дублікати імен параметрів. Без строгого режиму:

```javascript
function sum(a, a, c) {
  return a + a + c;
}

console.log(sum(1, 2, 3)); // 7
```

Зі строгим режимом:

```javascript
'use strict';
function sum(a, a, c) { // SyntaxError
  return a + a + c;
}
```

Видалення змінних, функцій і параметрів. Без строгого режиму:

```javascript
var a = 1;
delete a; // false
```

Зі строгим режимом:

```javascript
'use strict';
var a = 1;
delete a; // SyntaxError
```

У строгому режимі не можна видаляти те, що не є властивістю об'єкта. Оператор `with` також заборонений повністю, бо він робить область видимості непередбачуваною.

### Тихі помилки стають гучними
Присвоєння в `undefined`, `NaN` та `Infinity`:

```javascript
'use strict';

undefined = 5; // TypeError
NaN = 123; // TypeError
Infinity = 42; // TypeError
```

Порівняння поведінки:

| Ситуація | Без `"use strict"` | З `"use strict"` |
| --- | --- | --- |
| Присвоєння в `NaN`, `undefined`, `Infinity` | тихо ігнорується | помилка |
| Присвоєння в `const` | ігнорується | помилка |
| Оператор `with` | дозволено | заборонено |
| Видалення властивостей, які не можна видаляти | тихо ігнорується | помилка |

Головна ідея строгого режиму саме в цьому: операція, яка раніше нічого не робила і нічого не повідомляла, тепер одразу падає з помилкою, і баг видно під час розробки, а не в продакшені.

### Безпечніший eval і підсумкова таблиця
Без строгого режиму `eval` може створювати змінні у поточному контексті:

```javascript
eval('var x = 10;');
console.log(x); // 10
```

Зі строгим режимом `eval` створює власну область видимості:

```javascript
'use strict';
eval('var x = 10;');
console.log(x); // ReferenceError
```

Це не дає випадково забруднити довколишнє оточення.

| Що змінює `"use strict"` | Поведінка |
| --- | --- |
| `this` у звичайних функціях | `undefined` замість глобального об'єкта |
| Неоголошені змінні | Помилка |
| Дублікати параметрів | Помилка |
| Видалення змінних і функцій | Помилка |
| Присвоєння в `NaN`, `undefined`, `Infinity` | Помилка |
| `eval` | Створює власний scope |
| `with` | Заборонений |

### Типові помилки
- Ставити директиву не першим рядком файлу чи функції: тоді це просто рядковий літерал, і строгий режим не вмикається.
- Вважати, що `"use strict"` діє на весь проєкт. Він діє тільки в межах свого файлу або своєї функції.
- Дописувати директиву в модуль ES або в клас: там строгий режим уже увімкнений за специфікацією.
- Забувати, що в строгому режимі `this` у звичайній функції це `undefined`, і звертатись до `this.something` після втрати контексту: замість непомітного глобального об'єкта отримаєте `TypeError`.
- Конкатенувати файли, з яких хоча б один починається з `"use strict"`: директива на початку результату може несподівано перевести в строгий режим увесь бандл.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати878 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.