From 8d51bd504b3d64e551f28a2b5bfbd98f1605f131 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Mon, 1 Dec 2014 14:20:22 -0800 Subject: [PATCH 1/3] Switch from single var to one-var-per-variable Frontenders at Airbnb at have been discussing this change for a bit, and we've come to favor one-var-per-variable over one-var-only declarations. Two things improve the maintainability of this style over one var for multiple variables: 1. You never have a diff of a line that's removing a `;` and inserting a `,`. 2. You can't accidentally declare global variables because you have a one-character mistake (semicolon instead of comma): ```javascript var foo = 1, bar = 2; baz = 3; // added later and (accidentally) declared globally ``` --- README.md | 72 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 44 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 1053c08f..6a0de972 100644 --- a/README.md +++ b/README.md @@ -50,8 +50,8 @@ + `undefined` ```javascript - var foo = 1, - bar = foo; + var foo = 1; + var bar = foo; bar = 9; @@ -64,8 +64,8 @@ + `function` ```javascript - var foo = [1, 2], - bar = foo; + var foo = [1, 2]; + var bar = foo; bar[0] = 9; @@ -151,9 +151,9 @@ - When you need to copy an array use Array#slice. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7) ```javascript - var len = items.length, - itemsCopy = [], - i; + var len = items.length; + var itemsCopy = []; + var i; // bad for (i = 0; i < len; i++) { @@ -216,10 +216,10 @@ - When programmatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2). ```javascript - var items, - messages, - length, - i; + var items; + var messages; + var length; + var i; messages = [{ state: 'success', @@ -366,17 +366,28 @@ var superPower = new SuperPower(); ``` - - Use one `var` declaration for multiple variables and declare each variable on a newline. + - Use one `var` declaration per variable. ```javascript // bad + var items = getItems(), + goSportsTeam = true, + dragonball = 'z'; + + // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; + ``` - // good + It's easier to add new variable declarations this way, and you never have + to worry about swapping out a `;` for a `,` or introducing punctuation-only + diffs. Also, you can't make the following mistake: + + ```javascript + // can you catch the error? var items = getItems(), - goSportsTeam = true, + goSportsTeam = true; dragonball = 'z'; ``` @@ -389,17 +400,18 @@ goSportsTeam = true; // bad - var i, items = getItems(), - dragonball, - goSportsTeam = true, - len; + var i; + var items = getItems(); + var dragonball; + var goSportsTeam = true; + var len; // good - var items = getItems(), - goSportsTeam = true, - dragonball, - length, - i; + var items = getItems(); + var goSportsTeam = true; + var dragonball; + var length; + var i; ``` - Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues. @@ -843,14 +855,18 @@ ```javascript // bad - var once + var story = [ + once , upon - , aTime; + , aTime + ]; // good - var once, - upon, - aTime; + var story = [ + once, + upon, + aTime + ]; // bad var hero = { From b61d52ca41450c5f661bd96265b3c8e063c0961c Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Mon, 1 Dec 2014 14:28:20 -0800 Subject: [PATCH 2/3] use JSDoc/Closure Compiler style type annotations --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6a0de972..21947075 100644 --- a/README.md +++ b/README.md @@ -651,8 +651,8 @@ // make() returns a new element // based on the passed in tag name // - // @param tag - // @return element + // @param {String} tag + // @return {Element} element function make(tag) { // ...stuff... @@ -665,8 +665,8 @@ * make() returns a new element * based on the passed in tag name * - * @param tag - * @return element + * @param {String} tag + * @return {Element} element */ function make(tag) { From 3c68fc494632bfb28b470f63af94cf8b9a11acf1 Mon Sep 17 00:00:00 2001 From: Jake Teton-Landis Date: Wed, 3 Dec 2014 17:41:15 -0800 Subject: [PATCH 3/3] Reformat var change --- README.md | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 21947075..6e7c6f1b 100644 --- a/README.md +++ b/README.md @@ -367,6 +367,9 @@ ``` - Use one `var` declaration per variable. + It's easier to add new variable declarations this way, and you never have + to worry about swapping out a `;` for a `,` or introducing punctuation-only + diffs. ```javascript // bad @@ -374,23 +377,18 @@ goSportsTeam = true, dragonball = 'z'; + // bad + // (compare to above, and try to spot the mistake) + var items = getItems(), + goSportsTeam = true; + dragonball = 'z'; + // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; ``` - It's easier to add new variable declarations this way, and you never have - to worry about swapping out a `;` for a `,` or introducing punctuation-only - diffs. Also, you can't make the following mistake: - - ```javascript - // can you catch the error? - var items = getItems(), - goSportsTeam = true; - dragonball = 'z'; - ``` - - Declare unassigned variables last. This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. ```javascript