Стрелочные функции. Фундаментальный JavaScript

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

00:57 Базовый пример, es5 синтаксис
02:11 Базовый пример, стрелочная функция
03:06 Сокращенная запись
04:40 Параметры по умолчанию es6
06:04 Пример с одним параметром
07:45 Пример без параметров
08:40 Передача функции как параметра
11:25 Нюанс использования контекста

#стрелочныеФункции #js #es6
__
Мои курсы по вебу с купонами:

[sergeidubrovin]

Это редкое везенье встретить на просторах инета такого грамотного специалиста, который так чётко всё объясняет. Прекрасная речь, глубочайшее знание материала, правильный английский. Не зазнавайтесь только:)
От чистого сердца, спасибо вам большое, если бы не ваши уроки по React, не сдать бы вовремя проект:) Спасибо и удачи

[DmitriyDev]

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

[MarshallBanananana]

Последние три минуты видео особенно познавательны - спасибо!

[tanay]

Олчитно объясняете. Ясно, чётко, коротко, понятно, без лишнего, но детально.

[aphle]

Михаил, огромное спасибо за труд. Очень доступно продаёте информацию. Люблю вас!

[VVFAlojjuAyQW]

Михаил, привет. Спасибо за курс по Реакту на Юдеми и все видео на Ютубе. Очень полезно

[BekzatKorganbek-eq]

Спасибо за уроки, Михаил! Желаю успехов и процветания каналу.👍

[vladimir]

Отличный курс! Спасибо Вам за старания!

[bugaga]

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

[DrFortran]

Спасибо, что создаешь контент такого рода)) респект и вечная слава тебе!))

[АнатолийГорбов-оь]

Согласен! Очень понятно и доступно объясняет информацию, спасибо за контент на канале)

[topgames]

Спасибо за уроки.
Вроде основы но новое узнал)

[____Olga__]

спасибо, очень полезный, доступный контент

[eurorock]

Михаил - спасибо за ролики! Подписался!) Профита и счастья)

[demimurych]

00:13:06 *Если я по старому синтаксису пойду function [...] то this потеряется*
this никуда не теряется.
this это идентификатор, значение которого устанавливается при _вызове функции_
Если программист не переопределил правила bind this то -
устанавливается this в зависимости от того каким образом функция была вызвана.

*Если функция вызывалась в dot нотации*
то есть как member expression, то this будет установлен в base идентификатора.
Говоря не академическим языком при вызове:
var obj = {
name: 'myObj',
method: function() {
console.log(this);
}
};
obj.method()

то this будет установлен в значение base - то есть в нашем случае obj
Подчеркиваю - установлено в момент вызова функции, а не в момент ее создания.

Другой пример:
var obj = {
name: 'myObj',
method: function() {
console.log(this);
}
};
var secondObj = {
name: 'secondObj',
methodOfSecondObj: obj.method
};
secondObj.methodOfSecondObj()
this будет указывать на secondObj.

var myFunc = obj.method;
myFunc();
this будет указывать на globalThis


*Если функция вызывается как CallExpression*
то this устанавливается:
1) в случае Legacy Mode и with statement то в withStatement
2) в случае strict mode на globalThis


*В случае же ArrowExpression*
this будет всегда в том значении, в котором он определен для Lexical Enviroment нашей ArrowExpression.
Или для любой другой родительской Lexical Enviroment.

Говоря не академическим языком:
При вызове стрелочной функции, this не устанавливается.
Доступ к this осуществляется ровно так же, как и к любому другому идентификатору -
по цепочке областей видимости которая и является той самой цепочкой из Lexical Enviroment.

Например:
var obj = {
name: 'objName',
method: (
function() {
var arrow = ( () => console.log(this) );
arrow(); // this будет тем,
}
)
}
obj.method(); // внутри arrow this будет равен obj.

var secondObj = {
name: 'secondObj',
methodOfSecondObj: obj.method
};
secondObj.methodOfSecondObj()
secondObj
var arrow = ( () => console.log(this) );var obj = {
name: 'objName',
method: (
function() {

arrow();
}
)
}
// this внутри arrow бцдет уже указывать на secondObj

а если arrow вынести из лексического окружения method то есть сделать вот так
var arrow = ( () => console.log(this) );
var obj = {
name: 'objName',
method: (
function() {

arrow();
}
)
}

то this всегда будет указывать на globalObj вне зависимости от того как будет вызываться method.

[ЕвгенияКуринева]

Спасибо за понятное объяснение стрелочных функций. В каких случаях лучше использовать обычные, а не стрелочные функции?

[u-kob]

Ну вообще-то параметры по умолчанию (в ES6) и проверка с помощью условных операторов (в ранних версиях JS) немного разные вещи. Если мы будем передавать строку и она окажется пустой, то для условного оператора это будет false и он подставит то, что мы ему скажем. А вот параметр по умолчанию, если мы передаём пустую строку, уже не подставит нам значение, которое мы ему указали, и в аргументе так и останется пустая строка. Это надо учитывать.
К тому же проверку с помощью условных операторов можно записать проще: arg = arg || "default_value"

[nikonovilya]

Михаил, подскажите, что за тему в vs code вы используете?

[abubakrjuraev]

Привет сделай пожалуйста видос про event loop

[DesertEagleNV]

Качество видео - на высоте, но тема this, считаю, не раскрыта.