# Operators

## Operator คืออะไร ?

คือ ตัวดำเนินการที่จะใช้ร่วมกับตัวถูกดำเนินการ (operand) ตั้งแต่ 1 ตัวขึ้นไป แล้วให้ผลลัพธ์ออกมา

## Arithmetic operators

ใช้งานเหมือนกับการดำนินการทางคณิตศาสตร์ ยกเว้น + ที่สามารถใช้ในการต่อ string เข้าหากันได้

```javascript
let x = 5;
let y = 10;
let hello = "Hello, ";
console.log(x + y); // 15
console.log(y - x); // 5
console.log(x * y); // 50
console.log(y / x); // 2
console.log(hello + "World"); // Hello, World
```

## Relational operators

คือ ตัวดำเนินการที่จะให้ผลลัพธ์เป็นค่า boolean โดยขึ้นอยู่กับผลการเปรียบเทียบระหว่างสองค่า

```javascript
console.log(5 < 10);   // true
console.log(10 <= 10); // true
console.log(5 > 10);   // false
console.log(5 >= 10);  // false
```

## Equality operators

คือ ตัวดำเนินการที่จะให้ผลลัพธ์เป็นค่า boolean โดยขึ้นอยู่กับความเท่ากันระหว่างสองค่า

#### &#x20;1. เปรียบเทียบแบบแปลง type ให้ด้วย

**`==`** ใช้ตรวจสอบว่าทั้งสองค่าเท่ากัน โดยจะพยายามแปลงค่าให้มี type เหมือนกันก่อนการเปรียบเทียบ

```javascript
console.log(10 == 10);   // true
console.log(10 == "10"); // true
console.log(0 == false); // true
console.log(1 == true);  // true
```

**`!=`** ใช้ตรวจสอบว่าทั้งสองค่าไม่เท่ากัน โดยจะพยายามแปลงค่าให้มี type เหมือนกันก่อนการเปรียบเทียบ (เป็นนิเสธของ `==`)

```javascript
console.log(10 != 10);   // false
console.log(10 != "10"); // false
console.log(0 != false); // false
console.log(1 != true);  // false
```

{% hint style="info" %}
**การแปลง type ของ == และ !=**

* ถ้ามีค่า boolean : แปลงค่า boolean เป็น number ก่อน
  * true = 1
  * false = 0
* ถ้าเทียบค่า number กับ string : พยายามแปลงค่า string ให้เป็น number ก่อน เช่น
  * "10" ถูกแปลงเป็น 10
  * “” หรือ "0" ถูกแปลงเป็น 0
  * "-10" ถูกแปลงเป็น -10
    {% endhint %}

#### 2. เปรียบเทียบแบบไม่แปลง type ให้ด้วย

**`===`** ใช้ตรวจสอบว่าทั้งสองค่ามี type **และ**ค่าเหมือนกัน

```javascript
console.log(10 === 10);   // true
console.log(10 === "10"); // false
console.log(0 === false); // false
console.log(1 === true);  // false
```

**`!==`** ใช้ตรวจสอบว่าทั้งสองค่ามี type **หรือ**ค่าต่างกัน (เป็นนิเสธของ `===`)

```javascript
console.log(10 !== 10);   // false
console.log(10 !== "10"); // true
console.log(0 !== false); // true
console.log(1 !== true);  // true
```

{% hint style="success" %}
**ควรใช้** `===` และ `!==` เพื่อจะได้มั่นใจว่าค่าที่ถูกนำมาเปรียบเทียบเป็น type ที่เราต้องการจริง ๆ
{% endhint %}

## Logical operators

คือ ตัวดำเนินการที่ผลลัพธ์จะขึ้นอยู่กับค่าความจริงของตัวที่ถูกดำเนินการทั้งสองตัว

* `!` หมายถึง NOT (นิเสธ)
* `&&` หมายถึง AND (และ)
* `||` หมายถึง OR (หรือ)

#### 1. เมื่อใช้กับค่า boolean

ทั้งสามตัวจะให้ผลลัพธ์เป็นค่า boolean

```javascript
// !
console.log(!true);  // false
console.log(!false); // true
// &&
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false
// ||
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false
```

#### 2. เมื่อใช้กับค่าที่ไม่ใช่ boolean

* `!` จะให้ผลลัพธ์เป็นค่า boolean
* `&&` และ `||` จะให้ผลลัพธ์เป็นค่าใดค่าหนึ่งของตัวที่ถูกดำเนินการทั้งสองตัว

{% hint style="info" %}
**ค่าความจริงของค่าที่ไม่ใช่ boolean**

* ค่า undefined, null, 0, “” และ NaN จะถูกมองเป็นค่าเท็จ (falsy)
* ค่านอกเหนือจากนั้นทั้งหมดจะถูกมองเป็นค่าจริง (truthy)
  {% endhint %}

**`a && b` จะให้ผลลัพธ์ได้ 2 แบบ**

* ถ้า `a` เป็น**จริง** จะได้ผลลัพธ์เป็น `b`
* ถ้า `a` เป็น**เท็จ** จะได้ผลลัพธ์เป็น `a`

```javascript
console.log("Cat" && "Dog"); // Dog  (true && true)
console.log("Cat" && 0);     // 0    (true && false)
console.log(0 && "Cat");     // 0    (false && true)
console.log(0 && null);      // 0    (false && false)
```

**`a || b` จะให้ผลลัพธ์ได้ 2 แบบ**

* ถ้า `a` เป็น**จริง** จะได้ผลลัพธ์เป็น `a`
* ถ้า `a` เป็น**เท็จ** จะได้ผลลัพธ์เป็น `b`

```javascript
console.log("Cat" || "Dog"); // Cat  (true || true)
console.log("Cat" || 0);     // Cat  (true || false)
console.log(0 || "Cat");     // Cat  (false || true)
console.log(0 || null);      // null (false || false)
```

## Assignment operators

เป็นการกำหนดค่าลงไปในตัวแปรโดยจะนำค่าจากฝั่งขวาเข้ามาใส่ในตัวแปรฝั่งซ้าย

```javascript
let x = 10;
x = x + 5;      // Assignment operator
console.log(x); // 15
```

จากตัวอย่างเรากำหนดค่า `x` ไว้เท่ากับ 10 แล้วใช้ assignment operator เพื่อกำหนดให้ตัวแปร `x` มีค่าเท่ากับ `x + 5` ผลลัพธ์ที่ออกมาก็จะได้เท่ากับ 15

#### การเขียนแบบ shorthand

เราสามารถใช้ assignment operator ร่วมกับ operator แบบอื่นได้ เช่น

```javascript
let x = 10;
x += 5;         // Shorthand assignment
console.log(x); // 15
```

{% hint style="info" %}
ศึกษาการเขียนแบบ shorthand เพิ่มเติมได้ที่ <https://www.w3schools.com/js/js_assignment.asp>
{% endhint %}

## Increment and decrement operators

คือ ตัวดำเนินการที่ดำเนินการกับตัวแปรเดียว ซึ่งจะแยกออกเป็น prefix mode และ postfix mode

#### 1. prefix mode (++x, --x)

รูปแบบนี้โปรแกรมจะทำงานโดยการบวกหรือลบค่า `x` ด้วย 1 ก่อนถูกนำไปใช้

```javascript
let x = 10;
let z = ++x;
console.log(x); // 11
console.log(z); // 11
```

#### 2. postfix mode (x++, x--)

รูปแบบนี้โปรแกรมจะทำงานโดยนำค่า `x` ตัวเดิมไปใช้ก่อนแล้วจึงบวกหรือลบด้วย 1 ทีหลัง

```javascript
let x = 10;
let z = x++;
console.log(x); // 11
console.log(z); // 10
```

## แหล่งอ้างอิง 📑

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality#description>" %}

{% embed url="<https://262.ecma-international.org/5.1/#sec-11.9.3>" %}

{% embed url="<https://www.w3schools.com/js/js_assignment.asp>" %}
