React Design Patterns and Best Practices

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

​Что такое текущая цель события (event.currentTarget)?

Event.currentTarget — это элемент, к которому прикреплен прослушиватель событий.

Разметка
<div onclick="clickFunc(event)">
<div
<button>
Button
</button>
</div
</div>

JS
function clickFunc(event) {
console.log(event.currentTarget)
}

Мы прикрепили слушатель к внешнему div. Куда бы мы ни кликнули, будь то кнопка или внутренний div, в консоли мы всегда получим разметку внешнего div. Это позволяет заключить, что event.currentTarget — это элемент, к которому прикреплен прослушиватель событий.

В чем разница между операторами "==" и "==="?

Разница между оператором "==" (абстрактное или нестрогое равенство) и оператором "===" (строгое равенство) состоит в том, что первый сравнивает значения после их преобразования или приведения к одному типу (Coersion), а второй — без такого преобразования.

Преобразование представляет собой процесс приведения значения к другому типу или, точнее, процесс приведения сравниваемых значений к одному типу. При сравнении оператор "==" производит так называемое неявное сравнение.

Комбинатор монет

Напишите функцию, которая принимает число, которое представляет собой количество центов. Функция должна вернуть массив чисел coins, где

coins[0] = pennies ==> $00.01
coins[1] = nickels ==> $00.05
coins[2] = dimes ==> $00.10
coins[3] = quarters ==> $00.25

Таким образом, вам нужно подобрать комбинацию из монет, которая будет равна входному числу

Пример:
coinCombo(6) --> [1, 1, 0, 0]

Для чего используется оператор "!!"?

Оператор "!!" (двойное отрицание) приводит значение справа от него к логическому значению.
console.log(!!null) // false
console.log(!!undefined) // false
console.log(!!'') // false
console.log(!!0) // false
console.log(!!NaN) // false
console.log(!!' ') // true
console.log(!!{}) // true
console.log(!![]) // true
console.log(!!1) // true
console.log(!![].length) // false

​Как записать несколько выражений в одну строку?

Для этого мы можем использовать оператор "," (запятая). Этот оператор «двигается» слева направо и возвращает значение последнего выражения или операнда.

let x = 5

x = (x++, x = addFive(x), x *= 2, x -= 5, x += 10)

function addFive(num) {
return num + 5
}

Если мы выведем значение x в консоль, то получим 27. Сначала мы увеличиваем значение x на единицу (x = 6). Затем вызываем функцию addFive() с параметром 6, к которому прибавляем 5 (x = 11). После этого мы умножаем значение x на 2 (x = 22). Затем вычитаем 5 (x = 17). И, наконец, прибавляем 10 (x = 27).

Какие значения в JS являются ложными?

 const falsyValues = ['', 0, null, undefined, NaN, false]

Ложными являются значения, результатом преобразования которых в логическое значение является false.

Как проверить, является ли значение ложным?

Следует использовать функцию Boolean или оператор "!!" (двойное отрицание).

Modern JavaScript for the Impatient

Изначально JavaScript был разработан для мелкомасштабного программирования в веб-браузерах, но современный JavaScript радикально отличается. В настоящее время программисты на JavaScript активно используют функциональное, объектно-ориентированное и асинхронное программирование, забывая о некоторых прошлых ошибочных и устаревших концепциях. Modern JavaScript for the Impatient - это полное, но краткое руководство по JavaScript ES6 и не только. Книга хорошо подойдет тем, кто хочет изучить JS, зная Java, C#, C или C++.

Сравнение строк

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

Первый параметр функции - создаваемая строка.
Второй и третий - используемые строки

Функция не должна быть чувствительна к регистрам, а также должна использовать все символы из строк.

Примеры:
isMatching("email box", "b aIl", "Mo x e") return true
isMatching("bouh", "0b", "uh") return false
isMatching("kata", "kt", "aaa") return false