Сравнение объектов и Map в JavaScript

📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.

Map: Ключи могут быть любого типа, включая объекты, функции и числа.

const obj = {};
const map = new Map();

const keyObj = {};
obj[keyObj] = 'value'; // Ключ преобразуется в "[object Object]"
map.set(keyObj, 'value'); // Ключ остается объектом

console.log(obj[keyObj]); // 'value'
console.log(map.get(keyObj)); // 'value'

📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.

Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.

const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);

console.log(Object.keys(obj)); // ['b', 'a'] (порядок не гарантирован)
console.log([...map.keys()]); // ['b', 'a'] (порядок гарантирован)

📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.

Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().

const obj = { a: 1, b: 2 };
const map = new Map([['a', 1], ['b', 2]]);

for (const key in obj) {
  console.log(key, obj[key]);
}

for (const [key, value] of map) {
  console.log(key, value);
}

📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.

Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.

#frontend #javascript #map #object

Event loop: Как запомнить микро- и макротаски

❗️ Микротаски всегда выполняются сразу после текущей операции и всегда до следующей макротаски.

⚡️ Микротаски имеют приоритет. Как только появляется микротаска, она всегда выполняется первой.

⚡️ Макротаски — крупные задачи, такие как setTimeout, setInterval, выполнение основного кода скрипта и обработка событий. Они выполняются по очереди из своей очереди, но только после выполнения всех микротасок.

⚡️ Когда выполняется макротаска, и в процессе возникают микротаски (например, через Promise), все микротаски должны быть выполнены до того, как начнется следующая макротаска.

Микротаски:
- Promise: Все колбеки, добавленные с помощью then, catch, finally.
- process.nextTick: В Node.js используется для выполнения задачи до следующего прохода в цикле событий.
- MutationObserver: Колбеки, которые срабатывают при изменении DOM.

Макротаски:
- setTimeout и setInterval: Асинхронные вызовы с задержкой.
- setImmediate: (в Node.js) Вызовы, которые выполняются на следующей итерации цикла событий, после текущей макротаски.
- I/O задачи: Например, операции ввода/вывода (запросы к сети, чтение файлов).
- UI Rendering: Обновления пользовательского интерфейса (в браузере).
- Основной код скрипта: Тот код, который запускается в начале выполнения программы.

#frontend #javascript #eventloop

Чем отличаются циклы for...in и for...of в JavaScript

for...in
Цикл for...in используется для перебора свойств объекта (ключей), а также всех индексов массива, если он используется с массивом. Это важно: for...in перебирает ключи (индексы массива), а не значения.

Пример с объектом:

const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2020
};

for (const key in car) {
  console.log(key, car[key]);
}

// make Toyota
// model Corolla
// year 2020

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

// 0 apple
// 1 banana
// 2 cherry

for...of
Цикл for...of используется для перебора значений итерируемых объектов, таких как массивы, строки, Map, Set и т.д. Он перебирает значения.

Пример с массивом:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// banana
// cherry

Пример со строкой:

const name = 'Alice';

for (const char of name) {
  console.log(char);
}
// A
// l
// i
// c
// e

❓ Как запомнить
for...in – для индексов и свойств объекта.
for...of – для объектов итерируемых, значений.

Используйте for...in для обхода ключей объектов или индексов массива. Используйте for...of для обхода значений массивов, строк или других итерируемых объектов.

#frontend #javascript

🖥 Управление состоянием с помощью паттерна Observer

Когда приложение разрастается, работа с состоянием через обычные глобальные переменные становится непрактичной и приводит к хаосу. Чтобы избежать этого, важно использовать более структурированные подходы, такие как паттерн Observer. Он помогает разделить логику обновления и реакцию на изменения, что делает код более гибким и легко масштабируемым.

Рассмотрим, как создать и использовать простую реализацию этого паттерна для управления состоянием.

✏️ Создание Observable
В отдельном файле создадим функцию, которая будет хранить состояние и управлять подписчиками. Назовем её createObservable:

// observable.js
export const createObservable = (initialState = []) => {
  let state = initialState;
  let observers = [];

  // Метод для уведомления всех подписчиков об изменениях
  const notify = () => {
    observers.forEach((observer) => observer(state));
  };

  return {
    // Метод для подписки на изменения
    subscribe: (observer) => {
      observers = [...observers, observer];
    },
    // Метод для отмены подписки
    unsubscribe: (observer) => {
      observers = observers.filter((obs) => obs !== observer);
    },
    // Метод для изменения состояния и уведомления подписчиков
    setState: (newState) => {
      state = newState;
      notify();
    },
    // Метод для получения текущего состояния
    getState: () => state,
  };
};

💭 Создание хранилища (Store)
Теперь вместо использования обычного массива, создадим состояние для списка фильмов, используя наш createObservable. Это позволит нам централизованно управлять состоянием и уведомлять подписчиков об изменениях.

// store.js
import { createObservable } from './observable';

const moviesObservable = createObservable([]);

⌛️ Добавление данных в хранилище
Теперь предположим, что вы загружаете данные о фильмах с API:

const fetchMovies = async (query) => {
  const response = await fetch(`https://api.example.com/movies?search=${query}`);
  const movies = await response.json();
  return movies;
};

// Получаем фильмы и обновляем состояние хранилища
const moviesFromApi = await fetchMovies('Inception');

moviesObservable.setState(moviesFromApi); // Теперь в хранилище у нас массив фильмов

✉️ Подписка на изменения
Когда состояние изменится, нам нужно автоматически отобразить новые данные. Например, создадим функцию displayMovies, которая будет выводить фильмы на экран, и подпишем её на наш moviesObservable:

const displayMovies = (movies) => {
  console.log('Фильмы обновились:', movies);
};

// Подписываемся на изменения в состоянии хранилища
moviesObservable.subscribe(displayMovies);

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

🔔 Получение текущего состояния
Для доступа к текущим данным из хранилища можно использовать метод getState:

const currentMovies = moviesObservable.getState();
console.log('Текущие фильмы:', currentMovies);

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

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

Использование паттерна Observer — это хорошая база для перехода к более сложным инструментам управления состоянием, таким как Redux или MobX.

#javascript #store #observer

🖥 Функция-конструктор в JavaScript

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

✏️ Создание функции-конструктора
Функция-конструктор выглядит как обычная функция, но она пишется с заглавной буквы по соглашению, чтобы отличаться от других функций. Внутри конструктора используется this для задания свойств создаваемого объекта.

function Person(name, age) {
    this.name = name; // свойство name
    this.age = age;   // свойство age
}

🎮 Создание объектов с помощью конструктора
Чтобы создать объект с помощью конструктора, используется оператор new. Он:

- Создает новый пустой объект.
- Связывает его с this внутри конструктора.
- Возвращает этот объект.

const person1 = new Person("Alice", 25);
console.log(person1.name); // Alice
console.log(person1.age);  // 25

➕ Добавление методов в конструктор
Если мы добавим метод прямо в конструктор, то он будет копироваться в каждый новый объект, что может тратить память.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hi, I'm ${this.name}`);
    };
}

const person1 = new Person("Alice", 25);
person1.sayHello(); // Hi, I'm Alice

⚙️ Оптимизация с prototype
Для методов можно использовать prototype, чтобы метод существовал в одном экземпляре и не копировался для каждого объекта.

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayHello = function() {
    console.log(`Hi, I'm ${this.name}`);
};

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.sayHello(); // Hi, I'm Alice
person2.sayHello(); // Hi, I'm Bob

💭 Как работает this в конструкторе
В функции-конструкторе this указывает на новый объект, который создается при вызове через new. Это позволяет настраивать свойства и методы нового объекта.

💎 Продвинутые аспекты
- Наследование. Используя прототипы, можно создавать наследуемые свойства и методы.
- Проверка с instanceof. Для проверки, создан ли объект через конструктор, можно использовать instanceof.

console.log(person1 instanceof Person); // true

#javascript #this #function

🖥 DOM Mutation Observer

Mutation Observer — это интерфейс, позволяющий отслеживать изменения в DOM, такие как добавление или удаление элементов, изменение атрибутов или текста. Он предоставляет более эффективный способ наблюдать за изменениями, чем старые методы вроде Mutation Events, так как не блокирует поток выполнения и может отслеживать сразу несколько изменений.

Mutation Observer полезен, если нужно:
- отслеживать изменения в структуре DOM (например, добавление или удаление элементов);
- реагировать на изменения атрибутов элементов;
- мониторить текстовое содержимое элементов, например, для динамически обновляемых данных.

Создание Mutation Observer

Создать Mutation Observer можно с помощью конструктора MutationObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (`MutationRecord`), описывающих изменения.

const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach((mutation) => {
    console.log(mutation);
  });
});

Каждый объект `mutation` в `mutationsList` содержит информацию о произошедшем изменении, включая:
- `type` — тип изменения (`childList`, `attributes`, или `characterData`);
- `target` — целевой элемент, где произошло изменение;
- `addedNodes` и `removedNodes` — список добавленных или удаленных узлов, если `type` — `childList`;
- `attributeName` — имя измененного атрибута, если `type` — `attributes`.

Начало наблюдения

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

const targetNode = document.getElementById('targetElement');
observer.observe(targetNode, {
  childList: true, // следить за добавлением и удалением дочерних элементов
  attributes: true, // следить за изменением атрибутов
  characterData: true, // следить за изменением текстового содержимого
  subtree: true // отслеживать изменения во всех потомках
});

Остановка наблюдения

Когда больше не нужно отслеживать изменения, можно остановить наблюдение с помощью метода disconnect():

observer.disconnect();

Полезные параметры конфигурации
- `childList`: отслеживает добавление и удаление дочерних элементов.
- `attributes`: отслеживает изменения атрибутов у целевого элемента.
- `characterData`: отслеживает изменения текстового содержимого.
- `subtree`: если установлено в `true`, позволяет отслеживать изменения не только у целевого элемента, но и у всех его потомков.

#javascript #observer

🖥 Intersection Observer

Intersection Observer — это интерфейс, позволяющий отслеживать, когда элемент появляется в зоне видимости, перекрывает другой элемент или выходит за границы видимой области (viewport). Он предоставляет эффективный способ наблюдения за видимостью элементов, чем старые методы вроде событий прокрутки и проверки getBoundingClientRect(), так как не вызывает перерисовку и работает асинхронно.

Intersection Observer полезен, если нужно:
- отслеживать появление элементов на экране (например, для ленивой загрузки изображений);
- анимировать элементы при их появлении в зоне видимости;
- отслеживать видимость рекламы или элементов пользовательского интерфейса.

Создание Intersection Observer

Создать Intersection Observer можно с помощью конструктора IntersectionObserver, в который передается колбэк-функция. Эта функция будет вызываться с массивом записей (IntersectionObserverEntry), описывающих пересечения.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
  });
});

Каждый объект entry в entries содержит информацию о пересечении, включая:
- isIntersecting — флаг, указывающий, находится ли элемент в зоне видимости;
- target — целевой элемент, для которого произошло пересечение;
- intersectionRatio — процент видимой части элемента;
- boundingClientRect — размеры и положение целевого элемента относительно видимой области.

Начало наблюдения

Чтобы начать наблюдение, нужно использовать метод observe и указать целевой элемент:

const targetNode = document.getElementById('targetElement');
observer.observe(targetNode);

Остановка наблюдения

Когда больше не нужно отслеживать пересечения, можно остановить наблюдение с помощью метода unobserve() или полностью прекратить работу с disconnect():

observer.unobserve(targetNode);
observer.disconnect();

Полезные параметры конфигурации

При создании IntersectionObserver можно указать дополнительные настройки, которые управляют его поведением:
- root: элемент, который будет использоваться в качестве контейнера для отслеживания видимости. По умолчанию — null, то есть будет использоваться viewport.
- rootMargin: отступы вокруг root, которые позволяют изменять зону видимости (например, rootMargin: "0px 0px -50% 0px").
- threshold: массив значений (от 0 до 1), задающий, какой процент видимости элемента должен быть достигнут, чтобы вызвался колбэк. Например, threshold: [0, 0.5, 1] вызовет колбэк при 0%, 50%, и 100% видимости.

#javascript #intersection_observer

🖥 5 главных правил THIS для Frontend собеседований

В этом видео мы разберем 5 главных правил использования this в JavaScript, которые помогут вам не запутаться и успешно пройти собеседование на фронтенд-разработчика!

- Как работает this в стрелочных функциях.
- Почему важно, как вызывается функция, а не где она создается.
- Как this ведет себя в методах объектов.
- Как режим выполнения (strict или нестрогий) влияет на значение this.
- Как управлять this с помощью методов bind, call и apply.

🔗 СХЕМА-ШПАРГАЛКА ИЗ ВИДЕО

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#this #frontend #javascript

🖥 Практика This

Каким будет вывод этого фрагмента кода?

function f() {
    this.x = 5;
    console.log(this);
}
var o = new f();
console.log(o.x); 

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
console.log(o.f())

Каким будет вывод этого фрагмента кода?

var o = {
    f: function() {
        return this;
    }
}
var o2 = {f: o.f};
console.log(o.f());
console.log(o2.f())

Каким будет вывод этого фрагмента кода?

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

let user = {
  g: f.bind(null)
};

user.g();

Каким будет вывод этого фрагмента кода?

function sayHi() {
  alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
  name: "Вася"
});

alert( bound.test );

#this #frontend #javascript

🖥 5 сложных концепций Функций в JavaScript для собеседований

Одна из самых важных тем в JavaScript - это функции. Без них трудно создать даже простое приложение. Мы используем их для обработки событий, логики и асинхронных операций. С помощью функций мы пишем переиспользуемый и чистый код

Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях

- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
- this в функциях
- Асинхронные функции (async/await)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции

🖥 Задачи с собеседований по JavaScript

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

2. Реализуйте функцию debounce. Дебаунсинг позволяет "задержать" выполнение функции до тех пор, пока не пройдет определенный период времени без ее вызова.

3. Реализуйте функцию sleep. Функция sleep позволяет задержать выполнение кода на определенное количество времени.

4. Реализуйте функцию memoize, которая принимает функцию fn в качестве аргумента и возвращает новую функцию. Новая функция должна кэшировать результаты вызовов fn для уникальных наборов аргументов.

Начальный код:

function memoize(fn) {
 
}

// Пример использования
function slowFunction(num) {
  // Симуляция тяжелых вычислений
  for (let i = 0; i < 1e9; i++) {}
  return num * 2;
}

const memoizedSlowFunction = memoize(slowFunction);

console.log(memoizedSlowFunction(5)); // Вычисляет и кэширует результат
console.log(memoizedSlowFunction(5)); // Возвращает закэшированный результат

#javascript #livecoding

🖥 Что будет в консоли?

1. Каким будет вывод этого фрагмента кода?

var foo = 1; 
function bar() { 
    if (!foo) { 
        var foo = 10; 
    } 
    console.log(foo); 
} 
bar();

2. Каким будет вывод этого фрагмента кода?

function foo() { 
    var x = 1; 
    if (x) { 
        (function () { 
            var x = 2; 
        }()); 
    } 
console.log(x)
}

3. Каким будет вывод этого фрагмента кода?

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

let user = {
  g: f.bind(null)
};

user.g();

4. Каким будет вывод этого фрагмента кода?

function greetWaitAndAgain() {
  console.log(`Hello, ${this.name}!`)
  setTimeout(() => {
    console.log(`Hello again, ${this.name}!`)
  })
}

const user = { name: 'Alex' }

user.greetWaitAndAgain = greetWaitAndAgain;
user.greetWaitAndAgain()

5. Каким будет вывод этого фрагмента кода?

function f() {
    this.x = 5;
    console.log(this);
}
var o = new f();
console.log(o.x); 

#this #javascript #замыкание #собеседование

🖥 5 типичных задач по JavaScript на собеседовании

В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

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

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции

🖥 Частые задачи на собеседованиях

Как и обещал в видео, предоставляю задачи с собеседований

1. Реализуйте полифил myFilter точно копирующий filter метод

Array.prototype.myFilter = function(callback) {

};

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.myFilter(x => x > 2);
console.log(filteredArr); // [3, 4, 5]

2. Найти все индексы начала вхождения анаграмм подстроки в строке

function searchAllAnagramsInString(str, substr) {

}

// Пример использования:
console.log(searchAllAnagramsInString("cbaebabacd", "abc")); // [0, 6]

3. Найти самый загруженный день в отеле

function findMaxDayWithClients(bookings) {
  // Реализуйте логику поиска самого загруженного дня
}

findMaxDayWithClients([[1, 5], [2, 4], [3, 6]]); // 3
// В день 3 отель был максимально загружен (3 клиента)

4. Представим, что у нас нет встроенных промис-комбинаторов, как можно реплицировать функциональность Promise.all?

function customPromiseAll(promises) {
  
}

// Пример использования
const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

customPromiseAll([promise1, promise2, promise3])
  .then(results => console.log(results)) // [3, 42, 'foo']
  .catch(error => console.error(error));

5. Необходимо сгруппировать транзакции по userID.

const transactions = [
  { userID: "user1", amount: 200, date: "2023-01-01" },
  { userID: "user2", amount: 500, date: "2023-01-02" },
  { userID: "user1", amount: 300, date: "2023-01-03" },
  { userID: "user3", amount: 400, date: "2023-01-01" },
  { userID: "user2", amount: 150, date: "2023-01-04" },
  { userID: "user3", amount: 250, date: "2023-01-02" },
  { userID: "user4", amount: 100, date: "2023-01-01" }
];

function topThreeUsersByTotalAmount(transactions) {
 //тут
}

#javascript #лайвкодинг

🖥 Разбор задач по Event Loop с собеседований

В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 СХЕМА

#frontend #javascript #eventloop

🖥 ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа

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

Тут собраны все темы по JavaScript:
- Основы языка: переменные, типы данных, операторы
- Функции: объявление, hoisting, замыкания
- Работа с объектами и массивами
- Контекст выполнения и this
- Асинхронность: колбэки, промисы, async/await
- ООП в JavaScript
- Современные возможности ES6+
- Классы и прототипы
- Работа с DOM и событиями

Практическая часть включает разбор 70 задач разного уровня сложности, включая:
- Алгоритмические задачи
- Задачи на понимание работы JS
- Реальные кейсы из собеседований

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

ПС: Очень грамотные ответы на вопросы и поставленная речь. Глубокие и полные ответы Дениса, отличные рассуждения. Советую посмотреть видео и учиться отвечать так же

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#javascript #собеседование

🖥 JavaScript DOM с 0 до Профи. Полный курс + Практика

DOM — это представление HTML-документа в виде дерева объектов, с которым можно работать через JavaScript. В этом видео мы рассмотрим, что такое Document object model и как браузер создает DOM при загрузке страницы. Без DOM in javascript веб-страницы были бы статичны, а с его помощью мы можем динамически изменять контент.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#javascript

👨‍💻 План развития Frontend Разработчика (Часть 2)

JavaScript — это база, это фундамент фронтенда. Именно он вызывает больше всего сложностей у новичков, и именно по нему 80% вопросов на собеседованиях.

Изучать JavaScript нужно с разных сторон. Окружайте себя им: смотрите видео на YouTube, решайте задачи на CodeWars и LeetCode, учите вопросы собеседований и просто разбирайтесь в теории.

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

Когда я учил JavaScript, я потратил на это около трёх месяцев и за это время:
→ просмотрел 5 видеокурсов (каждый от 5 до 11 часов);
→ прошёл 3 курса на платформах с тренажёрами;
→ читал книги;
→ параллельно решал задачи на CodeWars.
→ практиковался с DOM API

Если не понимаете — смотрите 1, 2, 3 курса, пробуйте разные форматы, изучайте объяснения разных авторов. Ваша задача — подготовить мозг, создать нейронные связи, адаптировать себя к восприятию информации.

Банально: посмотрели один курс — поняли 5%. Не страшно. Смотрите следующий — уже 10%. Каждое новое видео, курс или книга раскроют вам одну и ту же тему по-новому. Всё просто: главное — не лениться и регулярно делать шаги к цели. Просто садимся за компьютер и включаем курс.

Технически, в курсе на 7 часов можно услышать 80% всего JavaScript. Но на практике всё сложнее — мозгу нужно время, чтобы привыкнуть, чтобы информация уложилась. Регулярность — ключ к успеху! Если остановитесь — будет откат назад.

Это как картинка с шахтёром, который развернулся в метре от клада. Главное — не разворачиваться!

🖥 JavaScript (2-4 месяца)

→ JavaScript - Полный Курс JavaScript Для Начинающих
https://www.youtube.com/watch?v=CxgOKJh4zWE

→ Неплохой курс на Степике
https://stepik.org/course/180784/promo

→ Doka, почитывайте переодически
https://doka.guide/js/

→ Основы JavaScript
https://ru.hexlet.io/courses/js-basics

→ JavaScript DOM с 0 до Профи. Полный курс + Практика
https://youtu.be/6wJoaiK3NxI?si=DKrRFVo_VjXMnjfj

→ Делаем календарь на JavaScript
https://youtu.be/HmZ7j0WtjdU?si=DfuFFlW7yHp26Crg

→ Пишем простые часы на JavaScript
https://youtu.be/FMgbaVz-TZ4?si=JaRSfWMv3Nj_Yfw8

→ Плейлист из 10 проектов
https://www.youtube.com/playlist?list=PLqp5ZRS9tv4QDOXnn6zGtl1R5LfPDMvz4

→ ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа
https://youtu.be/A2P3Gn2_gSY?si=1QlhgaAFxMrPOA6D

→ 5 главных правил THIS
https://youtu.be/VOtZ4ghy3ik?si=1E0XfSUhd8iovyIE

→ Разбор задач по Event Loop
https://youtu.be/QQg5wOloZDI?si=NVYpx07mWH5f0QA4

→ Плейлист 72 задачи по JS
https://www.youtube.com/playlist?list=PLEhUqRdnYdykSMw9irD8yJ7q5GSVvQLL0

А также вводите себе в привычку решать задачи на Codewars или, лучше, на Leetcode. Ничего страшного, если не получается решить самостоятельно — просто продолжайте пытаться и разбирать правильные решения.

После изучения DOM API нужно самостоятельно сделать 1-2 проекта: найти макет, API и реализовать всё самому. Перед тем как изучать React, важно хорошо освоить базу, иначе будете "плыть".

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

#javascript #курсы #гайд