Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024
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
 # 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) {
 ```js run
 let sum = (a, b) => a + b;

 /*Arrow function นี้เป็นรูปที่เขียนสั้นกว่าของ:
 /*ฟังก์ชันลูกศรนี้เป็นรูปแบบสั้นกว่าของ:

 let sum = function(a, b) {
  return 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 เหมือนกันกับนิพจน์ฟังก์ชันทุกอย่าง (FunctionExpressions)
 ฟังก์ชันลูกศรสามารถใช้ได้ในลักษณะเดียวกับFunctionExpression

 ตัวอย่างเช่น การสร้างฟังก์ชันแบบไดนามิก:
 ยกตัวอย่างเช่น สำหรับการสร้างฟังก์ชันแบบไดนามิก:

 ```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`อย่างชัดเจนเพื่อส่งอะไรบางอย่างกลับ
Original file line number	Diff line number	Diff line change
		@@ -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) {
Expand All		@@ -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;
Expand All		@@ -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 เหมือนกันกับนิพจน์ฟังก์ชันทุกอย่าง (FunctionExpressions)
		ฟังก์ชันลูกศรสามารถใช้ได้ในลักษณะเดียวกับFunctionExpression

		ตัวอย่างเช่น การสร้างฟังก์ชันแบบไดนามิก:
		ยกตัวอย่างเช่น สำหรับการสร้างฟังก์ชันแบบไดนามิก:

		```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`อย่างชัดเจนเพื่อส่งอะไรบางอย่างกลับ