แนวทางปฏิบัติที่ดีที่สุดสำหรับคำสั่งแบบมีเงื่อนไขใน JavaScript
บทความนี้อธิบายแนวทางปฏิบัติที่ดีที่สุดสำหรับคำสั่งแบบมีเงื่อนไขใน JavaScript
YouTube Video
แนวทางปฏิบัติที่ดีที่สุดสำหรับคำสั่งแบบมีเงื่อนไขใน JavaScript
คำสั่ง if เป็นโครงสร้างการควบคุมพื้นฐานในโปรแกรม JavaScript อย่างไรก็ตาม เมื่อโค้ดมีความซับซ้อนมากขึ้น จำนวนคำสั่ง if ก็อาจเพิ่มขึ้น ทำให้โค้ดอ่านยากขึ้น ครั้งนี้ เราจะเจาะลึกถึงแนวทางปฏิบัติที่ดีที่สุดในการออกแบบคำสั่ง if ใน JavaScript ให้เหมาะสม เพื่อเพิ่มความอ่านง่ายและการดูแลรักษา
ทำให้โค้ดง่ายขึ้นด้วยการใช้ Flags
ทำให้เงื่อนไขที่มีตัวเลือกหลายตัวง่ายขึ้นด้วยการใช้ค่า Boolean
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}ตัวอย่างที่ปรับปรุงดีขึ้น
ใช้ Flags เพื่อทำให้เงื่อนไขชัดเจน
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}ทำให้คำสั่งแบบมีเงื่อนไขง่ายที่สุด
เมื่อเงื่อนไขที่ซับซ้อนทำให้การอ่านโค้ดทำได้ยากขึ้น จึงจำเป็นต้องทำให้เงื่อนไขนั้นง่ายขึ้น
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}ตัวอย่างที่ปรับปรุงดีขึ้น
โดยการแยกเงื่อนไขออกเป็นตัวแปรที่มีความหมายเฉพาะ คุณสามารถชี้แจงเจตนาของเงื่อนไขได้ชัดเจนขึ้น
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}ชี้แจงลำดับความสำคัญของตัวดำเนินการเชิงตรรกะ
ในคำสั่ง if ใน JavaScript การเข้าใจผิดเกี่ยวกับลำดับความสำคัญของตัวดำเนินการเชิงตรรกะอาจนำไปสู่พฤติกรรมที่ไม่ต้องการได้
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}ตัวอย่างที่ปรับปรุงดีขึ้น
เมื่อไม่ชัดเจนเกี่ยวกับลำดับความสำคัญของตัวดำเนินการ คุณสามารถใช้วงเล็บเพื่อทำให้ชัดเจนขึ้น
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}การใช้การประเมินแบบยุติทันที (Short-Circuit Evaluation)
JavaScript รองรับการประมวลผลแบบ Short-Circuit สำหรับทั้งตัวดำเนินการ && (AND) และ || (OR) การประมวลผลแบบ Short-Circuit หมายถึงเมื่อผลลัพธ์ของเงื่อนไขถูกกำหนดระหว่างการประเมิน เงื่อนไขส่วนที่เหลือจะไม่ถูกประเมิน
AND(&&): หากด้านซ้ายถูกประเมินว่าเป็นเท็จ ด้านขวาจะไม่ถูกประเมินและค่าของมันจะถูกคืนค่าOR(||): หากด้านซ้ายถูกประเมินว่าเป็นจริง ด้านขวาจะไม่ถูกประเมินและค่าของมันจะถูกคืนค่า
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}ตัวอย่างที่ปรับปรุงดีขึ้น
ในโค้ดนี้ ฟังก์ชัน user?.someComplexFunction() ถูกเรียกใช้งาน แม้ว่า user?.isLoggedIn จะเป็น false
การเข้าใจการประมวลผลแบบ Short-Circuit ช่วยให้คุณหลีกเลี่ยงการคำนวณที่ไม่จำเป็นและเขียนโค้ดที่มีประสิทธิภาพ
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}ลดการใช้งานคำสั่ง else ให้น้อยที่สุด
คำสั่ง else อาจเพิ่มภาระทางความคิดเมื่อพยายามติดตามโค้ด ให้พิจารณาใช้การคืนค่าล่วงหน้าแทน
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}ตัวอย่างที่ปรับปรุงดีขึ้น
ชี้แจงเงื่อนไขด้วยการคืนค่าล่วงหน้า
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}การใช้ตัวดำเนินการแบบ Ternary อย่างเหมาะสม
สำหรับเงื่อนไขที่เรียบง่าย การใช้ตัวดำเนินการ ternary สามารถย่นรหัสของคุณได้ อย่างไรก็ตาม ควรหลีกเลี่ยงการซ้อนหรือการใช้ลอจิกที่ซับซ้อน
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';ตัวอย่างที่ปรับปรุงดีขึ้น
ให้ความสำคัญกับความอ่านง่ายโดยแยกเงื่อนไขออกจากกัน
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}การใช้งานค่าดีฟอลต์และการประเมินแบบยุติทันที
ใช้ค่าเริ่มต้นและการประเมิน short-circuit เพื่อลดการแยกสายและทำให้โค้ดง่ายขึ้น
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}ตัวอย่างที่ปรับปรุงดีขึ้น
ในกรณีนี้ การใช้ตัวดำเนินการเชิงตรรกะช่วยให้กระชับยิ่งขึ้น
1// Good Example
2displayName = user?.name || 'Guest';แยกแยะอย่างเหมาะสมเมื่อควรใช้คำสั่ง switch
เมื่อจำเป็นต้องตรวจสอบหลายเงื่อนไข คำสั่ง switch สามารถช่วยให้เป้าหมายชัดเจนขึ้น
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}ตัวอย่างที่ปรับปรุงดีขึ้น
การใช้คำสั่ง switch สามารถช่วยจัดระเบียบโค้ดได้
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}การใช้คำสั่งป้องกันด้วยเงื่อนไขการออกก่อนล่วงหน้า
Guard Clause คือเทคนิคที่ใช้คำสั่ง if เพื่อลดความลึกซ้อนและออกจากฟังก์ชันก่อนเวลา
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}ตัวอย่างที่ปรับปรุงดีขึ้น
ใช้ Guard Clauses เพื่อลดการซ้อน
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}เขียนความคิดเห็นเพื่อทำให้เจตนาชัดเจน
สำหรับเงื่อนไขซับซ้อนหรือส่วนที่สำคัญ ให้เพิ่มความคิดเห็นที่กระชับและชัดเจนเพื่อแสดงเจตนาของโค้ด
ตัวอย่างที่ควรหลีกเลี่ยง
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}ตัวอย่างที่ปรับปรุงดีขึ้น
เพิ่มความคิดเห็นเพื่อให้เจตนาชัดเจน
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}สรุป
การใช้งานคำสั่ง if ของ JavaScript อย่างมีประสิทธิภาพสามารถปรับปรุงความอ่านง่ายและการบำรุงรักษาโค้ดได้อย่างมาก
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย