JavaScript заметки

Кешируем длину массива в циклах Когда нас учат циклам for, нам рекомендуется следовать этой стандартной структуре:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Однако, используя этот синтаксис, цикл for пересматривает длину массива при каждой итерации. Иногда это может быть полезно, но в большинстве случаев лучше и эффективнее кэшировать длину массива, так что к ней нужно обратиться только 1 раз. Мы можем сделать это, определив переменную length

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Этот код почти такой же лаконичный, как и приведенный выше, но он работает таким образом, что при увеличении размера массива мы не теряем время на перепроверку array.length. #цикл

"undefined" против "null" "undefined" – присутствует у переменной, которая была объявлена, но значение для неё задано не было "null" – обозначает пустое или несуществующее значение, которое явно присваивается переменной "undefined" и "null" не равны при строгом сравнивании:

undefined === null // false

#массив

Срочно! Нужны программисты разных уровней и новички Для новичков: - Бесплатные обучения - Стажировка - Практикум Для опытных: - Вакансии junior - Вакансии junior+ - Вакансии middle - Вакансии senior - Вакансии Team Lead - Другие вакансии

isArray Ещё один полезный метод, на этот раз позволяющий определить, являются ли входящие данные массивом

let emojis = ['', '️', '', ''];
console.log(Array.isArray(emojis));

let obj = {};
console.log(Array.isArray(obj));

#массив

Обмен значений переменных С помощью техники деструктуризации, это сделать очень просто

let fire = '';
let fruit = '';

[fruit, fire] = [fire, fruit];
console.log(fire, fruit);

#переменные

Интересуешься Frontend разработкой? В канале Web-life ты найдешь заметки, разбор статей по Frontend разработке, новости, вопросы для собеседований, мемасики и много другое. Открой для себя что-то новое

Объединение нескольких объектов У вас может возникнуть потребность объединить вместе два объекта, чтобы создать третий, более полный. В этом случае можно использовать оператор "..." (да, три точки).

let emp = {
 'id': 'E_01',
 'name': 'Jack',
 'age': 32,
 'addr': 'India'
};

let job = {
 'title': 'Software Dev',
  'location': 'Paris'
};

Их можно объединить с помощью spread-оператора (оператора расширения): // spread-оператор let merged = {...emp, ...job}; console.log('Spread merged', merged); Существует и другой путь такого объединения. С помощью "Object.assign()"

console.log('Object assign', Object.assign({}, emp, job));

Обратите внимание, что и spread-оператор и "Object.assign" выполняют поверхностное (shallow) объединение. При поверхностном объединении, если свойства повторяются, то происходит перезапись первого объекта данными из таких же свойств второго. Для глубокого объединения объектов, следует использовать, например, библиотеку lodash #объект

Оператор "Запятая" В JavaScript оператор запятой используется для оценки каждого из операндов слева направо и возврата значения последнего операнда.

let count = 1;
let ret = (count++, count);
console.log(ret);

В примере выше значением переменной "ret" будет число 2. По тому же принципу, результатом следующего кода будет вывод в консоль числа 32.

let val = (12, 32);
console.log(val);

Где мы его используем? Есть идеи? Чаще всего оператор запятой используется параметров в цикле "for". В примере ниже оператор запятой задаёт значение переменной "j" после объявления счётчика "i".

for (var i = 0, j = 50; i <= 50; i++, j--)

#оператор

Обязательные параметры функции Сначала объявляем функцию, которая будет выдавать в консоль сообщение об ошибке

let isRequired = () => {
    throw new Error('This is a mandatory parameter.');
}

Затем эту функцию присваиваем как значение по умолчанию для параметров, которые хотим сделать обязательными. Помните, что если при вызове функции её параметр равен "undefined", подставляется значение по умолчанию, в обратном случае значение по умолчанию игнорируется.

let greetings = (name=isRequired(), message='Hello,') => {
    return ${message} ${name};
}
console.log(greetings());

В примере выше параметр "name" будет иметь значение "undefined", из-за чего будет произведена попытка установить значение по умолчанию, которым и выступает функция "isRequired()". Будет вызвана ошибка. #функция

Значения параметров функции по умолчанию В JavaScript параметры функции подобны локальным переменным. При вызове этой самой функции вы можете и не передавать значения для её параметров. В этом случае они принимают значение "undefined", что может привести к нежелательным последствиям. Существует простой способ передачи значения по умолчанию для параметров функции при их определении. В примере ниже для параметра "message" функции "greetings" передаётся значение по умолчанию "Hello".

let greetings = (name, message='Hello,') => {
    return ${message} ${name};
}

console.log(greetings('Jack'));
console.log(greetings('Jack', 'Hola!'));

#функция

Произвольные значения Генерирование произвольных значений или получение произвольного элемента массива – очень полезные методы, которые стоит держать под рукой. Я использую их почти в каждом своём проекте. Получить произвольный элемент из массива:

let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];
let randomPlanet = planets[Math.floor(Math.random() * planets.length)];
console.log('Random Planet', randomPlanet);

Генерирование произвольного числа из диапазона с указанием минимального и максимального значений:

 let getRandom = (min, max) => {
     return Math.round(Math.random() * (max - min) + min);
 }
 console.log('Get random', getRandom(0, 10));

#массив

Значение по умолчанию с помощью OR Если для переменной необходимо предусмотреть запасное значение по умолчанию, это достаточно просто реализуется с помощью оператора OR.

let person = {name: 'Jack'};

// если свойство "age" равно "undefined", устанавливает значение 35
let age = person.age || 35;

console.log(Age of ${person.name} is ${age});

#операторы #isInteger

⠀ мемы для программистов и айтишников ⠀ ⠀

isInteger Это аккуратный способ узнать, является ли значение целым числом. Встроенный в JavaScript API Number предоставляет для этого метод isInteger(). Очень полезная штука, о которой следует знать. #методы #isInteger

.find() Метод массива find() вернёт первый найденный в массиве элемент, который подходит под условие в переданной колбэк-функции. Если в массиве не найдётся ни одного подходящего элемента, то вернётся значение undefined. #массив #find Подробнее

Зачем фронтенд-разработчику нужен TypeScript? Если фронтендер прокачал навык вёрстки, то в его карьере наступает новый этап — разработка приложений. Вот там-то и начинается всё самое интересное: фреймворки, библиотеки, алгоритмы и данные, ну и конечно, TypeScript. Технологию TypeScript указывают в 59–63% вакансий. А по данным npmtrends.com, он в 1,5 раза популярнее React, Vue и Angular.  Чтобы познакомиться с TypeScript поближе и приблизиться к разработке пользовательских интерфейсов, записывайтесь на лайв от HTML Academy. В прямом эфире обсудим:  – Зачем нужен TS и можно ли обойтись без него. – Где вы столкнетесь с TypeScript. – Что TypeScript даёт фронтенд-разработчику. – В каких случаях TypeScript точно не нужен. – Требуют ли TypeScript в IT-компаниях. Лайв стартует 14 декабря в 13.00 Записаться по ссылке: https://tml.io/siwn2

Сокращение с помощью AND Давайте рассмотрим ситуацию, в которой у нас есть логическое значение и функция.

let isPrime = true;
const startWatching = () => {
    console.log('Started Watching!');
}

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

if (isPrime) {
    startWatching();
}

А как насчёт использования сокращённой записи вместе с оператором AND (&&)? Да, условный оператор "if" нам больше не нужен. Круто, правда?

isPrime && startWatching();

#методы #and

Команда DevEducation открывает набор на курс FrontEnd! Длительность курса: 5 месяцев Количество занятий: 5 в неделю Продолжительность занятий: 2 часа Курс рассчитан на интенсивную подготовку новичков без опыта в IT и продвижения их за 4 месяца до уровня Junior FrontEnd Developer. После успешного выпуска студент имеет возможность пройти трехмесячную стажировку в международной IT-компании. Подача заявки на курс на сайте — https://bit.ly/deveducation_js_notes

.reduce() Метод массива reduce() позволяет превратить массив в любое другое значение с помощью переданной функции-колбэка и начального значения. Функция-колбэк будет вызвана для каждого элемента массива, и всегда должна возвращать результат. #массив #reduce Подробнее

.filter() Метод массива .filter() позволяет получить новый массив, отфильтровав элементы с помощью переданной колбэк-функции. Колбэк-функция будет вызвана для каждого элемента массива и по результату функции примет решение, включать этот элемент в новый массив или нет. #массив #filter Подробнее