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 ตัวแปรจะมีขอบเขตเล็กกว่า คือจะอยู่แค่ใน 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);