【基本を抑える_04】関数 - 独学から始めるWebスキル学習

関数のきほん

javaScriptで関数とは、何かの処理をまとめるために使われ、

その関数を呼び出して、結果を取得するために使用します。

シンプルに呼び出すと「結果」という文字列を返す関数を作りましょう。

イメージとしては、

このように関数を動かすと結果が飛んできます

このように関数に引数を設定して、動かすと結果が飛んできます。

例えば、

引数の値を元に「引数の値はXX」と、返す関数を作ってみましょう。

function sample(hikisu) {
  return '引数の値は'+hikisu;
}

let result = sample('サンプル');
alert(result);

また、引数は複数、設定することもできます。

function sample(hikisu1, hikisu2) {
  return '引数の値は'+hikisu1+hikisu2;
}

let result = sample('サンプル', 'です');
alert(result);

javaScriptの関数は、以下のように引数として値を渡すことができます。

引数の設定方法として、以下の３パターンを押さえましょう。

関数の引数は、使わなくても問題ありません。

function sample() {
  return '引数は使いません。';
}

let result = sample();
alert(result);

関数の引数に値を渡すのは、一般的によく使用されるパターンです。

以下のように、関数に引数を設定して、必要な値を渡して処理を行います。

function sample(hikisu) {
  return '引数は'+hikisu;
}

let result = sample('サンプル');
alert(result);

引数は一般的に値を渡してもらいますが、

渡してもらわない場合のために初期値を設定することができます。

function sample(hikisu='初期値') {
  return '引数は'+hikisu;
}

let result = sample();
alert(result);

javaScriptの関数の中で、変数を使うこともできます。

function sample() {
  //関数の「内側」に変数を使うこともできます。
  let sample = '結果';
  return sample;
}

let result = sample();
alert(result);

関数で変数を扱う方法として、関数の「内側」と「外側」の２パターンがあり、

それぞれで、変数が使える範囲があるので、その範囲を理解しましょう。

変数を関数の「外側」で設定した場合、関数の中と外のどちらでも使うことができます。

function sample() {
  //関数の「内側」に変数を使うこともできます。
  return test;
}

let test = '外側で設定';
let result = sample();
alert(result);

変数を関数の「内側」で設定した場合、関数の中のみで使うことができます。

function sample() {
  //関数の「内側」に変数を使うこともできます。
  let test = '内側で設定';
  return test;
}

let result = sample();
alert(result);

この記事の内容は、

「初心者のためのWeb入門」

のサイトに記載があるので、

そちらを参考にしてください。