みなさん、JavaScript使ってますか？
JavaScriptって、あんまりエラーがでなくて、
•なぜか動かない
•変数がなぜかundefined
とか、思い通りにならないことが非常に多く、どちらかというと
苦手な分野でした。
今回、下記記事の「JavaScriptガイド」で基本を学び理解が
深まりました。
今後はもっとスムーズに開発できるようになる気がします。
JavaScriptってなんだか苦手だなと思う人はぜひこの記事を御覧ください。
きっと、知らなかった基本的なことがあるかもしれません。
基本を知っていればもっとスムーズな開発ができることでしょう！！
この「JavaScriptガイド」ですが、大変ボリュームがあり一気に全てを
紹介はできないので今回は、変数と関数について紹介します。
ここで紹介しているソースは「JavaScriptガイド」からのコピペと
一部は私が手を加えています。
【目次】
はじめに、JavaScriptを便利に試すFirefox
ちょっとJavaScript書いてみようという時にFirefoxのスクラッチパッドが
非常に便利です！
Firefoxメニューから「ツール」→「Web開発」→「スクラッチパッド」で
使えます。
Chromeなど、他のブラウザにも「コンソール」という機能がありますが
複数行書いて、選択した部分のみ実行するなど柔軟に使えるのはFirefoxです。
もしインストールされてない方もJavaScript勉強しようと思うのならFirefoxを
インストールすることをオススメします！
下記の例は、選択した部分のみJavaScriptを実行した場合です。
JavaScriptを実行するとこのように結果が表示されます。
“console.log()”で結果を確認したい場合、Firefoxメニューから
「ツール」→「Web開発」→「開発ツールを表示」でこのような
画面になります。
変数
まずは、変数からです！！
変数のスコープ
gist4174d2b6427fcad010d2f1e36d84713b
変数を”var”で宣言するとif文の外でもその変数を参照することができますが
“let”で宣言すると変数を参照することはできません。
“var”で宣言するとグローバル変数に
“let”で宣言するとローカル変数になるためです。
変数の巻き上げ
私は、この「巻き上げ」を知りませんでした。
gist3f9d953034071c91b9a586c8120d3d20
例に記載されている通り、使う場所よりも後ろで宣言しても
その変数を参照することができます。
気をつけたいのは「例２」で同じ変数名だと後勝ちになることです。
品質の良くないJavaScriptでは、このグローバル変数定義を
あちらこちらにして「例２」のように後勝ちになり、「想定と違う」と
いうことも起こります。
グローバル変数であれば、JavaScriptの先頭にまとめて書くべきです。
データ型の変換
こんなことできるのか？という印象です。
Javascriptは動的型付け言語のため、このような事が可能です。
gist315d8e9927d40881215f2e478b7eb8d9
最初に数値を代入しているのに、その後に文字列を入れても
JavaScript的には、なんも問題ありません。
普通はこんなことしないですが、こんなことができるために
数値を期待していたら、文字列が代入されていて予期しない
動きになるなんて苦い経験もありました。
関数
次は関数編です。
関数のパラメータ
プリミティブなパラメータ（数値など）は値渡しなので
関数内で値を変更しても呼び出し元の値は変わらない。
gist74b5c5a009407a0ba6d0348af20c9ffa
オブジェクトを渡した場合は、値を変更することができます。
gistd446f76e63bc5ed00c4cfc38ac0262ac
再帰アルゴリズム
“foo”関数を呼ぶと、自分を再帰的に呼んで処理し、”i<0″の条件が
trueになると今度は順に抜けるようなイメージとなります。
ソースと出力例を見てくれればわかります。
私は、なぜこの出力になるのか理解するのに結構時間がかかりました。
gistafd3928100195fe4bfe2d3e424062862
短縮形の関数
この場合、８行目よりも１０行目（短縮形）の方がスッキリして見やすいです。
gist40ce29987ca4dd7364aabb9956884654
如何だったでしょうか。
これを参考にして「なぜか動かない」が少しでも減れば非常にうれしいです！！
コメント