JavaScript заметки

null - это объект null является объектом. Сомневаетесь? Ведь данное утверждение противоречит самой сути null. Вот доказательства:

alert(typeof null); //Выдаст сообщение 'object'

Несмотря на очевидный факт, null не является реализацией никакого базового объекта. (Значения в JavaScript являются реализациями базового объекта. Так, каждое число является реализацией объекта Number, каждый объект является реализацией объекта Object.) Такое положение возвращает нас обратно к практическому смыслу, потому что если null является отсутствием значения, то он не может быть реализацией какого-либо объекта. Следовательно следующее выражение возвращает false:

alert(null instanceof Object); //Выдаст сообщение 'false'

#полезно

Деструктуризация псевдонимов Деструктуризация - это очень приятное дополнение к JavaScript, потому что иногда мы предпочитаем ссылаться на свойства под другим именем, поэтому мы можем использовать псевдонимы: const person = { fullName: "Alexey" }; // Берём person.fullName как { fullName } const { fullName } = person; console.log(fullName); // Alexey // Берём person.fullName как { name } const { fullName: name } = person; console.log(name); // Alexey #полезно

Адаптивная вёрстка: что это и как использовать В этой статье будут рассмотрены основные элементы сайта и способы их адаптации. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Параметры функций Возможность устанавливать значения по умолчанию для аргументов функции была отличным дополнением к JavaScript; но мы также можем “кидать” ошибки, когда данный параметр не передан функции: const isRequired = () => { throw new Error("param is required"); }; const hello = (name = isRequired()) => { console.log(hello ${name}); }; // этот вызов выдаст ошибку, потому что имя не указано hello(); // этот вызов также выдаст ошибку hello(undefined); // эти вызовы сработают hello(null); // hello null hello("Alexey"); // hello Alexey #функции

Объединение объектов Необходимость объединения нескольких объектов в JavaScript существовала всегда, особенно когда мы начали создавать классы и виджеты с параметрами:

const person = { name: "Alex", gender: "Male" };
const tools = { computer: "Mac", editor: "VSCode" };
const attributes = { handsomeness: "Extreme", hair: "Brown", eyes: "Green" };

const summary = { ...person, ...tools, ...attributes };

console.log(summary);
// { computer: "Mac", editor: "VSCode", eyes: "Green", gender: "Male", hair: "Brown", handsomeness: "Extreme", name: "Alex" }

Таким образом создается новый объект, содержащий все свойства и значения объектов, предоставленных оператором spread. Мы можем предоставить любое количество объектов для слияния. Также мы можем использовать Object.assign для выполнения того же, но оператор распространения spread делает это немного короче. #полезно

Как создать пустой объект Если в Object.create использовать null в качестве единственного аргумента, то создастся совершенно чистый объект. Object.create является отличной утилитой для создания прототипов. Объекты, созданные с помощью Object.create, имеют proto и наследуют свойства объекта, которыми можно манипулировать. Что если мы хотим создать объект который не был подвержен манипуляциям извне? Мы можем сделать это с Object.create(null): Можно создать объект, который кажется пустым с помощью {}, но этот объект всё ещё имеет proto, hasOwnProperty и другие методы объекта. Однако, есть способ создать чистый объект:

const dict = Object.create(null);

console.log(dict.proto === undefined); // true
console.log(dict); // {} No properties

// Свойства объекта не существуют, пока мы не добавим их

На этом объекте нет абсолютно никаких ключей или методов, которые мы туда не поместим. Поскольку прототипа не существует, объектом нельзя манипулировать извне. #полезно

Хочешь создавать уникальные современные сайты, но разработка занимает много времени? https://t.me/sen10r — канал для Frontend программистов, с огромным количеством готовых решений, для твоих проектов, которые ускорят твою работу! https://t.me/FigmaTemp1ate — канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку. https://t.me/mavenjs — опытные разработчики создали канал, чтобы ваш код выглядел достойно и опрятно.

Массив и Boolean Иногда нам нужно отфильтровать массив не по его первоначальному значению, а по новому значению, поэтому мы используем map: myArray.map(item => { // Делаем обработку ... // Если нам всё равно на item, мы возвращаем false или null, или undefined return false; }); #функции

Оператор с запятой Вновь простой вопрос, что будет выведено в консоль?

console.log((2,5 - 2) * 2);

Совершенно верно, 6. Но почему? Всё дело в том, что тут написано не число два с половиной, а число два, запятая, число 5. Что делает запятая? Она выполняет слева направо каждый из операндов и возвращает значение последнего, в данном примере число 5. #операторы

Быстрая очистка массива с сохранением ссылки Какой самый быстрый способ очистить массив мы знаем? Разумеется — это присвоить массиву значение пустого массива [], но тогда ссылка на этот массив изменится, а что если нам нужно её сохранить?

const array = [/Какие-то данные/];
array.length = 0; //[]

Всё, массив очищен, а ссылка сохранена. P.S. Аналогичным способом можно заполнять массивы пустыми данными: const array = [1, 2]; array.length = 4; //[1, 2, , ] #функции

Разделитель разрядов Я задам лишь один вопрос: «Что будет выведено в консоль?»:

console.log(1_000 + 1_500);

Думаете, что произойдет конкатенация и в консоль выведется «1_0001_500»? Или же выведет ошибку? На самом деле ответом будет являться число 2500, но почему? Всё просто, символ "_" является разделителем для улучшения читабельности. Согласитесь, гораздо быстрее понять, что написано «один миллион», когда он выглядит так: 1_000_000, а не так: 1000000 #полезно

Получение случайного элемента из массива Эта однострочная строка возвращает вам случайный элемент из входного массива, который вы передаете в качестве аргумента функции.

const randomArrayItem = (arr) => arr[Math.floor(Math.random() * arr.length)];

randomArrayItem(['lol', 'a', 2, 'foo', 52, 'Jhon', 'hello', 57]);
// Result: It will be some random item from array

#функции

Проверка валидности даты Проверьте правильность ввода даты пользователем.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Result: true

#функции

Сколько нужно времени, чтобы освоить востребованную профессию фронтенд-разработчика?  Всего 10 месяцев! Вы можете совмещать обучение с любым своим занятием. Главное условие - желание. В Xeкслете вы можете пройти онлайн-курс по профессии «‎Фронтенд-разработчик».  Во время программы вы: ✔️ Изучите JavaScript в связке с HTML и CSS. ✔️ Освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно. ✔️ Решите более 310 задач в браузере. ✔️ Создадите 4 проекта для портфолио на GitHubВыполните 150 тестовых заданий от наших партнёров. ✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Source проектах. Обучение построено так, что его невозможно «отсидеть» или «прослушать». Мы не сторонники подхода «повтори за учителем»: вы будете не просто писать код, а научитесь самостоятельно находить лучшие решения. 📌 Пройдите первые 10 бесплатных уроков из профессии и получите дополнительно скидку 10% !

Удаление дублей в массиве Set в JavaScript хранят только уникальные элементы. Мы можем использовать это поведение для удаления повторяющихся элементов из массива. Однако оно работает только с массивами, хранящими примитивные данные. Таким образом, вам придется написать многострочное решение для удаления дубликатов в массивах, хранящих объекты. Но, тем не менее, это вполне приличный метод удаления дублей в простых сценариях.

const removeDuplicates = (arr) => [...new Set(arr)];

removeDuplicates([31, 56, 12, 31, 45, 12, 31]);
//[ 31, 56, 12, 45 ]

#функции

Получение случайного логического значения (true / false) Эта функция вернет логическое значение (true или false) с помощью метода Math.random(). Он создаст случайное число от 0 до 1, после чего мы проверяем, больше оно или меньше 0,5. Это означает, что шанс получить либо истину, либо ложь составляет 50/50.

const randomBoolean = () => Math.random() >= 0.5;

console.log(randomBoolean());
// Result: a 50/50 change on returning true of false

#функции

Очищение всех cookie браузера Еще одна однострочная функция, которую можно использовать для очистки всех файлов cookie, хранящихся на веб-странице, с помощью document.cookie и их очистки.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, =;expires=${new Date(0).toUTCString()};path=/));

#функции

Получение значений cookie браузера Полезная короткая функция JavaScript, предназначенная для получения значений cookie браузера. const cookie = name => ; ${document.cookie}.split(; ${name}=).pop().split(';').shift(); cookie('_ga'); // Result: "GA1.2.1929736587.1601974046" #функции