สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
JavaScript ในฐานะหนึ่งในภาษาการเขียนโปรแกรมที่นักพัฒนาเว็บไซต์ต้องรู้จัก มีคุณสมบัติที่ทำให้เราสามารถเขียนโค้ดได้อย่างรวดเร็วและมีความยืดหยุ่น แต่การเขียนโค้ดให้สั้นและง่ายต่อการอ่านคือศิลปะที่ต้องฝึกฝน เราจะมาพูดถึง JavaScript Shorthands หรือวิธีการเขียนโค้ดแบบย่อ ซึ่งไม่เพียงช่วยลดจำนวนบรรทัดโค้ด แต่ยังช่วยให้โค้ดที่เขียนออกมามีความกระชับและเข้าใจง่ายขึ้น
1. Assignment Operators
ปกติเราเขียนการกำหนดค่าให้กับตัวแปรแบบนี้: `x = x + 10;` แต่ด้วย JavaScript Shorthand เราสามารถทำให้มันสั้นลงไปเป็น `x += 10;` ซึ่งทั้งสองบรรทัดมีผลลัพธ์เหมือนกัน แต่บรรทัดหลังช่วยลดความซ้ำซ้อนของการเขียนโค้ดได้
let x = 5;
// โค้ดแบบเดิม
x = x + 10;
// โค้ดแบบ shorthand
x += 10;
2. Conditional Statements
การเขียน if-else ในบางครั้งอาจทำให้โค้ดดูยาวและซับซ้อน แต่ด้วยการใช้ Ternary Operator เราสามารถเขียนในรูปแบบ shorthand ได้: `let result = (score > 60) ? 'Pass' : 'Fail';` โค้ดนี้จะเช็คว่าถ้าเงื่อนไข `(score > 60)` เป็นจริง ค่าที่จะกำหนดให้กับ `result` คือ `'Pass'`, แต่ถ้าเป็นเท็จค่าที่ได้คือ `'Fail'`.
let score = 75;
let result;
// โค้ดแบบเดิม
if (score > 60) {
result = 'Pass';
} else {
result = 'Fail';
}
// โค้ดแบบ shorthand
result = (score > 60) ? 'Pass' : 'Fail';
3. Function Declaration
การประกาศฟังก์ชันแบบดั้งเดิมอาจจะใช้โค้ดหลายบรรทัด แต่ด้วย Arrow Functions ใน ES6 เราสามารถเขียนประกาศฟังก์ชันในบรรทัดเดียวได้ ตัวอย่าง: `const add = (a, b) => a + b;` ซึ่งการเขียนแบบนี้ยังทำให้การจัดการ `this` ทำได้ง่ายขึ้นอีกด้วย
// โค้ดแบบเดิม
function add(a, b) {
return a + b;
}
// โค้ดแบบ shorthand
const add = (a, b) => a + b;
4. Object Properties
เราเคยเขียนโค้ดในการกำหนดค่าของ object แบบนี้: `const obj = {name: name, age: age};` แต่หากชื่อคุณสมบัติ (property) ใน object เหมือนกับชื่อตัวแปร เราสามารถย่อได้: `const obj = {name, age};` ซึ่งผลลัพธ์เทียบเท่ากัน
let name = 'John';
let age = 30;
// โค้ดแบบเดิม
const obj = {
name: name,
age: age
};
// โค้ดแบบ shorthand
const obj = {name, age};
5. String Concatenation
บางครั้งเราต้องเชื่อมต่อ (concatenate) ข้อความหลายๆ แบบ: `'Hello ' + name + '! You are ' + age + ' years old.';` แต่ Template Literals ใน ES6 ช่วยให้เราทำเช่นนั้นได้ง่ายขึ้นด้วยการใช้ backticks (`` ` ``): `` `Hello ${name}! You are ${age} years old.`; `` ทำให้โค้ดดูเรียบร้อยและง่ายต่อการอ่าน
let name = 'John';
let age = 30;
// โค้ดแบบเดิม
let greeting = 'Hello ' + name + '! You are ' + age + ' years old.';
// โค้ดแบบ shorthand
let greeting = `Hello ${name}! You are ${age} years old.`;
การมีความรู้เกี่ยวกับ JavaScript Shorthands ไม่เพียงแต่ช่วยให้โค้ดที่เราเขียนดูมืออาชีพมากขึ้น แต่ยังช่วยให้แนวคิดเรื่องการเขียนโค้ดที่ประหยัดและมีประสิทธิภาพเจริญเติบโตภายในวงการนักพัฒนา การเขียนโค้ดที่ดีคือการรักษาสมดุลระหว่างความกระชับของโค้ดกับความชัดเจนในการสื่อสาร การคิดเชิงนักวิจารณ์และวิเคราะห์จะช่วยให้โค้ดของเรามีคุณภาพและพร้อมสำหรับการบำรุงรักษาในอนาคต
สำหรับผู้ที่สนใจศึกษาเรื่องการเขียนโค้ดลึกซึ้งยิ่งขึ้น ที่ EPT เรามีคอร์สการเขียนโปรแกรมที่ตอบโจทย์นักเรียนในทุกระดับความสามารถ เพื่อให้คุณสามารถพัฒนาทักษะการเขียนโค้ดของคุณให้เป็นระดับมืออาชีพได้อย่างมั่นใจ.
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: javascript shorthands assignment_operators conditional_statements function_declaration arrow_functions object_properties string_concatenation programming web_development
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com