Javascript 備忘録4＜関数＞

■関数

function a(num) {
    console.log(num);
}
// 上の関数名と同じ
function a(num) {
   return num * 2;
}

→Javascriptの場合は、関数名が被った場合、後に宣言された関数が優先される。

■コールバック関数
→他の関数に渡して実行する関数のこと

// コールバック関数とする
function hello() {
    console.log('hello');
}

function fn(cb) {
// オブジェクトで渡された関数を実行する
    cb();
}
// オブジェクトとしてhelloの関数を渡す
// ()をつけることで関数は実行されるので、渡されただけのhelloは実行されない
// 関数fnの中のcb()にhelloオブジェクトが渡されたことにより、hello関数が実行される
fn(hello);

■thisについて
→呼び出し元を参照することができる

const person = {
    name: 'Mike',
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
// 呼び出し下のpersonのオブジェクトを最初に参照する
// その後、helloを参照する
// helloの中にあるthisはperosnオブジェクトを参照することになっている
person.hello();

// resultにはperson.helloオブジェクトを代入する
// ()がhelloにはついていないので、関数の実行はまだしていない状態
const result = person.hello;

// resultに代入したperson.hellの関数を実行する
// コンソールには「Hello」しか出力されない
// functionそのものを参照し、personを経由していないので、nameが取れない
result();

■bindについて

// nameプロパティがKimと設定された
// その後、this.nameで参照するさきがname: 'Kim'となる
// このオブジェクトの関数は関数aとは別のものとなる
// bindを読んだ時点では関数は実行されない
const b = a.bind({name: 'Kim'});

// コンソールに「hello Kim」となる
b();

■アロー関数について
→ES6以降から使用が可能となった、関数の定義の仕方

// アロー関数を使用する
// ()と{}の間に「=>」を使用する
// 引数が1つの場合は()が不必要となる
const b = name => {
    return 'hello ' + name;
}

// {}内が1行の場合はreturn と{}を省略することができる
// const b = name => 'hello ' + name;

// 関数を実行する
console.log(b('Kim'));

// 引数が2つ以上の時は()を省略することができない
const c = (num1, num2) => {
    return `num1の値は${num1}でnum2の値は${num2}`
}
console.log(c(3, 2));