More than 3 years have passed since last update.

JS 関数　前編　(JSアウトプット)

Posted at 2020-12-02

##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回はJSの「関数」について学習してきたのでアウトプットしていきます！

##関数とは？
ではまず関数とは何か？

関数とは料理を手伝ってくれる”子供”と考えてください
例えば長男は具材を切るのが得意で次男は食材を洗うのが得意三男は食材を取り出すのが得意
などとイメージしてください

##関数の定義
関数を使うときは定義する必要があります

定義の方法

main.js

function 関数名(仮引数1,仮引数2) {
    //処理
    return returnするもの　//returnは書かなくてもいい
};

関数名は変数と同じルールです
「引数」というのは”具材”です引数は1個でも2個でも3個でもいいです
returnとは戻り値を返すときに使います
引数という”具材”をいれると”戻り値”という結果が返ってきます

例えばこのような関数があったとします

mian.js

function add($add1,$add2) {
    return $add1 + $add2;
};

この関数は二つの値を引数として受け取り戻り値にこの二つの引数を足した値をいれています

##今までの学習とのつながり

メソッド　＝　関数

オブジェクトで学んだメソッド
メソッドも処理をまとめたものですよね？
実はメソッドと関数は同じなんです！
名前は違いますが一緒と考えていいです

たとえばalertというメソッド
これはalert関数と言い換えることもできます

なのでメソッドと関数は同じものと考えていいです

###メソッドの短縮記法
メソッドは短縮して書くことができます

短縮しないで書くと

main.js

const obj = {
    call: function () {
        //処理
    }
};

このように書きます
しかし短縮記法を使うことで以下のようにすっきり書くことができます

main.js

const obj = {
    call() {
        //処理
    }
};

このようにすっきりと書くことができメソッドとプロパティの違いが分かりやすくなりコードも読みやすくなります

##関数を使う
関数を使って処理をさせた後戻り値を変数に保存することやif分などの条件にも使えます

main.js

const add_numbeer = add(5,9);

if (add(5,9,) <= 14) {
    console.log(True);
};

このように書くことができます
JSは関数も「オブジェクト」なので関数を条件にしたりといろいろな使い方ができます
もちろん関数の引数にすることもできます

main.js

console.log(add(5,9));

##Twitterで実践的な関数を書く
ではTwitterの機能のような実践向けの関数を書いていきましょう

Twitterには160文字しかツイートできませんよね？
なので文章が160文字以上かどうかを調べる関数を作ります

まずは引数に分を受け取って戻り値に160文字未満だったらTrue、160よりも上だったらFalseを返す関数です

check.js

function isTweetable(text) {
    return text.length <= 1;
};

実験のために160文字ではなく1文字にしています
では動かしてみましょう

check.js

const text = "hello";

function isTweetAble(text) {
    return text.length <= 1;
};

console.log(isTwettAble(text));

False //結果

このようになりました！
正常に動いていますね！！

##さいごに
最後まで読んでいただきありがとうございました！
次回は「JS関数　後編」です
ではまた！次回で！
Twitterもしています→AtieのTwitter