01204223/js for react

หน้านี้เป็นส่วนหนึ่งของวิชา 01204223

ในการจะเขียน React ได้นั้น เราจำเป็นต้องเข้าใจภาษา JavaScript ระดับหนึ่ง ด้านล่างจะเป็นการแนะนำคุณสมบัติต่าง ๆ พร้อมแบบฝึกหัด

สำหรับคนที่อยากจะรีบ review คร่าว ๆ สามารถอ่านสรุปที่ generated จาก Gemini ได้ที่ JS for React จาก Gemini

เราจะทดลองโค้ด JavaScript ใน Mozilla JavaScript Playground เราจะเขียน JavaScript อย่างเดียว อาจจะขยายช่อง JavaScript ให้ใหญ่ขึ้น ผลลัพธ์จะอยู่ช่อง Console (มุมขวาล่าง)

เมื่อเขียนโค้ดแล้ว ตัว Playground จะรันให้อัตโนมัติเลย ให้ลองพิมพ์คำสั่งต่อไปนี้

console.log("Hello");

ถ้าเห็นข้อความ สามารถเริ่มทดลองทำได้เลย

หมายเหตุ แม้ว่าในการเขียน JavaScript เราสามารถทิ้งเครื่องหมาย ; ได้โดยแทบไม่มีผลอะไร เราจะพยายามเคร่งครัดกับการปิด statement ด้วย ;

อย่างไรก็ตามมีสไตล์ในการเขียน JavaScript อีกหลายแบบ เมื่อมีความเชี่ยวชาญมากขึ้นอาจจะเลือกสไตล์ที่ถูกใจมากกว่านี้ได้

ตัวแปรและขอบเขต

ใน JavaScript ถ้าเราใช้ตัวแปรโดยไม่ประกาศอะไร ตัวแปรนั้นจะมีขอบเขตเป็น global ทำให้อาจจะให้เกิด side effect ที่เราคาดไม่ถึง

ให้ทดลองโปรแกรมต่อไปนี้ แล้วลองดูผลลัพธ์ที่ได้ ให้พยายามอธิบายว่าทำไมได้ผลลัพธ์ดังกล่าว

x = 1;
console.log(x);
function test() {
  total = 0;
  for(x=0; x<10; x++) {
    total += x;
  }
}
test();
console.log(x);
console.log(total);

var และ let

เรามีวิธีการประกาศตัวแปรให้มีขอบเขตสองวิธีคือใช้ var และใช้ let

• การประกาศด้วย var ตัวแปรจะมีขอบเขตภายในฟังก์ชันที่ประกาศ
• การประกาศด้วย let ตัวแปรจะมีขอบเขตเล็กกว่า คือจะอยู่แค่ใน block เท่านั้น (อาจจะเล็กกว่า function ได้)

ให้ทดลองโปรแกรมต่อไปนี้ แล้วลองดูผลลัพธ์ที่ได้ ให้พยายามอธิบายว่าทำไมได้ผลลัพธ์ดังกล่าว

var x = 1;
console.log(x);
function test() {
  var total = 0;
  for(var x=0; x<10; x++) {
    total += x;
  }
  console.log(x);
}
test();
console.log(x);
console.log(total);

ให้ทดลองโปรแกรมต่อไปนี้ แล้วลองดูผลลัพธ์ที่ได้ ให้พยายามอธิบายว่าทำไมได้ผลลัพธ์ดังกล่าว

var x = 1;
console.log(x);
function test() {
  let total = 0;
  for(let x=0; x<10; x++) {
    total += x;
  }
  console.log(x);
}
test();
console.log(x);
console.log(total);

const

นอกจากนี้ เรายังสามารถกำหนดตัวแปรที่แก้ไขไม่ได้ด้วย const ซึ่งจะมี scope แบบ block (เหมือนกับ let

ทดลองโค้ดด้านล่าง

var x;
{
  const x = 100;
  x = 1000;
  console.log(x);
}
x = 1000;
console.log(x);

เทียบกับโค้ดนี้

var x;
{
  const x = 100;
  console.log(x);
}
x = 1000;
console.log(x);

ฟังก์ชัน

ฟังก์ชันเป็นเครื่องมือมาตรฐานในการแบ่งกระบวนการเป็นส่วน ๆ ภาษา JavaScript รองรับการใช้งานฟังก์ชันที่หลากหลายกว่า C/C++ มาก นอกจากนี้ ฟังก์ชันยังเป็นข้อมูลประเภทหนึ่งใน JavaScript (first-class data type) นั่นคือ เราสามารถสร้างฟังก์ชันและส่งฟังก์ชันไปมาได้อย่างสะดวก ทำให้เราสามารถอธิบายการทำงานหลายอย่างได้กว้างขวางมากขึ้น

การประกาศฟังก์ชัน และ anonymous function

ด้านล่างเป็นการประกาศฟังก์ชันในแบบที่เราคุ้นเคย

function square(x) {
  return x*x;
}

console.log(square(100));

ใน JavaScript ฟังก์ชันที่ประกาศแบบนี้ จะสามารถอ้างถึงได้ก่อนที่จะเจอจุดที่ประกาศ ทดลองโค้ดด้านล่าง

console.log(square(100));

function square(x) {
  return x*x;
}

อย่างไรก็ตาม ฟังก์ชันเป็นข้อมูลแบบหนึ่งใน JavaScript ด้วย ทำให้เราสามารถเขียนฟังก์ชัน และกำหนดค่าให้กับตัวแปรต่างๆ ได้ ให้ลองเปรียบเทียบการประกาศแบบแรก กับด้านล่าง

var square = function(x) {
  return x*x;
}

console.log(square(100));

ในรูปแบบนี้ square จะเป็นตัวแปรธรรมดา แต่มีค่าเป็นฟังก์ชัน และสามารถกำหนดค่าให้ใหม่ได้ด้วย

แต่ถ้าเขียนแบบนี้ เราไม่สามารถย้ายการกำหนดค่าให้กับ square ไปด้านล่างได้

console.log(square(100));

var square = function(x) {
  return x*x;
}

Higher-order function: map และ filter

ทดลองฟังก์ชัน map ด้านล่าง

var square = function(x) { return x*x; }

const arr = [1,2,3,4,10,20,30];

console.log(arr.map(square));
console.log(arr.map(function (x) { return x+100}));

ทดลองฟังก์ชัน filter แล filter ร่วมกับ map ดังด้านล่าง

var square = function(x) { return x*x; }

const arr = [1,2,3,4,10,20,30];

console.log(arr.filter(function(x) { return x < 10}));
console.log(arr.filter(function(x) { return x < 10}).map(square));
console.log(arr.filter(function(x) { return x < 10})
               .map(square)
               .map(function(x) { return x + 1000}));

Arrow function

เราสามารถย่อการเขียน function โดยใช้ arrow ได้ นอกจากนี้เรายังสามารถละโค้ดได้อีกหลายแบบ

const arr = [1,2,3,4,10,20,30];

console.log(arr.map(function(x) { return x+100}));
console.log(arr.map((x) => { return x+100}));
console.log(arr.map((x) => x+100));
console.log(arr.map(x => x+100));

เช่นเดียวกับในฟังก์ชัน filter

console.log(arr.filter(function(x) { return x < 10}));
console.log(arr.filter((x) => { return x < 10 }));
console.log(arr.filter((x) => (x < 10)));

การจัดการกับข้อมูล

Destructuring

ทดลองและทำความเข้าใจจากโค้ดตัวอย่าง

const [a,b,c] = [1,2,3,4];
console.log(a,b,c);

const {title, done} = {id:100, title:'Hello', done:false};
console.log(title, done);

Spread

ทดลองและทำความเข้าใจจากโค้ดตัวอย่าง

const arr = [1,2,3,4];
const a2 = [...arr];
const a3 = [...arr,100,200,300];
console.log(a2);
console.log(a3);

ทดลองและทำความเข้าใจจากโค้ดตัวอย่าง

const task = {id: 10, title: 'Play games', done: false}
const task2 = {...task, id: 1000}
const task3 = {...task, done: !task.done}
console.log(task)
console.log(task2)
console.log(task3)