JavaScript заметки

Интересуешься 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 Подробнее

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

Друзья, пришла зима, а значит, время поделиться планами на этот морозный декабрь! 🔷 9 декабря в Санкт-Петербурге стартует бесплатная конференция «Технологии ПСБ. Поговорим в СПб» 📋 О чем будем говорить? За один день с экспертами разных ИТ-направлений банка ПСБ участники узнают о том, как создавать, развивать и эффективно управлять цифровыми сервисами для крупного банка. И как делать это без потери качества и связи с клиентами! 📍 Сайт мероприятия — скорее регистрируйтесь! ▪️ Микросервисы ▪️ DevOps ▪️ Shift-left testing и развитие команды 🔷 Всё это и многое другое в докладах наших спикеров! Участие в конференции бесплатное! ✅ Регистрируйтесь сами и поделитесь приглашением со знакомыми из ИТ, которым интересны эти темы! ID рекламы: Pb3XmBtztBQYqCwkpwUudGm7n4r9SEEd67mqd1Q

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

Работать без инструментов — трудно и неэффективно Поэтому опытный разработчик создал канал Сайт, Сэр, в котором собирает лучшие практики создания фронтенда. Эффекты, нейросети, библиотеки, ресурсы и расширения — лучшие инструменты для твоей продуктивной работы Гораздо легче находить интересные решения, когда всё необходимое под рукой

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