DAY 2
1
Modern Web

# 變數

## 宣告變數

`let``const` 是兩種 Javascript 新的宣告方式， `let``var` 比較類似

`const` 則是定義之後禁止之後修改(常數)

`TypeScript` 也有提供 `let``const` 的宣告方式，下個部分將會解釋為什麼會推薦使用 `let``const`

### Var 宣告

``````var a = 10;
``````

``````function f(){
var message = 'Hello, World!';
return message
}
``````

``````function f(){
var a = 10;
return function g(){
var b = a + 1;
return b;
}
}
``````

``````function f(){
var a = 1;
a = 2;
var b = g();
b =  3;
return b;
function g(){
return a;
}
}

f(); // result 2
``````

``````function f(shouldInitialize: boolean){
if(shouldInitialize){
var x = 10;
}
return x;
}

f(true); // 10
f(false); //undefined
``````

#### Hoisting

``````console.log(f); // undefined

f = function(a){
console.log(a);
}
console.log(f); // functioin  f

console.log(a); // undefined
a = 1;
console.log(a); //
``````

``````var a, f ;

f = function(a){
console.log(a);
}
console.log(f); // functioin  f

console.log(a); // undefined
a = 1;
console.log(a); //
``````

f is undefined not a funciton

### 為什麼不要使用 Var

`````` function sumMatrix(matrix: number[][]){
var sum = 0;
for(var i = 0; i < currentRow.length; i++){
var currentRow = matrix[i];
for(var i =0;i < currentRow.length; i++>){
sum += currentRow[i];
}
}

return sum;
}
``````

### 奇怪的問題

``````for(var i=0;i<10;i++){
setTimeout(function(){console.log(i)}, 100*i);
}
``````

``````10
10
10
10
10
10
10
10
10
10
``````

``````0
1
2
3
4
5
6
7
8
9
``````

``````for(var =0; i< 10; i++){
(function(i){
setTimeout(function(i){console.log(i);}, 100*i);
})(i)
}
``````

### Const 和 Let

#### let

``````let hello = 'hello';
``````
##### Block-scoping

``````function f(input: boolean){
let a = 100;
if(input){
let b = a + 1;
return b;
}
return b; // b 並不存在
}
``````

``````try{
throw 'oh no!';
}catch(e){
console.log('oh well');
}

``````

``````a++;
let a;
``````

`TypeScript` 中對這樣的提前宣告較為寬鬆，你需要使用 `try catch` 來取得錯誤訊息

``````function foo(){
return a;
}

foo(); //會丟出一個錯誤訊息

let a;
``````

``````function f(x){
var x;
var x;
if(true){
var x;
}
}
``````

``````let x = 10;
let x = 20; // Error
``````
``````function f(x){
let x = 100;// Error
}

function g(){
let x = 100;
let x = 120;// Error
}
``````

``````function (condition, x){
if(condition){
let x = 100;
return x;
}
return x;
}

f(false, 0); // returns '0'
f(true, 0);  // returns '100'
``````

``````function sumMatrix(matrix: number[][]){
let sum = 0;
for (let i = 0; i < matrix.length; i++) {
var currentRow = matrix[i];
for (let i = 0; i < currentRow.length; i++) {
sum += currentRow[i];
}
}

return sum;
}
``````

`shadowing` 在攥寫程式碼的時候應該要避免的狀況之一

### Block-scoped variable capturing

``````function theCityThatAlwaysSleeps(){
let getCity;
if(true){
let city = 'Seattle';
getCity = function (){
return city;
}
}

return getCity(); // Seattle
}
``````

``````for(let i=0; i < 10; i++>){
setTimeout(function(){console.log(i)}, i * 100);
}
``````

``````0
1
2
3
4
5
6
7
8
9
``````

#### const

`const` 是另外一種不同的宣告

``````const numLivesForCat = 9;
``````

`const` 宣告的變數是 `immutable`

``````const numLivesForCat = 9;
const kitty = {
name: "Aurora",
numLives: numLivesForCat
};

kitty = {
name: 'Danielle',
numLives: numLivesForCat
}; // Error

// All OK
kitty.name = 'Rory';
kitty.name = 'Kitty';
kitty.name = 'Cat';
kitty.numLives--;
``````

### 1 則留言

0
javascript
iT邦新手 2 級 ‧ 2017-12-11 08:59:25

for(var i =0;i < currentRow.length; i++>){
sum += currentRow[i];
}