Javascript in 2015 video

This demo introduces lots of ES6 features while actually building something. I like it!

Thoughts

ES6 Modules, jspm, and System.js will take deeper dives to understand, but I liked the fat arrow functions and string templating.

In ES6, fat arrow functions and string templating let us write this:

elem.innerHTML = urls.map((url) => `<img src="${url}" alt="" />`).join("\n");

Babel says the ES5 version looks like this:

elem.innerHTML = urls
  .map(function (url) {
    return '<img src="' + url + '" alt="" />';
  })
  .join("\n");

less code = less syntax errors. I like this!

Fat arrow functions have some funny little bits.

• ( and ) around arguments are only needed if there is more than 1 argument
• { and } around the function are only needed around the function body if is more than a line long

But these rules feel funny to me. JS linters have long suggested always including the {, }, and ; even in places where aren’t needed to prevent stupid errors and keep things consistent.

export default (posts) => {
  return posts
    .filter((post) => !post.data.over_18)
    .slice(0, 5)
    .map((post) => post.data.url)
    .filter((url) => /gifv?$/.exec(url))
    .map((url) => url.replace(/v$/, ""));
};

return new Promise((resolve, reject) => {
  jsonp(
    this.url,
    {
      param: "jsonp",
    },
    (err, data) => {
      err ? reject(err) : resolve(data.data.children);
    }
  );
});

Fat Arrow Functions are also automatically bound to the scope of the object they are enclosed in which makes life simpler when mixing up functional and object oriented programming. Fat Arrow Functions) on MDN has more details.