Forget about `apply()`. Use the spread operator instead.

const greet = (first, last) => `Hi ${first} ${last}`;

const person = ["John", "Doe"];

greet.apply(null, person);

greet(...person);

Forget about the `arguments` object. The rest parameter is always a better option because:

1. it's named, so it gives you a better idea of the arguments the function is expecting

2. it's a real array, which makes it easier to use.

const sortNumbers = () =>

Array.prototype.slice.call(arguments).sort();

const sortNumbers = (...numbers) => numbers.sort();

Don't `bind()` when there's a more idiomatic approach.

["foo", "bar"].forEach(func.bind(this));

["foo", "bar"].forEach(func, this);

const person = {

first: "John",

last: "Doe",

greet() {

const full = function() {

return `${this.first} ${this.last}`;

}.bind(this);

return `Hello ${full()}`;

}

}

const person = {

first: "John",

last: "Doe",

greet() {

const full = () => `${this.first} ${this.last}`;

return `Hello ${full()}`;

}

}

Cache feature tests, large data structures and any expensive operation.

const contains = (arr, value) =>

Array.prototype.includes

? arr.includes(value)

: arr.some(el => el === value);

contains(["foo", "bar"], "baz"); // => false

const contains = (() =>

Array.prototype.includes

? (arr, value) => arr.includes(value)

: (arr, value) => arr.some(el => el === value)

)();

contains(["foo", "bar"], "baz"); // => false

Avoid nesting functions when you don't have to.

[1, 2, 3].map(num => String(num));

[1, 2, 3].map(String);

Embrace implicit coercion when it makes sense. Avoid it otherwise. Don't cargo-cult.

if (x === undefined || x === null) { ... }

if (x == undefined) { ... }

Avoid multiple nested function calls. Use composition instead.

const plus1 = a => a + 1;

const mult2 = a => a * 2;

mult2(plus1(5)); // => 12

const pipeline = (...funcs) =>

val => funcs.reduce((a, b) => b(a), val);

const plus1 = a => a + 1;

const mult2 = a => a * 2;

const addThenMult = pipeline(plus1, mult2);

addThenMult(5); // => 12

Favor IIFE's and return statements over if, else if, else and switch statements.

var grade;

if (result < 50)

grade = "bad";

else if (result < 90)

grade = "good";

grade = "excellent";

const grade = (() => {

if (result < 50)

return "bad";

if (result < 90)

return "good";

return "excellent";

})();

Currying might have its place in other languages, but avoid it in JavaScript. It makes your code harder to read by introducing a foreign paradigm while the appropriate use cases are extremely unusual.

const sum = a => b => a + b;

sum(5)(3); // => 8

const sum = (a, b) => a + b;

sum(5, 3); // => 8

Minimize dependencies. Third-party is code you don't know. Don't load an entire library for just a couple of methods easily replicable:

var _ = require("underscore");

_.compact(["foo", 0]));

_.unique(["foo", "foo"]);

_.union(["foo"], ["bar"], ["foo"]);

const compact = arr => arr.filter(el => el);

const unique = arr => [...Set(arr)];

const union = (...arr) => unique([].concat(...arr));

compact(["foo", 0]);

unique(["foo", "foo"]);

union(["foo"], ["bar"], ["foo"]);

Don't use loops as they force you to use mutable objects. Rely on `array.prototype` methods.

const sum = arr => {

var sum = 0;

var i = -1;

for (;arr[++i];) {

sum += arr[i];

}

return sum;

};

sum([1, 2, 3]); // => 6

const sum = arr =>

arr.reduce((x, y) => x + y);

sum([1, 2, 3]); // => 6

If you can't, or if using `array.prototype` methods is arguably abusive, use recursion.

const createDiv = howMany => {

while (howMany--) {

document.body.insertAdjacentHTML("beforeend", "<div></div>");

}

};

createDiv(5);

const createDivs = howMany =>

[...Array(howMany)].forEach(() =>

document.body.insertAdjacentHTML("beforeend", "<div></div>")

);

createDiv(5);

const createDiv = howMany => {

if (!howMany) return;

document.body.insertAdjacentHTML("beforeend", "<div></div>");

return createDiv(howMany - 1);

};

createDiv(5);

Rely on native methods as much as possible.

const toArray = obj => [].slice.call(obj);

const toArray = (() =>

Array.from ? Array.from : obj => [].slice.call(obj)

)();

Avoid `for...in` when you can.

const shared = { foo: "foo" };

const obj = Object.create(shared, {

bar: {

value: "bar",

enumerable: true

}

});

for (var prop in obj) {

if (obj.hasOwnProperty(prop))

console.log(prop);

}

Object.keys(obj).forEach(prop => console.log(prop));

Favor readability, correctness and expressiveness over performance. JavaScript will basically never be your performance bottleneck. Optimize things like image compression, network access and DOM reflows instead.

const arr = [1, 2, 3, 4];

const len = arr.length;

var i = -1;

var result = [];

while (++i < len) {

var n = arr[i];

if (n % 2 > 0) continue;

result.push(n * n);

}

const arr = [1, 2, 3, 4];

const isEven = n => n % 2 == 0;

const square = n => n * n;

const result = arr.filter(isEven).map(square);

Don't obfuscate the intent of your code by using seemingly smart tricks.

foo || doSomething();

if (!foo) doSomething();

void function() { /* IIFE */ }();

(function() { /* IIFE */ }());

const n = ~~3.14;

const n = Math.floor(3.14);

Don't be afraid of creating lots of small, highly composable and reusable functions.

arr[arr.length - 1];

const first = arr => arr[0];

const last = arr => first(arr.slice(-1));

last(arr);

const product = (a, b) => a * b;

const triple = n => n * 3;

const product = (a, b) => a * b;

const triple = product.bind(null, 3);

Try to keep your functions pure. All functions should ideally produce no side-effects, use no outside data and return new objects instead of mutating existing ones.

const merge = (target, ...sources) => Object.assign(target, ...sources);

merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

const merge = (...sources) => Object.assign({}, ...sources);

merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

Favor `const` over `let` and `let` over `var`.

var obj = {};

obj["foo" + "bar"] = "baz";

const obj = {

["foo" + "bar"]: "baz"

};