VAR | LET | CONST

Все это способы объявить переменные в JS, но имеют отличия в работе.

Для начала let и const

let - используй для переменных, которые будут меняться
const - для неизменяемых переменных
при попытке эту переменную переопределить, у тебя просто напросто выскочит ошибка,
НО объекты (в т.ч. массивы), объявленные таким образом, менять можно - об этом позже в отдельном посте

Переменные, объявленные таким образом видны только в своем блоке фигурных скобок {}

let a = 13

{
  let a = 12
  const b = 34
  console.log(a) // 12
  console.log(b) // 34
}

console.log(a) // 13
console.log(b) // выдаст ошибку ReferenceError: b is not defined

#JS #Junior #переменные

Немного про VAR

Все советуют забыть этот способ объявления как страшный сон и я соглашусь,
но важно понимать как это работает, если столкнешься с legacy, пишешь код для очень древних браузеров (или ты просто любопытный)

Основное отличие от let/const - переменная, объявленная через var видна во всей функции, в которой была объявлена
И фигурные скобки для нее не преграда

var a = 13

{
  var a = 12
  var b = 34
  console.log(a) // 12
  console.log(b) // 34
}

console.log(a) // 12
console.log(b) // 34

В примере выше, через повторное объявление a мы на самом деле нашли старую в текущей функции
(а т.к. функцию мы не объявляли, то в глобальном объекте - window)
и записали в нее новое значение

——

var - считается устаревшим и неудобным способом объявления переменных, т.к.

❕можно случайно переопределить переменную, объявленную ранее в коде
❕создает путаницу при чтении кода, т.к. допустимо сначала переменную использовать, а потом объявить

console.log(a) // сработает и выведет undefined
var a = 10 

Если вдруг по какой то причине вы решили, что вам нужна переменная, которая видна во всей функции, а не только в блоке {} - просто объявляете let/const в начале вашей функции - багов меньше, код читабельнее

#JS #Junior #переменные

Сегодня хочу зафиксировать тему про лексические окружения (лексическую область видимости)

📌 В JavaScript область видимости определяется на этапе написания кода, а не выполнения.

➡️ ты пишешь код
➡️ движок JS сразу запоминает, где написана каждая функция,
и какие переменные она может видеть — ещё до того, как ты её запустишь.

JS не будет потом «думать» в момент вызова функции — он уже заранее знает:

👉 «эта функция была написана вот тут, значит, она может видеть только вот такие переменные»

Что это значит на практике?

Где ты написал функцию — важнее, чем откуда ты её вызвал.
Это напрямую влияет на то, какие переменные функция будет видеть.

let name = "Валерка";

function sayHi() {
  console.log("Привет, " + name);
}

sayHi(); // Привет, Валерка

✅ Функция sayHi написана рядом с name, значит она его "видит".

🚫 А вот пример — не работает:

function sayHi() {
  console.log("Привет, " + name);
}

function run() {
  let name = "Валера";
  sayHi();
}

run(); // ReferenceError: name is not defined

Хотя мы вызываем sayHi внутри функции, где есть переменная name, она не сработает —
потому что sayHi была написана вне этой функции и не видит name.

——

⚠️ Основное и самое главное, что нужно запомнить:

неважно ГДЕ и КАК вызвана функция, ее лексическая область видимости определяется только тем ГДЕ она была объявлена

#JS #Junior #область_видимости

Замыкания - такой ли страшный зверь?

Если ты разобрался с лексической областью видимости, то замыкания будут тебе понятны, если нет ... читай про лексическое окружение :)

Определение замыкания вообще звучит следующим образом:
способность функции запоминать свою лексическую область видимости и обращаться к ней даже тогда, когда функция выполняется вне своей лексической области видимости.

Звучит занудно и непонятно? Да, бывает

На практике это означает, что
любая функция, которая передана как значение и вызванная где то в другой точке программы - пример замыкания
Такие функции сохраняют ссылку на то место, где были созданы и имеют доступ к переменным внутри этой области

————

💛 Пример из реальной жизни, где реализовано и используется замыкание:

function createCounter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Что тут происходит?

1️⃣ createCounter запускается → внутри создаётся count = 0.
2️⃣ Возвращается внутренняя функция, которая помнит count, даже когда createCounter уже завершился.
3️⃣ Каждый вызов counter() увеличивает и возвращает count.

———

Еще один пример:

import { useEffect, useState } from "react";

function Timer() {
  const [message, setMessage] = useState("Ждём...");

  useEffect(() => {
    const name = "Валерка";

    setTimeout(() => {
      setMessage(`Привет, ${name}`);
    }, 3000);
  }, []);

  return <p>{message}</p>;
}

Это уже немного React.js, но все таки по теме

Что происходит и где тут замыкание?

Стрелочная функция внутри setTimeout - классический пример замыкания.
Эта функция вызовется не скоро и явно вне того места, где была объявлена, но она хранит ссылку на место объявления и "видит" переменную name

———

❇️ Финализируем..

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

#JS #Junior #область_видимости #замыкания

THIS

Конструкция не самая популярная, но важная, если хочешь не просто писать код, а понимать как он работает, НО

Для начала, если ты

▫️ пишешь на React, это тебе нужно только для общего понимания как работает язык
▫️ пишешь на ReactNative, то аналогично с фронтендом
🔺 пишешь бекенд, особенно используя Express, TypeORM, Sequelize - это стоит понимать

А теперь к теории...)

Наверняка (хотя мб и нет, если твой код в основном на стрелочных функциях и функциональных объектах)
в своей практике ты сталкивался с тем, что функция что-то пытается вытащить из this:

const settings = {
  mode: "dark",
  logMode() {
    console.log(`Режим: ${this.mode}`);
  },
};

settings.logMode(); // Режим: dark

Сегодня хочу разобрать на что этот объект ссылается и чем это точно не является

————

Чем THIS не является:

🔸 Это НЕ ссылка функции на саму себя
🔸 Это НЕ указатель на лексическую область видимости функции

Тогда что же такое THIS и куда оно нас отошлет при вызове?

this определяется не во время написания кода, а в момент вызова функции.

Когда функция вызывается — создается "контекст выполнения" (execution context).
В нем формируется ссылка this, основываясь на том, как именно была вызвана функция.

Определяем, на что эта ссылка указывает

4 правила определения this (из книги YDKJS):

1️⃣ new — создается новый объект → this = новый объект
2️⃣ call, apply, bind — this = переданный объект
3️⃣ Вызов через объект — this = сам объект
4️⃣ По умолчанию — this = undefined (в strict) или global (в обычном режиме)

📖 Хочешь понять тему глубже?
Вот глава из YDKJS на русском

Тема очень обширная и вставлять примеры кода не буду, т.к. пост разрастется до огромных масштабов, но все это есть в статье по ссылке выше
--------

⚠️ this требует внимания — особенно при передаче функций или колбэков. Но он может избавить от громоздких конструкций и сделать код элегантнее

——

🧠 Про стрелочные функции, а также разницу между bind, call и apply — расскажу в отдельных постах.

#JS #Middle #this