「可読性を上げる」ために敢えてショートハンドを使う

:::note warn
この記事はちょこちょこ修正しているため、「この記事は最終更新日からn年以上が経過しています。」の警告が出ませんし、いまでもLGTMをいただきますが、内容は2019年4月のものとなっています。JavaScriptの機能もそれから多く追加・修正されていることにご留意ください。
:::

# 対象
+ JavaScript 初心者
+ キーを叩きすぎて手が痛くなってしまった人
+ めんどくさがりの人

# tl;dr
+ コードゴルフにおいてショートハンドがよくつかわれますが、
ここでは可読性が高く、かつ文字数を少なくすることができるショートハンドを紹介します。
+ もちろん可読性が高いというのは、人によって基準が異なるので、ここで紹介するのはあくまでも個人的なものです。
+ 使いすぎてはいけません。コーディング規約があればそれを遵守しましょう。

# 条件分岐
## ifの省略 (三項演算子)
```js:before
const month = 5;

if (month >= 5) {
	console.log("令和で、あります。");
} else {
	console.log("平成で、あります。");
}
```

```js:after
console.log(`${ month >= 5 ? "令和" : "平成" }で、あります。`);
```

## ifの省略 (And演算子)
```js:before
const isReiwa = true;

if (isReiwa) {
	console.log("令和で、あります");
}
```

```js:after
const isReiwa = true;

isReiwa && console.log("令和で、あります");
```

`&&` の左側が `truthy` と判定されるときに右側が実行される。

## エルビス演算子やNull合体演算子の代わり
```js
let v1 = "yeah!!!"
let v2;
console.log(v1 || "default"); //> "yeah!!!"
console.log(v2 || "default"); //> "default"
```

※注: 厳密には左側が `falsy` に判定される場合に右側が返される。

### falsy と判定される
+ `false`
+ `""`
+ `NaN`
+ `0`
+ `undefined`
+ `null`

(`truthy` については上記以外)

そのため、次のような場合正常な動作が見込めない:

```js
function rotate180(angle) {
	// デフォルトで 90 をセット…???
	angle = angle || 90;

	const rotatedAngle = angle + 180;

	if(rotatedAngle <= 360) {
		return rotatedAngle;
	} else {
		return rotatedAngle - 360;
	}
}
```

寒気がしますね(これは書かないと思いますが)。
このコードでの問題点は、`angle` に `0` が渡されたとき、
次のように解釈されるからです。

```js
/* 1 */ angle = angle || 90
/* 2 */ angle =   0   || 90 // 右側から評価を始める
/* 3 */ angle = false || 90 // `0` は `falsy`
/* 4 */ angle =          90 // 評価が右側に移る
```

つまり、 **`0` がセットできない** ということです！！！
このような場合は、 **パラメータの初期値** のセットを使いましょう。

# ループ ※追記
[@pxfnc さんより追記](/_lemon2003_/items/0b1e0b40588dd0bdb5a2/patches/67401)

for文で配列の全ての要素にアクセスして何かするパターンにおいて、`for(~ of ~)`や`forEach`メソッドを使うと漏れがなくループさせることができます。

```js:before
const items = ["foo", "bar", "baz"];

for(let i = 0; i < items.length; ++i) {
    console.log(items[i]);
}
```
これは以下のように変更できます

```js:after(for~of)
const items = ["foo", "bar", "baz"];

for(const item of items) {
    console.log(item)
}
```

```js:after(forEach)
const items = ["foo", "bar", "baz"];

items.forEach(item => console.log(item));
```
要素にアクセスする`[i]`を忘れるミスだったり、forの条件の書き方を間違えたりループ内で`i`に代入したりするミスによって無限ループしたり全ての要素にアクセスできなかったりするという地獄から解放されます。ついでにタイプ数が少ないので指が痛くなりません。



# 関数
## アロー関数
```js:before
const doSomething = function(input) {
	return input - 2018;
};
```

### phase1
```js:after-phase1
const doSometing = (input) => {
	return input - 2018;
};
```

`function式` と `アロー関数` は完全に同じではありません。
(`this` が束縛されない・`prototype`がない…)
パフォーマンス等によってアロー関数のほうが優れている場合があります。

### phase2 (引数、処理部分のかっこを省略)
```js:after-phase2
const doSomething = input => input - 2018;
```

アロー関数では、

+ 引数が1つしかない場合、引数を囲むかっこ(丸括弧・パーレン)を
+ 処理と返り値が等しい場合、処理部分を囲むかっこ(波括弧・ブレース)を

省略することができます。

### パラメータの初期値
```js:before
function squareArea(width, height) {
	if(width === undefined) {
		width = 10;
	}
	if(height === undefined) {
		height = 5;
	}
	return width * height;
}
```

```js:after
const squareArea = (width = 10, height = 5) => width * height;
```

` = 10`, ` = 5` 部分でデフォルト値を指定できます。

逆に必須にして、エラーを投げたいときは、

```js
const errorThrower = () => {
	throw new Error();
};

const squareArea = (width = 10, height = errorThrower()) => width * height;
```

## パラメータをオブジェクトで受け取って変数に展開
[@yuta0801 さんより追記](/_lemon2003_/items/0b1e0b40588dd0bdb5a2#comment-1eb5aa9a9b24d25fb2ba)

```js:before
const func1 = obj => {
	const a = obj.a;
	const b = obj.b;
	const c = obj.xxx.c;

	// do something...
};
```

```js:after
const func2 = ({a, b, xxx: {c}}) => {
	// do something...
	console.log(a, b, c);
};

func2({
	a: "aaa!",
	b: "bbb!",
	xxx: {
		c: "ccc!"
	}
}); //> "aaa!" "bbb!" "ccc!"
```

標準のJavaScriptの関数の返り値から取り出したリ、
APIを叩いてデータを取得するときにも使えます。

初期値もセットできます。

## 返り値について返す前に処理
```js:before
const func = num => {
	num += 1;
	return num;
};
```

```js:after
const func1 = num => ++num;
const func2 = num => (num+=1, num);
```

### 代入演算子
代入演算子は、変数に計算結果を代入するが、
同時に、式の値としても計算結果を返す。

```js
let num = 10;
console.log(num += 5); //> 15
console.log(num);      //> 15
```

`+=` `-=` `*=` `/=` `%=` `**=`

### インクリメント・デクリメント、前置・後置
+ **後置** なら加算/減算 **前** の値を返す。
+ **前置** なら加算/減算 **後** の値を返す。

### カンマ演算子
複数の式を評価して、最後の結果を返す。

説明は割愛したいと思う。

# 数値
## 10の累乗

一、十、百、千、万、十万、、、

```js
1e0 === 1
1e1 === 10
1e2 === 100
1e3 === 1000

6.96e8 === 696000000
1e-10  === 0.0000000001
```

`1e3` は $ 1×10^3 $、
`6.96e8` は $ 6.96×10^8 $、
`1e-10` は $ 1×10^{-10} $

# 文字列
## 1文字取り出す
```js
const str = "abcdefg";

// 3文字目取り出す
str.substring(2, 3); //> "c"
```

```js
const str = "abcdefg";

str[2]; //> "c"
```

# オブジェクト
## プロパティ名とキーが一致している
```js:before
const obj = {
	lorem: lorem,
	ipsum: ipsum
};
```

```js:after
const obj = {
	lorem,
	ipsum
};
```

## プロパティに関数を代入する ※追記
[@yuta0801 さんより追記](#comment-29f953d40e53bcbe202a)

```js:before
const obj = {
	name : "Alice",
	greet: function() {
		console.log(`I'm ${this.name}`);
	}
};

```

```js:after
const obj = {
	name : "Alice",
	greet() {
		console.log(`I'm ${this.name}`);
	}
};
```

## 配列をそれぞれの変数に代入する

```js:before
const first = arr[0];
const second = arr[1];
const third = arr[2];
```

```js:after
const [first, second, third] = arr;
```

## プロパティをそれぞれ変数に代入する
```js:before
const id    = obj.id;
const name  = obj.name;
const birth = obj.birth;
```

```js:after
const {id, name, birth} = obj;
```

分割代入はいろいろなタイミングで使えるので、絶対に覚えておくべき。