関数のあれこれ #JavaScript

関数の実引数へのアクセス

function doit(a, b, c) {
  console.log(arguments.length);
  console.log(arguments[0], arguments[1], arguments[2]);
}

doit(1);

再帰関数

再帰関数とは関数内部で自身を呼び出す関数。
再帰関数が常に自分自身を呼び続けると、実行は終わらない。
そのため、停止処理を書く必要がある。

今回はreturn 1が停止処理になっている。

function loop(n){
  if (n != 0){
    return n * loop(n-1);
  }
  else{
    return 1;
  }
}

loop(5); //5 * 4 * 3 * 2 * 1
//120

スコープ

グローバルスコープ
関数スコープ
各ウィンドウ（タブ）、各フレーム（iframe）ごとにグローバルスコープがある。詳細は変数のところにあるので割愛。

シャドーウィング

スコープの小さい、同名の変数でスコープの大きい変数を隠すこと。バグの要因になる。

const n = 1;
function f() {
  const n = 4;
  console.log(n);
}
//4

コールバック関数

関数の引数には関数が渡せる。これを利用して
「ある特定の処理が終わったっら、引数に渡した関数の処理を実行する」のような処理のフローを制御することができる。

このとき引数に渡される関数のことを、「コールバック関数」という。

処理の制御は非同期処理の場合などで利用される.
その場合promiseなどに置き換えられることが多い。

//コールバックを呼ぶ関数
function call(callback) {
  console.log('come on! callback!');
  callback();
}

//渡されるコールバック関数
var person = function () {
  console.log('Im here');
}

call(person);
//'come on! callback!'
//'Im here'

クリックイベントなどもコールバック関数が用いられる。

$('#div').click(function(e) {  
  console.log(e.currentTarget);
  return false;
});

setTimeout関数のような非同期処理の場合にも使われる

要素が0.5秒ごとに動くイメージ。

const div = document.getElementById('js-div');

var a = function(callback) {
  setTimeout(function() {
    div.classList.toggle('is-right');
    callback();
  }, 500);
};

var end = function() {
  setTimeout(function() {
    div.classList.toggle('is-hide');
  }, 1000);
};
a(end());

これをpromise処理に変換すると

var a = function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      div.classList.toggle();
      resolve();
    }, 500);
  });
};


var end = function() {
  return new Promise(function(resolve, reject){
    setTimeout(function() {
      div.classList.toggle('is-hide');
      resolve();
    }, 1000);
  })
};

a().then(end);