Function object, NFE

The “name” property

// 函式物件有 name 屬性
function sayHi() {
  alert("Hi");
}
alert(sayHi.name); // sayHi

// 用變數命名也可以
let sayHi = function() {
  alert("Hi");
}
alert(sayHi.name); // sayHi (works!)

// 用預設值的方式有可以
function f(sayHi = function() {}) {
  alert(sayHi.name); // sayHi (works!)
}
f();

// 物件的方法有有 name 屬性
let user = {

  sayHi() {
    // ...
  },

  sayBye: function() {
    // ...
  }

}

alert(user.sayHi.name); // sayHi
alert(user.sayBye.name); // sayBye

// 無法取得名字的情形
// function created inside array
let arr = [function() {}];

alert( arr[0].name ); // <empty string>
// the engine has no way to set up the right name, so there is none

The “length” property

// length 屬性返回參數的長度 rest 不計算在內
function f1(a) {}
function f2(a, b) {}
function many(a, b, ...more) {}

alert(f1.length); // 1
alert(f2.length); // 2
alert(many.length); // 2

// 無參數的函式在回答是的情況出現，有參數的函式無論如何都會被呼叫，返回回答的值。
function ask(question, ...handlers) {
  let isYes = confirm(question);

  for(let handler of handlers) {
    if (handler.length == 0) {
      if (isYes) handler();
    } else {
      handler(isYes);
    }
  }

}

// for positive answer, both handlers are called
// for negative answer, only the second one
ask("Question?", () => alert('You said yes'), result => alert(result));

Custom properties

// 可以加上自製的屬性
function sayHi() {
  alert("Hi");

  // let's count how many times we run
  sayHi.counter++;
}
sayHi.counter = 0; // initial value

sayHi(); // Hi
sayHi(); // Hi

alert( `Called ${sayHi.counter} times` ); // Called 2 times

// 可以用屬性代替閉包變數
function makeCounter() {
  // instead of:
  // let count = 0

  function counter() {
    return counter.count++;
  };

  counter.count = 0;

  return counter;
}

let counter = makeCounter();
alert( counter() ); // 0
alert( counter() ); // 1

// 誰好誰壞? 閉包變數存在在外層函式只有巢狀變數能夠改變，物件屬性可以在外部修改。
function makeCounter() {

  function counter() {
    return counter.count++;
  };

  counter.count = 0;

  return counter;
}

let counter = makeCounter();

counter.count = 10;
alert( counter() ); // 10

Named Function Expression

// function expression
let sayHi = function(who) {
  alert(`Hello, ${who}`);
};

// named function expression
let sayHi = function func(who) {
  alert(`Hello, ${who}`);
};
sayHi("John"); // Hello, John

// 被命名的函式可以在內部被使用，在外部是不能使用的
let sayHi = function func(who) {
  if (who) {
    alert(`Hello, ${who}`);
  } else {
    func("Guest"); // use func to re-call itself
  }
};

sayHi(); // Hello, Guest

// But this won't work:
func(); // Error, func is not defined (not visible outside of the function)

// 在一般情況下我們可以這樣寫，命名的好處是什麼?
let sayHi = function(who) {
  if (who) {
    alert(`Hello, ${who}`);
  } else {
    sayHi("Guest");
  }
};

// 變數指向 function expression 可能會被改變，這時函式會出錯誤。
let sayHi = function(who) {
  if (who) {
    alert(`Hello, ${who}`);
  } else {
    sayHi("Guest"); // Error: sayHi is not a function
  }
};

let welcome = sayHi;
sayHi = null;

welcome(); // Error, the nested sayHi call doesn't work any more!

// 用 named function expression 可以解決這個問題。
let sayHi = function func(who) {
  if (who) {
    alert(`Hello, ${who}`);
  } else {
    func("Guest"); // Now all fine
  }
};

let welcome = sayHi;
sayHi = null;

welcome(); // Hello, Guest (nested call works)

// named function expression 只能用在 function expression，function declaration 沒有。