IIFE

Продолжим разбирать концепции JavaScript'а и сегодня быстро посмотрим на то, как использовать все преимущества блочной зоны видимости без let и const, только с помощью var и небольшой хитрости.

В прошлом посте я уже рассказал о том что такое блочная область видимости, но иногда речь заходит о поддержке старых версий EcmaScript, поддержке старых браузеров ( что сейчас уже пусть и актуально, но не так сильно, как раньше ). В таких случаях мы не можем использовать let и const, а следовательно и блочная область видимости нам недоступна. В таких случаях используют IIFE.

IIFE — Immediately-invoked Function Expression — или мгновенно вызываемое функциональное выражение. Это определенный синтаксический прием, который позволяет сразу объявить и вызвать функцию в указанном месте. Таким образом мы создаем костыльный аналог блочной области видимости, который ограничено областью видимости этого функционального выражения. Тут рассмотрим пример.

Допустим, нам нужно проитерироваться по массиву и вывести его значения через какой-то промежуток времени:
var array = [1, 2, 3, 4, 5]

for (var i = 0; i < array.length; i++) {
setTimeout(() => {
console.log(array[i])
}, 500)
}

Казалось бы, все предельно просто и мы ожидаем вывод чисел от 1 до 5 последовательно через 500 миллисекунд. Но вот нет, всё не так просто. Какой бы вывод вы не ожидали, очень много людей тут делают ошибки.

На самом деле вывод такой:
undefined
undefined
undefined
undefined
undefined

Что? Почему? Всё из-за особенностей объявления переменной через var. Итерация проходит менее чем за 500мс. На моём ПК она проходит всего за 2мс. Значение переменной i в начале последнего прохода достигает значения 4, а в конце прохода становится равной 5 ( т.к. выражение i++ выполняется после отрабатывания всего тела for )

Функция setTimeout никак не блокирует поток, поэтому мы быстро итерируемся, получаем i = 5, а через еще 498мс обращаемся к array[5], но такого элемента нет, максимум 4, нумерация же с нуля. При этом с let всё работает отлично

И когда нужно получить ожидаемый вывод, но нельзя использовать новый синтаксис, используется IIFE. Выглядят они так:
(function(локальное название переменных) {
тело функции
})(переменные на вход)

Перепишем вышеописанный пример с использованием IIFE:
for (var i = 0; i < array.length; i++) {
(function(i) {
setTimeout(() => {
console.log(array[i])
}, 500)
})(i)
}

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

В итоге получаем ожидаемый вывод:  
1
2
3
4
5

Супер простой концепт, но много проблем решает. Вот мы и реализовали задачу в старом синтаксисе, ничего сложного.

И на этом всё, спасибо за прочтение. Если вам не лень, то поделитесь каналом с друзьями. Аудитория лишней точно не бывает. Люблю.

#javascript #web #theory

Итерирование по сущностям: reduce

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

reduce —  это тоже метод массива. И его применение в некоторых случаях очень упрощает работу. reduce и map очень похожи. Оба метода последовательно к каждому элементу массива применяю какую-то функцию, но если map как результат работы возвращает новый массив, то метод reduce возвращает какое-то единственное результирующее значение.

Допустим, у нас есть массив чисел:

const numbers = [1,2,3,4,5,6,7,8,9]

Если мы не знаем что такое reduce, то сумму чисел массива мы скорее всего найдём так:

let sum = 0
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i]
}

4 строки. А c помощью reduce сделаем в одну:

const sum = numbers.reduce((sum, current) => sum + current)

Казалось бы, да какая разница? Получим мы одно и то же, только разное количество строк потратим? Да всё равно.

На самом деле, да, всё равно. Нет ничего плохого в использовании обычного перебора циклом, но удобство использования методов filter, reduce и map в основном проявляется в их совместном использовании. Ну и, субъективно, reduce выглядит куда более читабельно.

Полная сигнатура:

array.reduce(reducer, initialValue = 0)

reducer = (accumulator = initialValue, currentValie, index, array) => ...

На этом всё. Спасибо за прочтение. 

#javascript #web #theory #useful

Сессия в унике негативно влияет на канал. Пост завтра в 17:00

Что такое callback функция

Снова больше двух недель постов не было, сессия убивает меня не только морально, но и физически.

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

Функция высшего порядка — функция, которая принимает в качестве аргумента другую функцию и/или возвращает новую функцию.

Чаще всего callback функции рассматриваются вместе с понятием функций высшего порядка. Оно и понятно. В более глобальном смысле, callback функция — функция, переданная в другую функцию в качестве аргумента, позже вызванная. Сначала в стеке вызова появится функция высшего порядка, а потом наш callback. Говорящее название — функция обратного вызова.

Рассмотрим на примере:

const logSuccess = () => console.log("Запрос выполнен успешно")

const fetchData = async (uri, callback) => {
    const data = await fetch(uri)
    ... // обрабатываем результат запроса
    callback() <-- вызов callback'а
    return json
} 

 
Таким образом после выполнения запроса мы можем выполнить любое действие. Это действие будет динамичным, будет определено в результате обработки логики приложения. Нам не нужно заранее определять callback, мы можем просто подать необходимую функцию в вызов и выполнить любое действие после. Как-то так.

Надеюсь было полезно. Спасибо за прочтение.

#javascript #theory

​Деструктуризация JavaScript

Как вы справляетесь с ситуацией, когда из объекта нужно сохранить определенную переменную?
Самым удобным способом является деструктуризация. Это синтаксис, когда мы в одну строку создаем несколько переменных из какого-либо объекта.

const json = {
    name: "Denis",
    surname: "Putnov",
    age: 19,
    email: "[email protected]",
    adress: {
        city: "Voronezh",
        country: "Russia",
    }, 
    username: "grnbows"
}

Допустим, у нас есть такой json, пришедший нам с сервера. Реализуем функцию приветствия:

const sayHi = (person) => 
    console.log(`Hi ${person.name} from ${person.adress.country}`)  

Работает отменно и выводит нужное сообщение. Но код выглядит не очень красиво.

Перепишем функцию и воспользуемся деструктуризацией:

const sayHi = (person) => {
    const {name, adress: {country}} = person

    console.log(`Hi ${name} from ${country}`)
}    

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

const sayHi = ({ name, adress: { country } }) => 
    console.log(`Hi ${name} from ${country}`)

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

На этом у меня всё. Спасибо за прочтение.

#javascript

​JavaScript: в чем разница null и undefined?

Супер популярный вопрос с собеседований, ответ на который висит почти везде. Пусть и тут будет.

1. Основное отличие: null присваивается только явно самим разработчиком, в то время как undefined интерпретатор может присвоить самостоятельно.

undefined присваивается к переменным, для которых значение неопределено, например:

var name;
console.log(name) // undefined
name = "Denis"
console.log(name) // Denis

null присваивается к переменным только явно, то есть:

var name = null

2. Разное поведение при применении оператора typeof

typeof null // 'object'
typeof undefined // 'undefined'

Причем, на самом деле, и null и undefined являются примитивами. Но null имеет type 'object' по историческим причинам. Связано это с проблемами обратной совместимости. Чтобы не ломать уже написанный код, уже с очень давнего времени в JavaScript существует этот костыль.

Это два отличия, назвав которые вам со 100% вероятностью засчитают правильный ответ на вопрос. 

Спасибо за прочтение, вы классные.

#javascript

​Function expression vs Function declaration.

В JavaScript объявить функцию можно по разному. Различают два способа, давайте рассмотрим их на примере функции сложения двух чисел:

Function declaration:

function sum(a, b) {
    return a + b
}

Function expression:

const sum = function sum(a, b) { return a + b }

или с использованием синтаксиса стрелочной функции:

const sum = (a, b) => a + b

Функционал одинаковый, все функции вернут одинаковый результат при одинаковых входных данных. Но есть разница. Все функции, объявленные через Function declaration инициализируются еще до выполнения кода. Это значит, что нам не важно где функция объявлена. Вызвать её можно в любой момент, даже до фактического объявления в коде:

sum(2, 7) // 9

function sum(a, b) {
    return a + b
}

С функциями объявленными через Function expression так не получится, ведь механизм объявления такой функции идентичен механизму объявления переменной:

sum(2, 7) // ReferenceError: sum is not defined

const sum = function sum(a, b) { return a + b }

В этом основная разница 🙂
Спасибо за прочтение, это важно для меня.

#javascript

​Infinity в JavaScript

В JavaScript существуют специальные значения: Infinity и -Infinity. Эти значения используются как границы в алгоритмах как бесконечно большое и бесконечно малое значение соответственно.

Получить такие значения можно явно:

let a = Infinity

Или в некоторых случаях, например:

1 / 0    //  Infinity
-1 / 0   // -Infinity

В целом, особо тут обсудить больше нечего. Пост скорее просветительский, из разряда «глянь что могу».
Спасибо за прочтение.

#javascript

Сделал на реакте блог, просто от безделья. Там некоторые посты с канала. Если кому-то интересно как канал мог бы выглядеть в форме сайта, то пощупать можно тут.

Страница проекта на guthub: markdown-github-blog

#blog

​Что такое this

Часто понятие контекста this у новичков и не только вызывает массу вопросов.

Если максимально просто, то контекст — это объект. Это первый пункт, который необходимо запомнить. Контекст — это всегда объект, которому принадлежит исполнение кода. Что это значит?
Разберем на примере браузера:
Допустим, что есть функция foo()

function foo() {
    console.log(this === window)
}

Это весь наш код.  Если мы вызовем эту функцию в глобальной области видимости, то увидим в консоли значение true. Это происходит потому что наша функция вызывается относительно глобального объекта window. Вызов принадлежит объекту window. Более того,
this.hasOwnPropery('sayHi') === true

Созданная нами функция является методом внутри глобального объекта. Поэтому ключевое слово this в этом случае действительно равно объекту window.

Давайте попробуем создать класс с методом, который покажет нам контекст объекта, инстанса класса:

class Bar {
    constructor(number) {
   this.number = number
   this.name = 'denis'
    }
  
    showThis() {
   console.log(this)
    }
}

const bar = new Bar(5)
bar.showThis()

Достаточно простой код. Мы создаем класс Bar, в методе constructor объявляем контекст нашего класса. При вызове метода showThis мы увидим ожидаемый объект:

{
  name: "denis",
  number: 5
}

Метод showThis вызывается относительно объекта bar и его контекста. Поэтому мы видим созданный объект из конструктора класса. Если бы на вход к конструктору было подано другое значение, то мы получили бы и, соответственно, другой контекст. Отсюда получаем самые важные свойства контекста:

Контекст — ближайший вышестоящий объект, который управляет вызовом кода.
Контекст динамичен.
Контекст доступен по ключевому слову this.

На самом деле, this — это лишь ссылка на запись в памяти, которая указывает на контекст.  А если это всего лишь ссылка, то значит мы можем управлять контекстом, вау! На управлении контекстом реализованы несчетное количество паттернов и концепций. Об управлении контекстом мы поговорим позже, а за управление контекстом отвечают методы call,apply и bind. Их нужно знать и уметь применять, ждите новый пост.

Из нюансов:
1. Глобальный контекст разный на разных платформах: в браузере это объект window, в nodejs это объект global. 
2. Контекст разный в зависимости от режима работы: в режиме "use strict;" или без него. О том, что такое "use strict;" я тоже скоро расскажу.
3. Стрелочные функции не имеют собственного контекста. Их контекст всегда указывает на глобальный объект.
4. В DOM-API ключевое слово this указывает на объект event.currentTarget(). Для понимание этого пункта рассмотрите код ниже.

<button onclick="console.log(this.innerHTML)"> 
    Текст внутри кнопки
</button>

При нажатии на кнопку в консоли увидим сообщение "Текст внутри кнопки".
Занятно, но с современными фреймворками, наверное, бесполезно.

На этом всё. Спасибо за прочтение, это важно для меня.

#javascript #web #theory

​Pet-проекты и где они обитают

Почти год назад в этом канале я писал о pet-проектах. В том посте я рассказал совсем базовые вещи: что это такое и почему стоит попробовать. Сегодня хочу снова поднять эту тему немного в другом ключе.

Обучение программированию — это не только теория, на мой взгляд. Наоборот, хороший программист — это далеко не тот человек, кто использует правильные термины или знает абсолютно все микромоменты в технологии. Хороший программист — это человек творческий, способный решать задачи бизнеса быстро, дешево и качественно. Способный быстро адаптироваться к новым условиям и найти выход из ситуации, в которую попал впервые. Именно поэтому на многих собеседованиях вас просят писать код на обычной бумаге. Это заставляет вас работать в заведомо некомфортных условиях, и если вы в таких условиях пишете качественный код, то вы — хороший программист.

И как бы глубоки ваши теоретические знания ни были, без практических навыков вы не сможете показать хороший результат. А чтобы получить новые практические навыки и поэкспериментировать с технологиями, есть отличный вариант — pet-проекты. Замкнутый круг.

И в этом случае pet-проекты выступают прям панацеей для получения новых навыков. Идеи для таких проектов можно искать где угодно, но я бы посоветовал banda.works.

Вообще, это небольшая команда, которая делает открытые проекты для помощи в обучении и трудоустройстве новичкам в вебе. И сайт с pet-проектами — это один из проектов этой команды.
И сервис, на самом деле, находка. Там бесплатно размещены не только интересные проекты, но и некоторые вступительные испытания крупных компаний. Так что это отличный вариант изучить что-то действительно востребованное на рынке. Там, кстати, удобная сортировка по технологиям, так что если вы хотите написать проект на условном React, то сортировка делается в 1 клик.

Ещё тема трудоустройства поднимается в их телеграм канале: @bandaworks_bb.
Так же советую. Рекламу в этом канале я не продаю, так что этой рекомендации более чем можно доверять.

Примерно такие мысли на сегодня, спасибо за прочтение. Это важно для меня.

#blog #useful

​​Сказ о том, как я HTML в JPG конвертировал...

Обычно, когда я пишу посты в канал, я использую фотошоп для создания картиночки к нему. Эта картинка присутствует у подавляющего большинства постов и я думаю для многих это уже неотъемлемая часть стиля всего канала. И часто эта самая картинка — большая проблема для меня. Для её создания мне нужен сам фотошоп, время, куча ненужных действий и вот это вот всё неприятное. И пусть я делаю всё это по шаблону, который подготовил заранее, даже тут моя лень находит способ помешать мне. А лень — двигатель прогресса, это уж точно.

В общем, проблем несколько:
— Лень
— Занимает относительно много времени и не приносит удовольствия
— Посты можно оформить только с ПК
— Я счастливый обладатель MacBook на M1, так что для нормальный работы в Photoshop нужно тратиться на лицензию

Я решил найти другое решение: бесплатное, быстрое, удобное и кросс-платформенное. И нашел.

Для решения задачи я хотел использовать Python, но решение это было не лучшее. Нет нормального API для работы с DOM элементами, нужна песочница для запуска браузера, работает медленнее, а самое главное - на Python у меня гораздо меньше опыта. Я реализовал рабочий вариант на imgkit достаточно быстро, но он не устроил меня, код удалён.

Ну и, соответственно, я решил использовать node js. Я имею куда больше опыта c node и javascript, так что рабочее решение, которое по моим тестам работало быстрее решения на Python в 7.5 раз, было готово меньше чем через 20 минут.

Я быстро накатил первую попавшуюся из поиска библиотеку node-html-to-image, воспользовался неплохой документацией, сверстал максимально странный, но рабочий макет и вот, мой html конвертируется в изображение за, в среднем, 2.4 секунды. Ещё за полчаса я изучил библиотеку node-telegram-bot-api и создал на основе скрипта-генератора удобный для себя интерфейс для управления им. Теперь картинки к моим постам генерируются на бесплатном хостинге heroku, и делают они это через API бота в телеграм. Процесс выглядит так.

В итоге, процесс создания картинки максимально упрощён. Я могу оформить пост с любого устройства, где поддерживается клиент телеграмма (то есть даже с утюга), мне не нужно платить за подписку на Photoshop и я даже могу делегировать создание постов на кого-то куда проще.

Всё это написано крайне криво, неказисто, без нормальной архитектуры и, даже, как такового код-стайла, в паре файликов. Но оно работает. И мне этого достаточно. Я не вижу смысла тратить время на вылизывание кода, которым буду пользоваться только я, это элементарно экономически не выгодно. Но если вдруг перед кем-то встанет такая-же задача, то на моё решение можно посмотреть здесь.

Можно было написать лучше, может быть на питоне это генерировалось бы за миллисекунды, мне плевать. Оно работает и выполняет свою задачу более чем удовлетворительно. Картинка к этому посту уже сделана через бота. Сравнив её с прошлыми, где все сделаны вручную, я думаю, вы оцените качество результата. Можете, кстати, поискать на картинке пасхалку. Милая штука, на мой взгляд.

Делюсь. Вот. Спасибо за прочтение, это правда важно для меня.

#blog #useful #github #design #chatbot

​​Проблема 0.1 + 0.2

Часто на собеседовании можно встретить такой вопрос:

Что будет выведено в консоль?
0.1 + 0.2 == 0.3 // ?

Любой адекватный человек, который знает школьную математику, ответил бы, что в консоли будет выдано значение true, но это неверный ответ. Будет false.

0.1 + 0.2 === 0.30000000000000004

Что за бред? Почему? Зачем?

У этой проблемы есть отдельное название и даже свой сайт, где вы можете посмотреть в каких языках встречается эта проблема. И суть заключается в том, что система счисления разная.

Представление нашей десятичной алгебры в компьютере задано в двоичной системе счисления, как байт код, нулями и единицами. И сложность заключается в том, что число 0.1 в двоичной системе непредставимо. Это просто невозможно записать.

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

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

Спасибо за прочтение, это важно для меня.

#theory

​​Итерирование по сущностям: filter

Код из примеров очень сложно читать в самом Telegram из-за его размера, так что все примеры для простоты я перенёс в телеграф.

Ранее я уже рассматривал методы итерирования по массиву map и reduce. Предлагаю дополнить этот список методом filter.

1. filter возвращает новый массив без изменения старого
2. Параметром принимает callback, который должен вернуть значение типа boolean или значение, которое будет преобразовано к boolean, например пустую строку
3. В новый массив попадут все значения, для которых функция callback вернула значение, подобное true

Например, необходимо получить список всех положительных чётных чисел из списка (пример 1)
Или из списка customers нужно получить всех покупателей, которые подтвердили свой аккаунт (пример 2)
В результате получим два искомых покупателя. То есть из объекта даже можно возвращать одно из полей, не применяя к нему никаких вычислений.

Полная сигнатура метода:

filter(function callback(element, index, array) { ... }, thisArg)

Где callback - функция, а thisArg - значение, которое будет использовано как this в callback функции.

И filter, как метод, можно использовать в цепочке, тем самым оформляя решения крайне читабельно и красиво, например:
Написать функцию, которая на вход получает массив слов, а возвращает общую длину всех слов палиндромов. Пример сказочный, но допустим (пример 3)

Комбинацией трёх этих методов мы реализуем функцию, которая даст нам правильный ответ.

Чаще всего хватает одного метода или комбинации двух из трёх методов. Эта задача усложнена намеренно, чтобы оправдать использование трёх методов сразу. И даже эту задачу можно решить лишь с использованием filter и reduce, map тут избыточен.

Есть еще много способов итерации по сущностям, например те же разные виды цикла for. Их я разберу чуть позже. Ну а пока, спасибо за прочтение, это важно для меня ❤️

#javascript #web #theory #useful

​​Что такое чистая функция

Я часто смотрю видео с собеседований и этот вопрос встречается чуть ли не в каждом втором собеседовании на разных уровнях. И больше всего удивляет, что даже мидлы не знают что это такое и не могут дать точного определения. А я могу 🙂

Чистая функция — это функция, обладающая сразу двумя свойствами:

1. Функция зависит только от входных параметров, на одинаковых наборах входных значений возвращается один и тот же результат вне зависимости от внешних факторов.
2. Функция не влияет на что-либо вне себя. Чистая функция не может изменять внешние переменные, управлять чем-либо извне, создавать файлы, изменять входные параметры по ссылкам и т.д.

Максимально просто, но почему-то знают не все.

Также я подготовил примеры чистых и не чистых функций. Размещаю их по ссылкам, чтобы не раздувать пост в объёме. Примеры на JavaScript, но код более чем читаемый.

Чем чистые функции так полезны и почему это хорошо? Они ведут себя предсказуемо и их легко тестировать. Чистые функции поддаются тестированию проще других, не мутируют, не вызывают непоняток. Поэтому они так ценятся и в без того проблемном JavaScript. И в других языках, конечно.

На этом всё. Спасибо за прочтение ❤️

#javascript #theory

​​Какие типы данных есть в JavaScript

В любом языке базовым вопросом будет назвать типы данных и JavaScript тут не исключение. Разберем один из самых частых вопросов на собеседовании.

Итак, в JavaScript есть 6 типов:
- number
- string
- boolean
- null
- undefined
- object

Первые 5 являются примитивами, а object является сложным типом данных. Также ES6 принёс в язык типы BigInt и Symbol.
Из особенностей:

typeof null // 'object'
typeof [] // 'object'
typeof (() => {}) // 'function'
typeof function() {} // 'function'
typeof NaN // 'number'

const a = new Set()
const b = new Map()

typeof a // 'object'
typeof b // 'object'

1. typeof null === 'object' — это официальная ошибка, которая сохраняется ради обратной совместимости кода. На самом деле null — это отдельный примитив.
2. Массив не является отдельным типом данных. Это объект
3. Так же, как массив, Map, Set, WeakMap, WeakSet — это объекты.
4. Хоть функция и обрабатывается оператором typeof как 'function', на самом деле, функция — это тоже объект. Почему так мы разберём чуть позже, но вообще функции называют объектами первого класса. Так что на самом деле функция — это тоже объект.
5. typeof NaN === 'number'. Вот такой прикол вам оставили разработчики, да. Not A Number — это инстанс Number. Для проверки NaN есть специальная глобальная функция isNaN().

Тот ответ, что я описал — это максимально точный и развёрнутый ответ. Не стоит приплетать что-то еще. И на этом всё. Спасибо за прочтение и интерес, это правда важно для меня.

#javascript #theory

​​Методы управления контекстом вызова

Ранее мы разбирали что такое this и там я пообещал рассказать о методах call, apply и bind. Этот пост как раз об этом.

Итак, все эти 3 метода созданы для управления контекстом вызова функции. Давайте рассмотрим пример:

const person = {
  name: "Deins",
  greet(greeting = 'Hi') {
    console.log(`${greeting}, ${this.name}`)
  }
}

const channel = {
  name: "progway"
}

// Hi, Denis
person.greet()

// Hello, progway
person.greet.call(channel, 'Hello')

// Привет, Денис
person.greet.apply({name: 'Денис'}, ['Привет'] ) 

const greetMax = 
  person.greet.bind({name: "Макс"}, 'Привет')

// Привет, Макс
greetMax()

Без кода всё равно не разобраться.

У объекта person есть метод greet, который за контекст вызова берёт как раз объект person. Но если мы хотим применить к этому методу другой контекст, например созданный заранее объект channel или новый произвольный объект, то необходимо использовать вышеописанные 3 метода.

call, apply — применяют новый контекст к функции, принимая новый контекст первым параметром, а далее вызывают функцию с указанными аргументами.

call принимает аргументы функции через запятую, а apply принимает их списком. Это основное отличие между этими двумя методами.

bind — так же применяет контекст и через запятую принимает параметры для вызова, НО

Самым важным отличием является то, что методы apply и call сразу же вызывают функцию и возвращают её результат, а метод bind создает новую функцию относительно аргументов и контекста, но не вызывает её. Такую функцию мы можем сохранить в переменную и вызвать позже.

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

И на этом пока всё. Спасибо за прочтение, это важно для меня.

#javascript #theory

​​Специфичность CSS

Не самый простой для многих вопрос, который для некоторых разработчиков даже Middle уровня будет фатальным. Но не для нас 🙂

Итак, специфичность указывает на то, какой стиль будет применён к элементу. На это влияет три показателя:
— Место определения селектора
— Вес селектора
— Директива !important

Разберем их по порядку:
• Специфичность выше, если свойство объявлено ниже. То есть в примерах

body {
 color: black;
 color: red;
}

div {
 width: 100px;
}

div {
 width: 400px;
}

Элемент body будет иметь правило color: red;, а элемент div будет иметь правило width: 400px;, так как эти свойства объявлены ниже и "перезаписали" вышеописанные свойства.

• Вес селектора — это величина, которую считают по разному. Есть как минимум два способа, но тут главное понять принцип. Я расскажу только об одном из них.

Каждый тип селектора имеет свой вес:
Тег — 1
Класс — 10
ID — 100
Inline — 1000

Посчитаем вес селектора на примере:

div = 1 
div.className = 1 + 10 == 11 
#id .className = 100 + 10 == 110
div > span = 1 + 1 == 2 

К элементу применяются свойства от селектора, который имеет самый высокий вес. Если вес селекторов одинаковый, то применяется тот селектор, что описан позже.

• Но если в селекторе с меньшим весом или объявленном выше к свойству применить директиву !important, то в таком случаем специфичность такого правила будет максимальной и применится то правило, что помечено директивой.
Запись выглядит так:

div {
 color: red !important;
}

div {
 color: blue;
}

В примере к элементу div будет применено правило color: red;.
Использование этой директивы является плохим тоном и оправдано только в самых крайних случаях.

Спасибо за прочтение. Это важно для меня.

#web #theory

​​Есть ли в JavaScript перегрузка функций?

Достаточно интересный вопрос, на который без дополнительных наводящих вопросов от интервьюера мало кто ответит. Чтобы ответить, есть ли перегрузка функций в JavaScript, необходимо узнать что это вообще такое.

Перегрузка функций — или по другому «полиморфизм функций» — это понятие, которое встречается в языках программирования. Если язык поддерживает перегрузку функций, то у разработчика появляется возможность определить две функции с разной логикой, но с одинаковым именем. При вызове интерпретатор сам выберет нужную:

function foo(x, y) {
  ...
}

function foo(x, y, z ) {
  ...
}

foo(x, y)    // вызовется первая функция
foo(x, y, z) // вызовется вторая функция

Перегрузки функций в JavaScript нет. При интерпретации кода выше, интерпретатор переопределит значение по ссылке foo и при вызове функции с разным количеством аргументов мы будем вызывать одну и ту же функцию, только:

foo(1, 2)
// x = 1
// y = 2
// z = undefined

foo(1, 2, 3)
// x = 1
// y = 2
// z = 3

Может быть только одна функция с именем foo, которая вызывается с любыми аргументами. А уже внутри она может посмотреть, с чем вызвана и по-разному отработать.

Для более удобной реализации логики в функциях с динамичным количеством аргументов в JavaScript реализован доступ к «лишним» аргументам через псевдомассив arguments. О нём и пойдёт речь в следующем посте.

Ну а пока он ещё не вышел, вы можете сделать доброе дело и порекомендовать мой канал своим друзьям, товарищам, коллегам. Моей благодарности не будет предела.

Спасибо за прочтение. Это очень важно для меня ❤️

#javascript #theory

​​Лишние аргументы и arguments

В прошлом посте я рассказывал о перегрузке функций, где обещал подробнее рассказать о псевдомассиве arguments. Этот пост как раз об этом.

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

function foo() {
 console.log(arguments)
}

foo(1,2,3)
// { '0': 1, '1': 2, '2': 3 }

Да и вообще, почему я пишу, что это псевдомассив, если в результате мы видим, что arguments — объект? На самом деле это объект, подобный массиву. Это обычный объект, у которого реализован геттер length и к которому можно применять некоторые другие операторы итерируемых сущностей. Но у arguments нет других методов массива, например shift или push.

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

function sum() {
  return [...arguments].reduce((acc, cur) => acc + cur, 0)
}

Как вы можете заметить, я применяю Spread оператор к arguments, потому что у этого псевдомассива нет метода reduce. Таким образом получается функция, которая соответствует задаче.

sum(1,2,3,4,5) // 15
sum(1,2,3,4,5,6,7,8,9) // 45
sum(10, 20) // 30
sum() // 0 

Есть ещё миллионы примеров применения arguments, но об этом в другой раз. А пока что у меня всё. Спасибо за прочтение и интерес.

#javascript #theory