👩‍💻 Что такое метод includes() в JavaScript и как он используется?

includes() — это метод массивов и строк в JavaScript, который проверяет, содержит ли массив или строка определённое значение. Он возвращает true, если элемент найден, и false, если нет.

➡️ Пример:

const numbers = [1, 3, 5, 7];

// Проверяем, есть ли число 5 в массиве
console.log(numbers.includes(5)); // true

const text = "Привет, мир!";
console.log(text.includes("мир")); // true

🗣️ В этом примере includes() проверяет наличие элемента в массиве и подстроки в строке. Этот метод полезен для быстрой проверки наличия значений без необходимости писать циклы.

CodeBase | Frontend | #JS

👩‍💻 Что такое метод startsWith() в JavaScript и как он используется?

startsWith() — это метод строк в JavaScript, который проверяет, начинается ли строка с указанного символа или подстроки. Он возвращает true, если строка начинается с переданного значения, и false, если нет.

➡️ Пример:

const text = "JavaScript — крутой язык!";

// Проверяем, начинается ли строка с "Java"
console.log(text.startsWith("Java")); // true

// Проверяем с учетом позиции
console.log(text.startsWith("крутой", 13)); // true

🗣️ В этом примере:

• startsWith("Java") проверяет, начинается ли строка с "Java".
• startsWith("крутой", 13) проверяет подстроку с 13-го символа.
• Этот метод удобен для валидации данных, обработки URL и фильтрации текстовых данных.

CodeBase | Frontend | #JS

👩‍💻 Что такое метод endsWith() в JavaScript и как он используется?

endsWith() — это метод строк в JavaScript, который проверяет, заканчивается ли строка на указанную подстроку. Он возвращает true, если строка заканчивается переданным значением, и false, если нет.

➡️ Пример:

const text = "frontend — это круто!";

// Проверяем, заканчивается ли строка на "круто!"
console.log(text.endsWith("круто!")); // true

// Проверяем с ограничением по длине
console.log(text.endsWith("frontend", 8)); // true

🗣️ В этом примере:

• endsWith("круто!") проверяет, заканчивается ли строка на "круто!".
• endsWith("frontend", 8) проверяет первые 8 символов строки.
• Этот метод полезен для проверки расширений файлов, валидации URL и обработки текстов.

CodeBase | Frontend | #JS

👩‍💻 Что такое метод padStart() в JavaScript и как он используется?

padStart() — это метод строк в JavaScript, который дополняет строку до нужной длины, добавляя заданные символы в начало. Он удобен для форматирования чисел, дат и других данных.

➡️ Пример:

const num = "7";

// Дополняем до двух символов нулями
console.log(num.padStart(2, "0")); // "07"

// Выравнивание текста
console.log("JS".padStart(5, "-")); // "--JS"

🗣️ В этом примере:

• padStart(2, "0") превращает "7" в "07", полезно для форматирования чисел.
• padStart(5, "-") добавляет символы до нужной длины.

CodeBase | Frontend | #JS

👩‍💻 Что такое метод trim() в JavaScript и как он используется?

trim() — это метод строк в JavaScript, который удаляет пробелы и скрытые символы (переводы строк, табуляции) в начале и конце строки. Это полезно при обработке пользовательского ввода и очистке данных.

➡️ Пример:

const text = "   Привет, мир!   ";

console.log(text.trim());   // "Привет, мир!"
console.log(text.trimStart()); // "Привет, мир!   "
console.log(text.trimEnd());   // "   Привет, мир!"

🗣️ В этом примере:

• trim() удаляет пробелы с обеих сторон строки.
• trimStart() — удаляет только в начале, trimEnd() — только в конце.

CodeBase | Frontend | #JS

👩‍💻 Что такое метод repeat() в JavaScript и как он используется?

repeat() — это метод строк в JavaScript, который позволяет повторить строку указанное количество раз. Он полезен для форматирования вывода, создания шаблонов и генерации текстовых данных.

➡️ Пример:

const text = "JS ";

// Повторяем строку 3 раза
console.log(text.repeat(3)); // "JS JS JS"

// Создаём разделитель
console.log("-".repeat(10)); // "----------"

🗣️ В этом примере:

• repeat(3) повторяет строку три раза, объединяя их в одну строку.
• repeat(10) создаёт разделитель из 10 символов -.

CodeBase | Frontend | #JS

👩‍💻 Что такое метод slice() в JavaScript и как он используется?

slice() — это метод массивов и строк в JavaScript, который возвращает копию части массива или строки без изменения оригинала. Он полезен для обрезки, копирования и извлечения подмножеств данных.

➡️ Пример:

const arr = [10, 20, 30, 40, 50];
console.log(arr.slice(1, 4)); // [20, 30, 40]

const str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

🗣️ В этом примере:

• slice(1, 4) возвращает элементы с индексом 1 по 3 включительно (4 не включается).
• slice(0, 4) возвращает первые 4 символа строки.
• Метод не мутирует оригинальные данные, что делает его безопасным при работе с копиями.

CodeBase | Frontend | #JS

🔥 Fluid Simulation - cцена с интересной симуляцией жидкости с текстом CSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #js #animate

👩‍💻 Что такое метод splice() в JavaScript и как он используется?

splice() — это метод массивов в JavaScript, который изменяет оригинальный массив, удаляя, добавляя или заменяя элементы. Он полезен для управления содержимым массива на месте.

➡️ Пример:

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

// Удаляем 2 элемента, начиная с индекса 1
numbers.splice(1, 2);
console.log(numbers); // [1, 4, 5]

// Вставляем новые элементы на индекс 1
numbers.splice(1, 0, 99, 100);
console.log(numbers); // [1, 99, 100, 4, 5]

🗣️ В этом примере:

• splice(1, 2) удаляет два элемента начиная с индекса 1.
• splice(1, 0, 99, 100) вставляет два элемента без удаления.
• Метод изменяет исходный массив, в отличие от slice().

CodeBase | Frontend | #JS

👩‍💻 Что такое метод filter() в JavaScript и как он используется?

filter() — это метод массивов в JavaScript, который создаёт новый массив, содержащий только те элементы, которые прошли проверку в переданной функции. Исходный массив не изменяется.

➡️ Пример:

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

// Оставляем только чётные числа
const evens = numbers.filter(num => num % 2 === 0);

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

🗣️ В этом примере:

• filter() проверяет каждый элемент на условие
• Возвращает новый массив только с подходящими элементами
• Полезен для фильтрации данных на основе критериев.

➡️ filter() часто используется при работе со списками в интерфейсах

CodeBase | Frontend | #JS

👩‍💻 Что такое метод map() в JavaScript и как он используется?

map() — это метод массивов в JavaScript, который создаёт новый массив, преобразуя каждый элемент исходного массива по заданной функции.
Исходный массив не изменяется.

➡️ Пример:

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

// Умножаем каждый элемент на 2
const doubled = numbers.map(num => num * 2);

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

🗣️ В этом примере:

• map() применяет функцию ко всем элементам массива
• Возвращает новый массив с результатами
• Идеален для преобразования данных (например, умножение, форматирование).

CodeBase | Frontend | #JS

👩‍💻 Что такое метод forEach() в JavaScript и как он используется?

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

➡️ Пример:

const users = ["Анна", "Борис", "Вера"];

users.forEach((user, index) => {
  console.log(`${index + 1}. Привет, ${user}!`);
});

1. Привет, Анна!  
2. Привет, Борис!  
3. Привет, Вера!

🗣️ В этом примере:

• forEach() перебирает массив
• Удобен для вывода в консоль, вызова функций, работы с DOM
• Не изменяет оригинальный массив и не возвращает новый

CodeBase | Frontend | #JS

👩‍💻 Что такое метод map() в JavaScript и как он используется?

map() — это метод массивов в JavaScript, который создаёт новый массив, применяя функцию к каждому элементу исходного. Он не изменяет оригинальный массив.

➡️ Пример:

const numbers = [1, 2, 3, 4];

// Умножаем каждый элемент на 2
const doubled = numbers.map(num => num * 2);

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

🗣️ В этом примере:

• map() применяет функцию ко всем элементам массива
• Возвращается новый массив с результатами
• Часто используется для форматирования данных перед выводом.

➡️ map() — основа функционального подхода в работе с массивами

CodeBase | Frontend | #JS

👩‍💻 Что такое метод reduce() в JavaScript и как он используется?

reduce() — это метод массивов, который сворачивает все элементы в одно итоговое значение, проходя по массиву слева направо.

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

➡️ Пример:

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

// Суммируем элементы
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

🗣️ В этом примере:

• acc — аккумулятор (накапливает результат)
• num — текущий элемент массива
• 0 — начальное значение аккумулятора
• Возвращает одно значение, не изменяя исходный массив

reduce() универсален: им можно считать суммы, группировать объекты, строить словари и даже реализовать методы map / filter "вручную"

CodeBase | Frontend | #JS

👩‍💻 Что такое метод find() в JavaScript и как он используется?

find() — это метод массивов, который возвращает первый элемент, удовлетворяющий условию.
Если ни один элемент не подходит — возвращает undefined

➡️ Пример:

const users = [
  { name: "Анна", age: 22 },
  { name: "Борис", age: 30 },
  { name: "Вера", age: 25 }
];

const user = users.find(u => u.age > 25);
console.log(user); // { name: "Борис", age: 30 }

🗣️ В этом примере:

• find() перебирает массив объектов
• Возвращает первого подходящего пользователя
• Идеален для поиска по условиям: ID, имя, статус и т.д.

find() часто используется в списках, где нужен один конкретный элемент, а не все подходящие

CodeBase | Frontend | #JS

​Чтo такoе prоmise и какие сoстoяния у него есть?

Это oбъект, прeдставляющий завершeние (или нeудачу) асинхрoнной операции и её результат. Он позволяет ассоциировать обработчики с асинхронным действием, тем самым избавляя от неoбходимости использовать обратные вызовы (callback-функции). Они упрощают работу с асинхронными операциями, такими как AJAX-запросы или чтение файлов, позволяя написать код, который проще понять и поддерживать.

Сoстояния:
- Pending (Ожидание): Начальное состояние; асинхронная операция не завершена.
- Fulfilled (Исполнено): Операция завершена успешно, и promise возвращает результат.
- Rejected (Отклонено): Операция завершена с ошибкой, и promise возвращает причину отказа.

Пример:

let promise = new Promise(function(resolve, reject) {
    // Эмуляция асинхронной операции, например, запроса к серверу
    setTimeout(() => {
        // Условие успешного выполнения операции
        if (/* условие успеха */) {
            resolve("данные получены");
        } else {
            reject("ошибка при получении данных");
        }
    }, 1000);
});

promise.then(
    function(result) { console.log(result); }, // обработчик успеха
    function(error) { console.log(error); } // обработчик ошибки
);

Prоmise поддерживает цепочки вызовов (then), что позволяет организовывать асинхронный код последовательно и читабельно. Кроме того, существуют вспомогательные методы, такие как Promise.all, Promise.race, Promise.resolve, и Promise.reject, которые облегчают работу с группами асинхронных операций.

🔗 Ссылка

CodeBase | Frontend | #JS

🖥 Hoisting (поднятие) — это механизм, при котором объявления переменных и функций перемещаются вверх своей области видимости перед выполнением кода. Это позволяет использовать переменные и функции до их фактического объявления в коде.

Пример с переменными: 

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

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

Пример с функциями: 

foo(); // "Hello"
function foo() {
    console.log("Hello");
}

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

Hoisting не применяется к let и const, которые остаются в "временной мертвой зоне" до объявления.

CodeBase | Frontend | #JS