Zenn
🐨

JavaScript 関数について

2023/01/14に公開
CSS
HTML
JavaScript
プログラミング
tech

関数について知ろう

関数とは

  • タスクや値の計算を実行する処理の集まり
  • 必要に応じて与えられた入力値に基づいて、何らかの処理を行う、
  • その結果返すこともできる

関数の区分

「標準関数」

  • JavaScriptが標準で用意している関数
    例）
    random関数（０〜１の範囲の乱数を返す）
    round関数（数字を四捨五入）

「ユーザー定義関数」

  • 開発者が自分で関数を定義

関数の定義方法　４種類

  1. function命令で定義する
  2. 関数リテラルで定義する
  3. functionコンストラクターで定義する
  4. アロー関数で定義する

使い分けというよりは色々な書き方があるので、
どの書き方に遭遇しても対応できるようにしておくという観点で学習する！！

例題

  • 四角形の面積を計算する関数
  • 四角形の縦の長さと、横の長さを引数に渡すと、四角形の面積（縦x横）を計算して、
    値を返す関数をつくり、
    作った関数を使って、高さ３m、横幅５mの四角形の面積を求め、
    コンソールに出力する
  • 単位は㎡とする。単位は出力しなくて良い。

→４種類の方法で関数を定義してみます。

⚠️

引数とは

  • 関数の呼び出し元から、関数へ値を渡すときに使う特別な変数

function命令を使おう

構文：function命令

構文
function 関数名(引数1,引数2, …) {
// 任意の処理
return 戻り値
}

補足

  1. 引数とは
    関数の呼び出し元から、関数へ値を渡すときに使う特別な変数
  2. 戻り値とは
    関数から関数呼び出し元へ返す値
function getRectangle(height, width) {
    return height * width;
}

console.log(getRectangle(3,5));

φ(･･

まず四角形の面積を計算する関数をfunction命令で記述する
（）で引数を渡す
引数は関数に渡す特別な変数
{}の中に処理を書いていく
縦＊横で四角形の面積を求める（height * width）
returnで関数の呼び出し元に値を返す

下にconsole.log(getRectangle(3,5));

第1引数の3は高さのheightに渡される
第2引数の5は第2引数のwidthに渡される

計算をしてその値が呼び出し元に返される
返された値はconsole.logで出力される

保存して実行すると、四角形の面積が表示される（15）

関数リテラルを使おう

構文：関数リテラル

構文
function(引数1,引数2,...) {
// 実行する処理
return 戻り値
}

補足
関数名を持たないので「匿名関数」「無名関数」とも呼ばれる

const getRectangle = function(height, width) {
return height * width;
}

getRectangle変数は再代入することが想定されないため
const定数を使う方がベター

そして関数を呼び出して戻り値をconsoleに出力するには

console.log(getRectangle(3, 5));

引数として3と5をカンマ区切りで渡す
保存して実行すると
15
高さ3メートル横幅5メートルの四角形の面積なので15が表示されていればOK！！

functionコンストラクター

構文
const 変数名 = new function (引数1,引数2,...,関数本体の処理);

const getRectangle 
  = new Function('height', 'width', 'return height * width');
console.log(getRectangle(3, 5));

実務ではあまり使わないので記述方だけ知っておく!!

アロー関数を使おう

構文
(引数1,引数2,...) => {
// 実行する処理
// return 戻り値
}

補足
ES2015から書けるようになった記法
「関数リテラル」の省略記法

const getRectangle = (height,width) => {
    return height * width;
}

console.log(getRectangle(3, 5));

コンソールに15が表示されていればOK

アロー関数を使ってシンプルに短く書くことができた◎

演習

  • Aさんが１個100円（税込）のりんごを、13個買いました

  • りんごの単価と値段を関数の引数に渡すと、合計金額を計算して返す関数を作成

  • 作成した関数を呼び出して、Aさんの支払い金額はいくらになるか計算して、コンソールに出力する

  • 補足
    関数の定義方法は、function命令を用いる。

  • 参考
    関数名はprice
    引数　単価の変数名は、unitPrice
    引数　個数の変数名は、n

回答

function price(unitprice, n) {
    return unitPrice * n;
}

console.log(price(100, 13));

コンソールに1300と出力されればOK！

明日は時間たっぷり勉強できる日だから、
Rudy入れるよう頑張りたい！！
だんだん分からない言葉も増えてきて理解に時間かかるけど
コツコツやってこう
パワーーーーー

Discussion