Day 04 - jS 微基础之ES6函式：function

function（函式）是将程序码包起来重复呼叫使用的object（物件），它使我们省下许多时间，为我们做“可重复利用”的事情。

例如我想在三段句子里分别表示：

1. 1+2的值
2. 分别将两串文字组在一起，如：Hello world!
3. 分别将文字与数字组在一起，如：My age is 37

那我可以这麽写

  <p id="TEST"></p>
  <p id="TEST2"></p>
  <p id="TEST3"></p>
  <script>
    let TEST = sum(1, 2);
    let TEST2 = sum('Hello ', 'world!');
    let TEST3 = sum('My age is ', 37);

    function sum(a, b) {
      return a + b;
    }
    document.getElementById('TEST').innerHTML = TEST;  // 传值到p#TEST
    document.getElementById('TEST2').innerHTML = TEST2; // 传值到p#TEST2
    document.getElementById('TEST3').innerHTML = TEST3; // 传值到p#TEST3
  </script>

执行出的内容分别是：
3
Hello world!
My age is 37

不需要重复的一直撰写“回传a+b”这个动作，这有点像是网页设计中常用的“群组”概念，例如在illustrator中，可以将不同的元素群组起来，复制多个後去改其中固定的某些元素（文字、颜色或特效）。

在ES6中撰写的方法使用了“箭头函式运算式”，所以写法会变成：

  <div id="TEST"></div>
  <div id="TEST2"></div>
  <div id="TEST3"></div>
  <script>
    const sum = (a, b) => a + b;

    let TEST = sum(1, 2);
    let TEST2 = sum('Hello ', 'world!');
    let TEST3 = sum('My age is ', 37);

    document.getElementById('TEST').innerHTML = TEST;
    document.getElementById('TEST2').innerHTML = TEST2;
    document.getElementById('TEST3').innerHTML = TEST3;
  </script>

要注意的是，const仍旧是变数，所以要写在最上面喔，细节可以参考相关文章。

相关文章：

箭头函式

Proper use of const for defining functions

[JavaScript] Javascript 中的 Hoisting(提升)：帮你留位子