関数を使ってみよう

今回は、関数について解説していきます。

関数の使い方

script.jsを以下のように書き換えてください。

script.js

function myFunction() {
    const msg = 'Hello, world!';

    console.log(msg);
}

この時点では、コンソールには何も表示されません。

次に、myFunction();を追加します。

script.js

function myFunction() {
    const msg = 'Hello, world!';

    console.log(msg);
}

myFunction();

コンソールを確認すると、「Hello, world!」と表示されます。

関数は、function 関数名(){}の形で宣言してます。波括弧内に、処理の内容を記述します。

宣言した関数は、関数名()で実行されます。

上記コードでは、myFunction();で宣言した関数を実行しています。

関数は、以下のような書き方もできます。

script.js

const myFunction = () => {
    const msg = 'Hello, world!';

    console.log(msg);
}

myFunction();

こちらはアロー関数という書き方です。

アロー関数は、2015年に策定されたES2015（ES6）から使えるようになりました。

古いコードはfunctionで書かれていますが、新しいコードでは簡潔なアロー関数が使われることが多いです。

functionを使った関数とアロー関数には仕様が異なる点があります。

script.jsを以下のように書き換えてください。

script.js

myFunction();

function myFunction() {
    const msg = 'Hello, world!';

    console.log(msg);
}

functionを使った場合、宣言の前に実行しても問題なく動作します。

以下のコードはエラーになります。

script.js

myFunction();

const myFunction = () => {
    const msg = 'Hello, world!';

    console.log(msg);
}

アロー関数はconstで定義するので、constの仕様上定義前に実行することはできません。

JavaScriptには、thisというものがあるのですが、アロー関数はthisの扱いも異なります。

thisの説明は長くなるので、ここでは省きますが、アロー関数の場合thisに入る値が異なるということは頭に入れておいてください。

このレクチャーでは、現在一般的に使われているアロー関数で解説していきます。

引数

関数には引数を入れることができます。

script.jsを以下のように書き換えてください。

script.js

const x = 10;

const myFunction = (num) => {
    
    const result = num + 5;

    console.log(result);
}

myFunction(x);

コンソールを確認すると、15が表示されます。

括弧()内に引数numを入れて、numに5を足す処理をしています。

myFunction(x);つまりmyFunction(10);を実行すると、numには10が入り計算結果は15になります。

アロー関数では、引数が1つの場合、括弧()を省略することもできます。

script.js

const x = 10;

const myFunction = num => {

    const result = num + 5;

    console.log(result);
}

myFunction(x);

引数はコンマで区切って複数入れることもできます。

script.js

const x = 5;
const y = 4;

const myFunction = (num1, num2) => {
    
    const result = num1 + num2;

    console.log(result);
}

myFunction(x, y);

最初の引数（第一引数）には5、次の引数（第二引数）には4が入り二つを足して9が出力されます。

functionで定義する場合は、以下のように書きます。

script.js

const x = 5;
const y = 4;

function myFunction(num1, num2) {
    
    const result = num1 + num2;

    console.log(result);
}

myFunction(x, y);

戻り値

関数で処理した結果を、戻り値として取得することができます。

script.jsを以下のように書き換えてください。

script.js

const x = 6;
const y = 8;

const myFunction = (num1, num2) =>  {
    
    const result = num1 + num2;

    return result;
}

const sum = myFunction(x, y);

console.log(sum);

コンソールを確認すると、14と表示されます。

returnの行にある値は、関数の処理結果として受け取ることができ、ここではsumに代入しています。

即時関数

関数は呼び出した時に処理を行いますが、呼び出しを行わずに実行させることもできます。

script.js

const x = 6;
const y = 8;

const myFunction = (num1, num2) =>  {
    
    const result = num1 + num2;

    return result;
} // 定義された時点では実行されない

const sum = myFunction(x, y); // ここで実行される

上のコードでは、定義された段階では実行されていませんが、myFunction(x, y);で関数を呼び出した時点で処理が実行されています。

script.js

(() => {
    console.log('すぐに実行されます。')
})();

コンソールを確認すると、このコードが実行されているのが分かります。

このように、呼び出しを行わず実行される関数を、即時関数と言います。

functionを使う場合は、以下のように書きます。

(function() {
    console.log('すぐに実行されます。');
}());

無名関数

即時関数で書いた関数には、関数名がありません。

関数名のない関数を、無名関数と言います。

以前のレクチャーで紹介したコードは、無名関数を使っています。

const array = ['バナナ', 'りんご', 'みかん'];

array.forEach((item) => {
    console.log(item);
});

以下のコードが無名関数の部分です。

(item) => {
    console.log(item);
}

forEachメソッドの引数には、実行する関数が入ります。

array.forEach(実行する関数);

つまりforEachメソッドは、配列の数だけ関数を実行し、その関数の引数（item）には配列の中身が入るということです。

functionで書いた場合は、以下のような書き方になります。

const array = ['バナナ', 'りんご', 'みかん'];

array.forEach(function(item) {
    console.log(item);
});