---
title: 20200805 Astro camp javascript 泰安老師
tags: Astro Camp, javascript, function
---
# 20200805 Astro camp javascript 泰安老師

變數只有在第一次宣告的時候需要用let
第二次之後就不用了

let x = 10;
let y = "100";

let userName = "John";
let greeting = "Hello, " + userName + ", how are you.";
let greeting2 = `Hello, ${userName}, how are you.`;

x = 999;
y = `test`; // grave, backtick

let z = x + y;
console.log(z);

## var 跟 let 的差別

如果用var，會讓在block裡的變數去汙染到外面的語法。
(用var在宣告變數時，範圍的概念較模糊，而let較明確)
在function裡用var宣告變數，就只會在fuction裡拿到。
let 是較新的語法，較舊的瀏覽器不支援。

function bar(x) {
  for (var j = 0; j < x; j++) {
    // 1. 拿得到 j
  }
  // 2. 拿得到 j
}
// 3. 拿不到 j

function bar(x) {
  for (let j = 0; j < x; j++) {
    // 1. 拿得到 j
  }
  // 2. 拿不到 j
}
// 3. 拿不到 j

function bar(x) {
  for ( j = 0; j < x; j++) {
    // 1. 拿得到 j
  }
  // 2. 拿得到 j
}
// 3. 拿得到 j

^ 可怕 別用！
## 變數提升
用javascript宣告變數時：
`var userName = "John Doe"`
事實上做了兩件事：

//var userName;//

console.log(userName);

var userName; //先宣告一個變數，並把宣告變數的行為放在檔案的最上面！

userName = "John Doe"; // 接下來再指派值給他

所以在這個情況中，運行後，不會噴錯，但會噴undified!

下面會動，function後面接名字時，整個function會被拉到檔案最上面設定！

baz(1000)

// a lot of codes

function baz(x){
  var amount, total, qty;

  //do something
  amount = 100;
  console.log(amount + x)
}

## 函式(像販賣機)
函示只能有一個回傳值，一旦回傳就不會往下跑了，Ruby 的 方法最後一行就是回值，Javascript，要手動打出return，說要回傳甚麼。
### JS function跟Ruby method的差別

Ruby內 所有的method都隸屬於某個物件，而function是自由的！可以把function指定給任何的東西，也可以放在任何符合語法的地方

### 設定function的方式有三種
1. 設定有名字的function

putInPot('beef')
   
  function putInPot(x) {
    console.log(`${x} in pot`)
  }

2. 指定名字給無名function

let lalala = function (x) {
  console.log(`${x} in pot`)
}

3. 用胖火箭(箭號函式)

// ES6
let addOne = function(x) {return x + 1}
// 1. function拿掉把箭號放在原括號跟花括號中間
// 2.若傳進來的參數只有一個，則圓括號可以省略
let addOne2 = x => {x + 1}
// 若有兩個參數則圓括號不能省略
let addOne = (x, y) => {x +  y + 1}
// 3.若function body只有一行，且

### 高階函式(處理函式的函式)
簡化下面的code

putInPot('beef');
putInPot('water');
console.log('I make dinner with beef')

boomboom('chicken')
boomboom('coconut');
console.log('I make dinner with chicken')

function putInPot(x) {
  console.log(`${x} in pot`)
}

function boomboom(x) {
  console.log(`cooking ${x}`)
}

仔細看看會發現就是我丟了(一個材料給putInPot)兩次，然後console.log一次，再丟了(一個材料給boomboom)兩次，然後console.log一次，形式幾乎一模一樣，設定一個高階函式(cook)來處理吧！

cook('beef', 'water', putInPot);
cook('chicken', 'coconut', boomboom);

function cook(i1, i2, f) {
  f(i1)
  f(i2)
  console.log(`I make dinner with ${i1}`)
}

function putInPot(x) {
  console.log(`${x} in pot`)
}

function boomboom(x) {
  console.log(`cooking ${x}`)
}