#Задачка9 хороший повод поговорить про объекты.
Объекты в js — это такие ассоциативные пары ключей и значений.
Важно помнить, что в общем(!) случае ключом может быть практически любая строка. В этом же общем случае мы обращаемся к свойствам через квадратные скобки, например, obj['практически любая строка'].
То, что мы привыкли обращаться к свойствам через точку, — это частный случай, синтаксический сахар для случаев, когда ключом является строка без взяких специальных символов и пробелов.

Зная все это, а также то, что для приведения к строке используется метод toString и что для объектов он возвращает [object Object], указать правильный вариант довольно легко.
Первым с этим справился Дима (не тот, что в прошлые разы), а хорошо сформулировал Андрей:
Выведет в консоль 42, потому что в пустом объекте a создается свойство [object Object] из-за того, что в качестве ключа мы указываем объект и этому свойству присваивается последнее значение 42.

Давид подкинул отличную идею для задачи:

#Задачка10
А давайте придумаем свою реализацию функции isNaN, вот будто изначально ее нет.

К #Задачка10 почти все прислали примерно такой вариант:

function isNaN(n) {
  return n !== n;
}

ведь NaN это единственное значение, которое не равно самому себе.
И это правильный ответ, но на другую задачку) Описанным образом работает Number.isNaN, который появился только в ES6, а оригинальный isNaN сначала приводит аргумент к числу, а уже потом проверяет, что он неравен самому себе.
Правильный ответ что-то вроде:

function isNaN(n) {
  n = +n; // ну или как вы там любите приводить что-то к числу

  return n !== n;
}

Очень точно резюмировал Игорь:
"поэтому isNaN({}) или isNaN('строка') выдаст true, но новый Number.isNaN сработает только на явно переданный NaN."

P.S. И пожалуйста, не забывайте, что NaN — это всего лишь специальное значение типа число. А то каждый второй, кто правильно перечисляет типы в js, на запутывающий вопрос: 'а разве NaN не отдельный тип?' — начинает сомневаться и добавляет что-то типа: "А, ну да, забыл, NaN также является отдельным типом", а это не так.

#Задачка11

Катя прислала вопрос:

var test = 42;

function a() {
    console.log(test);
}

function b() {
    var test = 13;
    a();
}

b();

Что выведется в консоль? А почему?

P.S. Очень жду ваших ответов на @djamah, только убедитесь, что у вас есть хороший ответ и на второй вопрос)

Раньше всех верный и достаточно полный ответ к #Задачка11 написал Давид, ну а самый подробный прислала автор вопроса Катя, спасибо ей и почитайте, как нужно подробно разбирать даже простые задачки:

В консоль выведется 42.
Путаница может возникнуть в том, что функция a вызывается внутри функции b, в которой тоже объявлена переменная test со значением 13.

Немного теории:
У функции есть скрытое свойство [[Scope]], которое ссылается на лексическое окружение, в котором она была создана. Оно никогда не меняется. При создании функции внутри неё создаётся объект Lexical Environment, куда записываются все переменные, аргументы этой функции, а также ссылка со значением из [[Scope]].
И если var не найдена внутри этого объекта, то интерпретатор будет искать её по ссылке [[Scope]].

В примере:
Создаём глобальную переменную test, ей присваивается значение 42.
Объявляем функцию a, её свойство [[Scope]] ссылается на глобальный объект window.
Объявляем функцию b, внутри которой создаём переменную test со значением 13, и вызываем функцию a.
При вызове функции b внутри нее создается свой Lexical Environment, в которую записывается test = 13. Вызываем функцию a: интерпретатор ищет внутри функции a (то есть в её Lexical Environment) переменную test, не находит её и идёт по ссылке [[Scope]]. Путь приводит его в глобальную область видимости, где он и находит переменную test со значением 42, что и выводит в консоль.

Сегодня будет #Задачка12 на ваши любимые прототипы:

function X() {}
function Y() {}  
 
Y.prototype = Object.create(X.prototype);
var z = new Y();

console.log(z.constructor === Y);

Что выведется в консоль? А почему?

Ответ на нее будет нескоро, нужно всю бездну затронутых тем хорошенько сжать и компактно описать, так что у вас есть время хорошенько подумать и прислать свой обстоятельный ответ на @djamah

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

#Задачка13 будет скорее философским вопросом:

Вот все мы знаем, что навешивать обработчик события через html-атрибут — это старомодно и вообще плохо, если мы видим код вроде такого:

<button onclick="alert('oops')">
    Click me!
</button>

Мы тут же скривимся и скажем что-то типа: "Что за реликтовая писанина из лихих 90х?.."
Но если мы видим:

<button onClick={() => alert('Wow!')}>
    Click me!
</button>

То сразу думаем: Это же реакт, клево.
Или:

<button (click)="alert('Wow!')">
    Click me!
</button>

Все ясно, ангулар — модно, стильно, молодежно.

Мой вопрос собственно в чем: А почему первый вариант это плохо, а остальные это хорошо?
Может ну их, эти фреймворки?
Представьте, что у вас это спросили на собеседовании и попробуйте обстоятельно порассуждать на эту тему.
Лучший из присланных ответов на @djamah я опубликую в среду, а свой вариант озвучу на видео, в котором буду рассказывать про события в js, его вчера как раз записывал, а когда оно выйдет пока не знаю)

Лучший, на мой взгляд, ответ к #Задачка13 прислал Евгений, спасибо ему большое:

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

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

Backbone, Angular, React и т.п. рождаются тогда, когда появляется боль. Когда добавление микрофичи требует десятки часов. Когда накопившийся технический долг вот-вот расплющит тебя, команду и проект. Когда ты пытаешься понять тот момент, где ты свернул не туда.

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

React/angular/vue-стиль, напротив, помогает справляться со сложностью. Все необходимые обработчики инкапсулированы внутри компонентов. Из компонентов как из лего можно собирать конструкции любой сложности, и разработка из ада, выжигающего твою душу, превращается в приятное времяпровождение.

#Задачка14
А осилите старую добрую...

(function(){
    return [2,2,2,2].map(parseInt)
})()

Что выведется в консоль? Почему?

Самый полный разбор #Задачка14 прислал Игорь, спасибо ему!
Публикую с минимальными редакторскими правками:

===
Мораль такова, что вызывать функции нужно с _явным_ указанием параметров, а не абы как.

При вызове в функцию Array.map передаются следующие параметры:
currentValue, index, array
пруф — https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/map

А у глобального метода parseInt два параметра:
string, radix - причем radix является обязательным параметром, если его не указывать возможны непредсказуемые результаты
пруф — https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/parseInt

В данном примере происходит вызов метода parseInt с аргументами из функции Array.map:
parseInt(currentValue, index), где index: 0, 1, 2, 3

В итоге:

radix = 0 - поведение по умолчанию, результат 2 в десятичной системе  
radix = 1 - допускается значение radix от 2 до 36, NaN
radix = 2 - для двоичной системы допускаются символы 0, 1 и NaN
radix = 3 - результат 2, но в троичной системе исчисления

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

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

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

https://youtu.be/ncaWoyLINoI?t=26m25s

Народ, а кто что читает в телеграме про фронтенд?
Напишите мне в личку на @djamah, ну кроме @forwebdev только, его то и так ясно, что все читают)

#Задачка15 — простите, многобукв, но весело же)

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

Сделать квадрат, который по клику меняет цвет (серый -> синий -> зеленый -> желтый).

Все по идее просто и понятно, а присылают вам такой (работающий!) код:

<style>
  .sq {
    width: 100px;
    height: 100px;
    margin: 15px;
    background-color: gray;
  }
  .blue {
    background-color: blue;
  }
  .yellow {
    background-color: yellow;      
  }
  .green {
    background-color: green;      
  }
</style>

<div class="sq"></div>

<script>
  var $sq = document.querySelector('.sq');
  
  $sq.addEventListener('click', function() {
    this.classList.toggle('blue');
    this.addEventListener('click', function() {
      this.classList.toggle('yellow');
      this.addEventListener('click', function() {
        this.classList.toggle('green');
      });
    });        
  });
</script>

Со стилями и разметкой вроде бы все ок (никакого БЭМа в условии задачи не было), но вот с js есть проблемка...

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

p.s. На следующей неделе я опубликую разбор от автора кода)

На собеседованиях иногда просят назвать способы отправки запроса на сервер. Помимо очевидных fetch/XMLHttpRequest и прочих джаваскриптовых штук есть более экзотические способы вроде <img src="...">.

Вчера узнал о ещё более экзотическом и извращённом способе отправки запроса на сервер с помощью CSS:

body::after {
  content: url('...');
}

Этот способ может использоваться для аналитики и трекинга пользователей, у которых отключен JS. Можно отследить клики по ссылкам, ввод текста в инпуты, клики по чекбоксам, длительность ховера на каком-либо элементе; также можно приблизительно определить браузер и операционную систему пользователя. Подробности — https://github.com/jbtronics/CrookedStyleSheets

Защититься от этого можно только отключив CSS. Параноикам пора переходить на текстовые браузеры :–)

Кстати, вот канал (@andrew_r_notes) с которого я перепостил прошлое сообщение очень клевый блог разработчика, в котором есть как крутые истории из разработческой жизни так и небольшие разборы разных аспектов фронтендерских технологий.
Ведет его Андрей Романов, автор того самого @forwebdev на котором много клевых ссылок всегда

Спасибо всем кто присылал ответы на #Задачка15, особенно Игорю
А вообще, код который был в задаче прислала мне когда-то Катя как ответ на домашнее задание, она же и сделала разбор своих былых ошибок.
Текста много, потому гист — https://gist.github.com/katfastovets/95c873d06c45a9756cae3f8ab1eebc55

Сегодня наконец вышло видео, в котором я рассказываю о DOM-событиях.

Само собой, это лучше видео по теме)

Сняли его мы полтора месяца назад, а потом я долго тупил)
В самом видео я много гакаю и эээкаю, все как вы любите.

https://youtu.be/Sczl4lT7huk

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

P. S. В конце видео мой ответ на #Задачка13

* в видео есть одна несостыковка, кто заметил — молодец

#Задачка16
Костя прислал хорошую задачку. Она перекликается с одной из прошлых, но если вы не можете ее решить, не заглядывая в консоль, что-то вы не дочитали)

function Person (name) {
  if (name) { 
    this.options.name = name;
  }
};

Person.prototype.options = {
  name: 'Default name'
};

var foo = new Person('foo');
var bar = new Person('bar');

console.log(foo.options.name);
console.log(bar.options.name);

Что выведется в консоль? Почему? Как это исправить?

Ответы присылайте мне в личку — @djamah
Свои задачки присылайте туда же.

Есть такая байка из ранней истории Яндекса:
Какая-то светлая голова предложила заблокировать в рабочей сети некоторые сайты, соцсетей тогда не было. Наверное, хотели забанить какой-нибудь пикабу или что там было в конце девяностых.
На это один из топов (возможно, главный сисадмин) сказал: "Если кто-то из моих сотрудников не сможет обойти наш бан, мне нужно будет их уволить за техническую некомпетентность."
Если кому-то теперь будет неудобно читать этот канал... ну вы поняли.

Сегодня вышло видео, в котором я рассказываю о this и прототипах.

Это, как всегда, лучшее видео по теме)

В самом видео я много гакаю и эээкаю, все как обычно)

https://www.youtube.com/watch?v=0vs6WkNyzec

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

* в видео есть одна ошибка, но ее заметили в комментах на ютубе раньше, чем я успел написать в канал)

Ну и открываем стол заказов, пишите мне в личку на @djamah, о чем снять следующее видео. Автора лучшего вопроса ждет слава и почет)

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

С другой стороны, сейчас же лето, ну какой там джаваскрипт) Смотрите лучше видео о том, как вокруг меня скопилось критическое количество людей, которые неправильно слушают подкасты, а подкасты надо слушать. Слушать правильно, ну или хотя бы просто слушать)

Лайк, шер, репост)
https://youtu.be/e0Wyor9ilVg

И еще, хотел спросить, а вам вообще интересны ссылки на видео, что я публикую?