Javascript ES6 refactoring
Published: Tuesday, Nov 1, 2016 Last modified: Thursday, Nov 14, 2024
Find loop
for (var i = 0; i < this.items.length; i++) {
if (this.$route.params.uuid == this.items[i].uuid) {
return this.items[i]
}
}
Can be written like this:
return this.items.find((item) => item.uuid === this.$route.params.uuid)
If you need to several items, use filter:
return this.items.filter(item => item.status === status)
As used in this Vue2 example
Arrow functions
If you ever find yourself writing code that looks like var that = this
using
arrow functions gets rid of that problem!
However if that still doesn’t work, you might need to bind this
back in, like so:
fetch(url, obj)
.then(function(res) {
return res.json();
})
.then(function(resJson) {
this.video_options = resJson
}.bind(this)).catch(function (err) {
console.error(err);
});
Promises
I find constructing Promises still a little tricky, but note that the Fetch API supports them natively.
Way better than XMLHttpRequest
callback hell, especially for catching errors / writing robust code in poor networking situations which is all too common.