DEV Community 👩‍💻👨‍💻

hambalee
hambalee

Posted on

ทบทวน Arrow Function ใน JavaScript คืออะไร ใช้ยังไง

Arrow Function คืออะไร
Arrow Function คือการสร้างฟังก์ชันรูปแบบใหม่ที่สั้นกระชับกว่าเดิม
ตัวอย่าง ฟังค์ชันแบบเดิม

function printName(name){
 console.log(name)
}
printName('A')

สามารถเปลี่ยนเป็น Arrow Function ได้ดังต่อไปนี้

const printName = (name) => {
 console.log(name)
}
printName('A')

จะได้ผลลัพธ์เหมือนกัน

ถ้าเป็นฟังก์ชันที่รับค่ามา 2 ตัวแปรจะเขียนเป็นแบบนี้

const printName = (name,age) => {
 console.log(name,age)
}
printName('A',20)

เปลี่ยนเป็นฟังก์ชันที่มีการ return หรือมีการส่งค่ากลับ

const mul = (number) => {
 return number * 2
}
console.log(mul(2))

ผลลัพธ์ที่ได้จะเป็น 4

สามารถเขียนให้สั้นลงโดยการตัดปีกกาและคำว่า return ออกไปได้
เพราะมีแค่บรรทัดเดียวซึ่งเป็นการ return จะได้เป็น

const mul = (number) => number * 2
console.log(mul(2))

ผลลัพธ์ที่ได้จะเป็นเหมือนเดิมคือ 4
ส่วนที่เป็น (number) สามารถเอาวงเล็บออกได้เหมือนกันถ้ามีแค่ตัวแปรเดียว
จะได้เป็น

const mul = number => number * 2
console.log(mul(2))

แต่ถ้ามี 2 ตัวแปรจะต้องใส่ไว้เหมือนเดิม

const mul = (number1,number2) => number1 * number2
console.log(mul(2,2))

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.