Sharing Top Content from the Angular-sphere.

How you can use ES6 Arrow Functions to make your JavaScript easier to read

  • Because of this, we’re going to take things slow and first just introduce how the syntax compares with typical functions you’re used to.Here we have a basic function declaration and a function expression:// fn declarationfunction add (x,y) { return x + y;}// fn expressionvar add = function (x,y) { return…
  • then(tweets = tweets.filter(tweet = tweet.rts 50))}Overall, I’d say that’s a huge improvement in just about every category.The next benefit of arrow functions is how they manage the “this” keyword.
  • If you’re not familiar with the “this” keyword, I recommend watching WTF is this.Let’s take a look at some typical React code using ES5.class Popular extends React.Component { constructor(props) { super(); this.state = { repos: null, };this.updateLanguage = } componentDidMount () { } updateLanguage(lang) { api.fetchPopularRepos(lang) .
  • then((repos) = { this.setState(() = { return { repos: repos } }); });}📈📈📈Nice to knowsAt this point, we’ve covered all of the “need to knows” about arrow functions.
  • If this was your setState function, how would you approach logging = ({ repos: repos}));The obvious move would be to change your implicit return to an explicit return, create a function body, then log inside of that body.this.setState((nextState) = { console.log(nextState) return { repos: repos }});Well, that’s pretty annoying.

In this post, you’ll learn how Arrow Functions both make your code more concise, while also making the “this” keyword more manageable. You’ll also learn about implicit returns, logging with arrow…

Arrow functions are the new fundamental building blocks of building modern web applications.In this post, you’ll learn how Arrow Functions both make your code more concise, while also making the “this” keyword more manageable. You’ll also learn about implicit returns, logging with arrow functions, and combining implicit returns with objects.If you prefer to learn by video instead of text, here’s the video format:Arrow functions provide two main benefits over regular functions. First, they’re more terse. Second, they make managing the “this” keyword a little easier.What I’ve seen with new developers learning about Arrow Functions is that it’s not really the concept itself that’s difficult to grasp. Odds are you’re already familiar with functions, their benefits, use cases, etc. But for some reason, it’s the actual syntax that throws your brain for a loop when you’re first exposed to them. Because of this, we’re going to take things slow and first just introduce how the syntax compares with typical functions you’re used to.Here we have a basic function declaration and a function expression:// fn declarationfunction add (x,y) { return x + y;}// fn expressionvar add = function (x,y) { return x + y;}Now, if we wanted to change that function expression to an arrow function, we’d do it like this:var add = function (x,y) { return x + y;}var add = (x,y) = { return x + y;}Again, the most difficult part about getting started with arrow functions is just getting used to the syntax. Once you’re cool with it, move…

How you can use ES6 Arrow Functions to make your JavaScript easier to read

Comments are closed, but trackbacks and pingbacks are open.