diff --git a/1-js/03-code-quality/06-polyfills/article.md b/1-js/03-code-quality/06-polyfills/article.md
index 891d17d53..fc2993ff0 100644
--- a/1-js/03-code-quality/06-polyfills/article.md
+++ b/1-js/03-code-quality/06-polyfills/article.md
@@ -1,89 +1,89 @@
+# Polyfills และ Transpilers
-## Polyfills และ Transpilers
+ภาษา JavaScript มีวิวัฒนาการอย่างต่อเนื่อง มีข้อเสนอใหม่ๆ สำหรับภาษานี้เกิดขึ้นเป็นประจำ โดยจะมีการวิเคราะห์และพิจารณาว่าข้อเสนอใดมีคุณค่าเพียงพอที่จะเพิ่มเข้าไปในรายการที่ จากนั้นจะค่อยๆ ผ่านเข้าสู่[ข้อกำหนด](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/)
-ภาษา JavaScript มีการพัฒนาอย่างต่อเนื่อง ข้อเสนอใหม่ๆ สำหรับภาษาจะปรากฏขึ้นเป็นประจำ พวกเขาจะถูกวิเคราะห์และถ้าเห็นว่าเหมาะสมจะถูกเพิ่มเข้าไปในรายการที่ [https://tc39.github.io/ecma262/](https://tc39.github.io/ecma262/) และจากนั้นจะไปต่อที่ ข้อกำหนด: [https://www.ecma-international.org/publications-and-standards/standards/ecma-262/](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/)
+ทีมงานที่อยู่เบื้องหลังเอนจิ้น JavaScript มีแนวคิดของตัวเองว่าจะเริ่มใช้อะไรก่อน พวกเขาอาจตัดสินใจใช้ข้อเสนอที่ยังอยู่ในร่างและเลื่อนสิ่งที่อยู่ในข้อกำหนดแล้วออกไป เพราะมันน่าสนใจน้อยกว่าหรือยากกว่าที่จะทำ
-ทีมงานเบื้องหลังเอนจิ้น JavaScript มีแนวคิดของตัวเองว่าจะทำอะไรก่อน พวกเขาอาจตัดสินใจที่จะนำข้อเสนอที่อยู่ในร่างและเลื่อนสิ่งที่อยู่ในข้อกำหนดออกไป เพราะสิ่งเหล่านั้นไม่น่าสนใจหรือทำได้ยากกว่า
+ดังนั้นจึงเป็นเรื่องปกติที่เอนจิ้นจะใช้งานแค่บางส่วนของมาตรฐานเท่านั้น
-ดังนั้นจึงเป็นเรื่องปกติที่เอนจิ้นจะใช้งานเพียงบางส่วนของข้อกำหนด
+เว็บเพจที่ดีในการดูสถานะปัจจุบันของการรองรับฟีเจอร์ภาษาคือ (มันใหญ่มาก เรายังมีอีกหลายอย่างที่ต้องศึกษา)
-หน้าเว็บที่ดีในการดูสถานะปัจจุบันของการรองรับฟีเจอร์ของภาษาคือ [https://kangax.github.io/compat-table/es6/](https://kangax.github.io/compat-table/es6/) (มันใหญ่ เรายังมีอีกหลายอย่างที่ต้องเรียนรู้)
+ในฐานะโปรแกรมเมอร์ เราอยากใช้ฟีเจอร์ล่าสุด ยิ่งมีของดีๆ มากเท่าไหร่ก็ยิ่งดี!
-ในฐานะโปรแกรมเมอร์ เราต้องการใช้ฟีเจอร์ล่าสุด ยิ่งมีของดีมากเท่าไหร่ก็ยิ่งดี!
+ในทางกลับกัน จะทำอย่างไรให้โค้ดสมัยใหม่ของเราทำงานได้บนเอนจิ้นเก่าๆ ที่ยังไม่เข้าใจฟีเจอร์ใหม่ๆ
-ในทางกลับกัน เราจะทำอย่างไรให้โค้ดสมัยใหม่ของเราทำงานบนเอนจิ้นรุ่นเก่าที่ยังไม่เข้าใจฟีเจอร์ล่าสุดได้?
+มีเครื่องมือสองอย่างสำหรับเรื่องนี้:
-มีเครื่องมืออยู่สองอย่าง:
+1. Transpilers
+2. Polyfills
-1. Transpilers.
-2. Polyfills.
+ที่นี่ในบทนี้ จุดประสงค์ของเราคือการทำความเข้าใจเบื้องต้นว่าพวกมันทำงานอย่างไร และบทบาทของมันในการพัฒนาเว็บ
-ในบทนี้ วัตถุประสงค์ของเราคือการทำความเข้าใจว่าพวกมันทำงานอย่างไร และตำแหน่งของพวกมันในการพัฒนาเว็บ
+## Transpilers
-## Transpilers: เปลี่ยนภาษาให้เข้าใจกัน
+[Transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) เป็นซอฟต์แวร์พิเศษที่แปลโค้ดต้นฉบับอันหนึ่งเป็นโค้ดต้นฉบับอีกชุดหนึ่ง มันสามารถแยกวิเคราะห์ ("อ่านและทำความเข้าใจ") โค้ดสมัยใหม่ และเขียนใหม่โดยใช้โครงสร้างไวยากรณ์แบบเก่า เพื่อให้ทำงานได้แม้กับเอนจิ้นที่ล้าสมัย
-**Transpiler** (นึกถึงคำว่า "แปลภาษา") เป็นเครื่องมือพิเศษที่ช่วยแปลงโค้ดจากภาษาหนึ่งไปเป็นอีกภาษาหนึ่ง เปรียบเหมือนล่ามแปลภาษาที่อ่านแล้วเข้าใจโค้ดสมัยใหม่ แล้วเขียนใหม่ด้วยไวยากรณ์แบบเก่า เพื่อให้ทำงานได้กับเอนจิ้นรุ่นเก่า
+ยกตัวอย่างเช่น JavaScript ก่อนปี 2020 ไม่มี "ตัวดำเนินการ nullish coalescing" `??` ดังนั้น หากผู้ใช้ใช้เบราว์เซอร์รุ่นเก่า มันอาจล้มเหลวในการทำความเข้าใจโค้ดอย่างเช่น `height = height ?? 100`
-ยกตัวอย่างเช่น ใน JavaScript ก่อนปี 2020 ไม่มีตัวดำเนินการ "nullish coalescing" `??` ดังนั้นถ้าผู้เยี่ยมชมเว็บไซต์ใช้เบราว์เซอร์รุ่นเก่า โค้ดอย่าง `height = height ?? 100` อาจทำงานไม่ถูก
-
-Transpiler จะวิเคราะห์โค้ดของเราแล้วเขียน `height ?? 100` ใหม่เป็น `(height !== undefined && height !== null) ? height : 100`
+Transpiler จะวิเคราะห์โค้ดของเราและเขียน `height ?? 100` ใหม่เป็น `(height !== undefined && height !== null) ? height : 100`
```js
// ก่อนรัน transpiler
height = height ?? 100;
-// หลังรัน transpiler
+// หลังรัน transpiler
height = (height !== undefined && height !== null) ? height : 100;
```
-ตอนนี้โค้ดที่เขียนใหม่ก็ใช้งานได้กับเอนจิ้น JavaScript รุ่นเก่าแล้ว
+ตอนนี้โค้ดที่เขียนใหม่ก็เหมาะสมกับเอนจิ้น JavaScript รุ่นเก่าแล้ว
+
+โดยปกติแล้ว นักพัฒนาจะรัน transpiler บนคอมพิวเตอร์ของตัวเอง แล้วจากนั้นจึงนำโค้ดที่ผ่านการ transpile แล้วไปใช้บนเซิร์ฟเวอร์
-โดยทั่วไป นักพัฒนาจะรัน transpiler บนคอมพิวเตอร์ของตัวเอง จากนั้นนำโค้ดที่ผ่านการแปลงแล้วไปใช้บนเซิร์ฟเวอร์
+พูดถึงชื่อ [Babel](https://babeljs.io) ถือเป็นหนึ่งใน transpiler ที่โดดเด่นที่สุดในตอนนี้
-ตัวอย่าง transpiler ที่โดดเด่นคือ **Babel** (นึกถึงคำว่า "บาเบล" ที่แปลว่า "หอคอยแห่งการสื่อสาร")
+ระบบสร้างโปรเจ็กต์สมัยใหม่ เช่น [webpack](https://webpack.js.org/) มีวิธีให้รัน transpiler อัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้ง่ายต่อการรวมเข้ากับกระบวนการพัฒนา
-ระบบบิลด์โปรเจกต์สมัยใหม่ (Modern project build systems) เช่น **webpack** (นึกถึงคำว่า "แพ็คของ") รองรับการรัน transpiler โดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลงโค้ด ทำให้การทำงานกับ transpiler ง่ายดายมาก
+## Polyfills
-## Polyfills: ตัวอุดรอยรั่ว
+คุณสมบัติใหม่ของภาษาอาจไม่ได้รวมเฉพาะโครงสร้างไวยากรณ์และตัวดำเนินการเท่านั้น แต่ยังรวมถึงฟังก์ชันที่มีในตัวด้วย
-ฟีเจอร์ใหม่ของภาษาอาจไม่เพียงแค่ไวยากรณ์และตัวดำเนินการ แต่ยังรวมถึงฟังก์ชันในตัวอย่างเช่น `Math.trunc(n)` เป็นฟังก์ชันที่ "ตัดทอน" ส่วนทศนิยมของตัวเลข เช่น `Math.trunc(1.23)` จะส่งคืน `1`
+ยกตัวอย่างเช่น `Math.trunc(n)` เป็นฟังก์ชันที่ "ตัดทอน" ส่วนทศนิยมของตัวเลข เช่น `Math.trunc(1.23)` จะคืนค่า `1`
-ในเอนจิ้น JavaScript บางรุ่น (รุ่นเก่ามาก) ไม่มี `Math.trunc` ดังนั้นโค้ดดังกล่าวจะไม่ทำงาน
+ในเอนจิ้น JavaScript บางตัวที่ล้าสมัยมาก อาจไม่มี `Math.trunc` ดังนั้นโค้ดดังกล่าวจะทำงานไม่ได้
-เนื่องจากเรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ เราจึงไม่จำเป็นต้อง transpile อะไรเลย เราแค่ต้องประกาศฟังก์ชันที่หายไป
+เนื่องจากเรากำลังพูดถึงฟังก์ชันใหม่ ไม่ใช่การเปลี่ยนแปลงไวยากรณ์ จึงไม่จำเป็นต้อง transpile อะไรตรงนี้ เพียงแค่ต้องประกาศฟังก์ชันที่ขาดหายไปเท่านั้น
-สคริปต์ที่อัปเดต/เพิ่มฟังก์ชันใหม่เรียกว่า "polyfill" มัน "เติมเต็มช่องว่าง" และเพิ่มการใช้งานที่หายไป
+สคริปต์ที่อัปเดตหรือเพิ่มฟังก์ชันใหม่ เรียกว่า "polyfill" มันจะ "เติมเต็ม" ช่องว่างและเพิ่มการนำไปใช้งานที่ขาดหายไป
-สำหรับกรณีนี้ polyfill สำหรับ `Math.trunc` เป็นสคริปต์ที่นำไปใช้งาน ดังนี้:
+สำหรับกรณีนี้โดยเฉพาะ polyfill สำหรับ `Math.trunc` คือสคริปต์ที่เพิ่มการนำไปใช้งานให้ ดังนี้:
```js
if (!Math.trunc) { // ถ้าไม่มีฟังก์ชันดังกล่าว
- // นำไปใช้งาน
+ // ให้นำไปใช้งาน
Math.trunc = function(number) {
- // Math.ceil และ Math.floor มีอยู่แม้กระทั่งในเอนจิ้น JavaScript รุ่นเก่า
- // จะกล่าวถึงในบทเรียนต่อไป
+ // Math.ceil และ Math.floor มีอยู่แม้ในเอนจิ้น JavaScript โบราณ
+ // จะมีการอธิบายเพิ่มเติมในบทเรียนถัดไป
return number < 0 ? Math.ceil(number) : Math.floor(number);
};
}
```
-JavaScript เป็นภาษาที่มีความคล่องตัวสูง สคริปต์สามารถเพิ่ม/แก้ไขฟังก์ชันใดๆ ได้แม้กระทั่งฟังก์ชันในตัว
-
-ไลบรารี polyfill ที่น่าสนใจสองแห่ง:
+JavaScript เป็นภาษาที่มีพลวัตสูงมาก สคริปต์สามารถเพิ่ม/แก้ไขฟังก์ชันใดๆ ก็ได้ แม้แต่ฟังก์ชันในตัว
-- core js: [https://github.com/zloirock/core-js](https://github.com/zloirock/core-js) ที่รองรับหลายอย่าง อนุญาตให้รวมเฉพาะฟีเจอร์ที่ต้องการ
-- polyfill.io: [https://polyfill.io/](https://polyfill.io/) บริการที่จัดหาสคริปต์ที่มี polyfills ขึ้นอยู่กับฟีเจอร์และเบราว์เซอร์ของผู้ใช้
+มีไลบรารี polyfill ที่น่าสนใจสองแห่งคือ:
+- [core js](https://github.com/zloirock/core-js) ที่รองรับฟีเจอร์เป็นจำนวนมาก โดยสามารถเลือกใช้เฉพาะฟีเจอร์ที่ต้องการได้
+- บริการ [polyfill.io](https://polyfill.io/) ที่จัดเตรียมสคริปต์พร้อม polyfills ตามคุณสมบัติและเบราว์เซอร์ของผู้ใช้
## สรุป
-ในบทนี้ เราอยากกระตุ้นให้คุณศึกษาฟีเจอร์ภาษาใหม่ๆ แม้กระทั่งฟีเจอร์ที่ล้ำสมัย แม้ว่าเอนจิ้น JavaScript ยังไม่รองรับอย่างเต็มที่
+ในบทนี้เราต้องการจูงใจให้คุณศึกษาคุณสมบัติภาษาที่ทันสมัยและแม้กระทั่งที่อยู่ในระหว่างพัฒนา แม้ว่าตอนนี้เอนจิ้น JavaScript จะยังรองรับได้ไม่ดีนัก
-เพียงแค่อย่าลืมใช้ transpiler (ถ้าใช้ไวยากรณ์หรือตัวดำเนินการสมัยใหม่) และ polyfills (เพื่อเพิ่มฟังก์ชันที่อาจหายไป) พวกมันจะทำให้โค้ดทำงานได้อย่างถูกต้อง
+อย่าลืมใช้ transpiler (ถ้าใช้ไวยากรณ์หรือตัวดำเนินการใหม่) และ polyfills (เพื่อเพิ่มฟังก์ชันที่อาจขาดหายไป) พวกมันจะช่วยให้มั่นใจได้ว่าโค้ดจะทำงาน
-ตัวอย่างเช่น ต่อมาเมื่อคุณคุ้นเคยกับ JavaScript คุณสามารถตั้งค่าระบบบิลด์โค้ดบนพื้นฐานของ webpack: [https://webpack.js.org/guides/getting-started/](https://webpack.js.org/guides/getting-started/) พร้อมกับปลั๊กอิน babel-loader: [https://github.com/babel/babel-loader](https://github.com/babel/babel-loader)
+ตัวอย่างเช่น ในภายหลังเมื่อคุณคุ้นเคยกับ JavaScript แล้ว คุณสามารถตั้งค่าระบบการสร้างโค้ดที่อิงกับ [webpack](https://webpack.js.org/) ร่วมกับปลั๊กอิน [babel-loader](https://github.com/babel/babel-loader)
-แหล่งข้อมูลที่ดีที่แสดงสถานะปัจจุบันของการรองรับฟีเจอร์ต่างๆ:
-- [https://github.com/compat-table/compat-table](https://github.com/compat-table/compat-table) - สำหรับ JavaScript แบบเพียวๆ
-- [https://caniuse.com/](https://caniuse.com/) - สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์
+แหล่งข้อมูลดีๆ ที่แสดงสถานะปัจจุบันของการรองรับคุณสมบัติต่างๆ ได้แก่:
+- - สำหรับ JavaScript แท้ๆ
+- - สำหรับฟังก์ชันที่เกี่ยวข้องกับเบราว์เซอร์
-ปล. Google Chrome มักจะเป็นเวอร์ชันล่าสุดพร้อมฟีเจอร์ภาษา ลองใช้ดูถ้าการสาธิตบทเรียนไม่ทำงาน อย่างไรก็ตาม บทเรียนส่วนใหญ่จะทำงานได้กับเบราว์เซอร์สมัยใหม่ทุกชนิด
\ No newline at end of file
+ป.ล. Google Chrome มักจะอัปเดตการรองรับคุณสมบัติภาษาใหม่ๆ ได้ทันสมัยที่สุด ลองใช้ Chrome ดูหากเดโมในบทเรียนไม่ทำงาน แต่โดยทั่วไปแล้วเดโมในบทเรียนส่วนใหญ่น่าจะทำงานได้กับเบราว์เซอร์สมัยใหม่ทุกตัว
\ No newline at end of file