Panda Noir

JavaScript の限界を究めるブログです。

JavaScriptのコードを見やすくする方法

Javascriptは実は簡略化できる部分が多い言語です(私が知ってるのは主にif関係)。極めると8KBとかけずれたりします。jQueryとかだと60KBとか削れます。では、それを紹介したいと思います。

1つめ

if(a == b) {something()}を短くする方法です。これは比較的そのままで if(a == b) something()と括弧をとるだけです。

2つ目です。

というか、さっきのに補足です。 if(a == b) {something()} else {other()}を短くする方法です。これは、 if(a == b) something() else other()としてはいけません。いけませんよ。あくまでもif と else の間に改行やコロンなどの区切りを入れなければいけません。 if(a == b) something();else other()もしくは

else other()```
という具合です。

しかし、これより短くする方法があります。三項演算子を使うという方法です。書き方は
a == b ? something() : other()です。
 ? の前に条件式、 ? の後ろにtrueの場合の式、 : の後ろにfalseの式を書きます。

#最後

最後は私も最近知ったのですが、 && と || を使う方法です。これはあまりなれていないのですが、一番使い勝手がいいです。
&&は
```if(a == b) something()```を
```a == b && something()```とします。
内部では、まず左辺(a==b)を評価して、それがtrueなら右辺を実行するようです。左辺がfalseなら当然実行されません。右辺に代入式を置くときは、かっこでくくる必要があるようです。


|| の方は、
```if(a != b) something()```が
```a == b || something()```となります。
内部では、まず左辺(a!=b)を評価して、それがfalseなら右辺を実行します。左辺がtrueなら当然実行されません。右辺に代入式を置くときは、かっこでくくる必要があるようです。
すいませんここさっきの説明をコピペしました。ようするに&&の逆です。


さらにこれは色々と応用が利きます。例えばa == bかつb != cなら、
a == b && b != c || something()です。
3は少し難しい書き方になってしまうことがあるので注意が必要です。
他にも、左辺を評価するので、これを利用して引数を省略したときの処理もできます。

function sub(a,b){ b=b||1; return a+b } sub(3,4)//7 sub(5)//6


これは、bを省略するとbに1を代入します。そのため、aに1を足した数を返します。

これらを使いこなしてコードを見やすくしていきましょう。

#追記
<ins>ifのかっこを省くと見やすくなる代償にバグが生まれやすくなります。
例えば
```if(a != b) something();bug();```

このコード、なんとbug()はa==bでも実行されます。
かっこつきで書くとこうなるからです。
```if(a !=b){something()}bug()```
このようにバグが起きたりするので注意しなければいけません。</ins>