Javascript Tutorial - Arrow Functions

[u/ddmanton7220]

https://www.youtube.com/watch?v=aYcH26h_HlI&t=26s

[u/[deleted]]

For some reason I initially struggled to grasp arrow functions. Something about .filter(function(item) { was easier to understand for me at the time.

As with anything repetition is key. Write it enough, and you'll get it.

[u/drumstix42 → u/[deleted]]

For learning the syntax, you can take it in steps to go from standard sytanx to arrow function sytanx.

Standard, multiline function

[0,1,2,3,4,5,6].filter(function(item) {
    return item > 3;
})

Remove the function portion before the parenthesis (non-valid code):

[0,1,2,3,4,5,6].filter((item) {
    return item > 3;
})

Add the arrow portion => (valid code again):

[0,1,2,3,4,5,6].filter((item) => {
    return item > 3;
})

Optionally single-line it: Remove the braces { and } and the return. The return is implied in a single line without the braces.

[0,1,2,3,4,5,6].filter((item) => item > 3)

Also note, when there is only 1 parameter, the parenthesis are optional. E.g.:

[0,1,2,3,4,5,6].filter(item => item > 3)

But if there are no parameters, or more than 1, the parenthesis are required.