---
title: JavaScript核心篇 - 表達式、陳述式、
tags:
description:
---

表達式expression、陳述式Statements
---
### 1.什麼是表達式？
:::success
任何有結果的，都可稱為表達式。 :point_right: [Expressions and operators](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#運算式)
:::

#### ==表達式會回傳值==
- 任何純值或變數

1;            // 1
'title';      // 'title'
a = 2;        // 2

- 搭配運算子

console.log(1 === 1);    // true
console.log(1 || 3);    // false
console.log(1 && 3);    // 3

- 執行函式
- 建立函式return一個值，**執行函式也是表達式**。

    function fn() {
      return 1;
    }
    console.log(fn());    // 1

- 函式內**不管有沒有**return，執行函式**都會回傳值**，只是要看回傳的值是不是我們所需要的。

    function fn() {
      return;    // undefined
    }
    console.log(fn());

    function fn() {
                      // undefined
    }
    console.log(fn());

<br>

### 2.什麼是陳述式
:::success
陳述式**不一定是多行的**，其中**也可能混合表達式**。

（一個完整的陳述式結構，會有混用表達式的狀態。例如：if）

:point_right: [Statements & declarations](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements)
:::
#### ==陳述式會執行動作==
- 宣告

    // 變數宣告
    let a = 1;
    const b = 2;
    var c = 3;

    // 函式宣告
    function name(params) {

    }

- 流程控制

    if (條件式) {    

        陳述式或表達式

    };

- if...else是**陳述式其中之一**。
- `()`裡**條件式**也是表達式的一種，區塊`{}`內撰寫陳述式的內容，要放入表達式也是可以的。
- 迴圈

    for (let index = 0; index < array.length; index++) {
      const element = array[index];
    }

- import、export
<br>

### 表達式、陳述式練習

範例：這樣能運行？

if (function () {}) {
  console.log ('1');    // 1
}

---
括號`( )`內的內容，只要有符合**判斷式**，或是**表達式**，`console.log()`就會印出結果。

if (var a = 1) {
  console.log('1');    // 不會運行
}

var a = 1;
if (a = 2) {
  console.log('1');    // 1
}

---
- ++a，**賦值後再回傳**，先把變數A加1後，再賦值給變數A。
- 在`console.log()`裡，變數A再加1，結果是3

let a = 1;
console.log(++a + 1);    // 3

<br>

### 3.函式陳述式

作為**function宣告**使用（定義函式），然後必須要有一個名稱，也稱**具名函式**。

function fn() {
    
};
console.log(fn());

<br>

### 4.函式表達式
建立一個函式，再把函式賦予給變數。

const fn = function() {
};
console.log(fn);

`console.log`回傳變數`fn`的內容，函式是沒有名稱，也稱**匿名函式**。

把程式碼改成

const fn = function fn2() {
};
console.log(fn);


`console.log`回傳變數`fn`的內容，多了函式名稱`fn2`，但是`fn2`作用**僅限於函式作用域內**。
<br>

#### 4-1.立即函式
- 立即函式會在外層加上括號`()`。表示**函式不需呼叫就即刻執行**。
- 立即函式如果**沒有定義名稱，就不容易除錯**。

    (function () {

    })();

- 具名函式在函式區塊內**可被調用**。

    (function fn () {
        console.log(fn);
    })();

    // ƒ fn () {
    //    console.log(fn);
    // }

- 變數宣告在立即函式內層區塊``{}``，所以變數的==作用域==也在立即函式內層``{}``。
- 立即函式常用在==限制函式的作用域==。
- 立即函式也可以==傳遞參數==。

    (function (parameter) {
        console.log(parameter);    // 這是參數
    })('這是參數');

- 立即函式是**表達式**，所以有回傳值，能再賦予給變數。

    let data = (function (parameter) {
        console.log(parameter);
        return parameter;
    })('這是參數');

    console.log(data);    // 這是參數

<br>

#### 4-2.箭頭函式
- 箭頭函式**也是函式表達式**。

    const a = () => {

    };

- 把**立即函式**跟**箭頭函式**結合再一起。

    (() => {
      return '1234';
    })();

    // 回傳1234
    console.log(
      (() => {
        return '1234';
      })()
    );

- 把**立即函式**跟**箭頭函式**結合再一起，用在`if`的**條件式**。
(可以把變數封裝在立即函式，作為判斷式使用)

if ((() => { return '1234'; })()) {
  console.log('這段程式碼可以運行');
}

<br>

---

### 5.運算子

#### 5-1. 一元運算子

一元運算子需要**一個運算元**，位於運算子**之前**或**之後**。

運算元 運算子

或

運算子 運算元

例如： `x++` 或 `++x`
<br>

#### 5-2. 三元運算子

三元運算子，需要**三個運算元**的運算子。
三元運算子，接受兩個運算元為值（表達式），一個運算元為條件式。

條件式 ? 運算元(值1) : 運算元(值2)

條件式為`true`，回傳`運算元(值1)`，否則回傳`運算元(值2)`
<br>

#### 5-3. 等號運算子
將等號右邊的值，**賦予**給左邊的變數。

const a = 1;

等號右邊的值，**賦予**給左邊，**不管等號左邊有沒有接收，都會回傳值**。
- 物件obj已被凍結，`Object.freeze(obj)`。
- `obj.prop = 33`，把33賦予給`obj.prop`但不被接收，並回傳33。
- 再把回傳的33賦予給`let a`。

const obj = {
  prop: 42
};

Object.freeze(obj);

let a = obj.prop = 33;

console.log(a);

**延伸閱讀**
- [運算式與運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#條件（三元）運算子)
- [Object.freeze()](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
<br>
---

### 6.相依性

**如何解題？**

**1.**

console.log(1 < 2 < 3);

- 一元運算子的相依性：**由左至右**。
- `1 < 2`回傳`true`。
- `true < 3`，`true`會轉型1，所以`1 < 3`回傳`true`。

**2.**

console.log(3 > 2 > 1);

- 一元運算子的相依性：**由左至右**。
- `3 > 2`回傳`true`。
- `true > 1`，`true`會轉型1，所以`1 > 3`回傳`false`。

**延伸閱讀**
- [運算子優先序](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
<br>
---

### 7.先回傳or後回傳

**先回傳**

let a = 5;
console.log(a++);    // 5
console.log(a);      // 6

- `a++`，`a`先值賦`5`，再加1，。

---
**後回傳**

let a = 5;
console.log(++a);    // 6
console.log(a);      // 6

- `++a`，先把`a`加1，再賦予給`a`。

**範例：**
- 第三行，`a`先值賦`5`，最後再加`1`。

let a = 5;
console.log(a++ + 1);    // 6
console.log(a);           // 6

**範例：**
- 第三行，a的值先加`1`，再賦予`a`，最後加`1`。

let a = 5;
console.log(++a + 1);    // 7
console.log(a);      // 6

**範例：**
- 第2行，`a`先賦予給`var b`，再`+1`，所以`var b = 2`。
- 第3行，目前`a`的值為`2`， `a * 10`再賦予給`var c`，所以`var c = 20`。

var a = 1;
var b = a++ + 1;
var c = a * 10;
console.log(a);
console.log(b);
console.log(c);