関数を作って遊んでみた！【備忘録】

こんにちは！
今日は、タイトルの通り、JavaScriptを使って、「関数」を作って遊んでみました！

関数とは、ある処理を記述した部品です。
部品を組み合わせることで、1つのアプリケーションやWebサービスは動きます。

例えば、車。
車は、外見だけでは、動きません。エンジンや、ブレーキなどの部品が正常に動かなければ、乗り物の車としては動いてくれません。
(車に詳しい方からしたら、若干、表現がおかしいかもしれないです、すみません...)

私自身、まだまだプログラミング初心者で、JavaScriptの基礎をまだまだ固めきれていないので、テキスト片手に勉強をしています。今日の内容は、関数についてだったのですが、読んで、サンプルコードやってみて、意味はわかるんだけど、正直、「え、わかっちゃって大丈夫？？自分でちゃんと作れるんかなー？？」と思い、関数をいくつか自分で作ってみて、遊んでみました！

ちなみに、テキストを読んでから、テキストを閉じて、遊んだので、これから紹介する関数は、全て、テキストのサンプルコードとは異なります。(似ているものはあります。)

1. 〇〇は美味い！と返す関数

引数として渡した値を〇〇の中に入れて、返します。

function sample1(drink) {
    return `${drink}は美味い！`;
}

let sampleResponse1 = sample1('芋焼酎');
console.log(sampleResponse1);
// 芋焼酎は美味い！ と返ってきます。

2. 年齢によって返す値が変わる関数

引数に渡された値を、if文で条件分岐させて、返ってくる値を変えます。
年齢を指定した条件で比較して、当てはまる年齢範囲の文章を返します。

function sample2(age) {
    if (age >= 18) {
        return `${age}歳は、18歳以上ですので、入場料は、1,500円です。`
    } else if (age >= 9) {
        return `${age}歳は、9歳以上17歳以下ですので、入場料は、1,000円です。`
    } else {
        return `${age}歳は、無料招待の対象です。`
    }
}

let sampleResponse2 = sample2(5);
let sampleResponse2_2 = sample2(25);
let sampleResponse2_3 = sample2(16);
console.log(sampleResponse2);
// 5歳は、無料招待の対象です。
console.log(sampleResponse2_2);
// 25歳は、18歳以上ですので、入場料は、1,500円です。
console.log(sampleResponse2_3);
// 16歳は、9歳以上17歳以下ですので、入場料は、1,000円です。

3. 引数にオブジェクトを渡してみた！！

今度は、引数にオブジェクトを渡してみました。
ちなみに、オブジェクトとは、名前と値を1セットにしたプロパティを持つデータ型のことです。
オブジェクトにも、プロパティの値に関数が入った場合、そのプロパティはメソッドと呼ぶ、など細かく種類が分かれていますが、今回は、通常の名前と値の1セット(プロパティ)で進めて行きます。

以下では、引数に渡したオブジェクトの中のプロパティから、名前(item)と値(price)を取り出して、それらを利用した文章を返してきます。

function sample3(itemObj) {
    return `${itemObj.item}は、${itemObj.price}円です。`
}

let aboutItem = {item: 'MacBook Pro', price: '240,000'}

let sampleResponse3 = sample3(aboutItem);

// ユーザー定義関数sample3の引数には、オブジェクトであるaboutItemを渡している。
console.log(sampleResponse3);
// MacBook Proは、240,000円です。

4. 複数のオブジェクトを引数に渡してみた！！

1つ上の3では、オブジェクトを1つ渡しました。
今回は、いくつか渡してみましょう！
引数にいくつかのオブジェクトを渡し、それぞれのオブジェクトの中のプロパティから名前と値を取り出して、それらを利用した文章が返ってくるようにしてみましょう。

この時、1つ1つオブジェクトを変数宣言して渡すのは面倒なので、引数として渡すオブジェクトを全て配列の要素にしてしまい、その配列をスプレッド構文でささっと渡してしまいましょう！

※スプレッド構文については、こちらで解説しているので、ご覧ください！

function sample4(item1, item2, item3) {
    return `${item1.item}は、${item1.price}円、${item2.item}は、${item2.price}円、${item3.item}は、${item3.price}円です。`
}

let items = [
    {item: 'トマト', price: 98},
    {item: 'キャベツ', price: 158},
    {item: '大根', price: 190}
]

let sampleResponse4 = sample4(...items);
console.log(sampleResponse4);
// トマトは、98円、キャベツは、158円、大根は、190円です。

おわりに

関数やオブジェクトへの理解が浅かったのですが、今回、遊んでみたおかげで少し、理解を深めることができました。
また、何を返そうか考えるのが楽しかったので、難しそうに見える関数への印象が変わり、仲良くなれそうな気がしました。
ぜひ、皆さんも、「理解が浅いな」と感じる文法で遊んでみてはいかがでしょうか？？

もし、間違っている点や補足などございましたら、コメント頂けますと、助かります！！

お読み頂き、ありがとうございました！

参考文献

以下のテキストで勉強しました。
柳井政和著 『JavaScript[完全]入門』(2021)