Arrow functions in JavaScript - What, Why and How - FunFunFunction #32

Arrow functions are (pretty much) a shorter function syntax in JavaScript. Because of their extreme terseness, arrow functions allows us to use use functions in a new way, making lots of functions that are small, inline and single-purpose.

Table of contents:
00:18 ► What are arrow functions in JavaScript
00:53 ► Why use arrow functions in JavaScript
02:39 ► How to use arrow functions in JavaScript
07:41 ► Boilerplate problem with vanilla functions in JavaScript
09:36 ► Refactoring vanilla JavaScript functions to arrow functions
10:25 ► Implicit returns in arrow functions
13:36 ► Short argument names in arrow functions example
15:58 ► Summary of arrow functions in JavaScript

Resources:
► .filter explained

► .map explained

► .reduce explained

► Fun Fun Function channel

► Code from the episode

► Music by 7 Minutes Dead

💛 Follow on Twitch
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management

[chickenzwings]

Wow I really appreciate you taking the time to create a regular function and then show step by step how and why we could use an arrow function instead. Thank you!

[namirsayed-ahmadbaraza]

if you add destructuring to the function you can avoid the Repetition of event, and make the functions totally generic and self Documented
({type}) => type === 'attack'

[emanonmax]

I could watch 7:15 to 7:20 the whole day long :D

[nuancetone]

Gotta say, this is the 3rd video I've seen of yours and I'm really impressed. Both by your enthusiasm, but also the depth and detail in which you go. I specifically like the 'why' parts. Many other explanations show smaller, more abstracted examples and even though they explain the process, it's harder to extract that into real world scenarios.

Love it! Keep it up!

[forgoroe]

Just discovered your channel (like 5 hours ago actually) and couldn't stop watching all the amazing content you produce. Thanks a lot for combining a lot of "knowledge-giving" with your fun and awesome personality. Well done

[erzataufiks]

i like how this guys simply describe arrow function, i've been wondering around how does it works or why does it work on that way. now its a crystal clear, thanks.

[roltthehunter]

Well time to go down the rabbit hole i have been writing JS for 3 weeks i have gone thru 2 intro courses and neither told me anything about filter, i'll be back to this video once i figure that out. pretty happy someone on reddit pointed me at this channel.

[BradfordMelluish]

I'm getting ready to attend Hack Reactor in San Francisco, and your videos have been a huge help. I'll definitely be recommending the channel to friends in my cohort. Excited to start using arrow functions -- keep up the good work!

[Jkevingutierrez]

Excellent video, I really like the show!
It would be great to have a second part explaining the differences between 'this' in each type of function.

[Max-bhtg]

Your video colors look so warm and smooth, makes the video really enjoyable to watch :-).

[Gambit-nx]

Thanks! its cool to see you use map and filter again. Really like the refresh on how they work.

[BobHolbenThere]

{ } are called curly braces - sometimes just "curlies". "Mustache" and "Handlebars" are creative names in the community.
[ ] are called square brackets - sometimes just brackets.

[sazedulhaque]

Its really having Fun to learn from FunFunFunction. :)

[jonyoinas]

Honestly, this new syntax feels more messy and hard to understand than the old one. I guess its because im not that familiar with it yet.

Still learning javascript and it's many weird aspects! :) These videos are really helping me alot! Thank you!

[mvducatti]

How did I discover you only now, I needed you before in my life

[manualvarado]

Here you have the dragonEvents array in case you want to code along : D

const dragonEvents = [
{ type: 'attack', value: 12, target: 'player-dorkman' },
{ type: 'yawn', value: 40 },
{ type: 'eat', target: 'horse' },
{ type: 'attack', value: 23, target: 'player-fluffykins' },
{ type: 'attack', value: 12, target: 'player-dorkman' },
]

[TibbyProductions]

Just found your channel and it is 10/10, thank you!

[DanelonNicolas]

please we need a episode about this, not arrow functions, I mean this in function lol

[glenoakes]

Your videos are amazingly entertaining and enlightening. Thanks MPJ!

[srinivasnangunuri]

@MPJ, you are the best JS teacher out there :) Period !