change

Событие change срабатывает, когда пользователь изменяет значение в <input>, <select> или <textarea> и фиксирует свои изменения.

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

#события

Подробнее

dblclick

Событие двойного клика на HTML-элементе происходит, когда пользователь в течение короткого времени дважды кликает один элемент. Временной промежуток между кликами должен быть небольшим, иначе браузер интерпретирует его не как dblclick, а как несколько отдельных click событий.

#события

Подробнее

Инструкция

Работа с данными — это ещё не все, что нужно для создания программы. Выражения не решают много вопросов: Как описать с помощью выражения действие по определённому условию? Да, у нас будут данные и можно написать выражение, чтобы вычислить условие, но как сказать программе делать то или иное действие? А если какое-то действие нужно повторить несколько раз?

Для этого в языках программирования существуют инструкции. Они не являются выражениями, но позволяют правильно настроить порядок их выполнения.

#выражения #инструкции

Параметры

При вызове функции можно передать данные, они будут использованы кодом внутри.

Например, функция showMessage принимает два параметра под названиями user и message, а потом соединяет их для целого сообщения. При вызове функции ей нужно передать аргументы. Функцию можно вызывать сколько угодно раз с любыми аргументами.

#функции #параметры

Функция и переменные

Переменные внутри функции существуют только внутри этой функции — этот эффект называется областью видимости.

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

#функции #переменные

Подробнее

Рекурсивные функции

Внутри функции можно вызывать её саму — это пример рекурсивной функции.

Если разложить пример, то получится следующая цепочка:

- fac(3) это 3 * fac(2);
- fac(2) это 2 * fac(1);
- fac(1) это 1.

Получается, что fac(3) это 3 * 2 * 1, то есть 6. Такой подход часто применяется в математических операциях, но не ограничивается ими.

#функции #рекурсия

Подробнее

Стрелочные функции

Стрелочная функция записывается намного короче, чем обычная. В самой простой записи ключевое слово function и фигурные скобки не требуются.

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

#функции #const

Подробнее

return

Функция возвращает результат, который будет передан в вызвавший её код. Для этого и используется ключевое слово return.

#функции #return

Подробнее

Рекурсия

Рекурсия — это что-то, что описывает само себя.

Представить рекурсию проще всего на примере зеркального коридора — когда напротив друг друга стоят два зеркала. Если посмотреть в одно, то в нём будет отражение второго, во втором — отражение первого и так далее.

#рекурсия

Подробнее

.forEach()

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

#массив #forEach

Подробнее

.map()

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

#const #map #массив

Подробнее

.reduce()

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

#массив #reduce

Подробнее

.filter()

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

#массив #filter

Подробнее

Сокращение с помощью AND

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

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

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

if (isPrime) {
    startWatching();
}

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

isPrime && startWatching();

#методы #and

.find()

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

#массив #find

Подробнее

isInteger

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

#методы #isInteger

Значение по умолчанию с помощью OR

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

let person = {name: 'Jack'};

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

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

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

Произвольные значения

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


Получить произвольный элемент из массива:

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));

#массив

Значения параметров функции по умолчанию

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

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

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

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

#функция

Обязательные параметры функции

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

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()". Будет вызвана ошибка.

#функция