# สรุปแล้ว "this" หมายถึงอะไรใน javascript

หลายคนที่เริ่มเขียนภาษา javascript ใหม่ ๆ คงจะเคยมีปัญหากับ "this" ใน javascript ว่าตกลงมันหมายถึงอะไรกันแน่ ในบล็อกนี้เราจะอธิบาย "this" ให้กระจ่างกัน

อย่างแรกต้องบอกก่อนว่า keyword this ใน javascript เนี่ย ทำตัวแตกต่างจากใน this ในภาษาอื่น ๆ

เพราะว่าโดยส่วนมากแล้ว ค่าของ this จะถูกกำหนดจากว่า function ที่มี this นั้นถูกเรียกใช้อย่างไรในตอน runtime ทำให้แต่ละครั้งที่ฟังก์ชั่นถูกเรียกเนี่ยค่าของ this อาจจะมีค่าที่แตกต่างกันออกไป

เรามาดูการเรียกใช้ this ในแต่ละแบบกัน

## แบบแรกคือ Global Context

หรือการเรียกใช้ this ข้างนอกสุด ไม่ได้อยู่ข้างใน function ใด ๆ

```js
console.log(this === window); // true

var a = 37;
console.log(a); // 37
console.log(window.a); // 37
console.log(this.a); // 37

window.b = 'Hi';
console.log(b); // "Hi"
console.log(window.b); // "Hi"
console.log(this.b); // "Hi"

this.x = 'Hello';
console.log(x); // "Hello"
console.log(window.x); // "Hello"
console.log(this.x); // "Hello"
```

ในที่นี้ this จะมีค่าเท่ากับ window object โดย window object เนี่ยก็คือ Global Object นั้นเอง
ทำให้การ assign ค่าแต่ละแบบ ไม่ว่าจะเป็นการ assign ค่าแบบเป็น global variable เป็น property ของ window object หรือเป็น property ของ this object ล้วนแล้วก็เป็นค่าเดียวกันนั่นเอง

## ใน Function Context

หรือการเรียกใช้ this ข้างใน function ค่าของ this เนี่ยจะขึ้นอยู่กับว่า function นั้นถูกเรียกอย่างไร

```js
var a = 41;

function f1() {
  return this;
}

f1(); // window
f1().a; // 41

var o1 = {
  a: 42,
};
o1.f1 = f1;

o1.f1(); // {a: 42, f1: ƒ} (o1 object)
o1.f1().a; // 42
```

เช่นถ้าเราประกาศฟังก์ชั่น f1 ที่ return ค่า this ออกมาเลย
แล้วเราเรียก f1 ข้างนอกสุดเราจะได้ว่า this มีค่าเป็น window object นั้นเอง

หรือถ้าเรามี o1 object แล้วเรา assign function f1 ให้กับ o1 object แล้วเรียกใช้ f1 ในแบบที่เป็๋น property ของ o1 เราจะได้ค่า this คือ o1 object นั่นเอง

### call(), apply() และ bind()

ซึ่งนอกจากการ assign function เป็น property ของ object ตรง ๆ เองแล้ว เรายังสามารถใช้ method call(), apply() และ bind() ที่เป็น method ที่มีในทุก ๆ function ของ javascript ได้ด้วย

โดย method apply คือการเรียก function นั้นโดยเราสามารถ assign ค่า this เองได้ว่าเป็นอะไร

ตัวอย่างเช่น
เรามี function f1 กับ o1 object เหมือนเดิม

```js
var a = 41;

function f1() {
  return this;
}

f1(); // window
f1().a; // 41

var o1 = {
  a: 42,
};

f1.apply(o1); // {a: 42, f1: ƒ} (o1 object)
f1.apply(o1).a; // 42
```

เราสามารถเรียก function f1 โดยใช้ method apply เพื่อ assign ค่า this ให้เป็น o1 object ได้

โดย method apply สามารถรับ argument ตัวที่ 2 เป็น array ของ function นั้นได้ด้วย ตัวอย่างเช่น

```js
function f2(city, country) {
  return this.firstName + ' ' + this.lastName + ',' + city + ',' + country;
}

const person1 = {
  firstName: 'John',
  lastName: 'Doe',
};

f2.apply(person1, ['Bangkok', 'Thailand']); // 'John Doe,Bangkok,Thailand'

f3 = f2.bind(person1);

f3('Bangkok', 'Thailand');
```

มี function f2 ที่ return string ที่มาจากค่า firstname และ lastname ของ this และค่า city กับ country ที่รับมาเป็น argument ของ function และมี person1 object ที่มี property firstname และ lastname เป็น string เราสามารถเรียก f2 ได้ด้วย method apply โดยส่ง argument ที่ 2 เป็น array ของ argument ที่ f2 จะรับได้เลย

method อีกตัวชื่อ call จริง ๆ แทบจะเหมือนกับ method apply เลย แต่แค่ไม่ได้รับ argument ตัวที่ 2 เป็น array แต่รับแยกเป็นตัว ๆเลย
เช่นจากตัวอย่างที่แล้ว เราสามารถเปลี่ยนจากจากใช้ apply เป็น call ได้แบบนี้

```js
f2.call(person1, 'Bangkok', 'Thailand'); // 'John Doe,Bangkok,Thailand'
```

สุดท้ายคือ method bind จะคล้าย ๆ apply กับ call แต่แทนที่จะทำการเรียก function นั้นเลย จะเป็นการสร้าง function ใหม่ไว้เรียกทีหลังแทน เช่นจากตัวอย่างที่แล้ว เราสามารถ assign ค่าให้ f3 และเรียกใช้ได้ดังนี้

```js
f3 = f2.bind(person1);

f3('Bangkok', 'Thailand');
// 'John Doe,Bangkok,Thailand'
```

### สำหรับกรณี Arrow Function

ค่าของ this จะไม่ได้ขึ้นกับว่า function นั้นถูกเรียกแบบไหน
แต่จะได้รับ this มาจาก parent scope คือได้ this มาจาก parent ตอนที่ตัว arrow function ถูก assign ค่านั่นเอง

ตัวอย่างเช่น

```js
const myFunction = () => {
  return this;
};

myFunction(); // window
```

ในกรณีนี้จะได้ this เป็น window object เช่นเดียวกับ normal function

```js
const myObject = {
  a: 42,
  myMethod: () => {
    return this;
  },
};

myObject.myMethod(); // window
```

ในกรณีนี้ this จะเป็น window object เช่นกันเนื่องจาก myMethod ถูก assign ใน myObject ซึ่งมี this เป็น window object

```js
const myObject = {
  myArrowFunction: null,
  myMethod: function () {
    this.myArrowFunction = () => this;
    return this;
  },
};

myObject.myMethod(); // myObject

myObject.myArrowFunction(); // myObject
```

ในกรณีนี้จะได้ว่า myArrowFunction ถูก assign ค่าใน normal function ชื่อ myMethod ซึ่งมีค่า this เป็น myObject ดังนั้นค่า this ของ myArrowFunction จึงเป็น myObject เช่นเดียวกัน


หลายคนที่เริ่มเขียนภาษา javascript ใหม่ ๆ คงจะเคยมีปัญหากับ "this" ใน javascript ว่าตกลงมันหมายถึงอะไรกันแน่ ในบล็อกนี้เราจะอธิบาย "this" ให้กระจ่างกัน

สรุปแล้ว "this" หมายถึงอะไรใน javascript

# ใช้ React.memo() ให้ฉลาด

หลายคนที่เขียน React คงรู้จักตัว HOC ชื่อ `React.memo()` ในการทำ Memoization ให้กับ Functional Component กันอยู่แล้ว เพื่อไม่ให้ Component นั้นถูก re-render โดยไม่จำเป็น แต่บางคนอาจจะสงสัยว่าทำไม React ไม่ทำ Memoization ให้ทุก Component ไปเลยโดยจำเป็นต้องมีตัว React.memo() แยก หรือทำไมเราไม่ใช้ React Memo กับทุก Component ไปเลยล่ะ ?
ในบล็อกนี้เราจะพูดถึงกรณีที่ควรใช้ React Memo และกรณีที่ไม่ควรใช้ React Memo กันครับ

## ทวนเรื่อง Memoization

หลักการ Memoization นั้นเป็นเทคนิคการทำ Optimization ให้โปรแกรมของเราเพื่อให้โปรแกรมทำงานได้อย่างมีประสิทธิภาพและเร็วขึ้น ด้วยการเก็บผลการคำนวณ (Computation results) ไว้ใน cache และดึงผลการคำนวณนี้ออกมาใช้ในครั้งต่อไปที่มีการคำนวณแบบเดิมแทนที่จะต้องคำนวณใหม่

### ตัวอย่างการทำ Memoization ในภาษา Javascript

สมมุติเราต้องการหาตัวเลขลำดับที่ nth ใน [Fibonacci Sequence](https://www.mathsisfun.com/numbers/fibonacci-sequence.html) เราสามารถเขียน Recursive function ได้ตามนี้

```js
const fib = (n) => {
  if (n <= 1) return 1;
  return fib(n - 1) + fib(n - 2);
};
```

สมมุติเราต้องการหาตัวเลขลำดับที่ 5 โดยการเรียก `fib(5)` ตัวฟังก์ชั่นจะถูกเรียกแบบ recursive ดังแผนภาพนี้

![](https://user-images.githubusercontent.com/6850971/172275432-646e42d6-7ba7-42c2-bd0c-b3a6fd2463c4.png)

จะสังเกตุได้ว่า `fib(0), fib(1), fib(2) and fib(3)` ถูกเรียกอยู่หลายครั้ง ทำให้เกิดการคำนวณซ้ำแบบเดิมโดยไม่จำเป็น เราสามารถแก้ปัญหานี้ได้ด้วยการทำ Memoization โดยเปลี่ยนการ implement ตัวฟังก์ชั่น fib เป็นดังนี้

```js
const fib = (n, memo) => {
  memo = memo || {};

  if (memo[n]) return memo[n];

  if (n <= 1) return 1;
  return (memo[n] = fib(n - 1, memo) + fib(n - 2, memo));
};
```

สังเกตได้ว่าเราจะมีการเพิ่ม memo object ขึ้นมาเพื่อเป็น cache และเมื่อเจอลำดับที่ n ซ้ำ แปลว่า `memo[n]` ได้ถูกคำนวณไปแล้ว เราก็จะ return ค่าที่เก็บเอาไว้เลยโดยไม่ต้องคำนวณอีกรอบ

## หลักการของ React.memo()

React.memo() เป็น Higher order component (HOC)

```jsx
const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});
```

โดย Component จะถูก re-render ก็ต่อเมื่อ props มีการเปลี่ยนแปลง นั่นหมายความว่าผลลัพธ์ของการ render ครั้งก่อนจะถูก memonize ไว้และแสดงผลเดิม ถ้า props เหมือนเดิม ซึ่งช่วยในเรื่อง Performance Optimization

ซึ่งการเปรียบเทียบ props ล่าสุดกับ props ก่อนหน้านั้น React จะจัดการให้อัตโนมัติ แต่เราก็สามารถเขียน Compare function ได้เองถ้าต้องการ (เช่น การทำ deep object comparison)

```jsx
function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true ถ้า nextProps กับ prevProps เปรียบเทียบแล้วเหมือนกัน
  ถ้าไม่เหมือนกันให้ return false
  */
}
export default React.memo(MyComponent, areEqual);
```

จะเห็นว่า `React.memo()` รับ argument ที่ 2 เป็น Compare function ที่ return ค่า boolean ระบุว่า props ล่าสุดกับ props ก่อนหน้าเหมือนกันหรือไม่

## เมื่อไหร่ควรใช้ React.memo()

เราควรใช้ React Memo ก็ต่อเมื่อ Component นั้นถูก re-render บ่อย ๆ ด้วย props เดิมซ้ำ ๆ ซึ่งจะเกิดได้บ่อยจากการที่ Component นั้นเป็น Child ของอีก Component นึงที่มีการ re-render บ่อย แต่ส่ง props เดิมให้ Child

ตัวอย่างเช่น สมมุติให้เรามี Movie Component

```jsx
function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}
```

ซึ่งถูก render เป็น Child ของ MovieViewsRealtime Component

```jsx
function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <Movie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}
```

โดยสมมุติให้ MovieViewsRealtime นั้นรับ prop ชื่อ views ซึ่งเป็นค่าที่ถูก fetch มาจาก api ทุก ๆ วินาที

```jsx
<MovieViewsRealtime
  views={0}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>
// After 1 second, views is 10
<MovieViewsRealtime
  views={10}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>
// After 2 seconds, views is 25
<MovieViewsRealtime
  views={25}
  title="Forrest Gump"
  releaseDate="June 23, 1994"
/>
```

ซึ่งทุก ๆ ครั้งที่ค่าของ views เปลี่ยน แน่นอนว่า MovieViewsRealtime นั้นจะถูก re-render แต่นั่นทำให้ Movie ถูก re-render ตามไปด้วยเพราะเป็น Child ถึงแม้ props ของ Movie จะไม่เปลี่ยนก็ตาม

กรณีนี้จึงควรใช้ React.memo() ที่ตัว Movie Component

```jsx
function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}
const MemoizedMovie = React.memo(Movie);
```

```jsx
function MovieViewsRealtime({ title, releaseDate, views }) {
  return (
    <div>
      <MemoizedMovie title={title} releaseDate={releaseDate} />
      Movie views: {views}
    </div>
  );
}
```

กรณีนี้ตัว MemoizedMovie จะถูก re-render ก็ต่อเมื่อ props ของมันเปลี่ยนเท่านั้น (title, releaseDate)

## เมื่อไหร่ไม่ควรใช้ React.memo()

กรณีนี้ที่ไม่ควรใช้ React Memo นั้นคือกรณีที่ Component นั้นถูก re-render บ่อย ๆ ด้วย prop ไม่ซ้ำกัน
สมมุติให้ MemoizedMovie รับ views prop ด้วย

```jsx
...
<MemoizedMovie views={views} title={title} releaseDate={releaseDate} />
...
```

กรณีนี้ MemoizedMovie จะถูก re-render ทุกครั้งที่ views เปลี่ยน ซึ่งทำให้ไม่มีประโยชน์ที่ใช้ React Memo แถมยังทำให้ Performance แย่ลงอีกด้วยเพราะจะเกิด Overhead ที่ Compare function ที่เปรียบเทียบ props ทุกครั้งบ่อย ๆ โดยผลลัพธ์ออกมาว่าต้อง re-render ตลอดอีกด้วย

## สรุป

สรุปการใช้ React Memo ได้จาก Rule of thumb ที่ว่า

> Don't use memoization if you can't quantify the performance gains.

คืออย่าใช้ React Memo ไปหมดทุก Component ถ้าลองแล้วไม่ได้ช่วยให้ Performace ดีขึ้น เพราะนอกจากจะไม่ดีขึ้นแล้วยังทำให้ Performance ตกอีกด้วย

## อ้างอิง

> https://www.freecodecamp.org/news/memoization-in-javascript-and-react/

> https://reactjs.org/docs/react-api.html#reactmemo

> https://dmitripavlutin.com/use-react-memo-wisely


หลายคนที่เขียน React คงรู้จักตัว React.memo() กันอยู่แล้ว แต่บางคนอาจจะสงสัยว่าทำไม React ไม่ทำ Memoization ให้ทุก Component ไปเลยหรือทำไมเราไม่ใช้ React Memo กับทุก Component ไปเลยล่ะ ? ในบล็อกนี้เราจะพูดถึงกรณีที่ควรใช้ React Memo และกรณีที่ไม่ควรใช้ React Memo กันครับ

ใช้ React.memo() ให้ฉลาด

ถ้าพูดถึง Design Pattern แล้วปกติเราจะนึกถึง Gang of Four OOP Design Patterns แต่สำหรับ React แล้วเราจะพูดถึง pattern ที่สามารถแก้ปัญหาที่พบได้บ่อย ๆ ในการใช้งาน React ได้อย่างมีประสิทธิภาพ