การปรับปรุงการทำงานซ้ำๆ ใน JavaScript

บ่อยครั้งที่โปรแกรมเมอร์มือใหม่มักเรียกใช้ฟังก์ชันเดียวกันซ้ำๆ โดยไม่คิดอะไร ทำให้สิ้นเปลืองทรัพยากร

ลองมาดูตัวอย่างกัน สมมติว่า เรามีสตริงที่เก็บเส้นทางไว้:

javascriptlet path = 'img.png';

สมมติว่าเรามีงานที่ต้องตรวจสอบว่า เส้นทางนั้นลงท้ายด้วยนามสกุลไฟล์ .png หรือ .jpg หรือไม่ โปรแกรมเมอร์มือใหม่บางคน อาจเขียนโค้ดแก้ปัญหาดังนี้:

javascriptlet path = 'img.png';

if (path.slice(-4) === '.png' || path.slice(-4) === '.jpg') {
  console.log('+++');
} else {
  console.log('---');
}

มีปัญหาอะไรกับวิธีนี้? ปัญหาคือ เมธอด slice ถูกเรียกใช้สองครั้ง เพื่อทำสิ่งเดียวกัน นี่ไม่ใช่วิธีที่ เหมาะสมแน่นอน

เพื่อการปรับปรุงประสิทธิภาพ เราควรตัดสตริง เพียงครั้งเดียว แล้วบันทึกผลลัพธ์ ลงในตัวแปร จากนั้นจึงค่อยนำ ตัวแปรนั้นไปใช้ต่อ:

javascriptlet path = 'img.png';
let ext  = path.slice(-4);

if (ext === '.png' || ext === '.jpg') {
  console.log('+++');
} else {
  console.log('---');
}

javascriptlet num = 123;

if (String(num)[0] === '1' || String(num)[0] === '2') {
  console.log('+++');
} else {
  console.log('---');
}

javascriptlet date = new Date();

if (date.getDay() === 0 || date.getDay() === 6) {
  console.log('weekend');
} else {
  console.log('weekday');
}

javascriptlet date = new Date();
let res;

if (date.getFullYear() >= 2020 && date.getFullYear() <= 2030) {
  res = 'year ' + date.getFullYear() + ' fits';
} else {
  res = 'year ' + date.getFullYear() + ' doesn't fit';
}

console.log(res)