Merge pull request #151 from javascript-tutorial/arrow-function

Arrow functions, the basics

Author: EpicHigh

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,83 +33,79 @@ 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!");
 
     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 เราก็ทำได้เช่นกันเพียงแค่ ใส่ปีกกาเหมือนฟังก์ชั่นปกติ ดั่งตัวอย่างด้านล่าง
+บางครั้งเราต้องการฟังก์ชันที่ซับซ้อนกว่านั้น ที่มีหลายนิพจน์และประโยค ในกรณีนี้ เราสามารถครอบมันด้วยวงเล็บปีกกาได้ ความแตกต่างหลักคือ การใช้วงเล็บปีกกาต้องมีคำสั่ง `return` ภายในเพื่อส่งค่ากลับ (เหมือนฟังก์ชันปกติ)
 
-แบบนี้:
+ตัวอย่างเช่น:
 
 ```js run
-let sum = (a, b) => {  // ปีกกาเปิดเพื่อเขียนนิพจน์หรือคำสั่งหลายๆตัว
+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
+  return result; // ถ้าเราใช้วงเล็บปีกกา ต้องใส่ "return" อย่างชัดเจน
 */!*
 };
 
 alert( sum(1, 2) ); // 3
 ```
 
-```smart header="เพิ่มเติม"
-เราอวย Arrow functions เพราะว่ามันทำให้การเขียนฟังก์ชั่นกระชับขึ้น แต่นั่นไม่ใช่เหตุผลทั้งหมด
+```smart header="ยังมีอีกมากมาย"
+ที่ผ่านมาเราชื่นชมฟังก์ชันลูกศรในเรื่องความกระชับ แต่นั่นไม่ใช่ทั้งหมด!
 
-Arrow functions ยังมีฟีเจอร์ที่น่าสนใจอื่นๆอีก
+ฟังก์ชันลูกศรยังมีคุณสมบัติที่น่าสนใจอื่นๆ อีก
 
-หากต้องการศึกษาเชิงลึก เราต้องทำความรู้จักกับจาวาสคริปต์ในด้านอื่นๆ ก่อน ดังนั้นเราค่อยจะกลับมาเจอกับ Arrow functions ใหม่ในบท <info:arrow-functions>
+เพื่อศึกษาสิ่งเหล่านั้นอย่างลึกซึ้ง เราจำเป็นต้องมีความรู้เกี่ยวกับแง่มุมอื่นๆ ของ JavaScript ก่อน ดังนั้นเราจะกลับมาพูดถึงฟังก์ชันลูกศรอีกครั้งในบท <info:arrow-functions>
 
-ในตอนนี้ เราก็สามารถใช้ Arrow functions เขียนฟังก์ชั่นบรรทัดเดียว รวมถึง ฟังก์ชันไว้เรียกทีหลัง (Callback function) ได้แล้ว 
+สำหรับตอนนี้ เราสามารถใช้ฟังก์ชันลูกศรกับการทำงานแบบบรรทัดเดียวและฟังก์ชันคอลแบ็กได้แล้ว
 ```
 
 ## สรุป
 
-Arrow functions สำหรับคนชอบความกระชับ สามารถเขียนได้สองแบบ:
+ฟังก์ชันลูกศรนั้นใช้สะดวกสำหรับการกระทำง่ายๆ โดยเฉพาะอย่างยิ่งแบบบรรทัดเดียว มีสองรูปแบบดังนี้:
 
-1. ไม่มีปีกกา: `(...args) => expression` -- ด้านขวาคือนิพจน์: ฟังก์ชันจะประเมินและส่งคืนผลลัพธ์ทันที
-2. มีปีกกา: `(...args) => { body }` -- ช่วยให้เราสามารถเขียนหลายคำสั่งภายในฟังก์ชัน แต่เราจำเป็นต้องมี `return` เพื่อส่งผลลัพธ์กลับไป
+1. ไม่มีวงเล็บปีกกา: `(...args) => expression` -- ทางขวาเป็นนิพจน์: ฟังก์ชันจะประเมินค่าและส่งคืนผลลัพธ์ สามารถละวงเล็บได้ถ้ามีอาร์กิวเมนต์เพียงตัวเดียว เช่น `n => n*2`
+2. มีวงเล็บปีกกา: `(...args) => { body }` -- วงเล็บปีกกาช่วยให้เราเขียนหลายคำสั่งภายในฟังก์ชันได้ แต่เราต้องใส่ `return` อย่างชัดเจนเพื่อส่งอะไรบางอย่างกลับ