JavaScript для тупых

Promises (Обещания)

2020-05-22T16:16:28.351Z

Всем привет. На повестке сегодняшнего дня – Promises.

У многих возникает много непонимания как работать с обещаниями, а у многие даже не понимают зачем они вообще нужны. В этой статье, я, как и всегда, постараюсь максимально просто и на примерах рассказать о обещаниях. Надеюсь, что после прочтения этой статьи ты больше никогда не будешь прятаться от Promises, ведь они совсем не страшные =)

Начнем

Хотелось бы начать с того, что JS язык синхронный, т.е. весь код выполняется последовательно. И все было бы хорошо, но достаточно быстро в языке появилась потребность в дополнительных возможностях, а именно, понадобилась асинхронность. Зачем?

Все мы сидим в социальных сетях. Когда ты заходишь, например, в Facebook, то наверное, замечал, что сайт загружается за несколько секунд, а не "висит" по несколько минут. Но все бы сайты, тем более такие крупные как Facebook без асинхронных операций загружались бы очень долго.

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

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

Какие асинхронные операции мы знаем?

Я уже писал о асинхронных методах в JS, а конкретно: setInterval и setTimeout.

Это яркие представители асинхронного исполнения кода. Если не читал о них, то советую прочитать (делай тык):

setInterval
setTimeout

Эмуляция работы с сервером с помощью setTimeout

Итак, давай попробуем сэмулировать работу с сервером. Сначала, сделаем это с помощью setTimeout, а затем с помощью Promise и, как итог, поймем в чем разница и рассмотрим все плюсы Promise.

Представим, что мы отсылаем запрос на сервер. Сервер собирает данные (на это уходит какое-то время) и сервер высылает нам данные (это тоже занимает время).

Пошли к коду:

console.log('Отправляем запрос на сервер...');

setTimeout(function() {
   console.log('Сервер собирает данные...');

   const data = {
     text: 'Данные с сервера'
   };

  setTimeout(function() {
    data.other = true;
    console.log('Данные, которые предоставил сервер: ', data);
  }, 2000);
}, 1500);

Итак, весь процесс нашей эмуляции:

Эмулируем отправку запроса
Создаем первый setTimeout, который отработает через 1.5 секунды. Этот таймаут будет эмулировать "сбор данных" и создавать объект data с этими данными.
Внутри первого setTimeout создаем второй. Он будет как-то дополнять/изменять объект data и как бы высылать пользователю и потратит он на это 2 секунды.

Итог работы:

Все прикольно. Отработало это ровно так как и ожидали за 3.5 секунды.

Вроде бы все прикольно, да не совсем. Мне лично, даже смотреть на такой код больно. setTimeout в setTimeout-е. Ведь если мы сейчас захотим еще что-то эмулировать, то у нас будет еще одна вложенность и все это будет напоминать матрешку. Разбираться в таких "матрешках" – не самое приятное удовольствие.

Поэтому, давай попробуем все это же провернуть с помощью Promise.

Эмуляция работы с сервером с помощью Promise

Сначала создадим пустой Promise. Делается это так:

const promise = new Promise(function(resolve, reject) {});

Создается обещание с помощью класса Promise, поэтому используется ключевое слово new. В конструктор данного класса передается всего один аргумент –callback-функция, которая, в свою очередь, принимает в себя 2 аргумента:

resolve (переводится как "разрешить")
reject (переводится как "отклонить")

Эти аргументы, на самом деле являются функциями. Благодаря этим 2-ум функциям мы можем контролировать выполнение Promise. К примеру, внутри обещания у нас будут какие-то проверки. Если все проверки будут выполнены удачно, то мы вызовем функцию resolve и, в таком случае, Promise завершится удачно. А если же, какая-то проверка не будет пройдена, то мы сможем завершить работу Promise с помощью вызова функции reject.

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

Сейчас мы сделаем ту же самую эмуляцию работы с сервером с помощью Promise

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

console.log('Отправляем запрос на сервер...');

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    const data = {
     text: 'Данные с сервера'
    };
  }, 2000);
});

Итак, внутри callback-функции нашего Promise, мы разместили код:

setTimeout(function() {
    const data = {
     text: 'Данные с сервера'
    };
}, 2000);

Это код нашего первого setTimeout из кода выше. Давай добавим в этот setTimeout вызов функции resolve(), так как мы хотим чтобы наш Promise выполнился без ошибок. В итоге получаем такой код:

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    console.log('Сервер собирает данные...');
    const data = {
     text: 'Данные с сервера'
    };

    resolve(); //успешное выполнение Promise
  }, 1500);
});

Итак, как работать с этим всем дальше? У callback-функции Promise, как я и написал ранее существует две функции: resolve, reject.

Вызвав функцию resolve в коде выше, мы, как бы послали сигнал, что Promise успешно выполнился. Но как отловить этот сигнал? На самом деле в этом нет ничего сложно.

В константу promise мы записали наш Promise, поэтому мы можем работать с ней следующим образом:

promise.then(function() {
  console.log('Успешное выполнение Promise');
});

Но, в целом, в этом случае (как и во многих других) лучше использовать стрелочную функцию в качестве callback:

promise.then(() => console.log('Успешное выполнение Promise'));

У Promise существует метод then, который ожидает, что в него ты передашь callback-функцию, которая выполнится только в тот момент, когда внутри самого Promise мы вызовем функцию resolve, которая означает успешное выполнение обещания.

Итог работы нашего кода:

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

На самом деле, третьим сообщением, в соответствии с первой реализацией эмуляции должен выводится текст: "Данные, которые предоставил сервер..." и дополнительно должен выводится сам объект data, а не "Успешное выполнение Promise". Давай это поправим, поэтому вернемся к этой строке:

promise.then(() => console.log('Успешное выполнение Promise'));

Итак, здесь мы должны заменить текст и вывести объект data. Но вот в чем проблема – здесь, в этой callback-функции у нас нет никакого объекта data, следственно вывести мы его не можем. Чтобы решить этот вопрос и получить доступ к объекту data нужно всего лишь в метод resolve, который мы вызываем в Promise передать наш объект data. Вернемся к нашему коду и поправим вызов resolve:

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    console.log('Сервер собирает данные...');
    const data = {
     text: 'Данные с сервера'
    };

    resolve(data); //передаем data
  }, 1500);
});

Теперь в функцию resolve мы передаем наш объект data. Что же это нам дает? А дает это нам возможность получить этот объект в методе then. И вот как это делается.

Вот это:

promise.then(() => console.log('Успешное выполнение Promise'));

Меняем на:

promise.then(data => 
  console.log('Данные, которые предоставил сервер: ', data)
);

Как видишь, теперь у нас стрелочная функция имеет аргумент data – и в этот аргумент и попадает то, что мы передаем внутрь функции resolve при ее вызове.

Как итог, получаем:

И все бы хорошо, да вот только объект в итоге имеет совсем не тот итоговый вид, как в первом случае.

На данный момент мы перенесли только один setTimeout, а у нас их было два.

Во-втором setTimeout мы добавляли дополнительно поле other со значением true к нашему объекту data.

Получается, что мы пропустили момент модификации объекта. Давай восполним данную потерю.

Нам нужно в какой-то момент модифицировать объект data и добавить ему свойство other. Когда же нам это сделать? Сделать нам это нужно тут:

promise.then(data => 
  console.log('Данные, которые предоставил сервер: ', data)
);

Вместо того, чтобы просто выполнить console.log, нам нужно изменить объект data, который приходит к нам из resolve выполненного в Promise. Более того, нам нужно выполнить это только через 2 секунды, а это значит, что нам нужно добавить наш setTimeout.

Давай попробуем исправить наш код:

promise.then(data => 
  setTimeout(function() {
     data.other = true;
     console.log('Данные, которые предоставил сервер: ', data);
  }, 2000)
);

Итог:

И вот, вроде бы уже и можно вскрикнуть "Ура". Но, нет. На самом деле, мы схалтурили.

Первый setTimeout, мы реализовали внутри Promise, что обеспечило нам контроль над происходящим: можем вызвать resolve для того, чтобы указать на успешное выполнение и reject – на выполнение с ошибкой.

Сейчас же, наш второй setTimeout не имеет такой возможности. А все потому, что мы не использовали Promise. Давай используем его и поправим наш имеющийся код. Для того, чтобы добавить Promise, нам нужно, чтобы callback-функция, которую мы определяем внутри then – возвращала нам новый Promise. Поэтому давай снова изменим callback-функцию в then:

promise.then(data => new Promise(function(resolve, reject) {}));

Теперь мы сделали так, что then вернет нам новый Promise. Пока что он ничего не выполняет, поэтому давай добавим наш setTimeout в тело callback-функции нашего нового Promise:

promise.then(data => new Promise(function(resolve, reject) {  
  setTimeout(function() {
     data.other = true;
     
     //не забываем выполнять resolve(data)
     resolve(data);
  }, 2000)
}));

Этим этапом мы изменили наш объект data. И с помощью resolve(data) мы сообщили, что наш новый (второй) Promise выполнился успешно и передали наш объект data дальше.

Но мы еще не выводим сообщение о том, что сервер предоставил нам какие-то данные. Давай поправим и это. Так как у нас из then возвращается новый Promise, то это означает, что мы можем использовать тот же метод then к этому обещанию и как-то отреагировать на новый вызов resolve(data):

promise.then(data => 
  new Promise(function(resolve, reject) {  
    setTimeout(function() {
       data.other = true;
     
       //не забываем выполнять resolve(data)
       resolve(data);
    }, 2000)
  })
).then(data =>
  console.log('Данные, которые предоставил сервер: ', data)
);

И вот теперь у нас все выполняется абсолютно так, как нужно.

Итак, весь наш код выглядит так:

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

С Promise же, мы имеем контроль над выполнением нашего кода. Если код успешно выполнился, то мы выполняем функцию resolve и обработчик then сразу же отлавливает это и выполняет заданные нами действия. Это же круто? Безусловно.

Но, мы пока что не затронули метод reject. Поэтому, давай поговорим и о нем.

Метод reject

Говорим и говорим о resolve, а reject как-будто, вообще никто и звать никак.

На самом деле метод reject не менее полезный, но служит он для той цели, чтобы сообщить о том, что наш Promise должен завершиться ошибкой.

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

У функции reject, свой обработчик – catch.

Если посмотреть еще раз на последний скриншот с кодом, то можно заметить, что Promise создают цепочку вызовов методов then:

const promise = new Promise(...);

promise.then(
... код ...
).then(
... код ...
)

Так вот, во всей этой цепочке, методу catch самое место – практически в самом ее конце (почему практически – узнаешь дальше):

const promise = new Promise(...);

promise.then(
... код ...
).then(
... код ...
).catch(
 ...обработка ошибки...
)

Внутри этого catch мы можем каким-то образом обработать ошибку и как и с функцией resolve, мы можем передать эту самую ошибку в качестве аргумента функции reject(error).

Для примера, я поменяю в нашем коде один из resolve на reject и передам в качестве аргумента ошибку:

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    console.log('Сервер собирает данные...');
    const data = {
     text: 'Данные с сервера'
    };

    reject(new Error('Ошибка сбора данных')); //передаем ошибку
  }, 1500);
});

promise.then(data => 
  new Promise(function(resolve, reject) {  
    setTimeout(function() {
       data.other = true;
     
       //не забываем выполнять resolve(data)
       resolve(data);
    }, 2000)
  })
).then(data =>
  console.log('Данные, которые предоставил сервер: ', data)
).catch(err => console.error(err));

Все что мы сделали – это вызвали reject и навесили обработчик catch. И теперь, если запустить наш код, мы получим ошибку:

Метод finally

Кроме методов then и catch, существует еще один метод – finally.

Метод finally выполняется всегда, вне зависимости от того вызвали мы внутри обещания resolve или reject.

Этот метод мы размещаем в самом конце цепочки и итоговый код у нас получается таким:

const promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    console.log('Сервер собирает данные...');
    const data = {
     text: 'Данные с сервера'
    };

    resolve(data);
    
    //генерируем ошибку
    //reject(new Error('Ошибка сбора данных'));
  }, 1500);
});

promise.then(data => 
  new Promise(function(resolve, reject) {  
    setTimeout(function() {
       data.other = true;
     
       //не забываем выполнять resolve(data)
       resolve(data);
    }, 2000)
  })
).then(data =>
  console.log('Данные, которые предоставил сервер: ', data)
).catch(err => 
  console.error(err)
).finally(() => 
  console.log('Работа с сервером завершена')
);

finally действительно не важно, будет ошибка:

или ее не будет:

Он будет выполняться всегда.

Домашка

Итак, домашнее задание придумать не просто. Поэтому, я оставлю листинг кода в онлайн-редакторе, попробуй поиграться сам с кодом и разобраться, если какие-то моменты остались недопонятыми. Ну, и, конечно же, если совсем будет много вопросов – всегда можешь писать в наш чат (ссылка на него в группе, в закрепленном сообщении).

Ссылка на код

Прототипы

2020-05-14T13:35:40.432Z

Сегодня речь пойдет о прототипах. Чтобы лучше все понять – создаем сразу же простой объект.

const cat = {
    name: 'Кот',
    weight: 3,
    meow: function() {
      console.log('meow');
    }
};

console.log(cat);

Результат:

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

console.log(cat.meow()); //выведет строку: meow

Все логично и просто. Попробуем вызвать несуществующую функцию:

cat.woof();

Результат ожидаем:

JavaScript правильно подсказывает – woof не является функцией. Оно так и есть, ведь мы не определяли эту функцию внутри нашего объекта.

Но, для примера, давай попробуем вызвать еще один метод, который мы не определяли:

cat.valueOf();

Результат:

Ошибки не произошло. И даже вывелись все данные о нашем объекте.

Попробуем еще:

cat.toString();

Результат:

Снова что-то вывелось и снова никакой ошибки. Но как так?

Мы не определяли никакого метода valueOf внутри нашего объекта, ровно как и не определяли метод toString. Магия вне Хогвартса? Нет. Все куда проще.

Еще раз посмотрим на первый скриншот в этой статье:

Это наш объект. Показаны все свойства и методы, которые мы определяли: meow, name, weight.

Но что за свойство __proto__? Давай посмотрим, что лежим внутри него:

Очень много всего. Непонятно зачем, а главное – непонятно откуда.

В этом всем списке, мы видим и те методы, которые мы вызывали: valueOf и toString.

Когда мы вызывали данные методы, JavaScript искал их сначала в пределах нашего объекта, а так как там он их не нашел, то пошел искать их в свойство __proto__.

Как это работает и зачем нужно?

Давай сначала разберемся с созданием объекта. Тот синтаксис, который мы использовали для определения нашего объекта cat является упрощенным:

const cat = {
    name: 'Кот',
    weight: 3,
    meow: function() {
      console.log('meow');
    }
};

Мы можем определить это другим методом, тем, который более понятен для самого JavaScript и в который, в любом случае, JS приводит наш метод определения:

const cat = new Object({
    name: 'Кот',
    weight: 3,
    meow: function() {
      console.log('meow');
    }
});

Т.е. создается новый объект типа Object используя ключевое слово new. И внутрь этого Object мы передаем наш объект. В результате, ничего абсолютно не меняется. Попробуем вывести объект cat в консоль:

console.log(cat);

Результат:

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

Так как мы создаем все наши объекты используя эту конструкцию new Object(...), то от этого самого Object к нашему объекту добавляются дополнительные свойства. К которым и относится то самое, непонятно откуда взявшееся, до текущего момента, свойство __proto__.

Получается, все объекты, которые мы создаем основываются на базовом классе JS - Object.

У класса Object имеется свойство prototype. Посмотрим, что там внутри:

console.log(Object.prototype);

Результат:

И мы видим, что внутри этого свойства лежат те же методы, которые добавились к нашему объекту в свойство __proto__.

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

Давай в свойство prototype класса Object добавим какую-нибудь свою функцию. К примеру, функцию woof, которую мы пытались вызывать и у нашего объекта, но у нас происходила ошибка:

Object.prototype.woof = function() {
    console.log('woof');
}

Теперь, ничего не меняя в нашем объекте, т.е. он останется такого же вида:

const cat = new Object({
    name: 'Кот',
    weight: 3,
    meow: function() {
      console.log('meow');
    }
});

Попробуем вызвать метод woof:

console.log(cat.woof());

Результат:

Как видишь, никакой ошибки и все прекрасно отработало. Еще раз посмотрим на наш объект в консоли:

console.log(cat);

Результат:

Метод woof, который мы добавляли в свойство prototype объекта Object успешно передалось в свойство __proto__ нашего объекта, поэтому и не произошло никакой ошибки.

Естественно, даже если мы будем использовать первоначальный синтаксис создания нашего объекта без использования new Object(...), то все равно все будет работать ровно так же.

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

Object.prototype.woof = function() {
    console.log('woof');
}

И создать несколько своих объектов, то из каждого у них в свойстве __proto__ добавится метод woof. Т.е. написав этот метод один раз в базовом классе Object – мы можем использовать его в неограниченном количестве объектов созданных нами.

Object.create

У базового класса Object существует метод create. Он напрямую связан с прототипами, поэтому я решил рассказать и о нем.

Для того чтобы объяснить как работает этот метод и что он делает, создадим 2 объекта.

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

const employee = {
   name: 'Работник',
   position: 'Повар'
};

console.log(employee);

Вывод в консоль нам даст:

Для создания второго объекта нам понадобится метод create из класса Object:

const manager = Object.create(employee);

Что мы только что сделали? Мы создали новый объект, который должен описывать работника, который является менеджером.

Object.create(employee) говорит о том, что нужно создать новый объект, прототипом которого будет являться объект employee.

Давай выведем наш объект в консоль:

console.log(manager);

Результат:

Объект пустой. И это неудивительно, мы же не задали ему ни одного свойства и метода. Но, что же у него теперь находится в свойстве __proto__? Смотрим:

А внутри него лежит объект employee, как мы и заказывали. И как видишь, у этого объекта, тоже есть свое свойство __proto__:

И как ты заметил это класс Object.

У нас получилась цепочка:

Создав объект employee обычным способом, мы получили объект, прототипом которого является базовый класс Object.
Мы создали объект manager с помощью Object.create(employee), прототипом которого указали объект employee.

Теперь, имея объект manager, давай установим для него имя и должность:

manager.name = 'Сергей';
manager.position = 'Менеджер';

Теперь еще раз посмотрим на наш объект:

У нашего объекта появились свои свойства name и position, при этом одноименные свойства в прототипе (employee) никак не изменились.

В целом это все что нужно знать о прототипах.

Если подитожить, то получается, что прототип – это базовый объект другого объекта. Этот базовый объект присутствует у других объектов и каким-то образом "расширяет" их возможности.

Кругом обман

На самом деле, все предыдущие материалы о типах данных в JS были немного прикрыты страшной тайной. На самом деле в JS – нет строкового типа, числового, логического и т.д. В JS – всё объекты.

Это достаточно просто понять. К примеру, создадим обычную строку:

const str = 'строка';

Несмотря на то, что это обычная строка – у нее есть методы. К примеру:

console.log(str.toUpperCase()); //выведет: "СТРОКА"

Мы не определяли этот метод, но он существует. Он переводит всю строку к верхнему регистру.

Это происходит потому, что строковый тип, это на самом деле тоже объект, а именно, объект String. Который в свою очередь основан на объекте Object.

Получается, что фактически написав такую вот конструкцию:

const str = 'строка';

Для JS это тоже самое что и:

const str = new String('строка');

Строка str на самом деле является объектом класса String, а прототипом объекта класса String является объект класса Object.

Все в JS создается на основе класса Object. Он главный, он батька.

Замыкания

2020-05-07T19:07:36.274Z

Сегодня речь пойдет о замыканиях в JavaScript. Для многих эта тема подсознательно воспринимается непонятной и от того сложной. Но, в действительности, в замыканиях нет ничего страшного и сложного.

Что же такое замыкание? Если говорить простыми словами, то это просто функция в функции. Вот и все. Да-да. Так вот просто. Это функция, которая находится внутри другой функции.

Начнем сразу же с примеров, т.к. на них будет разобраться намного проще.

function hi() {
    return function() {
        console.log('Привет');
    }
}

Такая вот незамысловатая конструкция: у нас имеется функция hi, которая возвращает другую функцию.

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

hi(); // в консоль ничего не выведется

Так как функция hi возвращает новую функцию, то нам нужно ее вызвать, перед эти, для наглядности запишем ее в константу и вызовем ее:

const sayHi = hi();

sayHi(); // выведет в консоль слово "Привет"

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

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

Давай разбираться зачем это нужно.

В нашу функцию hi добавим параметр(аргумент), в который будем записывать имя человека, а в функции, которая сейчас выводит нам слово Привет в консоль добавим это имя. В итоге получим такой код:

function hi(name) {
    return function() {
        console.log(`Привет, ${name}`);
    }
}

Теперь заставим все это работать:

const sayHi = hi('Вася');
sayHi(); // выведет в консоль: Привет, Вася

Стоит заметить, что имя мы передавали только в функцию hi, однако, та функция, которую возвращает функция hi так же имеет доступ к этому имени и спокойно может его использовать. На самом деле это и есть замыкание. Возвращаемая функция замыкает в себе значение переменной name.

Поправим немного код, для большего понимания:

const sayHiVasya = hi('Вася');
const sayHiPetya = hi('Петя');
sayHiVasya(); // выведет в консоль: Привет, Вася
sayHiPetya(); // выведет в консоль: Привет, Петя

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

Создание ссылок для соц. сетей

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

Давай сделаем с тобой некий генератор ссылок для социальных сетей.

function createSocLink(socialNetwork) {
    return function(nickname) {
        return `https://${socialNetwork}/${nickname}`;
    }
}

Итак, сначала разберем все в этом генераторе, а потом разберемся как им пользоваться.

В функцию createSocLink мы передаем параметр socialNetwork, который должен представлять из себя ссылку на какую-либо социальную сеть, т.е. должен иметь вид, к примеру:

vk.com
instagram.com
facebook.com

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

Итак, пробуем все это запустить.

Так как функция createSocLink вернет нам новую функцию, то запишем ее в константу:

const createVkLink = createSocLink('vk.com');

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

const createVkLink = createSocLink('vk.com');

console.log(createVkLink('durov'));
// в консоль выведется: https://vk.com/durov

Как видишь, мы создали ссылку на страницу создателя Вконтакте Павла Дурова.

Теперь давай создадим ссылки с помощью генератора на другие соц. сети и ты увидишь, в чем прелесть замыканий:

const createVkLink = createSocLink('vk.com');
const createInstagramLink = createSocLink('instagram.com');
const createFacebookLink = createSocLink('facebook.com');

Мы получили 3 новых функции:

createVkLink – создаем ссылки на страницы пользователей в Вконтакте;
createInstagramLink – создает ссылки на страницы пользователей в Instagram;
createFacebookLink – создает ссылки на страницы пользователей в Facebook.

Попробуем их в работе:

console.log(createVkLink('durov'));
console.log(createVkLink('admin'));
console.log(createVkLink('vasya'));
console.log('*****');
console.log(createInstagramLink('durov'));
console.log(createInstagramLink('admin'));
console.log(createInstagramLink('vasya'));
console.log('*****');
console.log(createFacebookLink('durov'));
console.log(createFacebookLink('admin'));
console.log(createFacebookLink('vasya'));

Получаем результат:

Ссылки прекрасно сгенерировались. Благодаря замыканию, мы получили список из 3ех генераторов ссылок:

const createVkLink = createSocLink('vk.com');
const createInstagramLink = createSocLink('instagram.com');
const createFacebookLink = createSocLink('facebook.com');

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

Домашнее задание

Создать функцию calc используя замыкания, которую можно использовать так:

const plus = calc(10);
plus(5); // должно вывести значение 15
plus(45); // должно вывести значение 55

this, call, apply, bind

2020-05-03T09:34:05.713Z

Сегодня хотелось бы рассказать о таких надуманно сложных вещах как call, bind, apply, ну и, соответственно, затронуть this. Все эти слова связаны одним словом – контекст. Но, обо всем по-порядку.

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

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

Статьи о функциях: Функции, Функции. Возврат значения

Ключевое слово this

Создадим обычную функцию и сразу же вызовем ее:

function hi() {
    console.log('Привет', this);
}

hi();

Функция выводит в консоль слово Привет и this. Если заглянуть в консоль, то увидим следующее:

Если со словом Привет все понятно, то вот что это такое вывелось на месте this? Почему вывелся какой-то объект Window?

Когда мы создаем глобальные объекты, то они автоматически начинают принадлежать глобальному объекту window – самому главному объекту в браузере.

На самом деле все методы, которые ты часто вызываешь, например: console.log(), alert, prompt и т.д. находятся внутри объекта window и являются его методами.

Это достаточно просто проверить. Просто попробуй вызвать эти методы так:

window.console.log('Привет');
window.alert('Привет');
window.prompt('Как тебя зовут?');

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

function hi() {
    console.log('Привет', this);
}

hi();

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

window.hi();

Из всего выше сказанного можно сделать вывод, что наша функция запускается из объекта window, т.е. контекст, в котором выполняется наша функция так же равен объекту window. А ключевое слово this как раз и содержит внутри себя контекст, в котором вызывается функция/метод.

А теперь создадим объект:

const man = {
   name: 'Вася',
   lastName: 'Пупкин',
   age: 30,
   sayHi: hi
};

Простой объект описывающий абстрактного мужчину. Обрати внимание на метод sayHi. В него мы передали ссылку на функцию, которую создали в самом начале.

Давай вызовем метода sayHi из нашего объекта:

man.sayHi();

А теперь посмотрим в консоль, что же теперь вывелось на месте this. Получаем следующий результат:

В этом случае, значение this (контекста) становится равным самому объекту. Почему так случилось? Все очень просто.

Первый раз мы вызывали функцию hi и значение this, внутри нее было равно объекту Window, потому что мы запускали функцию в контексте объекта Window.

А сейчас, мы создали свой объект, и запустили функцию hi из него. Получается, что место вызова функции изменилось с объекта Window на объект man. Следственно, изменилось и значение this с Window на man.

Теперь коротко: значение this равно тому объекту в контексте которого было вызвано.

С контекстом разобрались, давай разбираться с этими страшными методами: call, apply, bind.

Метод bind

Мы ранее создали объект man, а теперь еще создадим объект woman. Итого, получим:

const man = {
   name: 'Вася',
   lastName: 'Пупкин',
   age: 30,
   sayHi: hi
};

const woman = {
   name: 'Катя',
   lastName: 'Иванова',
   age: 25
};

Итак, мы имеем 2 объекта, один из которых описывает мужчину, а второй женщину.

Для примера, создадим еще один объект (логгер), которому добавим один метод:

const Logger = {
   info: function() {
       console.log('Имя: ', this.name);
       console.log('Фамилия: ', this.lastName);
       console.log('Возраст: ', this.age);
   }
};

Внутри объекта Logger мы создали метод info, который должен выводить информацию о наших объектах. Мы использовали ключевое слово this внутри этого метода:

console.log('Имя: ', this.name);
console.log('Фамилия: ', this.lastName);
console.log('Возраст: ', this.age);

Но что будет, если вызвать этот метод прямо сейчас?

Logger.info();

Результат:

Мы получили undefined во всех случаях и это более чем логично. Т.к. мы обращаемся к ключевому слову this внутри метода info, который принадлежит объекту Logger, то и контекст, т.е. само ключевое this имеет значение, которое равно объекту Logger. А внутри этого объекта у нас имеется только один метод info. Никаких свойств с именами name, lastName, age у нас нет.

Как сделать так, чтобы с помощью объекта Logger и его метода info вывести данные, например, об объекте man?

Как раз тут на помощь и приходит тот самый страшный метод bind:

const loggerMan = Logger.info.bind(man);

У каждой функции в JS существует метод bind, благодаря которому мы можем любой функции задать контекст, внутри которого она должна будет выполняться.

Метод bind возвращает новую функцию, к которой будет привязан тот контекст, который мы указали как аргумент метода bind. В нашем случае контекстом мы указали объект man. Так как bind возвращает новую функцию, то мы ее запишем в константу loggerMan.

Теперь вызовем полученную функцию:

loggerMan();

Результат:

Как видишь, bind успешно привязал в качестве контекста объект man и информация о нем успешно вывелась в консоль.

Теперь мы хотим получить информацию об объекте woman с помощью нашего логгера. Для этого делаем тоже самое:

const loggerWoman = Logger.info.bind(woman);

С помощью bind мы привязываем новый контекст для метода info со значением woman.

Вызовем:

loggerWoman();

Результат:

Вуаля, все так же прекрасно работает. И ведь совсем не сложно и не страшно не так ли?

И последнее, что хотелось бы тут сказать. В функцию инфо мы можем дополнительно передавать какие-либо параметры, если это нужно. Давай немного исправим метод info в объекте Logger. Пускай он будет принимать пол человека:

const Logger = {
   info: function(sex) {
       console.log('Имя: ', this.name);
       console.log('Фамилия: ', this.lastName);
       console.log('Возраст: ', this.age);
       console.log('Пол: ', sex);
   }
};

Все что мы сделали – это добавили в определение функции параметр sex и выводим его под всеми остальными данными. Остается вопрос, как нам туда это все передать, если нам еще и контекст нужно сменить. Все очень просто. У нас уже есть полученные функции для наших объектов:

const loggerMan = Logger.info.bind(man);
const loggerWoman = Logger.info.bind(woman);

Чтобы передать параметр sex, нам достаточно указать его аргументом наших функций при их вызове:

loggerMan('мужской');
loggerWoman('женский');

Смотрим на результат:

Все прекрасно отработало. Но это не единственный способ передачи параметров.

Есть еще один способ передачи параметров – указать их при вызове метода bind.

Получим следующее:

const loggerMan = Logger.info.bind(man, 'мужской');
const loggerWoman = Logger.info.bind(woman, 'женский');

loggerMan();
loggerWoman();

Результат:

Результат никак не поменялся и все прекрасно продолжает работать.

Первый аргумент в методе bind – это сам контекст, который нужно привязать к функции. А вот дальше, через запятую, можно передавать сколько угодно дополнительных параметров(аргументов), которые должны попасть в метод info. В нашем случае нам нужно было передать только один аргумент sex.

На этом с bind все. Не такой и страшный зверь, как мог бы показаться.

Метод call

Что же, продолжим убивать страх внутри тебя. Теперь на очереди метод call.

Ты не поверишь, но он делает то же самое, что и bind. С одной маленькой поправкой: если метод bind привязывает контекст и возвращает новую функцию с этим контекстом, то метод call привязывая контекст, сразу же вызывает указанную функцию, а не возвращает новую.

Продублирую наш код:

const Logger = {
   info: function(sex) {
       console.log('Имя: ', this.name);
       console.log('Фамилия: ', this.lastName);
       console.log('Возраст: ', this.age);
       console.log('Пол: ', sex);
   }
};

const man = {
   name: 'Вася',
   lastName: 'Пупкин',
   age: 30,
   sayHi: hi
};

const woman = {
   name: 'Катя',
   lastName: 'Иванова',
   age: 25
};

const loggerMan = Logger.info.bind(man, 'мужской');
const loggerWoman = Logger.info.bind(woman, 'женский');

loggerMan();
loggerWoman();

Итак, давай привяжем контекст с помощью call, а не bind и посмотрим в чем же разница.

Было:

const loggerMan = Logger.info.bind(man, 'мужской');
const loggerWoman = Logger.info.bind(woman, 'женский');

Стало:

Logger.info.call(man, 'мужской');
Logger.info.call(woman, 'женский');

Так как метод call после привязки контекста сразу же выполняет функцию (info), и наша функция ничего не возвращает (внутри нет ключевого слова return), то не имеет никакого смысла записывать результат данной функции, так как он всегда в нашем случае будет равен undefined, поэтому создание констант loggerMan и loggerWoman делать не нужно.

И вот так вот просто. call – ничуть не страшнее bind. Вся разница:

bind привязывает контекст и возвращает новую функцию и мы можем вызвать ее в любом месте;
call привязывает контекст и сразу же вызывает функцию

Собственно, больше о call и сказать нечего.

Метод apply

По всему повествованию статьи, ты мог заметить, что о методе bind было сказано очень много. О методе call – уже куда меньше, потому что это одно и тоже с одним исключением. Будешь смеяться, но метод apply – это тоже самое, что и call. И существует только одно отличие.

Если метод call (как, собственно, и bind) первым аргументом принимает контекст, а дальше через запятую принимает аргументы для функции (получается, что аргументов может быть разное количество), то метод apply принимает всего 2 аргумента:

контекст (так же как bind и call);
массив параметров.

Т.е. если в bind и call мы можем передавать параметры функции через запятую, то в apply мы должны передать их в массиве. И в этом вся разница. Давай перепишем код с call на apply.

Было:

Logger.info.call(man, 'мужской');
Logger.info.call(woman, 'женский');

Стало:

Logger.info.apply(man, ['мужской']);
Logger.info.apply(woman, ['женский']);

Вот и вся разница. В случае с call мы передали аргумент sex для функции info как обычную строку. А в случае с apply мы обязаны передавать все аргументы в массиве.

Вот и все. Надеюсь, ты поборол свой страх и понял, что все, что связано с контекстом и, конкретно, данными методами – совсем не страшно.

Объекты. Методы

2020-04-21T21:18:15.963Z

Продолжаем тему объектов и сегодня на повестке дня – методы.

Что такое метод объекта?

На самом деле метод – это обычная функция. Да, ничего сверхъестественного и страшного. Обычная, особо ничем не примечательная функция, которая просто напросто находится внутри объекта и как-то связана с самим этим объектом.

Добавление метода

В прошлой статье мы рассматривали свойства объекта и создали объект котика:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3
};

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

Чтобы он что-то научился делать нам нужно добавить в объект метод (функцию). Давай научим котика мяукать, для этого добавим в объект метод под названием mew:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3,
   mew: function() {
      console.log('мяу-мяу');
   }
};

Как видишь, функция в объект добавляется точно так же как и обычное свойство, за тем исключением, что значение этого свойства – функция.

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

mew() {
  console.log('мяу-мяу');
}

Эта запись считается краткой и используется достаточно часто.

Вызов метода

Теперь у получившегося объекта мы можем вызвать данный метод как обычную функцию:

catVasya.mew();
// выведет в консоль: 'мяу-мяу'

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

Давай представим, что мы попали в сказочную страну, где животные разговаривают. Следственно, наш кот, может сказать, как его зовут. Поэтому, добавим ему такую возможность добавив в наш объект метод sayName.

Внутри объекта лежит свойство name, следственно, из метода sayName нам как-то нужно "достучаться" до этого свойства. Делается это просто, с помощью ключевого свойства this:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3,
   mew: function() {
      console.log('мяу-мяу');
   },
   sayName() {
      console.log('Привет, я кот ' + this.name);
   }
};

catVasya.sayName();
// выведет в консоль: 'Привет, я кот Вася'

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

Внутри этого метода мы вызываем this.name, что фактически означает: "возьми свойство name из текущего объекта". С помощью this мы можем обращаться к любым свойствам и к любым методам текущего объекта.

Именование методов

Хотелось бы заострить внимание на одном важном аспекте – именование методов.

Если свойства мы всегда называем именем существительным, то методы мы всегда называем используя глаголы. В нашем примере оба добавленных метода имеют глагол в своем названии: mew – мяукать, sayName – сказать имя.

Всегда называй методы с использованием глаголов, таковы правила и это поможет различать методы от свойств.

Домашнее задание

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

Эти методы определить разными способами, о которых написано в статье.

Объекты. Свойства.

2020-04-18T07:14:18.474Z

Всем привет, сегодня пойдет речь об объектах.

Что такое объекты, зачем они нужны, как их создавать и изменять – обо всем этом в этой статье.

Ранее в статьях мы рассматривали примитивные типы (исключением являются массивы). Эти типы важны и нужны, но так как язык JavaScript является объектно-ориентированным(ООП), и в нем часто используются ООП-подходы, то не знать о объектах и не уметь ими пользоваться – огромный пробел в знаниях.

Объект – это сложная сущность, которая может хранить в себе целый набор различных данных состоящих из примитивных значений, массивов, функций.

Как создать объект?

Есть несколько способов создать переменную, в которой будет храниться объект. Если нам нужно создать пустой(чистый) объект, то есть 2 варианта:

const cat = new Object();
const cat = {};

Синтаксис 1-ого варианта называется конструктором объекта, а 2-ого – литералом объекта(или литеральной нотацией).

Каким вариантом пользоваться? Чаще всего в реальных проектах ты сможешь увидеть 2-ой вариант, т.е. const cat = {};

Какие же преимущества есть у объекта? Представим, что мы хотим в коде записать информацию о твоем коте "Ваське". К примеру нам нужна следующая информация: кличка, возраст, цвет, вес.

Как бы ты сейчас стал записывать в коде эти данные? Скорее всего, примерно так:

let catName = 'Васька';
let catAge = 2;
let catColor = 'рыжий';
let catWeight = 3;

Для того, чтобы записать информацию о котике, мы создали целых 4 переменных. А представь, если тебе нужно будет заполнить данные о каком-то сложном объекте, к примеру о автомобиле, который имеет огромную гору различных характеристик. Создавать 100500 переменных – это очень плохо, как минимум потому, что ты запутаешься в этих переменных очень быстро.

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

А теперь давай представим, что у тебя есть возможность вместо 150 переменных использовать только 3. Как тебе такой вариант? Я думаю, что куда лучше и проще.

Вернемся к Васе. Создаем объект для нашего котика:

const catVasya = {
   name: 'Вася',
   age: 2,
   color: 'рыжий',
   weight: 3
};

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

catVasya.color;

Нужно написать название объекта и через точку указать нужное поле.

Свойства объекта

На самом деле то, что выше я называл "полями" в объекте называется свойствами. В свойстве могут хранится любые примитивные данные(строки, числа, булевские значения) и другие объекты(массивы в JS – тоже имеют тип Object) .

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

{
  имяСвойства: 'значение свойства',
  имяСвойства2: 5,
  имяСвойства3: true,
  имяСвойства4: ['а', 'б', 'в'],
  имяСвойства5: { 
     //здесь указать свойства другого объекта
  }
}

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

Свойства в обязательном порядке разделяются друг от друга запятой.

Хочу обратить внимание, что имя свойства внутри объекта можно определять как в кавычках, так и без них. Посмотри эти 2 скриншота:

На скриншотах показан один и тот же объект, но с разным подходом в определении имени свойств. Какой правильный?

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

Почему? Все просто. Кавычки стоит использовать только тогда, когда ты хочешь задать "необычное" название для свойства. Например:

Я добавил котику свойство с именем other prop , при этом я отошел от хороших практик JS и не использовал стиль camelCase, а просто разделил эти слова пробелом. Самое интересное, что не будет никакой ошибки, если такое имя свойства указать в кавычках. Но, если их убрать, то, конечно же, все сломается и объект будет определен некорректно.

При этом, если сейчас обратиться к новому свойству через символ точки:

catVasya.other prop;

Мы получим ошибку по той простой причине, что JS просто не поймет, что ты хотел обратиться к этому свойству. Потому что для JS это будет выглядеть как то, что ты пытаешься обратиться к свойству объекта catVasya с именем other, затем ставишь пробел и пытаешься обратится к переменной prop, которая не определена.

Поэтому, для того, чтобы обратиться к такому свойству нужно использовать следующий синтаксис:

catVasya['other prop'];

Данный случай разобран только для примера! Никогда, слышишь!? Никогда не использую в названии свойств объекта символ пробела! Это очень-очень плохо!

Вычисляемые свойства

В объекте можно определить свойство, имя которого заранее неизвестно. Звучит страшно непонятно, да? Но сейчас поясню.

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

Давай будем просить пользователя вводить имя свойства и его значение:

let propName = prompt('Введи название свойства', 'tailLength');
let propValue = prompt('Введи значение свойства', 20);

Мы завели переменные с именами propName и propValue. Оператор prompt спросит у пользователя как назвать свойство и какое значение в него положить.

По умолчанию(если пользователь ничего не укажет), мы запишем свойств tailLength, что означает "длина хвоста" и передадим в него значение 20.

Давай попробуем добавить данное свойство в объект. Для этого нужно при определении имени свойства обернуть переменную propName в квадратные скобки и тогда значение этой переменной будет указано как имя свойства объекта, а в само значение свойства нам нужно просто записать переменную propValue :

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

Именование свойств объекта

Важным аспектом является именование свойств объекта. Есть правило, которое говорит о том, что имена свойств должны быть указаны как имена существительные. В нашем примере это: name – имя, age – возраст, color – цвет, weight – вес.

Здесь очень просто провести аналогию. Свойство любого реального объекта – это какое-либо описание этого объекта: цвет, возраст, рост, запах, вкус и т.д. Все это и всегда является именами существительными.

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

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

Но, о функция внутри объекта – в следующей статье.

Домашнее задание

Создать объект "игрушка"
Добавить этому объекту свойства "имя", "материал"
Добавить в объект вычисляемое свойство, в котором будет содержаться цена на игрушку.

Планирование вызова функции: setInterval

2020-04-07T16:43:21.846Z

Рассмотрим еще один метод для планирования вызова функции – setInterval.

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

Итак, как и в случае с setTimeout(лучше прочитай статью о setTimeout, будет намного понятнее), setInterval принимает первым аргументом либо ссылку на функцию, либо функцию, а вторым аргументом передается время в миллисекундах, через которое переодически будет выполняться переданная функция:

function hello() {
   console.log('Привет');
}

setInterval(hello, 3000);

//каждые 3 секунды в консоль будет выводиться сообщение:
'Привет'

Данный метод лучше всего останавливать как только потребность в нем пропадает.

setInterval, как и setTimeout, возвращает идентификатор, по-которому в дальнейшем можно остановить выполнение setInterval:

function hello() {
   console.log('Привет');
}

const intervalId = setInterval(hello, 3000);

// команда ниже остановит выполнение setInterval
clearInterval(intervalId);

Давай попробуем выполнить следующую задачу: с помощью setInterval выведем в консоль слово "Привет" 3 раза. Каждое слово должно появляться через секунду после предыдущего. Код:

let counter = 0;

function hello() {
   console.log('Привет');

   counter += 1;
   
   if (counter === 3) {
      clearInterval(intervalId);
   }
}

const intervalId = setInterval(hello, 1000);

Итак, мы определили функцию hello, которую затем передали в качестве первого аргумента в метод setInterval, а вторым аргументом указали время 1000 мс (1 секунда) через которое постоянно нужно запускать функцию hello.

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

В самой функции hello:

мы сначала выводим в консоль слово "Привет";
затем увеличиваем значение счетчика;
затем строгим сравнением проверяем не равен ли счетчик значению 3. Если условие выполняется, значит слово "Привет" было выведено 3 раза и нам нужно остановить выполнение setInterval, для этого нам поможет метод clearInterval.

Результат:

Перед словом "Привет" стоит цифра 3, а это значит, что данная надпись трижды выводилась в консоль (так браузер сворачивает одинаковые значения выводимые в консоль, чтобы уменьшить количество "мусора")

Собственно и все. Задача выполнена. Обязательно повтори ее на практике!

Планирование вызова функции: setTimeout

2020-04-02T08:01:41.087Z

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

В этом вопросе нам поможет метод объекта window – setTimeout(). Этот метод запускает через указанное в аргументах время, указанную в аргументах функцию. Пример использования:

// 1-ый вариант использования
window.setTimeout(func, delay);

// 2-ой вариант использования
setTimeout(func, delay);

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

В качестве аргументов мы передаем func и delay, где func – это функция, либо ссылка на функцию, которую должен запустить setTimeout после того, как пройдет время delay (указывается в миллисекундах). Кстати, такие функции, которые передаются в другие функции в качестве аргументов – называются callback-функциями или функциями обратного вызова.

Теперь вернемся к нашей задаче поставленной в начале статьи и поприветствуем пользователя:

function hello() {
   alert('Привет!');
}

setTimeout(hello, 5000);

Функция hello, в данном примере, является callback-функцией, которую нужно запустить после того как пройдет 5000 миллисекунд (5 секунд). В данном примере, в качестве первого аргумента, мы передали ссылку на функцию hello. Ссылка на функцию – это ее имя, а не вызов. Т.е.:

hello; // - это ссылка на функцию
hello(); // - это вызов функции

В качестве аргумента мы должны передавать либо ссылку на функцию, либо описание функции(смотри ниже), но никогда не должны передавать вызов функции!

Есть и другие варианты передачи callback-функции, которые делают ровно тоже самое.

В качестве первого аргумента, мы можем передать анонимную(безымянную) функцию:

setTimeout(function() { alert('Привет!'); }, 5000);

Так же можем передать анонимную стрелочную функцию:

setTimeout(() => alert('Привет!'), 5000);

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

Продолжим.

Самое интересное, что мы можем передать строку, вместо функции и она выполнится:

setTimeout(`alert('Привет!')`, 5000);

Все варианты выполняют одну и ту же задачу, но, последний вариант с передачей строки:

setTimeout(`alert('Привет!')`, 5000);

использовать не рекомендуется, так как это и стилистически не красиво и в плане безопасности – это плохой вариант. Стоит запомнить, что такой вариант может встретиться в чужом коде, но в своем такое писать не стоит.

Последнее что хотелось бы отметить, так это то, что метод setTimeout нужно удалять, чтобы не произошло утечки памяти. Делается это достаточно просто.

setTimeout на самом деле еще и возвращает данные, а именно, он возвращает свой идентификатор. Стоит понимать, что у каждого setTimeout этот идентификатор свой, индивидуальный.

Чтобы не произошло утечки памяти, нужно удалять setTimeout после выполнения. Сделать этом можно с помощью clearTimeout(id), где в качестве аргумента нужно передать идентификатор вашего setTimeout.

Для начала давай сохраним идентификатор нашего setTimeout в константе timerId:

function hello() {
   alert('Привет');
}

const timerId = setTimeout(hello, 5000);

Удалить setTimeout из памяти нам нужно после выполнения приветствия, поэтому добавим clearInterval в функцию hello, после вывода приветствия:

function hello() {
   alert('Привет');
   clearInterval(timerId);
}

const timerId = setTimeout(hello, 5000);

Все, теперь после выполнения приветствия setTimeout будет удален из памяти.

Еще один небольшой пример:

function hello() {
   alert('Привет');
}

const timerId = setTimeout(hello, 5000);
clearInterval(timerId);

В данном случае setTimeout не будет выполнен совсем, потому что мы вызвали cleatInterval сразу же после объявления setTimeout, эти действием мы как бы отменили(удалили) setTimeout.

Методы массивов: flat, fill

2020-02-17T14:06:09.394Z

Метод flat

Данный метод появился недавно, но он очень крут. Он создает новый массив из всех подмассивов содержащихся в нем уменьшая мерность на указанное значение(по умолчанию 1). Наверное звучит очень сложно и запутанно и, скорее всего, прямо сейчас ты мало где сможешь применить данный метод на практике. Но пример все-равно давай посмотрим:

const arr = [1, 2, 3, [4, 5], [[7,8]]];
const transformArr = arr.flat();

transformArr; //[1, 2, 3, 4, 5, [7, 8]]

Как видишь, массив arr был преобразован в новый. Как ты можешь заметить, все подмассивы, которые были внутри массива arr как бы "распаковались" на 1 уровень вложенности. Если третьим элементом в массиве arr был массив [4, 5], то сейчас он распаковался и перестал существовать как массив.

В этом же массиве arr 4-ым элементом был массив с массивом (т.е. это 2 уровня вложенности), но теперь он выглядит как простой массив [7, 8], т.е. начальный массив с массивом распаковался в обычный массив (один уровень вложенности исчез).

Этот уровень "сглаживания" вложенности, который, повторюсь, по умолчанию равен 1 – может быть задан. Для этого в метод flat нужно передать число, которое и будет являться этим уровнем "сглаживания".

Так как мы не всегда можем знать уровень вложенности подмассивов, мы можем указать в качестве параметра значение бесконечности – Infinity. Это позволит нам убрать абсолютно все вложенности во всех подмассивах. Пример:

const arr = [1, 2, 3, [4, 5], [[7,8]]];
const transformArr = arr.flat(Infinity);

transformArr; //[1, 2, 3, 4, 5, 7, 8]

Какие бы глубины вложенности не были теперь массивы внутри массива arr, они всегда будут распакованы в один одноуровневый массив.

Метод fill

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

const arr = [1, 2, 3, 4];
arr.fill(0, 2, 4)

arr; // [1, 2, 0, 0]

Рассмотрим вызов метода:

arr.fill(0, 2, 4)

Первый аргумент – значение, которым заполнять/заменять элементы массива;

Второй аргумент – индекс после которого начинать вставлять указанное значение;

Третий аргумент – индекс до которого вставлять указанное значение.

Получаем:

arr; // [1, 2, 0, 0]

Что полностью соответствует ожиданиям.

Методы массивов: Array.isArray, some, every

2020-02-17T14:01:50.528Z

Метод Array.isArray

Порой требуется понять, являются ли данные, которые, например, пришли с сервера – массивом. Как мы можем это узнать? Существует оператор typeof, но в JS нет отдельного типа для массивов. JS не различает массив от объекта: для него и то и другое – объекты. Но задачу как-то надо решать, именно для этого и существует статический метод isArray в объекте Array.

const obj = {name: 'Толян'};
const arr = [1, 2, 3];

Array.isArray(arr); //true
Array.isArray(obj); //false

Метод some

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

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

В голову может прийти множество вариантов решений. Но метод some подойдет тут намного лучше:

const numbers = [20, 45, 12, -4, 5, 7];

const has = numbers.some(n => (n/2) >= 10);

has; // true

В данном случае под наше условие подойдет даже 2 числа 20 и 45, поэтому метод выдаст нам true.

Метод every

Метод every похож на метод some. Но, по названию должно быть понятно, что метод every вернет true только в том случае, если все элементы массива подходят под заданное условие.

Давай проверим каждый элемент массива на условие: каждый элемент делится 2 и полученное значение больше или равно 10.

const numbers = [20, 30, 40];
const otherNumbers = [20, 10, 40];

const hasInNumbers = numbers.every(n => (n/2) >= 10);
const hasInOtherNumbers = otherNumbers.every(n => (n/2) >= 10);

hasInNumbers; // true
hasInOtherNumbers; //false

Все элементы массива numbers подходят под условие – поэтому метод every выдает нам значение true.

А вот в массиве otherNumbers под условие не подходит значение 10, поэтому every возвратит – false.