初心者向け JavaScript 関数の使い方と実践例

関数

プログラミングの関数は、与えられた値をもとに、あらかじめ定められた処理を実行し、その結果を返します。

関数を定義する方法は、function キーワード、関数リテラル、Function コンストラクタで定義します。関数の入力を引数、関数の出力を戻り値といいます。

文字通りの，字義通りの

建設者、構築子

リテラルとはソースコード内に値となる、文字列、数字、式を直接記述した定数のことです。

let str = "Hello, World";
let num = 10;

上記の場合、「 Hello World 」や「 10 」のことをリテラルといいます。

クラスのインスタンス生成時に実行される処理のことです。

コンストラクタ名はクラス名と同じ名前となり、戻り値のないメソッドです。

関数宣言で関数を定義するには、function キーワードを使います。

function hello(lang){
    str = "Hello, " + lang;
    return str;
};

console.log(hello("JavaScript"));

関数リテラルを使って定義した関数は、変数に代入したり関数を呼びだす時の引数として指定することができます。また、定義された関数は、名前がないため「無名関数」または「匿名関数」ともいいます。

let hello = function(lang){
    str = "Hello, " + lang;
    return str;
};

console.log(hello("JavaScript"));

関数リテラルによる関数定義は巻き上げられないため、関数を利用するよりも前に関数を定義する必要があります。

hello();
    
const hello = function(){
    console.log("Hello, World");
};

// 結果
ReferenceError: Cannot access 'hello' before initialization

Function コンストラクタを使って、関数を作成する場合は、引数や関数内のプログラムを文字列として定義できます。

Function コンストラクタは、プログラムを文字列として定義できる為、プログラムの内容にってはセキュリティホールが発生します。

そのため、関数定義は関数宣言や関数リテラルを使って作成し、Function コンストラクタはあまり使用しません。

let hello = new Function('lang', 'return "Hello, " + lang;');
console.log(hello("Javascript"));

アロー関数は、無名関数の省略記法で関数リテラルとは次の4つの内容が異なります。

const hello = () => {
    console.log("Hello, World");
};

hello();

即時関数は、関数定義と同時に関数を実行する記法です。

(function() {
    console.log("Hello, World");
})();

(function (js, py){
    console.log(js);
    console.log(py);
})("Javascript", "Python");

(() => {
    console.log("Hello, World");
})();

((js, py) => {
    console.log(js);
    console.log(py);
})("Javascript", "Python");

即時関数の中で定義した変数は、関数の外からは参照できません。

(() => {
    const lang = "Javascript";
    console.log("Hello, World");
})();

console.log(lang); 
// 結果 ReferenceError: lang is not defined

分割代入を使って変数に代入します。

function num(){
    return [1, 2, 3];
}

let [a, b, c] = num();

console.log(a);
console.log(b);
console.log(c);

function hello(data){
    console.log(data["msg"])
}

const obj = { msg: "hello, world" }

hello(obj);