お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

まとめろまとめろー!

変数と配列と大変な壁でした。
次は関数について、です。

関数って何ができるのか?

簡単に言うと、処理の共有化みたいなものです。
同じことをする場合、同じ処理を書くのは非常に効率が悪いのです。
なので、ひとつにしてやってしまおうって事なのです。

関数の書式

function 【関数名】(【引数】)
{
 // ここに処理
 return 【戻り値】
}

↓

// 関数使用例
function priceCng(price)
{
 // データの取得
 var dataLength = price.length;
 var data = "";

 for(i=dataLength-3;i>0;i-=3)
 {
  // 最後から数えて3文字目でカンマを入れる を文字数分ループさせる
  // ここでは一番最後のカンマの処理まで行わず、最後一つ手前までの処理となる
  data = ','+price.substr(i,3)+data;
 }

 // 一番最後のカンマを付与させる処理
 data = price.substr(0,i+3)+data;

 return data;
}

上記の例は、数値を入れると、カンマ区切りしてくれる関数になります。

関数名について

関数名は変数や配列の命名規則と同じく、先頭に数字はダメだったり、予約語も不可です。
何をしたいのかが分かりやすい名前を心がけるのが吉

引数について

引数名もいつもの命名規則がありますのでご注意ください。
ここも【どんなデータが入ってくるのか】が分かるようにするのが吉
引数は複数設定が可能です。
その場合はカンマ区切りで設定することができます。

戻り値について

処理が終わった後、結果等を渡す時はこれを使います。
戻り値については必須ではないので、関数によっては無いものも存在しています。

関数の使い方

関数の作り方は以上です。
続けてその関数の使い方です。

// 戻り値を必要としない場合
【関数名】(【引数】);

// 戻り値が必要な場合
【変数】= 【関数名】(【引数】);

記述が短くて非常に助かるわぁ(г・ω・)г
ではここで簡単に、どういう流れで処理が行われているのかを説明します。


var price = priceCng('10000');
alert(price);

// 関数使用例
function priceCng(price)
{
 // データの取得
 var dataLength = price.length;
 var data = "";

 for(i=dataLength-3;i>0;i-=3)
 {
  // 最後から数えて3文字目でカンマを入れる を文字数分ループさせる
  // ここでは一番最後のカンマの処理まで行わず、最後一つ手前までの処理となる
  data = ','+price.substr(i,3)+data;
 }

 // 一番最後のカンマを付与させる処理
 data = price.substr(0,i+3)+data;

 return data;
}

動作その1 関数を呼び出す

まず 【priceCng関数】を呼び出します。
同時に、【priceCng関数】に【10000】というデータを渡します。

動作その2 関数が動き出す

渡された、【10000】というデータは、設定した【price】という【変数】に格納されます。
なので、渡されたデータを関数内で使う事ができるのです。
処理の詳細は割愛します。

動作その3 関数が値を戻す

なんやかんややって、【10000】が【10,000】に変化しました。
それを【return data】となっている箇所で、【10,000】を戻します。

動作その4 値を受け取る

呼び出しの所に戻ります。
関数から戻されたデータは何もしないと消えてしまいますので
変数に代入します。
これで、一通りの流れはおしまいです。

おまけ

戻り値が設定されていてもそれを必ず変数に入れる必要はありません。
判定処理等の時は【関数のまま記述】し戻り値を直接チェックする方法もあります。

引数の注意点

引数は指定された順番で評価されていきますの。
関数を作って、【何番目はこのデータ】というのが定義されています。
呼び出すときはデータの指定順番に注意しましょう。

また、引数の数を合わせる必要があります。
関数上では引数は4つとした場合、呼び出す時も引数は4つ必要です。
処理の内容次第ですが、エラーや誤作動などの原因となるときがあります。
基本足りない時は、【undefined】として処理されます。


// 引数の指定順番を間違えた場合
function nameAlert1(data1,data2,data3)
{
 var str = 'ドーモ、'+data1+'サン、'+data2+'です。私を一言で表すと'+data3+'です。';
 alert(str);
}

nameAlert1('変態','yourName','うーちゃん'); // ドーモ、変態サン、yourNameです。私を一言で表すとうーちゃんです。

// 引数がタリナーイ時
function nameAlert2(data1,data2,data3)
{
 var int = parseInt(data1) + parseInt(data2) + parseInt(data3);
 alert(int);
}
nameAlert2('変態','yourName'); // NaN Not A Numberの略。数字じゃないって怒っているのです。

// どうしても引数が必要でない場合
function nameAlert3(data1,data2,data3)
{
 var str = 'ドーモ、'+data1+'サン、'+data2+'です。私を一言で表すと'+data3+'です。';
 alert(str);
}

nameAlert3('変態','','うーちゃん'); // ドーモ、変態サン、です。私を一言で表すとうーちゃんです。

練習問題的な


はい。恒例の練習問題。今回は軽めかも
  • 1:関数を一つ作成し、引数は3つ、処理内容は引数をalertするものを作ってください。
  • 2:関数を一つ作成し、引数は2つ、処理内容は引数の2つ目のものを戻り値とするものを作ってください。
    そしてそれをalertしてください。
    変数に入れるバージョンと関数戻り値直接参照の2パターンできると二重丸です。