null. nan. undefined

#พื้นฐานการเขียนเว็ปไซต์

#javascript

#null _nan_undefined

ตัวแปร null ใน JavaScript เป็นค่าที่แสดงถึงการ ไม่มีค่าโดยเจตนา หรือการที่ตัวแปรไม่ได้ชี้ไปยังวัตถุ (object) ใด ๆ ค่ะ

ลักษณะสำคัญของ null

ชนิดข้อมูล (Type): แม้ว่า null จะหมายถึง 'ไม่มีค่า' แต่เมื่อใช้ตัวดำเนินการ typeof กับ null จะได้ผลลัพธ์เป็น 'object' ซึ่งเป็นความผิดพลาดที่เกิดขึ้นในประวัติศาสตร์ของ JavaScript และยังคงอยู่

JavaScript

typeof null; // ผลลัพธ์คือ 'object'

ค่า Falsy: null ถือเป็นค่า falsy ซึ่งหมายความว่าเมื่อถูกแปลงเป็นค่าบูลีน (boolean) จะให้ผลลัพธ์เป็น false

ความแตกต่างจาก undefined:

null ถูกกำหนดค่าให้ตัวแปรโดยนักพัฒนา อย่างตั้งใจ เพื่อบ่งบอกว่าตัวแปรนั้นไม่มีค่า

undefined หมายถึงตัวแปรถูก ประกาศแล้วแต่ยังไม่ได้มีการกำหนดค่า หรือการเข้าถึงคุณสมบัติ (property) ที่ไม่มีอยู่ของวัตถุ

ตัวอย่างการใช้งาน

คุณอาจใช้ null เพื่อ:

กำหนดค่าเริ่มต้น: กำหนดให้ตัวแปรเริ่มต้นด้วยค่า 'ว่างเปล่า' ที่ทราบ

JavaScript

let selectedUser = null; // ผู้ใช้ที่ถูกเลือกยังไม่มี

ล้างค่าอ้างอิง: ลบการอ้างอิงจากวัตถุเพื่อช่วยในการจัดการหน่วยความจำ

JavaScript

let dataObject = { name: "Alice" };

// ... ใช้งาน dataObject ...

dataObject = null; // ล้างการอ้างอิงเมื่อไม่ต้องการวัตถุนี้อีกต่อไป

การเปรียบเทียบ

การเปรียบเทียบ ผลลัพธ์ หมายเหตุ

null == undefined true การเปรียบเทียบแบบหลวม (loose equality) ถือว่าทั้งสองมีค่าเท่ากัน

null === undefined false การเปรียบเทียบแบบเข้มงวด (strict equality) ถือว่าทั้งสองมีชนิดและค่าไม่เท่ากัน

null === null true -

null == 0 false null ไม่เท่ากับ 0

null > 0 false -

null >= 0 true เมื่อเปรียบเทียบทางคณิตศาสตร์ null มักถูกแปลงเป็น 0

undefined ใน JavaScript คือค่าที่แสดงถึงการ ขาดหายของค่า . มันเกิดขึ้นเมื่อตัวแปรถูก ประกาศแล้วแต่ยังไม่ได้ถูกกำหนดค่าเริ่มต้น หรือเมื่อพยายามเข้าถึงคุณสมบัติ (property) ของวัตถุ (object) หรือสมาชิกของอาร์เรย์ (array) ที่ไม่มีอยู่

ลักษณะสำคัญของ undefined

ชนิดข้อมูล (Type): ชนิดข้อมูลของ undefined คือ 'undefined'

JavaScript

typeof undefined; // ผลลัพธ์คือ 'undefined'

ค่า Falsy: undefined ถือเป็นค่า falsy ซึ่งหมายความว่าเมื่อถูกแปลงเป็นค่าบูลีน (boolean) จะให้ผลลัพธ์เป็น false

ความแตกต่างจาก null:

undefined คือค่าเริ่มต้นโดยอัตโนมัติเมื่อตัวแปรขาดค่า (การไม่มีค่าโดย ไม่ได้ตั้งใจ)

null คือค่าที่นักพัฒนา กำหนดเองอย่างเจตนา เพื่อบ่งบอกว่าตัวแปรนั้นไม่มีค่าที่ถูกต้อง หรือไม่ได้ชี้ไปยังวัตถุใด ๆ

ตัวอย่างที่ทำให้เกิด undefined

ตัวแปรที่ประกาศแต่ไม่มีค่าเริ่มต้น:

JavaScript

let name;

console.log(name); // ผลลัพธ์: undefined

การเข้าถึงคุณสมบัติที่ไม่มีในวัตถุ:

JavaScript

const user = { id: 101 };

console.log(user.email); // ผลลัพธ์: undefined

ฟังก์ชันที่ไม่ได้คืนค่า (return) ชัดเจน:

JavaScript

function greet(name) {

console.log(`Hello, ${name}!`);

// ฟังก์ชันนี้ไม่ได้ใช้คำสั่ง return

}

const result = greet('Alice');

console.log(result); // ผลลัพธ์: undefined

การเปรียบเทียบ

การเปรียบเทียบ ผลลัพธ์ หมายเหตุ

undefined == null true การเปรียบเทียบแบบหลวม (loose equality) ถือว่าทั้งสองมีค่าเท่ากัน

undefined === null false การเปรียบเทียบแบบเข้มงวด (strict equality) ถือว่าทั้งสองมีชนิดและค่าไม่เท่ากัน

undefined === undefined true

NaN ใน JavaScript ย่อมาจาก "Not a Number" (ไม่ใช่ตัวเลข) เป็นค่าพิเศษในภาษา JavaScript ที่แสดงถึงผลลัพธ์ของการดำเนินการทางคณิตศาสตร์ที่ไม่สามารถให้ค่าที่เป็นตัวเลขที่ถูกต้องได้

ลักษณะสำคัญของ NaN

ชนิดข้อมูล (Type): แม้ว่าจะหมายถึง "ไม่ใช่ตัวเลข" แต่ชนิดข้อมูลของ NaN คือ 'number'

JavaScript

typeof NaN; // ผลลัพธ์คือ 'number'

ค่า Falsy: NaN ถือเป็นค่า falsy

สาเหตุที่ทำให้เกิด NaN

NaN มักจะเกิดขึ้นเมื่อคุณพยายามดำเนินการทางคณิตศาสตร์ที่ไม่สมเหตุสมผลหรือไม่สามารถทำได้ เช่น:

การหารศูนย์ด้วยศูนย์:

JavaScript

0 / 0; // ผลลัพธ์: NaN

การดำเนินการทางคณิตศาสตร์กับค่าที่ไม่ใช่ตัวเลข (Non-numeric values):

JavaScript

'Hello' * 5; // ผลลัพธ์: NaN

10 - 'World'; // ผลลัพธ์: NaN

การพยายามแปลงค่าที่ไม่ใช่ตัวเลขให้เป็นตัวเลข:

JavaScript

parseInt('apple'); // ผลลัพธ์: NaN

Number('oops'); // ผลลัพธ์: NaN

การเปรียบเทียบและการตรวจสอบ NaN

สิ่งที่สำคัญที่สุดที่ต้องจำเกี่ยวกับ NaN คือ:

NaN ไม่เท่ากับตัวมันเอง: นี่เป็นคุณสมบัติพิเศษของมันที่แตกต่างจากค่าอื่น ๆ ใน JavaScript

JavaScript

NaN == NaN; // ผลลัพธ์: false

NaN === NaN; // ผลลัพธ์: false

ดังนั้น การตรวจสอบว่าค่าใดเป็น NaN คุณจึงไม่สามารถใช้ตัวดำเนินการเปรียบเทียบ (== หรือ ===) ได้ แต่ต้องใช้ฟังก์ชันเฉพาะ:

ฟังก์ชัน isNaN(): เป็นวิธีที่แนะนำในการตรวจสอบว่าค่าหนึ่งเป็น NaN หรือไม่

JavaScript

isNaN(10); // ผลลัพธ์: false (10 เป็นตัวเลข)

isNaN(NaN); // ผลลัพธ์: true

isNaN('Hello'); // ผลลัพธ์: true (เพราะ 'Hello' ถูกพยายามแปลงเป็นตัวเลขแล้วได้ NaN)

ฟังก์ชัน Number.isNaN(): เป็นวิธีที่เข้มงวดกว่า และดีกว่า ในการตรวจสอบจริง ๆ ว่าค่าเป็น NaN หรือไม่ โดยจะไม่พยายามแปลงค่าที่ไม่ใช่ตัวเลขให้เป็นตัวเลขก่อน (ดังที่ isNaN() ทำ)

JavaScript

Number.isNaN(NaN); // ผลลัพธ์: true

Number.isNaN('Hello'); // ผลลัพธ์: false (เพราะ 'Hello' ไม่ใช่ค่า NaN โดยตรง