JavaScript 基礎編 Vol.2

JavaScript備忘録 Vol.2

目次

• 関数
• 引数
• return
• 関数式

今回もJavaScriptの記事になっています。

関数

関数はJavaScriptの基本的な構成要素のひとつです。

JavaScriptの処理__つまり、タスクや値計算を実行する文の集まりです。

まずは書き方

function ○○(){  //○○は関数名
  //処理の集まり
};

こんな感じで書いていきます。

function ○○ として関数名を宣言し、(){}と続け、必要であれば()内に引数、{}内にこの関数で行う処理内容を記述していきます。

では例文

function line(){ 
  console.log('---------------');
  console.log('---------------');
  console.log('---------------');
}

関数名をlineとし、コンソールに---------------と出力してね、って処理です。

難しくないですよね！

これだけの説明だとじゃあこれどこでどういう目的で使用するん？

ってなってると思います。

次見てってみましょう！

引数

まずは例文

function line(message){
  console.log('---------------');
  console.log(`--${message}--`);
  console.log('---------------');
}
line('1st Message');
console.log('1st Take');
console.log('2nd Take');
line('2nd message');
console.log('3rd Take');
console.log('4th Take');
line('3rd message');

関数の呼び出しは

関数名();とします。

ちなみに実行結果は

では見ていきましょう

1行目

function line(message){

6, 9, 12行目

line('1st Message');

line('2nd Message');

line('3rd Message');

これらのline()の()内が引数になります。

もうちょっと細かく説明すると

1行目

function line(message){ //仮引数

6行目

line('1st Message'); //実引数

って言ったりします。

9, 12行目も同じく実引数です。

仮引数については何を入れてもokです。

例えば

function line(text){ //textに変更
  console.log('---------------');
  console.log(`--${text}--`); //textに変更
  console.log('---------------');
}

としても同じ結果が出力されます。

実引数を変えると出力結果を変えることができます。

line('1st Message');
console.log('1st Take');
console.log('2nd Take');
line('2nd message chenge'); //chengeを追加
console.log('3rd Take');
console.log('4th Take');
line('3rd message');

こんな感じですね

関数を一つ用意しておけば複数箇所で呼び出して同じ処理をすることが・・・

・・・・・・できます・・・。

・・・・・(^○^)

chengeじゃなくてchangeじゃ・・・スペル間違って・・・

スクショ取り直したくない・・・

ごめんなさい

return

次はreturnです。

読んで時の如く、戻す！

戻り値ってやつですね

ここはサクッと

function sum(a, b, c){
  return a + b + c;
}

関数の中で、return a + b + c;となっています。
これは単純にa + b + cの値を返してね、って記述になります。
あとこんな感じで関数内でreturnを使用した場合にはそこで処理を終了してねということにもなります。

if(){
  return;
}else{
  console.log('');
}

もちろんこんな感じでif文の中でも使用することができるのですが、

この場合はifの時は何も処理しない

みたいな使い方もできます。

関数式

ここまで見てきた関数を定義することを関数宣言といいます

最後は関数式、関数を定数に代入していきます。

では例文

const sum = function(a, b, c){
  return a + b + c;
};

const total = sum(1,2,3) + sum(3,4,5);
console.log(total);

こんな感じですね。

sumという定数にa + b + cの値を返す関数を代入しています。

呼び出し方は

sum(1, 2, 3);

のように定数(実引数, 実引数...)となります。

実行結果は

因みに今回の例文のように関数名に名前がついていないものを無名関数なんて呼んだりします。

今回はここまで

次回は・・・まだまだJS！

それではまた次回！