From de7342da02272840b591f76cfeb316a0ed0ab7a4 Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Mon, 1 Apr 2024 21:52:46 +0700 Subject: [PATCH 1/2] =?UTF-8?q?=E0=B8=9F=E0=B8=B1=E0=B8=87=E0=B8=81?= =?UTF-8?q?=E0=B9=8C=E0=B8=8A=E0=B8=B1=E0=B8=99=E0=B8=A5=E0=B8=B9=E0=B8=81?= =?UTF-8?q?=E0=B8=A8=E0=B8=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../17-arrow-functions-basics/article.md | 72 +++++-------------- 1 file changed, 16 insertions(+), 56 deletions(-) diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index 9caf89e6c..67196e3f6 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -1,16 +1,16 @@ -# Arrow functions ขั้นพื้นฐาน +# ฟังก์ชันลูกศร (Arrow functions) ข้อมูลพื้นฐาน -มีการสร้างฟังก์ชันอีกรูปแบบหนึ่งที่ประโยคเรียบง่ายและกระชับกว่านิพจน์ฟังก์ชัน +มีไวยากรณ์ที่เรียบง่ายและกระชับอีกแบบหนึ่งในการสร้างฟังก์ชัน ซึ่งมักจะดีกว่า Function Expression -มันเรียกว่า "Arrow function" เพราะมีรูปประโยคดังนี้: +เรียกว่า "ฟังก์ชันลูกศร" เพราะมันดูแบบนี้: ```js let func = (arg1, arg2, ..., argN) => expression; ``` -จากตัวอย่างด้านบน คือสร้างฟังก์ชัน `func` ที่ยอมรับอาร์กิวเมนต์ `arg1..argN` จากนั้นจึงประเมิน expression ที่อยู่ทางด้านขวาแล้วส่งคืนผลลัพธ์ +นี่จะสร้างฟังก์ชัน `func` ที่รับอาร์กิวเมนต์ `arg1..argN` จากนั้นจะประเมินค่า `expression` ทางด้านขวาโดยใช้อาร์กิวเมนต์เหล่านั้น แล้วส่งคืนผลลัพธ์ -กล่าวอีกนัยหนึ่งก็คือ เวอร์ชันที่สั้นกว่าของ +อีกนัยหนึ่ง มันคือเวอร์ชันที่สั้นกว่าของ: ```js let func = function(arg1, arg2, ..., argN) { @@ -23,7 +23,7 @@ let func = function(arg1, arg2, ..., argN) { ```js run let sum = (a, b) => a + b; -/* Arrow function นี้เป็นรูปที่เขียนสั้นกว่าของ: +/* ฟังก์ชันลูกศรนี้เป็นรูปแบบสั้นกว่าของ: let sum = function(a, b) { return a + b; @@ -33,22 +33,22 @@ let sum = function(a, b) { alert( sum(1, 2) ); // 3 ``` -อย่างที่เราเห็น `(a, b) => a + b` หมายถึงฟังก์ชันที่ยอมรับสองอาร์กิวเมนต์ชื่อ `a` และ `b` เมื่อดำเนินการ มันจะประเมินนิพจน์ `a + b` และส่งคืนผลลัพธ์ +ดังที่เห็น `(a, b) => a + b` หมายถึงฟังก์ชันที่รับอาร์กิวเมนต์สองตัว ชื่อ `a` และ `b` เมื่อรันฟังก์ชัน มันจะประเมินนิพจน์ `a + b` และส่งคืนผลลัพธ์ -- หากเรารับอาร์กิวเมนต์เพียงตัวเดียว วงเล็บรอบพารามิเตอร์สามารถละเว้นได้ ซึ่งจะทำให้มันเขียนสั้นลงอีก +- ถ้าเรามีอาร์กิวเมนต์เพียงตัวเดียว วงเล็บล้อมรอบพารามิเตอร์สามารถละได้ ทำให้มันสั้นลงไปอีก - ตัวอย่างเช่น: + ยกตัวอย่างเช่น: ```js run *!* let double = n => n * 2; - // roughly the same as: let double = function(n) { return n * 2 } + // คล้ายๆ กับ: let double = function(n) { return n * 2 } */!* alert( double(3) ); // 6 ``` -- หากไม่มีอาร์กิวเมนต์ จะเขียนวงเล็บเปล่าๆ (ควรมีวงเล็บเพื่อโปรแกรมจะได้รู้ว่านี่คือฟังก์ชั่น): +- ถ้าไม่มีอาร์กิวเมนต์เลย วงเล็บจะว่างเปล่า แต่ต้องใส่ไว้: ```js run let sayHi = () => alert("Hello!"); @@ -56,60 +56,20 @@ alert( sum(1, 2) ); // 3 sayHi(); ``` -Arrow functions เหมือนกันกับนิพจน์ฟังก์ชันทุกอย่าง (Function Expressions) +ฟังก์ชันลูกศรสามารถใช้ได้ในลักษณะเดียวกับ Function Expression -ตัวอย่างเช่น การสร้างฟังก์ชันแบบไดนามิก: +ยกตัวอย่างเช่น สำหรับการสร้างฟังก์ชันแบบไดนามิก: ```js run let age = prompt("What is your age?", 18); let welcome = (age < 18) ? - () => alert('Hello') : + () => alert('Hello!') : () => alert("Greetings!"); welcome(); ``` -Arrow functions อาจดูไม่คุ้นเคยและไม่ค่อยอ่านง่ายในตอนแรก แต่เมื่อเราทำงานกับมันเรื่อยๆก็จะคุ้นเคยกับพวกมันอย่างรวดเร็ว +ฟังก์ชันลูกศรอาจดูไม่คุ้นตาและอ่านยากในตอนแรก แต่พอตาชินกับโครงสร้างแล้ว ก็จะเปลี่ยนไปอย่างรวดเร็ว -หากเราขี้เกียจจะเขียนหลายบรรทัด Arrow functions สะดวกมากสำหรับการเขียนฟังก์ชั่นแบบบรรทัดเดียว - -## Arrow functions แบบหลายบรรทัด - -ตัวอย่างข้างต้นใช้อาร์กิวเมนต์จากด้านซ้ายของ `=>` และประเมินนิพจน์ที่อยู่ด้านขวา - -หากเราต้องการเขียนนิพจน์หรือคำสั่งหลายๆตัวใน Arrow function เราก็ทำได้เช่นกันเพียงแค่ ใส่ปีกกาเหมือนฟังก์ชั่นปกติ ดั่งตัวอย่างด้านล่าง - -แบบนี้: - -```js run -let sum = (a, b) => { // ปีกกาเปิดเพื่อเขียนนิพจน์หรือคำสั่งหลายๆตัว - let result = a + b; -*!* -<<<<<<< HEAD - return result; // หากเราใส่ปีกกาอย่าลืมใส่ `return` ลงไปด้วยเพื่อส่งกลับผลลัพธ์ที่ได้ ไม่งั้นฟังก์ชั่นนี้จะส่ง `undefined` แทน -======= - return result; // if we use curly braces, then we need an explicit "return" ->>>>>>> 29216730a877be28d0a75a459676db6e7f5c4834 -*/!* -}; - -alert( sum(1, 2) ); // 3 -``` - -```smart header="เพิ่มเติม" -เราอวย Arrow functions เพราะว่ามันทำให้การเขียนฟังก์ชั่นกระชับขึ้น แต่นั่นไม่ใช่เหตุผลทั้งหมด - -Arrow functions ยังมีฟีเจอร์ที่น่าสนใจอื่นๆอีก - -หากต้องการศึกษาเชิงลึก เราต้องทำความรู้จักกับจาวาสคริปต์ในด้านอื่นๆ ก่อน ดังนั้นเราค่อยจะกลับมาเจอกับ Arrow functions ใหม่ในบท - -ในตอนนี้ เราก็สามารถใช้ Arrow functions เขียนฟังก์ชั่นบรรทัดเดียว รวมถึง ฟังก์ชันไว้เรียกทีหลัง (Callback function) ได้แล้ว -``` - -## สรุป - -Arrow functions สำหรับคนชอบความกระชับ สามารถเขียนได้สองแบบ: - -1. ไม่มีปีกกา: `(...args) => expression` -- ด้านขวาคือนิพจน์: ฟังก์ชันจะประเมินและส่งคืนผลลัพธ์ทันที -2. มีปีกกา: `(...args) => { body }` -- ช่วยให้เราสามารถเขียนหลายคำสั่งภายในฟังก์ชัน แต่เราจำเป็นต้องมี `return` เพื่อส่งผลลัพธ์กลับไป +มันสะดวกมากสำหรับการทำงานง่ายๆ บรรทัดเดียว ในยามที่เรารู้สึกขี้เกียจเขียนโค้ดยาวๆ \ No newline at end of file From c807e8ea32848a3e942cbf817b5a96ea3e717b7a Mon Sep 17 00:00:00 2001 From: Prasit Tongpradit Date: Mon, 1 Apr 2024 21:56:47 +0700 Subject: [PATCH 2/2] =?UTF-8?q?=E0=B8=9F=E0=B8=B1=E0=B8=87=E0=B8=81?= =?UTF-8?q?=E0=B9=8C=E0=B8=8A=E0=B8=B1=E0=B8=99=E0=B8=A5=E0=B8=B9=E0=B8=81?= =?UTF-8?q?=E0=B8=A8=E0=B8=A3=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=AB=E0=B8=A5?= =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=97=E0=B8=B1?= =?UTF-8?q?=E0=B8=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../17-arrow-functions-basics/article.md | 38 ++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/1-js/02-first-steps/17-arrow-functions-basics/article.md b/1-js/02-first-steps/17-arrow-functions-basics/article.md index 67196e3f6..a1323c0cf 100644 --- a/1-js/02-first-steps/17-arrow-functions-basics/article.md +++ b/1-js/02-first-steps/17-arrow-functions-basics/article.md @@ -72,4 +72,40 @@ welcome(); ฟังก์ชันลูกศรอาจดูไม่คุ้นตาและอ่านยากในตอนแรก แต่พอตาชินกับโครงสร้างแล้ว ก็จะเปลี่ยนไปอย่างรวดเร็ว -มันสะดวกมากสำหรับการทำงานง่ายๆ บรรทัดเดียว ในยามที่เรารู้สึกขี้เกียจเขียนโค้ดยาวๆ \ No newline at end of file +มันสะดวกมากสำหรับการทำงานง่ายๆ บรรทัดเดียว ในยามที่เรารู้สึกขี้เกียจเขียนโค้ดยาวๆ + +## ฟังก์ชันลูกศรแบบหลายบรรทัด + +ฟังก์ชันลูกศรที่เราเห็นมาจนถึงตอนนี้ค่อนข้างเรียบง่าย โดยรับอาร์กิวเมนต์จากด้านซ้ายของ `=>` ประเมินค่า และส่งคืนนิพจน์ทางขวาโดยใช้อาร์กิวเมนต์เหล่านั้น + +บางครั้งเราต้องการฟังก์ชันที่ซับซ้อนกว่านั้น ที่มีหลายนิพจน์และประโยค ในกรณีนี้ เราสามารถครอบมันด้วยวงเล็บปีกกาได้ ความแตกต่างหลักคือ การใช้วงเล็บปีกกาต้องมีคำสั่ง `return` ภายในเพื่อส่งค่ากลับ (เหมือนฟังก์ชันปกติ) + +ตัวอย่างเช่น: + +```js run +let sum = (a, b) => { // วงเล็บปีกกาเปิดฟังก์ชันแบบหลายบรรทัด + let result = a + b; +*!* + return result; // ถ้าเราใช้วงเล็บปีกกา ต้องใส่ "return" อย่างชัดเจน +*/!* +}; + +alert( sum(1, 2) ); // 3 +``` + +```smart header="ยังมีอีกมากมาย" +ที่ผ่านมาเราชื่นชมฟังก์ชันลูกศรในเรื่องความกระชับ แต่นั่นไม่ใช่ทั้งหมด! + +ฟังก์ชันลูกศรยังมีคุณสมบัติที่น่าสนใจอื่นๆ อีก + +เพื่อศึกษาสิ่งเหล่านั้นอย่างลึกซึ้ง เราจำเป็นต้องมีความรู้เกี่ยวกับแง่มุมอื่นๆ ของ JavaScript ก่อน ดังนั้นเราจะกลับมาพูดถึงฟังก์ชันลูกศรอีกครั้งในบท + +สำหรับตอนนี้ เราสามารถใช้ฟังก์ชันลูกศรกับการทำงานแบบบรรทัดเดียวและฟังก์ชันคอลแบ็กได้แล้ว +``` + +## สรุป + +ฟังก์ชันลูกศรนั้นใช้สะดวกสำหรับการกระทำง่ายๆ โดยเฉพาะอย่างยิ่งแบบบรรทัดเดียว มีสองรูปแบบดังนี้: + +1. ไม่มีวงเล็บปีกกา: `(...args) => expression` -- ทางขวาเป็นนิพจน์: ฟังก์ชันจะประเมินค่าและส่งคืนผลลัพธ์ สามารถละวงเล็บได้ถ้ามีอาร์กิวเมนต์เพียงตัวเดียว เช่น `n => n*2` +2. มีวงเล็บปีกกา: `(...args) => { body }` -- วงเล็บปีกกาช่วยให้เราเขียนหลายคำสั่งภายในฟังก์ชันได้ แต่เราต้องใส่ `return` อย่างชัดเจนเพื่อส่งอะไรบางอย่างกลับ \ No newline at end of file