Assignment (การกำหนดค่า)

INFO

การกำหนดค่าใน JavaScript คือการให้ค่ากับตัวแปรหรือคุณสมบัติต่างๆ โดยใช้เครื่องหมาย = ซึ่งเป็นพื้นฐานสำคัญในการเขียนโปรแกรม

Basic Assignment (การกำหนดค่าพื้นฐาน)

การกำหนดค่าพื้นฐานให้กับตัวแปรในรูปแบบต่างๆ ที่ใช้บ่อยในการเขียนโปรแกรม

Variable Assignment (การกำหนดค่าให้ตัวแปร)

การกำหนดค่าให้กับตัวแปรพื้นฐาน โดยใช้ let, const, หรือ var

// การประกาศตัวแปรและกำหนดค่าเริ่มต้น
let score = 10; // ตัวแปรที่สามารถเปลี่ยนค่าได้
const PI = 3.14; // ค่าคงที่ที่ไม่สามารถเปลี่ยนแปลงได้

// การประกาศและกำหนดค่าหลายตัวแปรพร้อมกัน
let x = 1, y = 2, z = 3; // ประหยัดบรรทัดโค้ด แต่อาจทำให้อ่านยากขึ้น

Chained Assignment (การกำหนดค่าแบบลูกโซ่)

การกำหนดค่าแบบลูกโซ่ เพื่อให้หลายตัวแปรมีค่าเดียวกัน ช่วยลดการเขียนโค้ดซ้ำซ้อน

// การกำหนดค่าเดียวกันให้หลายตัวแปร
let x, y, z; // ประกาศตัวแปรก่อน
x = y = z = 5; // กำหนดค่า 5 ให้ทุกตัวแปร
console.log(x, y, z); // แสดงผล: 5 5 5

Assignment Operators (ตัวดำเนินการกำหนดค่า)

ตัวดำเนินการกำหนดค่าแบบย่อ ช่วยให้เขียนโค้ดสั้นลงและอ่านง่ายขึ้น

let num = 5; // กำหนดค่าเริ่มต้น
num += 3; // เพิ่มค่าด้วย 3 (num = num + 3) ผลลัพธ์: 8
num -= 2; // ลดค่าด้วย 2 (num = num - 2) ผลลัพธ์: 6
num *= 2; // คูณด้วย 2 (num = num * 2) ผลลัพธ์: 12
num /= 4; // หารด้วย 4 (num = num / 4) ผลลัพธ์: 3
num %= 3; // หารเอาเศษด้วย 3 (num = num % 3) ผลลัพธ์: 0

Object Assignment (การกำหนดค่าให้ Object)

การกำหนดค่าให้กับ Object ซึ่งเป็นโครงสร้างข้อมูลที่สำคัญใน JavaScript

Basic Object Assignment (การกำหนดค่า Object พื้นฐาน)

การกำหนดค่าให้กับ Object โดยใช้จุด (dot notation) หรือวงเล็บเหลี่ยม (bracket notation)

// สร้าง Object พื้นฐาน
let user = {
  name: "John", // กำหนดค่าเริ่มต้น
  age: 25,
};

// เพิ่มคุณสมบัติใหม่ด้วย dot notation
user.job = "Developer"; // วิธีที่ใช้บ่อยและอ่านง่าย

// เพิ่มคุณสมบัติใหม่ด้วย bracket notation
user["country"] = "Thailand"; // ใช้เมื่อชื่อ property มีเว้นวรรคหรือตัวอักษรพิเศษ

Dynamic Properties (คุณสมบัติแบบไดนามิก)

การกำหนดค่า property แบบไดนามิก ใช้เมื่อต้องการใช้ตัวแปรเป็นชื่อ property

// การใช้ตัวแปรเป็นชื่อ property
let key = "name";
let person = {};
person[key] = "John"; // กำหนดค่าโดยใช้ตัวแปรเป็นชื่อ property

// ฟังก์ชันสร้าง Object แบบไดนามิก
function createUser(key, value) {
  return { [key]: value }; // ใช้ [] เพื่อกำหนดชื่อ property แบบไดนามิก
}
console.log(createUser("id", 1234)); // แสดงผล: { id: 1234 }

Destructuring Assignment (การแยกค่า)

การแยกค่าจาก Arrays และ Objects เพื่อกำหนดให้กับตัวแปรหลายตัวพร้อมกัน

Array Destructuring (การแยกค่าจาก Array)

// การแยกค่าพื้นฐานจาก Array
let [a, b] = [1, 2]; // a = 1, b = 2

// การใช้ rest operator (...) เพื่อเก็บค่าที่เหลือ
let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // แสดงผล: 1
console.log(rest); // แสดงผล: [2, 3, 4, 5]

Object Destructuring (การแยกค่าจาก Object)

// การแยกค่าพื้นฐานจาก Object
let { name, age } = { name: "John", age: 30 };

// การกำหนดชื่อใหม่ให้ตัวแปร
let { name: fullName, age: yearsOld } = { name: "Jane", age: 25 };
console.log(fullName); // แสดงผล: "Jane"

// การกำหนดค่าเริ่มต้นเมื่อไม่มีค่า
let { title = "Guest" } = {};
console.log(title); // แสดงผล: "Guest"

Conditional Assignment (การกำหนดค่าตามเงื่อนไข)

Ternary Operator (ตัวดำเนินการเงื่อนไขแบบสั้น)

// การใช้ ternary operator เพื่อกำหนดค่าตามเงื่อนไข
let age = 20;
let status = age >= 18 ? "ผู้ใหญ่" : "เยาวชน";
console.log(status); // แสดงผล: "ผู้ใหญ่"

Default Parameters (พารามิเตอร์เริ่มต้น)

// ฟังก์ชันที่มีค่าเริ่มต้นของพารามิเตอร์
function greet(name = "ผู้ใช้") {
  console.log(`สวัสดี, ${name}!`);
}

// Object parameters พร้อมค่าเริ่มต้น
function createUser({ name = "ไม่ระบุชื่อ", age = 0 } = {}) {
  return { name, age };
}

Nullish Coalescing Assignment (การกำหนดค่าเมื่อเป็น null หรือ undefined)

// การใช้ ??= operator
let user = { name: "John" };
user.title ??= "ผู้ใช้ทั่วไป"; // กำหนดค่าเมื่อ title เป็น null หรือ undefined
console.log(user.title); // แสดงผล: "ผู้ใช้ทั่วไป"

// เทียบเท่ากับ
user.title = user.title ?? "ผู้ใช้ทั่วไป";

Logical Assignment (การกำหนดค่าแบบตรรกะ)

AND Assignment (&&=)

// การใช้ &&= operator
let x = 1;
x &&= 2; // กำหนดค่า 2 เมื่อ x เป็น truthy
console.log(x); // แสดงผล: 2

let y = 0;
y &&= 2; // ไม่กำหนดค่าเพราะ y เป็น falsy
console.log(y); // แสดงผล: 0

OR Assignment (||=)

// การใช้ ||= operator
let message = "";
message ||= "ข้อความเริ่มต้น"; // กำหนดค่าเมื่อ message เป็น falsy
console.log(message); // แสดงผล: "ข้อความเริ่มต้น"