❄️ Лексическая область видимости в JavaScript

Это важная тема для полного понимания работы замыканий в JavaScript. Её часто затрагивают на собеседованиях.

Лексическая область видимости определяет доступность переменных и функций в зависимости от их расположения в коде.

❗️ Ключевой момент: она определяется на этапе компиляции кода.

Лексическую область видимости можно разделить на два основных типа:
➖ Глобальная область видимости
➖ Локальная область видимости

🔎 Рассмотрим каждый тип подробнее:

Глобальная область видимости
Переменные, определённые вне функций или блоков, доступны в любом месте программы.

Локальная область видимости
Делится на функциональную область видимости и блочную область видимости.
Переменные, определённые внутри функции или блока, доступны только внутри этой конкретной функции или блока.

Рассмотрим базовый пример с замыканием:

function getCounter() { 
   let counter = 0; // Локальная область видимости — доступна для текущей функции и для всех вложенных функций и блоков. 
   return function() { // Возвращаемая функция имеет доступ к переменным внешней для неё функции.     
      return counter++; 
   } 
}

let count = getCounter(); 
console.log(count()); // 0 
console.log(count()); // 1 
console.log(count()); // 2`

💭 Замыкание использует лексическую область видимости, позволяя внутренним функциям запоминать и получать доступ к переменным из их внешнего лексического окружения.

❗️ В JavaScript все функции являются замыканиями именно благодаря лексической области видимости.

#Собеседование #JavaScript

❄️ Продолжая тему про Лексическое окружение. Хочу рассказать про поднятие (hosting) в js.

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

❕ Поднятие переменных
Все объявление переменных поднимаются, но есть отличие между var и let/const

var переменные - поднимаются и автоматически инициализируются undefined
let/const переменные - так же поднимаются, но автоматически не инициализируются. В следствии чего обращение к таким переменным, до их объявление приведет к ошибке ReferenceError ❗️

console.log(name); // undefined
var name = 'Снежные строки';

console.log(tmpName); // ReferenceError: tmpName is not defined
let tmpName = 'Снежные строки';

❕ Поднятие функций
Объявление функции с помощью function - поднимается и инициализируется ссылкой на эту функцию. Из-за этого у нас есть возможность вызывать функцию до ее объявления.

fun(); // Снежные сроки

function fun() {
  console.log("Снежные сроки");
}


fun2() // ReferenceError: fun2 is not defined

let fun2 = () => {
    console.log("Снежные сроки");
}

#JavaScript

❄️ Навигация

Всем добрый вечер! Решила вам тут накидать навигацию по каналу📚
По некоторым рубрикам еще не было постов, но все будет в будущем! 🫡

🖇
#JavaScript - Интересные статьи по js
#Собеседование - Тут про мой опыт собеседований
#отИдеиДоРелиза - Здесь буду рассказывать про свои идеи, будем вместе их доводить до релиза или хотя бы пытаться
#Задачи - Тут будут интересные задачи, которые мне попадались на тех. интервью либо просто в интернете для закрепление какой либо темы

❕Что было бы больше интересно вам? Можете предлагать идеи!

❄️ Что же такое this?

this - это специальный идентификатор, который автоматически определяется внутри области видимости каждой функции.

❕ Что точно стоит запомнить
this - зависит от того, в каких условиях была вызвана функция

Сегодня я хочу рассказать, какие условия вообще существуют 📚

➖ Привязка по умолчанию
Если попытаться обратиться к this в глобальной области видимости, оно по умолчанию будет привязано к глобальному контексту

➖ Неявная привязка
Если у точки вызова есть объект контекста, следовательно именно этот объект служит this для функции!

function log() {
  console.log(this.a)
}
var obj = {
  a: 2,
  log: log
}
obj.log() // 2

➖Неявно потерянный
Когда неявно привязанная функция теряет привязку и возвращается к привязке по умолчанию

➖Явная привязка
Организуется с помощью функций call, apply

foo.call(obj);
foo.apply(obj);

➖ Жесткая привязка
bind - возвращает функцию, которая вызывает оригинальную функции именно с тем контекстом, который вы передаете

#JavaScript

❄️ Основные темы и часто задаваемые вопросы, которые помогут вам пройти собеседование уверенно.
❕Если у вас возникнут вопросы или дополнения, оставляйте их в комментариях! И также делитесь своим опытом!

Это будет серия постов, так как в один уместиться было сложно

Начнем с секции JavaScript
Вопросы по JavaScript делятся на несколько основных тем:

1️⃣ База
Здесь проверяется общее понимание языка и его особенностей.

➖Типы данных: какие существуют типы в JavaScript?
➖Как работает приведение типов?
➖В чем разница между == и ===?
➖Что такое hoisting? Как он работает с переменными и функциями?
➖Области видимости: что такое глобальная и блочная область видимости?
➖Разница между var, let и const.
➖Чем undefined отличается от null?

2️⃣Асинхронность
Навыки работы с асинхронным кодом

➖Что такое Event Loop, и как он работает?
➖Способы работы с асинхронным кодом
➖Что такое Promise? Какие методы у него есть (then, catch, finally, all, race)?
➖Как работают async/await?
➖Разница между микрозадачами и макрозадачами.

3️⃣ Замыкания и контекст
Эта тема встречается почти на каждом собеседовании.

➖Что такое замыкание? Как оно работает?
➖Что такое this ?
➖Как работает this в различных контекстах?
➖Как использовать call, apply, bind? И в чем их отличие?

4️⃣ Функции

➖Какие типы функций существуют в JavaScript
➖Чем Function Declarations отличаются от Function Expressions?
➖Что такое стрелочные функции, и чем они отличаются от обычных? Как у стрелочных функций работает this?
➖Что такое функции высшего порядка?
➖Что такое чистая функция?
➖Что такое анонимная функция?
➖Что такое каррирование

5️⃣ Прототипы

➖Что такое prototype?
➖Как работает прототипное наследование?
➖Что такое __proto__

6️⃣ Объекты

➖Как работают Object.create() и Object.assign()?
➖Глубокое и неглубокое копирование
➖Как определить свойство в объекте?
➖Рассказать про массивоподобные объекты

7️⃣ Оптимизация и производительность

➖Что такое мемоизация?
➖Как работает debounce и throttle? В чем разница?
➖Каковы основные принципы оптимизации DOM?

#Собеседование #JavaScript

❄️ При обсуждении микротасок в event loop, мы затронули с вами промисы.
Сегодня хотелось бы поподробнее обсудить и полностью разобраться в промисах в js!

✨ Что такое промисы?
Промисы позволяют удобно работать с асинхронным кодом.
Сам из себя представляет обычный объект - который содержит свое состояние.

🖇 Состояния промисов

1️⃣ pending - в ожидании
2️⃣ fulfilled - выполнен успешно
3️⃣ rejected - выполнен с ошибкой

❕ Колбэки:
➖ resolve(value) — если работа завершилась успешно
➖ reject(error) — если произошла ошибка

const promise = new Promise((resolve, reject) => {
  ...  
});

⚙️ Использование промисов
Промисы отлично подходят для обработки асинхронных операций.

У них есть три ключевых метода:
1️⃣ then — обрабатывает успешное выполнение (fulfilled).
2️⃣ catch — обрабатывает ошибки (rejected).
3️⃣ finally — выполняется всегда, вне зависимости от результата.

myPromise
  .then((result) => console.log(result)) // Вывод: Операция выполнена успешно!
  .catch((error) => console.error('Ошибка:', error))
  .finally(() => console.log('Операция завершена.')); // Вывод: Операция завершена.

💬 А как вы предпочитаете работать с асинхронным кодом?

#JavaScript #Собеседование

❄️ Наконец-то дошли руки до алгоритмов!

Свое обучение я начала с базовых методов, которые помогают решать задачи на LeetCode. Сегодня хочу поделиться одним из них — методом двух указателей.

🔍 Что такое метод двух указателей?

Метод двух указателей — это техника, которая используется для решения задач с массивами или строками. В этом методе используются два указателя (индекса), которые перемещаются по массиву или строке по заданному правилу

Чаще всего:
➖ Один указатель начинается с начала массива (left).
➖ Другой — с конца массива (right).
➖ Они движутся навстречу друг другу, пока не встретятся.

📚 Пример задачи: Two Sum II
Разберем на примере задачи с leetCode 167. Two Sum II - Input Array Is Sorted

Описание
Дан отсортированный массив целых чисел numbers и целое число target. Необходимо найти индексы двух чисел, которые в сумме дают target.
Индексы должны быть на 1 больше, чем реальные индексы массива (по условию задачи).

Алгоритм работы:
1. Мы используем два указателя: left (начало массива) и right (конец массива).
2. На каждом шаге вычисляем сумму элементов на этих указателях.
3. Если сумма равна target, возвращаем индексы.
4. Если сумма меньше target, двигаем left вправо (увеличиваем сумму).
5. Если сумма больше target, двигаем right влево (уменьшаем сумму).

Код

var twoSum = function(nums, target) {
    let left = 0;
    let right = nums.length - 1;

    while (left < right)
    {
        const sum = nums[left] + nums[right];

        if (sum == target)
            return [left + 1, right + 1];

        if (sum > target)
            right--;

        if (sum < target)
            left++;
    }
};

❄️ Задачи для практики:
125. Valid Palindrome
26. Remove Duplicates from Sorted Array
11. Container With Most Water

#JavaScript #Алгоритмы

❄️ Всех с началом недели!

Разберемся сегодня с вопросом, который часто встречается на собеседованиях.
Что такое чистая функция?

🔹Чистая функция - это любая функция, которая:
➖ Не вызывает никаких побочных эффектов.
➖ При одинаковых входных данных всегда возвращает одинаковый результат.

🔸 Побочные эффекты (side effects) - любое изменение внешнего состояния за пределами функции. Например:
- Вызов API
- Мутация входных данных
- Логирование
- Изменение глобальных переменных

Пример чистой функции:

function add(a, b) 
{ 
   return a + b;
}

add - всегда возвращает одно и то же значение при одинаковых аргументах и не изменяет внешние данные — значит, она чистая

Зачем нужны чистые функции?
📌 Чистые функции - делают код понятным, предсказуемым и легко тестируемым

#JavaScript

❄️ Продолжим разбираться в алгоритмах!
Хочу разобрать самую первую задачу на leetCode.

1. Two Sum
Описание:
Дан массив целых чисел nums и целое число target.
Нужно найти два разных индекса i и j, такие что:
nums[i] + nums[j] === target.
Вернуть нужно массив [i, j].
Гарантируется, что решение всегда есть, и один элемент нельзя использовать дважды.

❕ Решать данную задачу рекомендуется с помощью хэш-таблиц.
Хэш-таблицы - Структура данных, реализована ассоциативным массивом. Структура связывает ключи со значением.

Алгоритм работы:

Сначала заполняем хэш-таблицу: кладём туда все элементы из массива, где:
- ключ — это само число
- значение — его индекс

Затем проходим по массиву снова:
1. Для каждого числа nums[i] считаем, какое число нужно к нему в пару, чтобы в сумме получился target.
target - nums[i]
2. Проверяем: а есть ли такое число в нашей хэш-таблице?
3. Если есть, и его индекс не совпадает с текущим — возвращаем пару индексов.

Код

var twoSum = function(nums, target) {
    const hash = {};
    nums.forEach((item, index) => hash[item] = index);

    for (let i = 0; i < nums.length; i++)
    {
        let findKey = target - nums[i];

        if (hash[findKey] && hash[findKey] != i)
            return [i, hash[findKey]];
    }

    return [];
};

❄️ Задачи для практики:
217. Contains Duplicate
219. Contains Duplicate II
560. Subarray Sum Equals K

#JavaScript #Алгоритмы

❄️ Функция высшего порядка
Тема, которую можно встретить на собеседованиях очень часто. Давайте разберемся! 🤓

Если вы программируете на JavaScript, но никогда не слышали про функции высшего порядка, то вы точно с ними сталкивались.
Так как JavaScript поддерживает функциональное программирование.

❕Функция высшего порядка — это функция, которая принимает другие функции в качестве аргументов или возвращает функции в качестве результата

➖ Функция, которая принимает другую функцию в качестве аргумента - функция обратного вызова.
Возьмем примеры из JavaScript: map, filter, forEach, setTimeout и еще много других.

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6]

map - это функция высшего порядка. Она принимает другую функцию (колбэк), которая применяется к каждому элементу

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

function greet(name) {
  return function (greeting) {
    console.log(`${greeting}, ${name}!`);
  };
}

const greetAnna = greet('Анна');
greetAnna('Привет'); // Привет, Анна!
greetAnna('Доброе утро'); // Доброе утро, Анна!

❕Вопросы, которые могут встретиться на собеседовании по этой теме:
1. Что такое функция высшего порядка?
2. Приведите пример HOF из стандартной библиотеки JS.
3. Какие преимущества дают HOF в коде?

#Собеседование #JavaScript