JavaScript(JS)で変数宣言 書き方を整理してみた

今回はJavaScript(JS)の変数宣言の書き方に関してお伝えしていきたいと思います。

JavaScriptでの宣言のパターンについて、列挙してみました。

好みの問題もあるかと思いますが、チーム内で話し合う際の材料になれば幸いです。

変数宣言の書き方　値代入の場合

パターン1　改行＆変数ごとにletをつける

let userId = 1;
let user = 'kumkum';
let age = 29;

パターン2　1行にまとめて書く

let userId = 1, userName = 'kumkum', age = 29;

パターン3　改行＆末尾カンマでつなげる

let userId = 1,
  userName = 'kumkum',
  age = 29;

パターン4　改行＆先頭にカンマでつなげる

let userId = 1
  , userName = 'kumkum'
  , age = 29;

有名フレームワークはどのように書いているのか？

※コードを全てチェックできていないので、他の書き方が存在しているかもしれません。ご了承願います。

Vue.js

// src/compiler/parser/filter-parser.js
let inSingle = false
let inDouble = false
let inTemplateString = false
let inRegex = false

// test/unit/modules/vdom/modules/dom-props.spec.js
const vnode = new VNode('a', { domProps: { src: 'http://localhost/' }})
const elm = patch(null, vnode)

Vue.jsはパターン1の書き方をしていますね。

React.js

// packages/scheduler/src/TracingSubscriptions.js
let didCatchError = false;
let caughtError = null;

// scripts/release/utils.js
const {exec} = require('child-process-promise');
const {createPatch} = require('diff');

React.jsもパターン1の書き方ですね。

変数宣言の書き方　宣言のみの場合

パターン1　改行＆変数ごとにletをつける

let userId;
let userName;
let age;

パターン2　1行にまとめて書く

let userId, userName, age;

パターン3　改行＆末尾カンマでつなげる

let userId,
  userName,
  age;

パターン4　改行＆先頭にカンマでつなげる

let userId
  , userName
  , age;

有名フレームワークはどのように書いているのか？

Vue.js

// src/compiler/parser/index.js 
let delimiters
let transforms
let preTransforms
let postTransforms

// src/compiler/parser/filter-parser.js
let c, prev, i, expression, filters

Vue.jsはパターン１とパターン２の書き方が混在していました。
ざっと見た感じだと、全文字数が短い場合はパターン２（1行にまとめる）の書き方をしているようです。

React.js

// packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
let React;
let ReactDOM;
let Scheduler;
let SchedulerTracing;

// scripts/babel/__tests__/transform-test-gate-pragma-test.js
let shouldPass;
let isFocused;

React.jsはパターン１の書き方をしていました。
値代入あり、なしに関わらず、全て1行ごとに変数宣言しているようです。

参考文献

・現代の JavaScript チュートリアル
https://ja.javascript.info/variables
・Vue.js(Github)
https://github.com/vuejs/vue/search?p=3&q=let&unscoped_q=let
・React.js(Github)
https://github.com/facebook/react/search?p=4&q=let&unscoped_q=let