LoginSignup
0
0

More than 3 years have passed since last update.

JavaScript 覚えておくべき注意点!(6) メソッド / 関数の書き方と呼び出し方 / 関数と変数の有効範囲の関係を知りましょう / 即時関数

Last updated at Posted at 2019-10-16

★関数のメリットを知りましょう

複雑な手順を纏める

 関数は、複数の文で書かれた命令に名前を付けて、まとめて呼び出せる仕組みです。

読みやすくて再利用しやすいプログラムが書ける

 第二のメリットは、「プログラムが読みやすくなる」ことと、「プログラムを再利用できる」ことです。

始めから用意されている関数も沢山ある

 本当は複雑な手順が必要なプログラムも、関数化することで簡単に利用できるようになっているのです。

kansuu.js
console.log 関数 // コンソール情報を表示
alert 関数 // 警告ダイアログボックスを表示
prompt 関数 // 入力ダイアログボックスを表示
parseFloat 関数 // 文字列を数値に変換
confirm 関数 // 確認ダイアログボックスを表示

始めから用意されている関数の種類はJavaScript メソッドの索引を参照してください。

★関数の書き方と呼び出し方

関数を定義するには、
function の後に関数名を書き、そのブロック {} の中に関数の中で実行したい処理を書きます。
関数の後の()には、必要に応じて引数(ひきすう)を定義します。
引数は関数を呼び出す側から関数中で使用する値を渡す仕組みです。
returnは関数の終了を意味します。returnと同じ行には、呼び出し元に返す「戻り値」を指定することができます。
returnがない場合は関数は最後まで実行され、戻り値が undefinedとなって終了します。

kansuu2.rb

function getResultMsg (com,hum) { 
/* 順番に、function:functionキーワード、getResultMsg:関数名、(com,hum):カンマを区切って引数を指定 */
    行いたい処理
    return result; 
/* 順番に、return:returnキーワード、result:戻り値 */
}

挨拶プログラムを関数化してみる プログラムを書く

kansuu3.js

var name = prompt('名前を入力してください');
greet(name);

function greet(name) {
    var message = 'こんにちは';
    alert(message + name);
    return;
}

★関数と変数の有効範囲の関係を知りましょう

下記の書き込みは、実際間違っている例文です。
変数には、ローカル変数とグローバル変数という違いが乗り越えられない場合があるからです。

kansuu4.js

/* 中略 */

function greet(name) {
    var message = 'こんにちは';
    alert(message + name);
    return;
}

console.log(message);
// messageが定義されていないというエラーになる。

★即時関数

下の関数を使うとグローバル変数をローカル変数に代えることができます。
即時関数を書くには、関数を定義する際の関数名を省略して全体をカッコ「()」で囲み、最後に「()」;を付けます。

kansuu5.js
(function () {
    この中に記述した処理はすぐに実行されます
    この中で宣言した変数はローカル変数となる
})();

参照:
いちばんやさしいJavaScriptの教本

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0