Базовые знания JavaScript: типы данных, всплытие, области видимости, контекст, замыкания, мутабельность

JavaScript — это один из самых популярных языков программирования для веб-разработки. Его основные концепции, такие как типы данных, всплытие, области видимости, контекст, замыкания и мутабельность, формируют базу для создания эффективного и читаемого кода.

d

Примитивные типы

1. String (строка): 'Hello', "World".
2. Number (число): 42, 3.14.
3. Boolean (логический тип): true, false.
4. Null: Специальное значение, указывающее на отсутствие значения.
5. Undefined: Значение переменной, которой не присвоено значение.
6. Symbol: Уникальный идентификатор.
7. BigInt: Для работы с большими числами.

Объектные типы

• Object: Универсальный контейнер для хранения данных в виде пар "ключ-значение".
• Array: Упорядоченный список значений.
• Function: Подтип объекта, который можно вызывать.

Проверка типа

Используйте оператор typeof для определения типа данных. Рассмотрим проверки для всех типов:

// Примитивные типы
console.log(typeof 'Hello'); // 'string'
console.log(typeof 42); // 'number'
console.log(typeof true); // 'boolean'
console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object' (особенность JS)
console.log(typeof Symbol('id')); // 'symbol'
console.log(typeof 10n); // 'bigint'

// Объектные типы
console.log(typeof {}); // 'object'
console.log(typeof []); // 'object' (массив — это подтип объекта)
console.log(typeof function(){}); // 'function' (особый подтип объекта)

// Особенности
console.log(null == undefined); // true (нестрогое равенство)
console.log(null === undefined); // false (строгое равенство)
console.log([] == 0); // true (нестрогое равенство приводит массив к числу)
console.log(typeof NaN); // 'number' (особенность NaN)

// Порядок операций с + и -
console.log(1 + '2'); // '12'
console.log('2' + 1); // '21'
console.log(1 + 2 + '3'); // '33'
console.log('1' - 1); // 0 (арифметическая операция)

// Особенности с 0 и -0
console.log(0 === -0); // true
console.log(1 / 0); // Infinity
console.log(1 / -0); // -Infinity

2. Всплытие (Hoisting)

Что это?

Всплытие — это механизм, при котором объявления переменных и функций "поднимаются" в начало своей области видимости.

Пример

console.log(a); // undefined
var a = 5;

sayHello(); // 'Hello'
function sayHello() {
  console.log('Hello');
}

Особенности

• Переменные, объявленные с var, всплывают, но их значение остаётся undefined до момента присвоения.
• let и const также всплывают, но находятся в "временной мёртвой зоне" до их инициализации.

3. Области видимости

Типы областей видимости

1. Глобальная: Переменные доступны во всём скрипте.
2. Функциональная: Переменные доступны только внутри функции.
3. Блочная: Переменные, объявленные через let или const, доступны только внутри блока.

Пример

if (true) {
  let x = 10;
  var y = 20;
}
console.log(y); // 20
console.log(x); // ReferenceError

4. Контекст (this)

Что такое `this`?

this — это объект, на который указывает текущий контекст выполнения.

Примеры

1. Глобальный контекст:

console.log(this); // В браузере: Window, в Node.js: глобальный объект

2. В методе объекта:

const obj = {
  name: 'John',
  greet() {
    console.log(this.name);
  }
};
obj.greet(); // 'John'

3. В стрелочной функции:

const arrow = () => {
  console.log(this);
};
arrow(); // Наследует `this` из внешнего контекста

5. Замыкания

Что это?

Замыкание — это функция, которая запоминает своё лексическое окружение, даже если она вызывается вне своей области видимости.

Пример

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

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

Зачем нужны замыкания?

• Для создания приватных переменных.
• Для написания функций-генераторов.

6. Мутабельность

Что это?

Мутабельность определяет, можно ли изменять объект после его создания.

Примеры

1. Примитивы (Immutable):

let a = 10;
let b = a;
a = 20;
console.log(b); // 10

2. Объекты (Mutable):

const obj = { x: 10 };
const copy = obj;
obj.x = 20;
console.log(copy.x); // 20

Как работать с неизменяемыми объектами?

• Используйте методы копирования (Object.assign, спред-оператор).

const newObj = { ...obj, x: 30 };

Итоговые вопросы для подготовки

1. Какие типы данных есть в JavaScript?
2. Как работает всплытие переменных и функций?
3. Чем отличается область видимости var от let?
4. Как this определяется в разных контекстах?
5. Что такое замыкание, и как оно работает?
6. Как обеспечить неизменяемость объектов?

Совет: Попробуйте реализовать примеры из каждой секции, чтобы закрепить материал.