diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index a8f335335..e311a3dcf 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -1,204 +1,207 @@ -## ประเภทข้อมูล +# ชนิดข้อมูล -ค่าใน JavaScript มักจะมีประเภทข้อมูลเสมอ ตัวอย่างเช่น สตริงหรือตัวเลข +ค่าใน JavaScript จะมีชนิดข้อมูลเฉพาะเสมอ เช่น `string` หรือ `number` -มีแปดประเภทข้อมูลพื้นฐานใน JavaScript ในบทนี้เราจะกล่าวถึงพวกมันโดยทั่วไปและในบทต่อไปเราจะพูดถึงแต่ละประเภทโดยละเอียด +ใน JavaScript มีชนิดข้อมูลพื้นฐาน 8 ประเภท ในที่นี้เราจะกล่าวถึงภาพรวมของแต่ละประเภท และในบทต่อๆ ไปจะอธิบายแต่ละประเภทอย่างละเอียด -เราสามารถใส่ข้อมูลประเภทใดก็ได้ลงในตัวแปร ตัวอย่างเช่น ตัวแปรตัวหนึ่งอาจเป็นสตริงชั่วขณะหนึ่งแล้วเปลี่ยนเป็นตัวเลข: +เราสามารถใส่ค่าชนิดใดก็ได้ลงในตัวแปร ยกตัวอย่างเช่น ตัวแปรหนึ่งอาจเป็น `string` ได้ในขณะหนึ่ง แล้วเก็บ `number` ในอีกขณะหนึ่ง: ```js -// ไม่มีข้อผิดพลาด -let message = "สวัสดี"; +// ไม่มี error +let message = "hello"; message = 123456; ``` -ภาษาโปรแกรมที่อนุญาตให้ทำสิ่งเหล่านี้ เช่น JavaScript เราเรียกว่า "แบบไดนามิก" หมายความว่าตัวแปรไม่ผูกกับประเภทข้อมูลใดประเภทหนึ่ง +ภาษาโปรแกรมที่อนุญาตให้ทำเช่นนี้ได้ เช่น JavaScript จะเรียกว่า "dynamically typed" ซึ่งหมายความว่ามีชนิดข้อมูลหลากหลาย แต่ตัวแปรไม่จำเป็นต้องถูกผูกไว้กับชนิดข้อมูลใดชนิดหนึ่งตายตัว -## ตัวเลข +## Number ```js let n = 123; n = 12.345; ``` -ประเภท *number* แสดงทั้งเลขจำนวนเต็มและเลขจุดทศนิยม +ชนิดข้อมูล *number* ใช้แทนได้ทั้งจำนวนเต็มและจำนวนทศนิยม -มีการดำเนินการต่างๆ สำหรับตัวเลข เช่น การคูณ `*` การหาร `/` การบวก `+` การลบ `-` เป็นต้น +มีตัวดำเนินการหลายอย่างสำหรับจำนวน เช่น การคูณ `*`, การหาร `/`, การบวก `+`, การลบ `-` และอื่นๆ -นอกเหนือจากตัวเลขปกติแล้วยังมี "ค่าตัวเลขพิเศษ" ซึ่งอยู่ในประเภทข้อมูลนี้ด้วย: `Infinity`, `-Infinity` และ `NaN` +นอกเหนือจากตัวเลขทั่วไปแล้ว ยังมีค่าที่เรียกว่า "ค่าตัวเลขพิเศษ" ซึ่งก็จัดอยู่ในชนิดข้อมูลนี้ด้วย ได้แก่ `Infinity`, `-Infinity` และ `NaN` -- `Infinity` แสดงถึงอินฟินิตี้ทางคณิตศาสตร์ อินฟินิตี้: [https://th.wikipedia.org/wiki/](https://th.wikipedia.org/wiki/)อินฟินิตี้ ∞ มันเป็นค่าพิเศษที่มากกว่าจำนวนใดๆ +- `Infinity` หมายถึง [อนันต์](https://en.wikipedia.org/wiki/Infinity) ∞ ในเชิงคณิตศาสตร์ เป็นค่าพิเศษที่มากกว่าตัวเลขใดๆ - เราสามารถรับมันเป็นผลลัพธ์ของการหารด้วยศูนย์: + เราอาจได้ค่านี้จากการหารด้วยศูนย์: ```js run alert( 1 / 0 ); // Infinity ``` - หรือง่ายๆ ก็คืออ้างอิงโดยตรง: + หรืออ้างอิงถึงโดยตรง: ```js run alert( Infinity ); // Infinity ``` -- `NaN` แสดงถึงข้อผิดพลาดในการคำนวณ เป็นผลลัพธ์ของการดำเนินการทางคณิตศาสตร์ที่ไม่ถูกต้อง ตัวอย่างเช่น: + +- `NaN` หมายถึงความผิดพลาดในการคำนวณ เป็นผลลัพธ์จากการดำเนินการทางคณิตศาสตร์ที่ไม่ถูกต้องหรือไม่ได้กำหนดไว้ เช่น: ```js run - alert( "ไม่ใช่ตัวเลข" / 2 ); // NaN การหารดังกล่าวไม่ถูกต้อง + alert( "not a number" / 2 ); // NaN เพราะการหารแบบนี้ผิด ``` - สำหรับ `NaN` การดำเนินการทางคณิตศาสตร์เพิ่มเติมใดๆ กับ `NaN` จะส่งคืน `NaN`: + `NaN` มีคุณสมบัติเหนียว การดำเนินการทางคณิตศาสตร์ใดๆ กับ `NaN` จะให้ผลลัพธ์เป็น `NaN` เสมอ: ```js run alert( NaN + 1 ); // NaN alert( 3 * NaN ); // NaN - alert( "ไม่ใช่ตัวเลข" / 2 - 1 ); // NaN + alert( "not a number" / 2 - 1 ); // NaN ``` - ดังนั้น หากมี `NaN` อยู่ที่ใดก็ตามในนิพจน์ทางคณิตศาสตร์ มันจะแพร่กระจายไปยังผลลัพธ์ทั้งหมด (มีเพียงข้อเดียวที่ยกเว้น: `NaN ** 0` คือ `1`) + ดังนั้นถ้ามี `NaN` อยู่ในนิพจน์ทางคณิตศาสตร์ตรงไหน มันจะแผ่ขยายไปทั่วผลลัพธ์ทั้งหมด (มีข้อยกเว้นเพียงอย่างเดียวคือ `NaN ** 0` จะเป็น `1`) ```smart header="การดำเนินการทางคณิตศาสตร์มีความปลอดภัย" -การทำคณิตศาสตร์ "ปลอดภัย" ใน JavaScript เราสามารถทำอะไรก็ได้: หารด้วยศูนย์ ปฏิบัติต่อสตริงที่ไม่ใช่ตัวเลขเป็นตัวเลข ฯลฯ +การคำนวณทางคณิตศาสตร์ใน JavaScript นั้น "ปลอดภัย" เราสามารถทำอะไรก็ได้ เช่น หารด้วยศูนย์ หรือดำเนินการกับสตริงที่ไม่ใช่ตัวเลขเหมือนเป็นตัวเลข เป็นต้น -สคริปต์จะไม่หยุดทำงานด้วยข้อผิดพลาดร้ายแรง ("ตาย") อย่างแย่ที่สุด เราจะได้รับ `NaN` เป็นผลลัพธ์ +สคริปต์จะไม่มีวันหยุดทำงานด้วย fatal error ("ตาย") ในกรณีที่แย่ที่สุด ผลลัพธ์ที่ได้จะเป็น `NaN` ``` -ค่าตัวเลขพิเศษโดยทางการเป็นส่วนหนึ่งของประเภท "number" แน่นอนว่าพวกมันไม่ใช่ตัวเลขในความหมายทั่วไปของคำนี้ +อย่างเป็นทางการแล้วค่าตัวเลขพิเศษเหล่านี้จัดอยู่ในชนิดข้อมูล "number" แต่แน่นอนว่ามันไม่ใช่ตัวเลขในความหมายทั่วไปของคำนี้ -เราจะเห็นเพิ่มเติมเกี่ยวกับการทำงานกับตัวเลขในบท . +เราจะเรียนรู้เพิ่มเติมเกี่ยวกับการใช้งานตัวเลขในบทเรียน ## BigInt [#bigint-type] -ใน JavaScript ประเภท "number" ไม่สามารถแสดงค่าจำนวนเต็มที่มากกว่า `(253-1)` (นั่นคือ `9007199254740991`) หรือ น้อยกว่า `-(253-1)` สำหรับค่าลบ +ในภาษา JavaScript ชนิดข้อมูล "number" ไม่สามารถแสดงค่าจำนวนเต็มที่มากกว่า (253-1) (ซึ่งก็คือ `9007199254740991`) หรือน้อยกว่า -(253-1) สำหรับจำนวนลบได้อย่างปลอดภัย -เพื่อให้อ่านง่าย ประเภท "number" สามารถเก็บจำนวนเต็มที่ใหญ่กว่า (สูงสุดถึง 1.7976931348623157 * 10308) แต่ภายนอกช่วงจำนวนเต็มที่ปลอดภัย ±(253-1) จะมีข้อผิดพลาดเรื่องความแม่นยำ เนื่องจากไม่สามารถใส่ตัวเลขทั้งหมดลงในที่เก็บข้อมูล 64 บิตที่ไว้ได้ ดังนั้นจึงเก็บค่า "โดยประมาณ" ไว้แทน +ถ้าจะให้พูดให้ถูกต้องจริงๆ ชนิดข้อมูล "number" จะเก็บจำนวนเต็มที่ใหญ่กว่านั้นได้ (สูงสุดถึง 1.7976931348623157 * 10308) แต่นอกเหนือจากช่วงจำนวนเต็มที่ปลอดภัยคือ ±(253-1) แล้ว จะมีข้อผิดพลาดในการแสดงตัวเลขที่ละเอียด เพราะไม่สามารถเก็บตัวเลขได้ทุกหลักในพื้นที่จัดเก็บแบบคงที่ขนาด 64 บิต ดังนั้นค่าที่เก็บอาจจะเป็นค่า "โดยประมาณ" -ตัวอย่างเช่น สองตัวเลขนี้ (อยู่เหนือช่วงที่ปลอดภัย) จะเท่ากัน: +ยกตัวอย่างเช่น จำนวนสองตัวนี้ (ที่อยู่เหนือช่วงปลอดภัยเล็กน้อย) จะมีค่าเท่ากัน: ```js console.log(9007199254740991 + 1); // 9007199254740992 console.log(9007199254740991 + 2); // 9007199254740992 ``` -หมายความว่า จำนวนเต็มคี่ทั้งหมดที่มากกว่า `(2^53-1)` ไม่สามารถเก็บไว้ในประเภท "number" ได้เลย +หรือพูดได้ว่า จำนวนเต็มคี่ทุกตัวที่มากกว่า (253-1) จะไม่สามารถเก็บในชนิดข้อมูล "number" ได้เลย -สำหรับการใช้งานส่วนใหญ่ ช่วง `±(2^53-1)` ก็เพียงพอแล้ว แต่บางครั้งเราต้องการช่วงทั้งหมดของจำนวนเต็มขนาดใหญ่มาก เช่น สำหรับการเข้ารหัสหรือการประทับเวลาความแม่นยำระดับไมโครวินาที +ในการใช้งานส่วนใหญ่ ช่วง ±(253-1) ก็เพียงพอแล้ว แต่บางครั้งเราอาจต้องการช่วงของจำนวนเต็มที่ใหญ่จริงๆ เช่น สำหรับการเข้ารหัสลับหรือการระบุเวลาแบบละเอียดถึงระดับไมโครวินาที -ประเภท `BigInt` เพิ่งถูกเพิ่มเข้ามาในภาษาเพื่อแทนจำนวนเต็มที่มีความยาวไม่จำกัด +ชนิดข้อมูล `BigInt` ได้ถูกเพิ่มเข้ามาในภาษาเมื่อไม่นานมานี้ เพื่อใช้แสดงจำนวนเต็มที่มีความยาวเท่าใดก็ได้ -ค่า `BigInt` ถูกสร้างขึ้นโดยการต่อ "n" ที่ท้ายของจำนวนเต็ม: +สร้างค่า `BigInt` ได้โดยใส่ `n` ต่อท้ายจำนวนเต็ม: ```js -// "n" ที่ท้ายหมายถึงเป็น BigInt +// ตัว "n" ท้ายสุดหมายความว่าเป็น BigInt const bigInt = 1234567890123456789012345678901234567890n; ``` -เนื่องจากตัวเลข `BigInt` นั้นไม่ค่อยจำเป็น เราจึงไม่ได้เจาะลึกลงไปในบทนี้ แต่ได้อุทิศบทแยกต่างหากให้กับพวกเขา อ่านเมื่อคุณต้องการตัวเลขขนาดใหญ่เช่นนี้ +เนื่องจากไม่ค่อยได้ใช้ตัวเลข `BigInt` บ่อยนัก เราจึงไม่ขอลงรายละเอียดในที่นี้ แต่จะแยกอธิบายไว้ในบทเรียน อ่านได้เมื่อคุณต้องการใช้จำนวนขนาดใหญ่มากๆ นะ + ```smart header="ปัญหาความเข้ากันได้" -ตอนนี้ `BigInt` รองรับใน Firefox/Chrome/Edge/Safari แต่ไม่รองรับใน IE +ปัจจุบัน `BigInt` รองรับใน Firefox/Chrome/Edge/Safari แต่ยังไม่รองรับใน IE ``` -คุณสามารถตรวจสอบ *ตารางความเข้ากันได้ MDN BigInt*: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) เพื่อทราบว่าเวอร์ชันใดของเบราว์เซอร์ที่รองรับ +คุณสามารถดูได้จาก [ตารางความเข้ากันได้ของ BigInt บน *MDN*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#Browser_compatibility) ว่ารองรับในเบราว์เซอร์เวอร์ชันใดบ้าง -## สตริง (String) +## String -สตริงใน JavaScript ต้องล้อมรอบด้วยเครื่องหมายอัญประกาศ +ใน JavaScript string ต้องถูกล้อมรอบด้วยเครื่องหมายคำพูด -```javascript -let str = "สวัสดี"; -let str2 = 'อัญประกาศเดี่ยวก็ใช้ได้เช่นกัน'; -let phrase = `สามารถฝังตัวแปรอื่นได้ ${str}`; +```js +let str = "Hello"; +let str2 = 'ใช้เครื่องหมายคำพูดเดี่ยวก็ได้'; +let phrase = `สามารถฝัง ${str} ได้ด้วย`; ``` -ใน JavaScript มีเครื่องหมายอัญประกาศ 3 ประเภท +ใน JavaScript มีเครื่องหมายคำพูด 3 แบบ -1. อัญประกาศคู่: `"สวัสดี"` -2. อัญประกาศเดี่ยว: `'สวัสดี'`. -3. แบ็คทิก: ``สวัสดี``. +1. เครื่องหมายคำพูดคู่: `"สวัสดี"` +2. เครื่องหมายคำพูดเดี่ยว: `'สวัสดี'` +3. แบ็กติก (Backticks): `สวัสดี` -อัญประกาศคู่และเดี่ยวเป็นอัญประกาศแบบ "ธรรมดา" ใน JavaScript แทบไม่มีความแตกต่างกัน +เครื่องหมายคำพูดคู่และเดี่ยวเป็นแบบ "ธรรมดา" ในทางปฏิบัติแล้วไม่มีความแตกต่างระหว่างสองแบบนี้ใน JavaScript -แบ็คทิกเป็นอัญประกาศแบบ "ฟังก์ชันขยาย" อนุญาตให้เราฝังตัวแปรและนิพจน์ลงในสตริงได้โดยการห่อด้วย `${…}` ตัวอย่างเช่น: +ส่วนแบ็กติกเป็นเครื่องหมายคำพูดที่มี "ฟังก์ชันเพิ่มเติม" มันช่วยให้เราสามารถแทรกตัวแปรและนิพจน์ลงใน string ได้ โดยครอบด้วย `${…}` เช่น: -```javascript -let name = "จอห์น"; +```js run +let name = "สมชาย"; -// ฝังตัวแปร -alert( `สวัสดี, *!*${name}*/!*!` ); // สวัสดี, จอห์น! +// แทรกตัวแปร +alert( `สวัสดี *!*${name}*/!*!` ); // สวัสดี สมชาย! -// ฝังนิพจน์ +// แทรกนิพจน์ alert( `ผลลัพธ์คือ *!*${1 + 2}*/!*` ); // ผลลัพธ์คือ 3 ``` -นิพจน์ภายใน `${…}` จะถูกประเมินและผลลัพธ์จะกลายเป็นส่วนหนึ่งของสตริง เราสามารถใส่อะไรก็ได้ในนั้น: ตัวแปรเช่น `name` หรือนิพจน์เลขคณิตเช่น `1 + 2` หรือสิ่งที่ซับซ้อนกว่านั้น +นิพจน์ภายใน `${…}` จะถูกประเมินค่า และผลลัพธ์จะกลายเป็นส่วนหนึ่งของ string เราสามารถใส่อะไรก็ได้ลงไปในนั้น ไม่ว่าจะเป็นตัวแปรอย่าง `name` หรือนิพจน์ทางคณิตศาสตร์อย่าง `1 + 2` หรือสิ่งที่ซับซ้อนกว่านั้น + +โปรดจำไว้ว่า การแทรกเช่นนี้ทำได้เฉพาะในแบ็กติกเท่านั้น เครื่องหมายคำพูดรูปแบบอื่นไม่มีความสามารถในการแทรกแบบนี้! -โปรดทราบว่าสิ่งนี้ทำได้เฉพาะในแบ็คทิกเท่านั้น อัญประกาศอื่นไม่มีฟังก์ชันฝังตัวนี้! -```javascript -alert( "ผลลัพธ์คือ ${1 + 2}" ); // ผลลัพธ์คือ ${1 + 2} (อัญประกาศคู่ไม่ทำงาน) +```js run +alert( "ผลลัพธ์คือ ${1 + 2}" ); // ผลลัพธ์คือ ${1 + 2} (เครื่องหมายคำพูดคู่ไม่ได้แทรกอะไร) ``` -เราจะครอบคลุมสตริงเพิ่มเติมในบท +เราจะพูดถึง string อย่างละเอียดอีกครั้งในบทเรียน -```smart header="ไม่มีประเภทตัวอักษร (Character)" -ในบางภาษา มีประเภท "character" พิเศษสำหรับตัวอักษรตัวเดียว ตัวอย่างเช่น ในภาษา C และ Java เรียกว่า "char" +```smart header="ไม่มีชนิดข้อมูล *ตัวอักษร*" +ในบางภาษา จะมีชนิดข้อมูลพิเศษ "ตัวอักษร" ไว้แทนอักขระตัวเดียว เช่นในภาษา C และ Java จะเรียกว่า "char" -ใน JavaScript ไม่มีประเภทดังกล่าว มีเพียงประเภทเดียวเท่านั้น: string สตริงอาจประกอบด้วยตัวอักษรศูนย์ตัว (ว่างเปล่า) หนึ่งตัว หรือหลายตัว +แต่ใน JavaScript ไม่มีชนิดข้อมูลเช่นนั้น มีเพียงชนิด `string` เท่านั้น ซึ่ง string อาจเป็นอักขระศูนย์ตัว (ว่างเปล่า), หนึ่งตัว หรือหลายตัวก็ได้ ``` -## บูลีน (ประเภทตรรกะ) +## Boolean (ชนิดข้อมูลตรรกะ) -ประเภทบูลีนมีค่าเพียงสองค่าเท่านั้น: `true` และ `false` +ชนิดข้อมูล boolean มีค่าได้เพียงสองค่าเท่านั้น คือ `true` และ `false` -ประเภทนี้มักใช้ในการเก็บค่าใช่/ไม่ใช่: `true` หมายถึง "ใช่, ถูกต้อง" และ `false` หมายถึง "ไม่, ไม่ถูกต้อง" +ชนิดข้อมูลนี้มักใช้สำหรับเก็บค่าแบบ ใช่/ไม่ใช่ โดย `true` หมายถึง "ใช่ ถูกต้อง" ส่วน `false` หมายถึง "ไม่ใช่ ไม่ถูกต้อง" -ตัวอย่างเช่น: +ยกตัวอย่างเช่น: ```js let nameFieldChecked = true; // ใช่ ช่องชื่อถูกเลือก -let ageFieldChecked = false; // ไม่ ช่องอายุยังไม่ถูกเลือก +let ageFieldChecked = false; // ไม่ใช่ ช่องอายุไม่ได้ถูกเลือก ``` -ค่าบูลีนยังเป็นผลลัพธ์ของการเปรียบเทียบ: +นอกจากนี้ ค่า boolean ยังเป็นผลลัพธ์ที่ได้จากการเปรียบเทียบด้วย: ```js run let isGreater = 4 > 1; -alert( isGreater ); // true (ผลลัพธ์การเปรียบเทียบคือ "ใช่") +alert( isGreater ); // true (ผลการเปรียบเทียบคือ "ใช่") ``` -เราจะเจาะลึกเกี่ยวกับบูลีนเพิ่มเติมในบท +เราจะกล่าวถึง boolean โดยละเอียดอีกครั้งในบทเรียน -## ค่า "null" +## ค่า "null" -ค่าพิเศษ `null` ไม่ใช่หนึ่งในประเภทที่อธิบายไว้ข้างต้น +ค่าพิเศษ `null` ไม่ได้จัดอยู่ในชนิดข้อมูลที่กล่าวมาข้างต้นเลย -มันก่อให้เกิดประเภทแยกต่างหากของตัวเองซึ่งมีเพียงค่า `null`: +มันเป็นชนิดข้อมูลแยกต่างหาก ที่มีเพียงค่า `null` เท่านั้น: ```js let age = null; ``` -ใน JavaScript, `null` ไม่ใช่ "การอ้างอิงถึงอ็อบเจ็กต์ที่ไม่มีอยู่" หรือ "null pointer" เช่นเดียวกับภาษาอื่นๆ +ใน JavaScript `null` ไม่ใช่ "การอ้างอิงถึงออบเจ็กต์ที่ไม่มีอยู่จริง" หรือ "null pointer" เหมือนในบางภาษา -มันเป็นเพียงค่าพิเศษที่แสดงถึง "ไม่มีอะไร", "ว่างเปล่า" หรือ "ค่าไม่ทราบ" +แต่เป็นค่าพิเศษ ที่ใช้แทนความหมาย "ไม่มีอะไร", "ว่างเปล่า" หรือ "ไม่ทราบค่า" -โค้ดข้างต้นระบุว่าไม่ทราบ `age` +ในตัวอย่างโค้ดข้างต้น หมายความว่า `age` เป็นค่าที่ไม่ทราบ ## ค่า "undefined" -ค่าพิเศษ `undefined` ก็โดดเด่นเช่นกัน มันสร้างประเภทของตัวเอง เช่นเดียวกับ `null` +ค่าพิเศษ `undefined` นั้นมีลักษณะเฉพาะตัว โดยจัดเป็นชนิดข้อมูลแยกออกมาต่างหาก เช่นเดียวกับ `null` ความหมายของ `undefined` คือ "ยังไม่ได้กำหนดค่า" -ถ้าตัวแปรถูกประกาศ แต่ไม่ได้กำหนดค่า ค่าของมันจะเป็น `undefined`: +หากตัวแปรถูกประกาศแต่ยังไม่ได้กำหนดค่า ค่าของตัวแปรนั้นจะเป็น `undefined`: ```js run let age; -alert(age); // แสดง "undefined" +alert(age); // แสดงผลเป็น "undefined" ``` -ในทางเทคนิค คุณสามารถกำหนด `undefined` ให้กับตัวแปรไปตรงๆเลยก็ได้: +ในทางเทคนิค เราสามารถกำหนดค่า `undefined` ให้กับตัวแปรได้อย่างชัดเจน: ```js run let age = 100; @@ -206,26 +209,26 @@ let age = 100; // เปลี่ยนค่าเป็น undefined age = undefined; -alert(age); // "undefined" +alert(age); // แสดงผลเป็น "undefined" ``` -...แต่เราไม่แนะนำให้ทำเช่นนั้น โดยปกติ เราใช้ `null` เพื่อกำหนดค่า "ว่างเปล่า" หรือ "ไม่ทราบ" ให้กับตัวแปร ในขณะที่ `undefined` ถูกสงวนไว้เป็นค่าเริ่มต้นสำหรับสิ่งที่ยังไม่ได้กำหนดค่า +อย่างไรก็ตาม เราไม่แนะนำให้ทำเช่นนั้น โดยทั่วไปแล้ว นิยมใช้ `null` เพื่อกำหนดค่า "ว่างเปล่า" หรือ "ไม่ทราบค่า" ให้กับตัวแปร ส่วน `undefined` จะถูกสงวนไว้ใช้เป็นค่าเริ่มต้นสำหรับสิ่งที่ยังไม่ได้รับการกำหนดค่า -## อ็อบเจ็กต์และสัญลักษณ์ (Symbols) +## Object และ Symbol -ประเภท `object` มีความพิเศษ +ชนิดข้อมูล `object` นั้นมีความพิเศษ -ประเภทอื่นๆ ทั้งหมดเรียกว่า "primitive" เนื่องจากค่าของพวกมันสามารถมีเพียงสิ่งเดียวได้ (ไม่ว่าจะเป็นสตริง ตัวเลข หรืออะไรก็ตาม) ในทางตรงกันข้าม อ็อบเจ็กต์ใช้สำหรับจัดเก็บคอลเลกชันของข้อมูลและเอนทิตีที่ซับซ้อนมากขึ้น +ชนิดข้อมูลอื่นๆ ทั้งหมดเรียกว่า "primitive" เนื่องจากค่าของชนิดข้อมูลเหล่านั้นสามารถเก็บได้เพียงสิ่งเดียว (ไม่ว่าจะเป็น string, number หรืออย่างอื่น) ในทางตรงกันข้าม object ใช้สำหรับเก็บชุดของข้อมูลและสิ่งที่มีโครงสร้างซับซ้อนกว่า -เนื่องจากมีความสำคัญ อ็อบเจ็กต์จึงควรได้รับการพิจารณาเป็นพิเศษ เราจะจัดการกับอ็อบเจ็กต์ในบทต่อไป หลังจากที่เราเรียนรู้เพิ่มเติมเกี่ยวกับ primitive +ด้วยความสำคัญดังกล่าว object จึงสมควรได้รับการจัดการเป็นพิเศษ เราจะกล่าวถึงรายละเอียดเกี่ยวกับ object ในบท หลังจากที่เราได้เรียนรู้เพิ่มเติมเกี่ยวกับ primitive แล้ว -ประเภท `symbol` ใช้เพื่อสร้างตัวระบุที่ไม่ซ้ำกันสำหรับอ็อบเจ็กต์ เราต้องกล่าวถึงเรื่องนี้ที่นี่เพื่อความสมบูรณ์ แต่ยังคงเลื่อนรายละเอียดออกไปจนกว่าเราจะรู้จักอ็อบเจ็กต์ +ชนิดข้อมูล `symbol` ใช้สำหรับสร้างตัวระบุ (identifier) ที่ไม่ซ้ำกันสำหรับ object เราจำเป็นต้องกล่าวถึงมันที่นี่เพื่อให้ครบถ้วน แต่จะเลื่อนรายละเอียดไปจนกว่าเราจะเข้าใจเรื่อง object -## ตัวดำเนินการ typeof [#type-typeof] +## typeof operator [#type-typeof] -ตัวดำเนินการ `typeof` ใช้เพื่อตรวจสอบประเภทของข้อมูล โดยจะส่งคืนสตริงที่ระบุประเภทของข้อมูลนั้น ตัวดำเนินการนี้นำไปใช้ประโยชน์ได้มากมาย เช่น ประมวลผลข้อมูลประเภทต่างๆ ต่างกัน หรือเพียงแค่ต้องการตรวจสอบประเภทอย่างง่ายๆ +`typeof` operator จะคืนค่าชนิดข้อมูลของ operand มันมีประโยชน์เมื่อเราต้องการประมวลผลค่าที่มีชนิดข้อมูลแตกต่างกัน หรือเพียงแค่ต้องการตรวจสอบแบบรวดเร็ว -การเรียกใช้ `typeof x` จะส่งคืนสตริงที่ระบุประเภทของข้อมูลนั้น ตัวอย่างเช่น: +การเรียกใช้ `typeof x` จะคืนค่าเป็น string ที่ระบุชื่อชนิดข้อมูล: ```js typeof undefined // "undefined" @@ -236,7 +239,7 @@ typeof 10n // "bigint" typeof true // "boolean" -typeof "สวัสดี" // "string" +typeof "foo" // "string" typeof Symbol("id") // "symbol" @@ -253,41 +256,41 @@ typeof alert // "function" (3) */!* ``` -โค้ดสามบรรทัดสุดท้ายอาจต้องการคำอธิบายเพิ่มเติม: +สามบรรทัดสุดท้ายอาจต้องมีคำอธิบายเพิ่มเติม: -1. `Math` เป็นอ็อบเจ็กต์ในตัวที่ให้บริการเกี่ยวกับการคำนวณทางคณิตศาสตร์ เราจะเรียนรู้เพิ่มเติมเกี่ยวกับอ็อบเจ็กต์นี้ในบท ที่นี่ เป็นเพียงตัวอย่างของอ็อบเจ็กต์เท่านั้น -2. ผลลัพธ์ของ `typeof null` คือ `"object"` นี่คือข้อผิดพลาดที่ยอมรับกันอย่างเป็นทางการใน `typeof` ซึ่งมาจากยุคแรกของ JavaScript และยังคงอยู่เพื่อความเข้ากันได้ แน่นอนว่า `null` ไม่ใช่อ็อบเจ็กต์ มันเป็นค่าพิเศษที่มีประเภทแยกต่างหากของตัวเอง พฤติกรรมของ `typeof` นั้นผิดพลาดในกรณีนี้ -3. ผลลัพธ์ของ `typeof alert` คือ `"function"` เนื่องจาก `alert` เป็นฟังก์ชัน เราจะศึกษาฟังก์ชันในบทถัดไป ซึ่งเราจะเห็นว่าไม่มีข้อมูลประเภท "function" ใน JavaScript ฟังก์ชันเป็นส่วนหนึ่งของประเภทอ็อบเจ็กต์ แต่ `typeof` ปฏิบัติต่อฟังก์ชันแตกต่างกัน โดยส่งคืน `"function"` ซึ่งเป็นพฤติกรรมที่สืบทอดมาจากยุคแรกของ JavaScript เช่นกัน ในทางเทคนิค พฤติกรรมดังกล่าวไม่ถูกต้อง แต่สามารถนำไปใช้ได้อย่างสะดวกในทางปฏิบัติ +1. `Math` เป็น built-in object ที่มีฟังก์ชันทางคณิตศาสตร์ให้ใช้งาน เราจะเรียนรู้เพิ่มเติมในบท ที่นี่ใช้เพียงเป็นตัวอย่างของ object เท่านั้น +2. ผลลัพธ์ของ `typeof null` คือ `"object"` ซึ่งเป็นข้อผิดพลาดที่ยอมรับอย่างเป็นทางการใน `typeof` โดยมีมาตั้งแต่ยุคแรกเริ่มของ JavaScript และคงไว้เพื่อให้เข้ากันได้กับโค้ดเก่า อันที่จริง `null` ไม่ใช่ object แต่เป็นค่าพิเศษที่มีชนิดข้อมูลเป็นของตัวเอง การทำงานของ `typeof` ในกรณีนี้จึงไม่ถูกต้อง +3. ผลลัพธ์ของ `typeof alert` คือ `"function"` เพราะ `alert` เป็นฟังก์ชัน เราจะศึกษาเกี่ยวกับฟังก์ชันในบทถัดๆ ไป โดยจะเห็นว่าไม่มีชนิดข้อมูล "function" โดยเฉพาะใน JavaScript ฟังก์ชันจัดเป็นส่วนหนึ่งของชนิดข้อมูล object แต่ `typeof` ปฏิบัติต่อฟังก์ชันแตกต่างออกไป โดยคืนค่าเป็น `"function"` ซึ่งก็เป็นพฤติกรรมที่มีมาตั้งแต่ยุคแรกเริ่มของ JavaScript ในทางเทคนิคแล้ว พฤติกรรมดังกล่าวไม่ถูกต้อง แต่ในทางปฏิบัติอาจสะดวกกว่า ```smart header="ไวยากรณ์ `typeof(x)`" -บางทีคุณอาจพบเห็นไวยากรณ์อีกแบบหนึ่ง: `typeof(x)` มันเหมือนกับ `typeof x` +คุณอาจเจอไวยากรณ์รูปแบบอื่นด้วย เช่น `typeof(x)` ซึ่งมีความหมายเหมือนกับ `typeof x` -เพื่อให้ชัดเจน: `typeof` เป็นตัวดำเนินการ ไม่ใช่ฟังก์ชัน วงเล็บในที่นี้ไม่ใช่ส่วนหนึ่งของ `typeof` มันเป็นประเภทของวงเล็บที่ใช้สำหรับการจัดกลุ่มทางคณิตศาสตร์ +เพื่อให้ชัดเจน: `typeof` เป็น operator ไม่ใช่ฟังก์ชัน วงเล็บที่เห็นไม่ใช่ส่วนหนึ่งของ `typeof` แต่เป็นวงเล็บที่ใช้เพื่อจัดกลุ่มในเชิงคณิตศาสตร์ -โดยปกติ วงเล็บดังกล่าวจะประกอบด้วยนิพจน์ทางคณิตศาสตร์ เช่น `(2 + 2)` แต่ที่นี่มีเพียงอาร์กิวเมนต์เดียว `(x)` ไวยากรณ์นี้ช่วยให้หลีกเลี่ยงช่องว่างระหว่างตัวดำเนินการ `typeof` และอาร์กิวเมนต์ของมัน ซึ่งบางคนชอบใช้ +โดยปกติวงเล็บแบบนี้จะใช้ครอบนิพจน์ทางคณิตศาสตร์ เช่น `(2 + 2)` แต่ในที่นี้มีเพียงอาร์กิวเมนต์เดียวคือ `(x)` ในแง่ของไวยากรณ์ มันช่วยให้ไม่ต้องเว้นวรรคระหว่าง operator `typeof` กับอาร์กิวเมนต์ และบางคนชอบใช้แบบนี้ -บางคนชอบ `typeof(x)` แม้ว่าในทางไวยากรณ์ `typeof x` จะพบเห็นได้ทั่วไปกว่ามาก +อย่างไรก็ตาม ไวยากรณ์ `typeof x` ยังคงเป็นที่นิยมใช้กันมากกว่า `typeof(x)` แม้ว่าบางคนจะชอบใช้รูปแบบหลังก็ตาม ``` -## บทสรุป +## สรุป -มี 8 ประเภทข้อมูลพื้นฐานใน JavaScript +ใน JavaScript มีชนิดข้อมูลพื้นฐาน 8 ชนิด ได้แก่ -- เจ็ดประเภทข้อมูลแบบพื้นฐาน: - - `number` สำหรับตัวเลขทุกชนิด: จำนวนเต็มหรือจำนวนทศนิยม โดยจำนวนเต็มจำกัดอยู่ที่ ±(2^53-1) - - `bigint` สำหรับจำนวนเต็มความยาวไม่จำกัด - - `string` สำหรับสตริง สตริงอาจมีตัวอักษร 0 ตัวหรือมากกว่า - - `boolean` สำหรับ `true`/`false` - - `null` สำหรับค่าที่ไม่รู้จัก -- ประเภทแยกต่างหากที่มีค่าเดียว คือ `null` - - `undefined` สำหรับค่าที่ไม่ได้กำหนด -- ประเภทแยกต่างหากที่มีค่าเดียว คือ `undefined` - - `symbol` สำหรับตัวระบุเฉพาะที่ไม่ซ้ำกัน -- และหนึ่งประเภทข้อมูลที่ไม่ใช่แบบพื้นฐาน: - - `object` สำหรับโครงสร้างข้อมูลที่ซับซ้อนมากขึ้น +- ชนิดข้อมูล primitive 7 ชนิด: + - `number` สำหรับตัวเลขทุกประเภท ทั้งจำนวนเต็มและทศนิยม โดยจำนวนเต็มจะมีขอบเขตอยู่ที่ ±(253-1) + - `bigint` สำหรับจำนวนเต็มที่มีความยาวเท่าใดก็ได้ + - `string` สำหรับข้อความ โดยข้อความอาจมีตัวอักษรตั้งแต่ศูนย์ตัวขึ้นไป และไม่มีชนิดข้อมูลแยกต่างหากสำหรับตัวอักษรเพียงหนึ่งตัว + - `boolean` สำหรับค่า `true` หรือ `false` + - `null` สำหรับค่าที่ไม่ทราบ เป็นชนิดข้อมูลแยกต่างหากที่มีค่าเพียงค่าเดียวคือ `null` + - `undefined` สำหรับค่าที่ยังไม่ได้กำหนด เป็นชนิดข้อมูลแยกต่างหากที่มีค่าเพียงค่าเดียวคือ `undefined` + - `symbol` สำหรับการสร้างตัวระบุที่ไม่ซ้ำกัน +- และชนิดข้อมูลที่ไม่ใช่ primitive 1 ชนิด: + - `object` สำหรับโครงสร้างข้อมูลที่มีความซับซ้อนมากขึ้น -ตัวดำเนินการ `typeof` ช่วยให้เราสามารถดูได้ว่าข้อมูลประเภทใดถูกเก็บไว้ในตัวแปร +`typeof` operator ช่วยให้เราสามารถตรวจสอบชนิดข้อมูลที่ถูกเก็บอยู่ในตัวแปรได้ -- โดยทั่วไปใช้เป็น `typeof x` แต่ `typeof(x)` ก็ใช้ได้เช่นกัน -- ส่งคืนสตริงที่มีชื่อของประเภท เช่น `"string"` -- สำหรับ `null` จะส่งคืน `"object"` -- นี่เป็นข้อผิดพลาดในภาษา มันไม่ใช่อ็อบเจ็กต์จริงๆ +- โดยทั่วไปใช้ในรูปแบบ `typeof x` แต่ `typeof(x)` ก็สามารถใช้ได้เช่นกัน +- คืนค่าเป็น string ที่ระบุชื่อชนิดข้อมูล เช่น `"string"` +- สำหรับ `null` จะคืนค่าเป็น `"object"` ซึ่งถือเป็นข้อผิดพลาดในภาษา เพราะจริง ๆ แล้ว `null` ไม่ใช่ object -ในบทต่อๆไป เราจะมุ่งเน้นไปที่ค่าพื้นฐาน (primitive) ก่อน และเมื่อเราคุ้นเคยกับพวกมันแล้ว เราจะย้ายไปยังอ็อบเจ็กต์ +ในบทต่อ ๆ ไป เราจะมุ่งเน้นไปที่ค่า primitive และเมื่อเราคุ้นเคยกับมันแล้ว เราจะเริ่มศึกษาเกี่ยวกับ object ต่อไป \ No newline at end of file