13 Noteworthy Points from Google’s JavaScript Style Guide

Don’t use var anymore

Declare all local variables with either <em class="markup--em markup--pullquote-em"><span style="color: #000000;">const</span></em> or <em class="markup--em markup--pullquote-em"><span style="color: #000000;">let</span></em>. Use const by default, unless a variable needs to be reassigned. The <em class="markup--em markup--pullquote-em"><span style="color: #000000;">var</span></em> keyword must not be used.

Arrow functions are preferred

Arrow functions provide a concise syntax and fix a number of difficulties with <em class="markup--em markup--pullquote-em"><span style="color: #000000;">this</span></em>. Prefer arrow functions over the <em class="markup--em markup--pullquote-em"><span style="color: #000000;">function</span></em> keyword, particularly for nested functions

Use template strings instead of concatenation

Use template strings (delimited with <span style="color: #000000;">`</span>) over complex string concatenation, particularly if multiple string literals are involved. Template strings may span multiple lines.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

“for… of” is the preferred type of ‘for loop’

With ES6, the language now has three different kinds of <span style="color: #000000;">for</span> loops. All may be used, though <span style="color: #000000;">for</span>–<span style="color: #000000;">of</span> loops should be preferred when possible.

Constants should be named in ALL_UPPERCASE separated by underscores

Constant names use <span style="color: #000000;">CONSTANT_CASE</span>: all uppercase letters, with words separated by underscores.

Simplify your JavaScript – Use .map(), .reduce(), and .filter()

What if you have an array, but only want some of the elements in it? That’s where <span style="color: #000000;">.filter()</span> comes in!

Combining .map(), .reduce(), and .filter()

Since all three are called on arrays and since <span style="color: #000000;">.map()</span> and <span style="color: #000000;">.filter()</span> both return arrays, we can easily chain our calls.

 

And now here’s the fun part… we can chain all of this to get what we want in a single line:

var totalJediScore = personnel
  .filter(function (person) {
    return person.isForceUser;
  })
  .map(function (jedi) {
    return jedi.pilotingScore + jedi.shootingScore;
  })
  .reduce(function (acc, score) {
    return acc + score;
  }, 0);

And look how pretty it is with arrow functions:

const totalJediScore = personnel
  .filter(person => person.isForceUser)
  .map(jedi => jedi.pilotingScore + jedi.shootingScore)
  .reduce((acc, score) => acc + score, 0);

Why event delegation is a better way to listen for events in vanilla JS

Let’s say you wanted to listen for clicks on an element with the <span>.click-me</span> class.

With jQuery, whether there’s one element or 100, you do this.

<span class="nx">$</span><span class="p">(</span><span class="s1">'.click-me'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
	<span class="c1">// Do things...
</span><span class="p">});</span>

Web performance #

It feels like listening to every click in the document would be bad for performance, but it’s actually more performant than having a bunch of event listeners on individual items.

.. With a traditional approach, attaching listeners to specific elements, you would need to add a new listener every time you added a field. With event delegation, you can setup your listener once and not have to worry about it, since it checks selectors at time of click rather than when the DOM is initially rendered.