Если есть кто-то трезвый, вот вам вместо поздравления)

#Задачка5
Есть два фрагмента кода:
1

function a () {
    return console.log (a)
    var a = 5;
};
a();

2

function a () {
    return console.log (a)
    let a = 5;
};
a();

Что выведется в этих двух случаях?

p.s. С новым годом!

Ответов на #Задачка5 пришло рекордное количество, вот не спалось же вам)

Теперь к сути. Первое, что хотелось бы отметить, это то, что писать return console.log(...); довольно бессмысленно.
Как, кстати, и писать return alert(...). Дело в том, что обе эти функции всегда возвращают undefined.

По поводу самой задачки передаем слово Диме:
В первом варианте функции законсольложится undefined, так как объявление (но не присвоение значения) переменной а поднимется вверх своей области видимости (т.н. hoisting).
Во втором варианте получим ошибку: a is not defined..., так как при объявлении переменной при помощи let hoisting'а не происходит.

Кстати, что во втором случае выбросит ошибку, внимательные читатели могли знать не только вбив это в консоль, но и просто внимательно прочитав разбор к #Задачка2

Пора начинать разговаривать про прототипы)
Тема важная, но начнем мы с абсолютно ламерского вопроса (#Задачка6)

var person = {
  name: 'Yura',
  born: 1990
}

person.__proto__ = {
  age: function() {
    return 2018 - this.born;
  }
}

person.age = function() {
  return 2018 - this.born + ' лет';
}

console.log( person.age() );

Что выведется в консоль?

Ответы можно не присылать, но если у вас возникли сложности, то йоу, пора учить js)

Ответ к #Задачка6 хорошо сформулировал Василий:
Вернется "28 лет", так как у person есть [собственный] метод age, в прототип никто даже не полезет)

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

#Задачка7
Сегодня будет задачка похардкорнее, хоть и не на прототипы)
Ее вариацию когда-то дали моему знакомому на собеседовании в Яндекс. Серега, привет :)

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

function f() {
  ...
}

console.log( f()()() === 3 ); // true
console.log( f()()() === 6 ); // true
console.log( f()()() === 9 ); // true

Дописывать можно не только внутри функции, но и вокруг.

По присылаемым ответам вижу, что не очень понятно условие, ок, уточняю

Дополнение к #Задачка7
Решение должно быть в общем виде и учитывать окружающую реальность)
То есть код должен быть таким, чтобы это сработало и так:

console.log( f()() === 2 ); // true
console.log( f()() === 4 ); // true
console.log( f()() === 6 ); // true

и так:

console.log( f() === 1 ); // true
console.log( f()() === 3 ); // true
console.log( f()()() === 6 ); // true

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

#Задачка8

var obj = {
    a: 5,
    b: {
        c: 10
    }
};

obj.__proto__ = {
    a: 10,
    b: {
        c: 20
    }
};

delete obj.a;
console.log(obj.a);

delete obj.a;
console.log(obj.a);

delete obj.b;
console.log(obj.b.c);

delete obj.b.c;
console.log(obj.b.c);

Что выведет каждый из консоль логов? Почему?

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

Ах да, совсем забыл, ответы и свои вопросы присылайте мне на @djamah
И помните, для этого канала нет плохих вопросов, а есть плохие разборы (хотя, плохих разборов тоже нет).
Пишите!)

#Задачка7 висела без разбора дольше остальных, но и ответов на нее пришло больше всего.
Многие из них были правильными, а некоторые даже пытались соответствовать условию))

Первым правильный ответ прислал Евгений, а заметил ошибку в условии — Дима, но обо всем по порядку.

Основная проблема #Задачка7 в том, что функция должна быть одновременно и функцией, ведь в любой момент можно приписать пару скобок, и числом.
Вернуть из функции саму себя и посчитать количество таких вызовов — дело нехитрое:

var count = 0;
function f() {
  count++;

  return f;
}

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

var count = 0;
function f() {
  count++;

  return f;
}

f.valueOf = function() {
  return count;
}

Код вроде такого является правильным решением задачи.
Некоторые из вас воскликнут: НО ТАМ ЖЕ БЫЛО ===!!1, а при строгом сравнении это работать не будет!
Ну что вам сказать? Да, в консоль логах должно было быть двойное равно, а я лоханулся. Но вы это, не стесняйтесь уточнять)

p.s. Использовать toString вместо valueOf тоже ок.

Пока я пишу ответ к прошлой задаче, Михаил прислал кое-что из классики:

#Задачка9

const a = {};
const b = {key: 'b'};
const c = {key: 'c'};

a[b] = 12;
a[c] = 42;

console.log(a[b]);

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

Всем привет, а я про вас не забыл, просто у нас тут в Африке как-то хуже с интернетом, чем у вас в Европах)

Долгожданный ответ к #Задачка8
Ну первое, что нельзя не прокомментировать - это задание прототипа через свойство __proto__, в 2k18 это не очень правильно. Ну, это никогда не было правильно, просто раньше это еще и не работало, а теперь работает, но есть более нормальные способы задать прототип.
Впрочем, очевидно, что к заданию это не относится. И мы были бы не мы, если бы не поумничали, и снисходительно не заметили, что это, конечно, на суть задания не влияет, но в пул реквесте реального проекта мимо проходить нельзя.

Теперь, что там у нас дальше? А дальше происходит удаление свойств из объекта и важно не забыть, как это там работает с прототипами.
Работает очень просто, как и всегда с прототипами нужно помнить: на запись — только собственные свойства, а на чтение — можно и из родителя.
Удаление свойства — это считается как запись.

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

delete obj.a;
console.log(obj.a);

Здесь удаляется собственное свойство a: 5, поэтому в консоль выведется значение из прототипа — 10

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

Со строчками

delete obj.b;
console.log(obj.b.c);

тоже все ясно, удаляется ссылка на объект {c: 10} и при обращении obj.b.c — идем в прототип и оттуда считываем 20.

Ну и самое интересное в этой задачке — последняя пара строк:

delete obj.b.c;
console.log(obj.b.c);

В консоль выведется undefined, и получается, что таки можно залезть в прототип и что-то там поменять.
Этот эффект объясняется очень просто: в обращении obj.b.c та часть, которая обращается к прототипу obj.b делает это на чтение, и мы получаем прямую ссылку на объект и уже из него удаляем собственное свойство с.
Когда я разбирал эту задачку в докладе, я написал эквивалентный код:

var temp = obj.b;
delete temp.c;
console.log(obj.b.c);

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

#Задачка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)
})()

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