【JavaScript】変数・関数・引数・戻り値についての備忘録

今回はJavaScriptの変数・関数・引数・戻り値についての備忘録です。

コードエディターはMicrosoftの無料ツール「VSCode」を使用しています。

フロアマップ

変数とデータ型について
関数と引数と戻り値について
1. プログラミングにおいての関数
  1. 関数を定義する。
  2. return演算子が無い場合の結果
2. 関数と引数と戻り値の関係
まとめ

変数とデータ型について

変数とはデータを格納する器で、そのデータの内容によって変数のデータ型が決まります。

データが格納されるまでは変数の型が決まっていない、どんなデータも受け入れる事ができる。
つまりこれが、JavaScriptが動的型付けである理由です。

データ型について

データ型については詳しく解説出来るほどではありませんがJavaScriptには

Number 数値
String　文字列
Boolean　真偽
Undifined　不確定（まだデータが格納されていない）
Null　０（何も無いという事を定義されている）
Symbol　symbol()という関数を定義されている。
Bigint 　大きい数値を格納…？

以上の７つの型があるようです、4.5.6.7については少し特殊な印象を受けますが、私もまだ詳しくわかりません。

変数を宣言する書式

では話を変数に戻しますが、JavaScriptにおいて、変数を定義する為の宣言文は「var、let、 const」の３つがあります。

var name = 'ざんと';
let hobby = 'aquarium';
const age = 18;

JavaScriptで変数を定義する時は、「宣言文　変数名　＝　格納するデータ;」　という書式で定義します。

プログラミングの世界では基本的に「〇〇　＝　▲▲」という書き方をする時は、左側の○○に▲▲という値や、式等を代入（格納）するという意味合いを持ちます。

また、文字列を格納する場合は「シングルクォーテーション」または「ダブルクォーテーション」で文字列を囲みます(‘ざんと’)の部分で、(“ざんと”)でも可。

例えば　age　に格納されたのは数字なのでそのままage = 18という書き方になっております。

こちらはデータ型が数字として扱われているので

const age = 18+5;

という書き方をすれば、age に格納される値は(23)となります。

こちらを例えば

const age = '18'+5;

と書き換えると18が文字列として扱われ、格納される値は（185）となります。

３つの宣言文の違い

それでは「var、let、 const」それぞれの違いを書き出していこうと思います。

var

var は　今でも使用する事は可能ではありますが、使用する方はいない古い宣言文です。

使われなくなった理由は私が勉強した知識でざっくりいうと、使用がおおまかすぎてバグが増える為といった感じです。

ですので、正直覚える必要はほぼありません、こんなのもあるんだなくらいで大丈夫ですし、今後さらに仕様変更で重要性が増さない限り（おそらくその場合はまた新たな宣言文が追加されるはず…）もう使うことは無いと思います。

let

次は let です。

letはまさに変数を宣言する為のキーワードで、一度宣言した変数にあとから違う値を代入する事が出来ます。

例を挙げますと。

let point = 10;
console.log(point); //この時点では　10　と表示される。
point = 10+5;
console.log(point); //この時点では　15　と表示される。

といった感じで後から値を変更する事が出来ます。

値を変更する時には　let　はもう使用しません。
もう一度　let を使用するとそれは一度宣言した変数名を使用した再宣言という形になり、この場合はエラーになります。

ちなみにvarが使用されなくなった理由の一つが、この再宣言が行えてしまうからです。

const

最後にconstです。

letが後から値を変更可能であるのに対して、constは後から値を変更する事は出来ません。

その為constで定義される変数を定数と呼んだりもします。

constで先ほどletで行った処理を行うと…

const point = 10;
console.log(point); //この時点では　10　と表示される。
const = 10+5;
console.log(point); //上書き出来ない為エラーになる。

letと違いがエラーが出ました。

letとconstではどちらを使用するべきか

varは古い宣言文の為置いておくとして、何故letとconstと分かれているのか、もちろん用途として違いはあります。

私の最初の印象としては書き換えが出来る方が便利だし、letの方がいいのでは？と思ってしまいました。
しかしプログラミングで、特に複数人で行う場合は一度定義した物がコロコロと変わるのは、思わぬエラーが生まれる要因となるので好ましくありません。

ですので、基本的にconstで定義できる物は全てconstで定義し、必要最低限のみletを使用するというのが正しいようです。

必要最低限のletというのはconstで定義した場合にエラーが出る所のみといった考えでいいようです。

関数と引数と戻り値について

それでは次に、関数と引数と戻り値についてです。

とまと調査団

一気に３つも！？

そうなんです、関数と引数と戻り値は切っても切れない関係なのです。

プログラミングにおいての関数

関数と聞くと数学を思い浮かべますよね、変数ｘとｙがあってｘの値が決まればｙの値が決まる時にｙはｘの関数である…みたいな

プラグラミングにおいては少しニュアンスが違い、「変数ｘとｙがあってｘの値が決まればｙの値が決まる」という機能を持った物が関数と考えるとわかりやすい気がします。

そういった機能を持った関数がいくつも組み合わさる事によりプログラムは完成するため、関数とはプログラムをプラモデルに見立てたなら、一つ一つのパーツが関数だと言えます。

関数を定義する。

JavaScriptで関数を定義する時は「function」という演算子を使います。

それでは、functionを使用した関数定義の例を記述してみます。

function test(x,y) { // function 関数名(引数1,引数2) {処理を書く} 
console.log(x + y);  // x + yを実行してコンソールに出力するという関数
　return x * y;  //関数内で使えるreturn演算子　
//記述したx * yの実行結果を戻り値として返す。（返り値）
}
 const answer = test(5,6); 　//定義した関数を実行する時は　関数名(); と記述する。
//()の中には引数に入れる値を入力する。
//この時点でコンソールには記述された　x(5) + y(6)の実行結果　11が出力されている。
console.log(answer);
//そして、answerには戻り値であるx(5) * y(6)の結果が返っている為
//コンソールには30が出力される。

この例ではreturn演算子の値を返す。つまり戻り値についても説明する為に、functionで関数を宣言した後にconstを用いて　変数answerにtest関数の戻り値を代入しています。

その代入を行う際に記述された test(5,6);によって、11が出力されていますが、answerに代入されているのは、returnによって記述されているx * yの結果である30という点がポイントですね。

return演算子が無い場合の結果

例えばここで、return演算子をコメントアウト(//ダブルスラッシュを付ける事によりその行を無効化)してみますと…

function test(x,y) { 
console.log(x + y); 
//　return x * y; 　
}
 const answer = test(5,6); 　
console.log(answer);

この実行結果は、「undefined」アンディファインド、値が設定されていない、と帰ってきます。

この結果がエラーでは無く、「undefined」という点もポイントだと思います。

文法などが間違っているわけでは無い為、プログラム自体は走っていますが、実行結果を返すという処理が無い為、answerという変数には何も値が設定されていないという事になります。

関数と引数と戻り値の関係

先ほどの例に基づいて説明致しますと。

testという名前の関数(炊飯器)の中にｘ(米)とy(水)の二つの「引数」があり、引数にはそれぞれ５キロと６リットルのコメと水が入りました、この時点では炊飯器の中の総量は11です。
function test(x,y) {console.log(x + y); ここまでの処理

その後、関数(炊飯器)を使ってxとyを炊いて出来上がったのが３０キロのご飯（戻り値）で、それをanswerというお茶碗に盛る。
return x * y;} const answer = test(5,6); ここまでの部分

なんかお茶碗も出てきましたが、嚙み砕いて考えると関数と引数と戻り値の関係性はこんな感じです、ご飯だけに。

とーま館長

…

まとめ

さて、今回は関数と引数と戻り値についてでした。

本当に基礎の基礎ですが、私は最初ちんぷんかんぷんでしたので記事にまとめてみました。

記事にする事によって自分の中でさらに理解が深まった気がします。

アウトプットは大事ですね。

See the Pen
return演算子 by ざんと (@zanto_kirisame)
on CodePen.

今回のソースコードは一応コードペンにも残してありますので、こちらをいじっていただいても大丈夫です。

この記事をご覧になってくださったプログラミング初心者の方がほんの少しでもなるほど～と思っていただけたら幸いです。

では、良いプログラミングライフを！