30天不间断的文章之旅_函式的基本介绍

哎呀！因为週末打了疫苗，不小心烧了两天醒醒睡睡的，本来说好是30天不间断的文章之旅，断了2天，大家原谅原谅我吧～

那今天要来介绍的是JavaScript里最常见、最常被使用到的函式 Function。 那老样子若有错误或需要补充的地方，也欢迎在下方留言让我知道喔～～～谢谢大家！！

函式的结构

由上面的图可以知道

当我们要宣告一段函式时，需要使用 function 的关键字。后面加上函式的名称，函式可以传入参数，但必须先给予参数一个名称(这里给a)，传入的参数跟参数的名称没有关係，而传入的参数可以是纯值、可以是物件、也可以是另一段函式。函式内可以包裹一段程式码，而範围就是限制在{}内。可以使用 return 回传一段值。{}外可以呼叫函式执行，()内的数值就是参数，会被传入到函式内部使用。
因此我们可以知道，函式是将一或多段的程式码包装起来，可以重複使用也方便维护。

函式定义的方式

函式陈述式函式表达式
（这里介绍常见的两个方式）

1. 函式陈述式

函式陈述式应该是最常见宣告函式的方式

像一开始的範例就是使用这个方式。
使用函式陈述式的方式建立的函式，必须给予函是一个名称，也称为具名函式。在这里的函式名称 aFunction。

2. 函式表达式

let aFunction = function(width, height) { console.log(width, height) return width * height;}console.log(aFunction(3, 4)); // 12

把一段函式透过等号运算值赋予到另一个变数上，这个就是函式表达式，这个方式可以不用帮函式加入名称，因此也称为匿名函式。
那如果我们想要在函式表达式的函式加上名字，可以吗？
ok！是可以这么做的

let aFunction = function anotherFunction(width, height) {  console.log(anotherFunction);  return width * height;}console.log(aFunction(3, 4)); // 12

但是必须注意一个重点，这个 anotherFunction只会在自己的函式区块内有效，也就是说：

let aFunction = function anotherFunction(width, height) {  console.log(anotherFunction); // function  return width * height;}console.log(aFunction(3, 4)); // 12console.log(anotherFunction); //anotherFunction is not defined

跳出自己的函式区块之后，anotherFunction就不存在了。

全域变数与区域变数

什么是全域变数？什么是区域变数？我们透过下面程式码来了解。

var global = '全域变数';function aFunction() {  var global = '区域变数';  console.log(global); //区域变数}aFunction();console.log(global); //全域变数

在上述程式码中，我们可以看到有两个一样的变数名称global，但是一个在aFunction函式外，另一个aFunction函式内。在ES6以前，JavaScript 变数有效範围的最小单位是以 function 做切分的。 因此在aFunction函式外的global是全域变数，而在aFunction函式内的global是属于区域变数。

全域变数是在整份程式码内都有效，而且会被记忆进电脑的记忆体内佔用空间。
但是区域变数只在该函式内有效，当函式执行完，区域变数也随即被清空，记忆体会被释放。也就是说，跳出该函式的範围{}，就无法取得函式内所宣告的变数了。

因此我们试着在 aFunction 内跟外取得 global变数，会发现我们取得了两个不一样的值，这个就是全域变数与区域变数的概念。

Hoisting (提升)

在上一篇变数宣告时，有提到变数会有Hoisting的状况产生，还记得吗？

console.log(myName); // undefinedvar myName = 'Iven';

如果在 var 的变数前加入 console.log()，这个时候并不会出错，则是会跳出 undefined，这表示这个变数在记忆体中已经有一个位置，只不过目前并没有值。

在函式中也是有着 Hoisting 的概念的。

console.log(aFunction);  //undefinedaFunction(); // aFunction is not a functionvar aFunction =  function() {  var global = '区域变数';  console.log(global);}

在函式表达式的 Hoisting 跟变数宣告一样，在函式执行之前，会先在记忆体中加入一个位置，但还没有把函式赋予到指定的变数上，因此会得到 aFunction is not a function的结果。

那函式陈述式呢？
函式陈述式就不一样啰！函式陈述式在创造阶段就会优先载入函式。

aFunction('一个人');function aFunction(people) {  console.log('我是'+people); //我是一个人}

因此，在函式前方直接执行函式也可以运行。

以上是今天介绍的函式的基本观念，当然函式的学问绝对不只这些，还有立即函式、ES6推出的箭头函式，我会再慢慢介绍的。
如果我有写不对的地方，如果我有写错或是有需要补充的，都欢迎大家跟我说喔～
如果觉得我写得不错，很清楚的话也欢迎让我知道喔～
谢谢大家观看