01204223/gemini js for react - ประวัติรุ่นแก้ไข

Jittat: /* Object Literal */

2026-01-09T01:23:40Z

Object Literal

Jittat: /* Syntax */

2026-01-09T01:23:02Z

Syntax

Jittat เมื่อ 01:34, 7 มกราคม 2569

2026-01-07T01:34:38Z

Jittat เมื่อ 01:31, 7 มกราคม 2569

2026-01-07T01:31:55Z

Jittat: สร้างหน้าด้วย "= Modern JavaScript for React (สำหรับผู้มีพื้นฐาน C/C++) = บทความนี้สรุปฟีเจอร..."

2026-01-07T01:30:17Z

สร้างหน้าด้วย "= Modern JavaScript for React (สำหรับผู้มีพื้นฐาน C/C++) = บทความนี้สรุปฟีเจอร..."

หน้าใหม่

= Modern JavaScript for React (สำหรับผู้มีพื้นฐาน C/C++) =

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

'''Prerequisites:'''

* ความรู้พื้นฐาน C/C++ (Variables, Loops, Functions, Pointers/References)
* แนะนำให้ลองรันโค้ดตัวอย่างใน [[https://jsbin.com/?js,console](https://jsbin.com/?js,console) JSBin] หรือ [[https://codesandbox.io/](https://codesandbox.io/) CodeSandbox] (เลือก Vanilla JS)

== 1. การประกาศตัวแปร: <code>let</code> และ <code>const</code> ==

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

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

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

=== ตัวอย่างเปรียบเทียบ ===
{| class="wikitable"
! C++ !! JavaScript
|-
| <source lang="cpp">
int x = 10;
x = 20;

const int PI = 3.14;
// PI = 3.15; // Error

</source>
| <source lang="javascript">
let x = 10;
x = 20; // OK

const PI = 3.14;
// PI = 3.15; // Error: Assignment to constant variable.

</source>
|}

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

== 2. Arrow Functions ==

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

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

<source lang="cpp">
int add(int a, int b) {
return a + b;
}
</source>

ใน JavaScript (Arrow Function):

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

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

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

</source>

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

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

== 3. Template Literals (String Interpolation) ==

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

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

=== ตัวอย่าง ===

<source lang="javascript">
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);

</source>

== 4. Objects และ Classes ==

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

=== Object Literal ===

<source lang="javascript">
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();

</source>

== 5. Destructuring (การแตกค่า) ==

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

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

<source lang="javascript">
const user = { name: "John", age: 30, country: "Thailand" };

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

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

</source>

=== Array Destructuring ===
ใช้บ่อยใน React Hook (<code>useState</code>)

<source lang="javascript">
const numbers = [10, 20, 30];

const [first, second] = numbers;

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

</source>

== 6. Spread Operator (...) ==

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

=== Array Spread ===

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

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

</source>

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

<source lang="javascript">
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 } (ค่าเดิมไม่เปลี่ยน)

</source>

== 7. Array Methods: map และ filter ==

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

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

<source lang="javascript">
const numbers = [1, 2, 3, 4];

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

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

</source>

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

<source lang="javascript">
const scores = [50, 80, 40, 90];

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

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

</source>

== 8. Modules (Import / Export) ==

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

=== file: mathUtils.js ===

<source lang="javascript">
export const add = (a, b) => a + b;
export const PI = 3.14;

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

</source>

=== file: main.js ===

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

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

</source>

== 9. Async / Await (Asynchronous Programming) ==

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

<source lang="javascript">
// จำลองการโหลดข้อมูลจาก 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();

</source>

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

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

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

@@ แถว 105: / แถว 105: @@
 <source lang="javascript">
 const user = {
-name: "John",
+  name: "John",
-age: 30,
+  age: 30,
-isAdmin: true,
+  isAdmin: true,
-// Method ใน Object
+  // Method ใน Object
-sayHi() {
+  sayHi() {
-console.log(`Hi, I am ${this.name}`);
+    console.log(`Hi, I am ${this.name}`);
-−
+  }
 };

@@ แถว 51: / แถว 51: @@
 <source lang="cpp">
 int add(int a, int b) {
-return a + b;
+  return a + b;
+}
 </source>
@@ แถว 60: / แถว 60: @@
 // แบบเต็ม
 const add = (a, b) => {
-return a + b;
+  return a + b;
 };

@@ แถว 6: / แถว 6: @@
 * ความรู้พื้นฐาน C/C++ (Variables, Loops, Functions, Pointers/References)
-* แนะนำให้ลองรันโค้ดตัวอย่างใน [[https://jsbin.com/?js,console](https://jsbin.com/?js,console) JSBin] หรือ [[https://codesandbox.io/](https://codesandbox.io/) CodeSandbox] (เลือก Vanilla JS)
+* แนะนำให้ลองรันโค้ดตัวอย่างใน [https://jsbin.com/ js,console] หรือ [https://codesandbox.io/ CodeSandbox] (เลือก Vanilla JS)
 == การประกาศตัวแปร: <code>let</code> และ <code>const</code> ==
@@ แถว 246: / แถว 246: @@
 // จำลองการโหลดข้อมูลจาก Server
 const fetchData = () => {
-return new Promise((resolve) => {
+  return new Promise((resolve) => {
-setTimeout(() => {
+    setTimeout(() => {
-resolve("Data Loaded!");
+      resolve("Data Loaded!");
-}, 2000); // รอ 2 วินาที
+    }, 2000); // รอ 2 วินาที
-});
+  });
 };
 const main = async () => {
-console.log("Fetching...");
+  console.log("Fetching...");
-```
+  // รอจนกว่า fetchData จะเสร็จ โดยไม่ Block UI
-// รอจนกว่า fetchData จะเสร็จ โดยไม่ Block UI
+  const result = await fetchData();
 };
 main();
 </source>

@@ แถว 1: / แถว 1: @@
-= Modern JavaScript for React (สำหรับผู้มีพื้นฐาน C/C++) =
+: ''ส่วนหนึ่งของวิชา [[01204223]] เขียนโดย Gemini''
 บทความนี้สรุปฟีเจอร์สำคัญของ JavaScript (ES6+) ที่จำเป็นต้องรู้ก่อนเริ่มเขียน React โดยจะเปรียบเทียบกับแนวคิดในภาษา C/C++ เพื่อให้เข้าใจได้เร็วขึ้น
@@ แถว 8: / แถว 8: @@
 * แนะนำให้ลองรันโค้ดตัวอย่างใน [[https://jsbin.com/?js,console](https://jsbin.com/?js,console) JSBin] หรือ [[https://codesandbox.io/](https://codesandbox.io/) CodeSandbox] (เลือก Vanilla JS)
-== 1. การประกาศตัวแปร: <code>let</code> และ <code>const</code> ==
+== การประกาศตัวแปร: <code>let</code> และ <code>const</code> ==
 ใน C++ คุณต้องระบุชนิดตัวแปร (<code>int</code>, <code>string</code>, <code>bool</code>) แต่ JavaScript เป็น '''Dynamically Typed''' (ชนิดข้อมูลเปลี่ยนไปตามค่าที่เก็บ)
@@ แถว 42: / แถว 42: @@
 ใน React เรานิยมใช้ <code>const</code> เป็นหลัก เพื่อรักษาความถูกต้องของข้อมูล (Immutability) จะใช้ <code>let</code> ก็ต่อเมื่อจำเป็นจริงๆ เท่านั้น
-== 2. Arrow Functions ==
+== Arrow Functions ==
 Arrow Functions เป็นการเขียนฟังก์ชันแบบย่อ ซึ่งนิยมมากใน React Components
@@ แถว 75: / แถว 75: @@
 * ใช้ในการจัดการ Events (เช่น <code>onClick={() => handleClick()}</code>)
-== 3. Template Literals (String Interpolation) ==
+== Template Literals (String Interpolation) ==
 ใน C++ การต่อ String กับตัวแปรอาจใช้ <code>std::cout</code>, <code>sprintf</code> หรือ operator <code>+</code> ซึ่งอาจจะยุ่งยาก
@@ แถว 97: / แถว 97: @@
 </source>
-== 4. Objects และ Classes ==
+== Objects และ Classes ==
 ถึงแม้ JavaScript จะมี <code>class</code> (ซึ่งคล้าย C++ Class) แต่ใน React สมัยใหม่ เรามองข้อมูลเป็น '''Objects''' (Key-Value pairs) มากกว่า ซึ่งคล้ายกับ <code>struct</code> ใน C แต่ยืดหยุ่นกว่ามาก
@@ แถว 121: / แถว 121: @@
 </source>
-== 5. Destructuring (การแตกค่า) ==
+== Destructuring (การแตกค่า) ==
 ฟีเจอร์นี้สำคัญมากใน React ใช้ในการดึงค่าจาก <code>props</code> หรือ <code>state</code>
@@ แถว 154: / แถว 154: @@
 </source>
-== 6. Spread Operator (...) ==
+== Spread Operator (...) ==
 ใช้จุด 3 จุด (<code>...</code>) เพื่อ "กระจาย" สมาชิกของ Array หรือ Object ออกมา มีประโยชน์มากในการ copy หรือ merge ข้อมูลโดยไม่กระทบข้อมูลต้นฉบับ (Immutability Concept)
@@ แถว 181: / แถว 181: @@
 </source>
-== 7. Array Methods: map และ filter ==
+== Array Methods: map และ filter ==
 ใน C++ เรามักใช้ <code>for</code> loop ในการวนลูปข้อมูล แต่ใน React เราเน้นใช้ '''Functional Programming''' เพื่อแปลงข้อมูลเป็น UI
@@ แถว 239: / แถว 239: @@
 </source>
-== 9. Async / Await (Asynchronous Programming) ==
+== Async / Await (Asynchronous Programming) ==
 C++ จัดการ Threading ค่อนข้างซับซ้อน แต่ JavaScript เป็น Single-threaded ที่ใช้ Event Loop ในการจัดการงานที่ต้องรอนานๆ (เช่น การดึงข้อมูลจาก Server)