Short Hand JavaScript: เขียนโค้ดให้สั้นลง แต่เข้าใจง่ายขึ้น!

Short Hand JavaScript: เขียนโค้ดให้สั้นลง แต่เข้าใจง่ายขึ้น!

JavaScript เป็นภาษาที่มีเสน่ห์ เพราะมันยืดหยุ่นและมีลูกเล่นมากมายให้เลือกใช้ วันนี้เราจะมาทำความรู้จักกับ Short Hand JavaScript หรือการเขียนโค้ดให้กระชับและอ่านง่าย ซึ่งช่วยลดความยาวของโค้ดลงแต่ยังคงความหมายครบถ้วน ทำให้นักพัฒนาเขียนโค้ดได้ไวและสบายขึ้น!


1. การใช้ Ternary Operator แทน if-else

แทนที่จะเขียน if-else ยาว ๆ ลองใช้ Ternary Operator ดูสิ มันช่วยให้โค้ดของเราดูสั้นลง

let isAdult = age >= 18 ? 'Yes' : 'No';

ถ้าเราเขียนแบบเดิม:

let isAdult;
if (age >= 18) {
  isAdult = 'Yes';
} else {
  isAdult = 'No';
}

เห็นไหมว่าโค้ดแบบย่อมันสวยและเข้าใจง่ายกว่าเยอะ!


2. Default Parameter Value – ตั้งค่าเริ่มต้นในฟังก์ชัน

บางครั้งเราอยากให้ฟังก์ชันมีค่าเริ่มต้นถ้าไม่มีการส่งพารามิเตอร์เข้ามา ใช้ Default Parameter ได้เลย

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

แทนที่เราจะเช็คด้วย if ให้ยุ่งยาก ฟังก์ชันนี้จะทักทาย 'Guest' อัตโนมัติถ้าไม่มีชื่อถูกส่งมา


3. การใช้ Logical Operators แทนเงื่อนไขซับซ้อน

อยากเช็คค่าหลาย ๆ อย่าง? ลองใช้ && และ || ดูสิ!

javascriptCopy codelet status = isLoggedIn && 'User is online';

ถ้า isLoggedIn เป็น true เราก็จะได้ข้อความว่า 'User is online' แต่ถ้าไม่ใช่ มันจะคืนค่า false


4. Object Property Shorthand – ลดการซ้ำซ้อน

ถ้าชื่อ property กับตัวแปรเหมือนกัน ใช้ Shorthand เพื่อประหยัดบรรทัดได้เลย

let name = 'Alice';
let age = 25;
let user = { name, age };
console.log(user); // { name: 'Alice', age: 25 }

ไม่ต้องเขียนซ้ำ ๆ ว่า name: name, age: age ให้เมื่อย


5. Arrow Function – ฟังก์ชันสั้น ๆ แต่ทรงพลัง

ถ้าเบื่อการเขียน function ลองใช้ Arrow Function แทน

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

ทั้งสั้นและเข้าใจง่าย เหมาะกับการใช้งานฟังก์ชันแบบสั้น ๆ


6. การ Destructuring – ดึงค่าจากออบเจกต์อย่างง่ายดาย

การดึงข้อมูลจากออบเจกต์หรืออาเรย์ไม่จำเป็นต้องเขียนยาว ๆ ใช้ Destructuring ได้เลย

const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

แค่บรรทัดเดียวก็ได้ค่ามาใช้แล้ว ไม่ต้องใช้ user.name หรือ user.age ให้ซ้ำไปซ้ำมา


สรุป

การใช้ Short Hand JavaScript ช่วยทำให้โค้ดของเรากระชับ อ่านง่าย และดูเป็นมืออาชีพขึ้น! แม้จะดูเล็ก ๆ น้อย ๆ แต่เมื่อใช้อย่างชำนาญ มันจะช่วยประหยัดเวลาและทำให้โค้ดสะอาดขึ้น ลองนำเทคนิคเหล่านี้ไปปรับใช้ในโปรเจกต์ของคุณดูสิ รับรองว่าจะเขียนโค้ดได้สนุกขึ้น!

Read more

การทำ Data Migration และ Seeder: คู่มือสำหรับ Developer

การทำ Data Migration และ Seeder: คู่มือสำหรับ Developer

ถ้าพูดถึงการพัฒนาแอปพลิเคชันที่เชื่อมต่อกับ Database หนึ่งในความยุ่งยากที่สุดคือการจัดการ Database structure ที่เปลี่ยนไปตามฟีเจอร์ใหม่ๆ ที่เพิ่มเข้ามา เช่น เพิ่มตาราง (Table) เปลี่ยนชนิดข้อมูล (Data type) หรือลบฟิลด์ (Field) ออกไป และแน่นอนว่

By maimem
เช็ค Internet จากเว็บ: ทำยังไงให้รู้ว่าออกเน็ตได้จริง?

เช็ค Internet จากเว็บ: ทำยังไงให้รู้ว่าออกเน็ตได้จริง?

เคยเจอไหมครับ เวลาใช้งานเว็บไซต์แล้วอยู่ดี ๆ ก็โหลดข้อมูลไม่ได้ หรือ API เงียบหายไม่มีการตอบกลับ? หลายครั้งเรามักสงสัยว่า "ตกลงปัญหาอยู่ที่ตัวเรา เซิร์ฟเวอร์ หรือ Internet กันแน่?" วันนี้ผมจะมาเล่าเรื่อง "การตรวจสอบสถานะการเชื่อมต่

By maimem
Rust Series #2 - รู้จัก Cargo: ผู้ช่วยส่วนตัวของโปรเจกต์ Rust!

Rust Series #2 - รู้จัก Cargo: ผู้ช่วยส่วนตัวของโปรเจกต์ Rust!

ถ้าคุณเริ่มต้นเขียน Rust แล้วรู้สึกว่า “เฮ้ย! Rust เจ๋งแหะ” ก็ขอแสดงความยินดีครับ คุณเพิ่งเจอเพื่อนแท้ในโลกโปรแกรมมิ่ง! แต่เดี๋ยวก่อน... ถ้าต้องเขียนโค้ดโปรเจกต์ใหญ่ ๆ บริหารไลบรารี ดูแลไฟล์ต่าง ๆ หรือทดสอบโค้ดทุกวั

By maimem
ซ่อน Credential ใน AWS CodeBuild ให้ปลอดภัยด้วย Parameter Store

ซ่อน Credential ใน AWS CodeBuild ให้ปลอดภัยด้วย Parameter Store

ทำไมต้องซ่อน Credential? ในโลกของ DevOps และ Cloud Computing การจัดการ Credential (ข้อมูลรับรอง เช่น API Keys, Passwords, หรือ Secrets ต่างๆ) เป็นเรื่องที่สำคัญอย่างยิ่ง เพราะ Credential เปรียบเสมือนกุญแจที่เปิดประตูไปสู่ทรัพยากรสำคัญในระบบ เช่น ฐานข้อมูล

By maimem