The Web Dev Guide by Wishtack
  • The Web Dev Guide by Wishtack
  • HTML
    • HTML Tags
    • HTML Attributes
    • Content Formatting
    • Empty Tags vs Content Tags
    • Some Links
  • ECMAScript
    • Some History
    • Language Properties
    • Single-Threaded thus Asynchronous
    • The Event Loop
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibility
  • Tools
    • Node.js
    • NPM
    • Yarn
    • Webpack
    • WebStorm
    • StackBlitz
  • DOM
    • What Is It?
    • Element Selection
    • Element Modification
    • Events
  • Forms
    • The <form> tag
    • Form elements
    • Form validation
  • Networking
    • Fetch Web API
  • CSS
    • Selectors
    • Transforms
    • Transitions
    • Animations
    • Web Animations API
    • Sass
  • Responsive Web Design
    • Viewport
    • Media Queries
    • Grid Layout
    • Flex Layout
    • Frameworks & Libraries
  • Web APIs
  • Testing
    • Unit Testing
    • End to End Testing
  • Security
    • Injection
    • DOM XSS
    • Insecure Direct Object Reference
    • Cross-Site Request Forgery
    • Client vs API Validation
    • API Unauthorized Access and Data Leak
  • More Links
Powered by GitBook
On this page
  • No binding
  • Example with Array.filter and Array.map
  • One-liner
  1. ECMAScript

Arrow Functions

/* 90s */
function sayHi(userName) {
    console.log('Hi ' + userName);
}
​
/* 2000s */
var sayHi = function (userName) {
    console.log('Hi ' + userName);
};
​
/* 2015 */
const sayHi = (userName) => {
    console.log('Hi ' + userName);
});

No binding

Arrow functions cannot be bound to objects. The this variable's value will always be the one of the parent closure.

class Customer {
​
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    
    sayHi() {
        console.log('Hi ' + this.firstName);
    }
    
    sayHiLater() {
        setTimeout(() => {
            this.sayHi();
        }, 1000);
    }
​
}

Example with Array.filter and Array.map

const productList = [
    {
        title: 'Browserstack',
        price: 50
    },
    {
        title: 'Keyboard',
        price: 20
    },
    {
        title: 'Prerender',
        price: 10
    }
];
​
const cheapProductList = productList.filter((product) => {
    return product.price < 25;
});
​
const cheapProductTitleList = cheapProductList.map((product) => {
    return product.title;
});
​
console.log(cheapProductTitleList); // ['Keyboard', 'Prerender']

One-liner

In most cases, callbacks are just simple one-liners.

In this case, curly braces {} and the return statement can be removed.

If the arrow function only takes one parameter, the parentheses () can be removed.

const cheapProductTitleList = productList
    .filter(product => product.price < 25)
    .map(product => product.title);

In case of variable name shadowing, try to avoid single letter variable names or generic names.

filter(u => u.id === user.id)

filter(it => it.id === user.id)

Prefer the _ prefix to mark the difference between the local variable and the one from the parent closure.

filter(_user => _user.id === user.id)

Previousthis & "binding"NextTemplate Strings

Last updated 6 years ago