01204223/gemini js for react

ส่วนหนึ่งของวิชา 01204223 เขียนโดย Gemini

บทความนี้สรุปฟีเจอร์สำคัญของ JavaScript (ES6+) ที่จำเป็นต้องรู้ก่อนเริ่มเขียน React โดยจะเปรียบเทียบกับแนวคิดในภาษา C/C++ เพื่อให้เข้าใจได้เร็วขึ้น

Prerequisites:

• ความรู้พื้นฐาน C/C++ (Variables, Loops, Functions, Pointers/References)
• แนะนำให้ลองรันโค้ดตัวอย่างใน js,console หรือ CodeSandbox (เลือก Vanilla JS)

การประกาศตัวแปร: let และ const

ใน C++ คุณต้องระบุชนิดตัวแปร (int, string, bool) แต่ JavaScript เป็น Dynamically Typed (ชนิดข้อมูลเปลี่ยนไปตามค่าที่เก็บ)

ใน Modern JavaScript เราจะไม่ใช้ var แต่จะใช้:

• let: สำหรับตัวแปรที่เปลี่ยนค่าได้ (คล้ายตัวแปรทั่วไปใน C++)
• const: สำหรับค่าคงที่ (คล้าย const ใน C++ แต่มีข้อควรระวังเรื่อง Object)

ตัวอย่างเปรียบเทียบ

C++	JavaScript
int x = 10; x = 20; const int PI = 3.14; // PI = 3.15; // Error	let x = 10; x = 20; // OK const PI = 3.14; // PI = 3.15; // Error: Assignment to constant variable.

ข้อควรระวังสำหรับ React: ใน React เรานิยมใช้ const เป็นหลัก เพื่อรักษาความถูกต้องของข้อมูล (Immutability) จะใช้ let ก็ต่อเมื่อจำเป็นจริงๆ เท่านั้น

Arrow Functions

Arrow Functions เป็นการเขียนฟังก์ชันแบบย่อ ซึ่งนิยมมากใน React Components

Syntax

ใน C++ การประกาศฟังก์ชันจะดูเป็นทางการ:

int add(int a, int b) {
return a + b;
}

ใน JavaScript (Arrow Function):

// แบบเต็ม
const add = (a, b) => {
return a + b;
};

// แบบย่อ (Implicit Return): ถ้ามีแค่บรรทัดเดียว ไม่ต้องใส่ปีกกาและ return
const addShort = (a, b) => a + b;

console.log(add(5, 3)); // Output: 8

ทำไมต้องรู้ใน React?

• ใช้ในการสร้าง Component แบบ Functional
• ใช้ในการจัดการ Events (เช่น onClick={() => handleClick()})

Template Literals (String Interpolation)

ใน C++ การต่อ String กับตัวแปรอาจใช้ std::cout, sprintf หรือ operator + ซึ่งอาจจะยุ่งยาก

JavaScript ใช้ Backticks (`) และ ${} เพื่อแทรกตัวแปร

ตัวอย่าง

const name = "Somchai";
const age = 25;

// แบบเก่า (คล้าย C++ string concatenation)
const greetingOld = "Hello " + name + ", you are " + age + " years old.";

// แบบใหม่ (Template Literal)
const greetingNew = `Hello ${name}, you are ${age} years old.`;

console.log(greetingNew);

Objects และ Classes

ถึงแม้ JavaScript จะมี class (ซึ่งคล้าย C++ Class) แต่ใน React สมัยใหม่ เรามองข้อมูลเป็น Objects (Key-Value pairs) มากกว่า ซึ่งคล้ายกับ struct ใน C แต่ยืดหยุ่นกว่ามาก

Object Literal

const user = {
name: "John",
age: 30,
isAdmin: true,
// Method ใน Object
sayHi() {
console.log(`Hi, I am ${this.name}`);
}
};

// การเข้าถึงข้อมูล
console.log(user.name); // John
console.log(user['age']); // 30
user.sayHi();

Destructuring (การแตกค่า)

ฟีเจอร์นี้สำคัญมากใน React ใช้ในการดึงค่าจาก props หรือ state

Object Destructuring

สมมติมี Object user เหมือนข้อที่แล้ว แทนที่จะเรียก user.name ซ้ำๆ เราสามารถแตกตัวแปรออกมาได้เลย

const user = { name: "John", age: 30, country: "Thailand" };

// C++ ต้องประกาศตัวแปรมารับทีละตัว
// JavaScript ทำแบบนี้ได้เลย:
const { name, age } = user;

console.log(name); // "John"
console.log(age);  // 30
// ตัวแปร country ไม่ได้ถูกดึงออกมา ก็จะไม่เกิดขึ้น

Array Destructuring

ใช้บ่อยใน React Hook (useState)

const numbers = [10, 20, 30];

const [first, second] = numbers;

console.log(first);  // 10
console.log(second); // 20

Spread Operator (...)

ใช้จุด 3 จุด (...) เพื่อ "กระจาย" สมาชิกของ Array หรือ Object ออกมา มีประโยชน์มากในการ copy หรือ merge ข้อมูลโดยไม่กระทบข้อมูลต้นฉบับ (Immutability Concept)

Array Spread

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // เหมือน copy arr1 มาต่อด้วย 4, 5

console.log(arr2); // [1, 2, 3, 4, 5]

Object Spread (สำคัญมากในการ Update State ของ React)

const user = { name: "John", age: 30 };

// สร้าง user ใหม่ โดยเปลี่ยนแค่ age แต่ name เหมือนเดิม
const updatedUser = { ...user, age: 31 };

console.log(updatedUser); // { name: "John", age: 31 }
console.log(user);        // { name: "John", age: 30 } (ค่าเดิมไม่เปลี่ยน)

Array Methods: map และ filter

ใน C++ เรามักใช้ for loop ในการวนลูปข้อมูล แต่ใน React เราเน้นใช้ Functional Programming เพื่อแปลงข้อมูลเป็น UI

map()

ใช้แปลงข้อมูลจากรูปแบบหนึ่ง ไปเป็นอีกรูปแบบหนึ่ง (React ใช้แปลง Array ของข้อมูล -> Array ของ HTML Elements)

const numbers = [1, 2, 3, 4];

// สร้าง array ใหม่ ที่สมาชิกทุกตัวคูณ 2
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

filter()

ใช้คัดกรองข้อมูล (เช่น การลบ item ออกจาก list)

const scores = [50, 80, 40, 90];

// เอาเฉพาะคะแนนที่มากกว่า 60
const passed = scores.filter(score => score > 60);

console.log(passed); // [80, 90]

8. Modules (Import / Export)

ใน C++ เราใช้ #include <header> แต่ใน JavaScript ES6 เราใช้ import และ export เพื่อจัดการไฟล์

file: mathUtils.js

export const add = (a, b) => a + b;
export const PI = 3.14;

// Default export (ส่งออกได้แค่ตัวเดียวต่อไฟล์)
const multiply = (a, b) => a * b;
export default multiply;

file: main.js

import multiply, { add, PI } from './mathUtils';
// multiply คือ default export (ตั้งชื่ออะไรก็ได้ตอนรับ)
// { add, PI } คือ named exports (ต้องชื่อตรงกัน)

console.log(add(1, 2));
console.log(multiply(2, 3));

Async / Await (Asynchronous Programming)

C++ จัดการ Threading ค่อนข้างซับซ้อน แต่ JavaScript เป็น Single-threaded ที่ใช้ Event Loop ในการจัดการงานที่ต้องรอนานๆ (เช่น การดึงข้อมูลจาก Server)

// จำลองการโหลดข้อมูลจาก Server
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data Loaded!");
    }, 2000); // รอ 2 วินาที
  });
};

const main = async () => {
  console.log("Fetching...");

  // รอจนกว่า fetchData จะเสร็จ โดยไม่ Block UI
  const result = await fetchData(); 

  console.log(result);
};

main();

บทสรุปสำหรับนักพัฒนา C++

1. Variable: เลิกใช้ int, string เปลี่ยนมาใช้ const (ส่วนใหญ่) หรือ let
2. Loop: พยายามหลีกเลี่ยง for loop แบบเดิม เปลี่ยนมาใช้ map, filter, reduce
3. Pointer: JavaScript ไม่มี Pointer โดยตรง แต่ Objects และ Arrays จะส่งค่าแบบ Pass by Reference เสมอ
4. Memory: JavaScript มี Garbage Collection อัตโนมัติ ไม่ต้อง delete หรือจัดการ Memory เอง

การเข้าใจพื้นฐานเหล่านี้จะทำให้การเรียนรู้ React (Components, Props, State, Hooks) ราบรื่นขึ้นมาก