JavaScriptの関数について その2
こんばんは
今日はprogateのJavaScriptを配列前までやったのですがいまいち理解できていないので
少し前に戻ってもう一度チュートリアルを繰り返しています。
関数 function()とアロー関数について
まず、関数についてです。
関数といわれてExcelでよく使ってる関数を思い浮かべたのですが、チュートリアルをやっていると何やら普段の使い方と違った使い方をしています。
例えば、
「こけし」「あかべこ」「しゃけ」
この三つの単語を3回出力したいとなったときに何も知らないで手入力しようとすると
console.log"こけし";
console.log"あかべこ";
console.log"しゃけ";
これを10回繰り返すことになります。
JavaScriptの関数をうまく利用できると
const akabeko = function(){ //akabekoに関数を代入
console.log"こけし";
console.log"あかべこ";
console.log"しゃけ";
};
for(i=0; i<10;i++){ //for文で10回繰り返す処理
akabeko(); //関数の呼び出し
}
出力結果
あかべこ
しゃけ
こけし.....10回続く
上の文を書くだけでfor内の数字を変えれば
10回でも100回でも10,000回でも勝手に繰り返してくれます。
1行目の
const akabeko = function(){
の部分ですが、
const akabeko ()=>{
と略すことも可能です。
これはES6っていうバージョンから対応した書き方らしいです。
引数について
引数を受け取る関数を利用することによって
下記のような処理も可能です
引数？？ うぃきぺでぃあには「その外部と値をやりとりするための特別な変数」と書いてありますがいまいち意味が理解できません。
そこでgoogle先生で調べてみるとなんとなくわかってきました。
たとえで説明するとわかりやすいと思うので例えてみます。
例）
イベントで参加者は3枚の色紙を用意して下さい
この時の必要な色紙の枚数を計算するには
f(x)=3x
上のｘがここで言う引数となります。
実際にコードを書いてみます。
const event = (card) => {
console.log(`必要な色紙の枚数は${card * 3}枚です`);
};
event (5);
結果を見ると
「必要な色紙の枚数は15枚です」
と表示されました。 成功です！
また、引数はいくつか指定してあげることが可能です。
その際は
const event = (card,name) => {
console.log(`${name}必要な色紙の枚数は、${card * 3}です`);
};
event (5,"オフ会で");
結果を見ると
「オフ会で必要な色紙の枚数は15枚です」
と表示されました。
最初に引数名を入れるところにカンマで区切って入れて
最後予備さす際にカンマで区切ったデータを入れればその順番通りに出力されます。
もう少し勉強したことがあったのですが、今日は時間も遅いのでそろそろお家へ帰ります。
ここまで読んでいただきありがとうございます。
ps.最近ラーメンばかり食べているせいか寝つきが悪いです。
明日から少し健康的な食事を心がけます。
