การตรวจสอบข้อมูลว่าเป็น number หรือไม่ใน JavaScript

number เป็น Data Type ชนิดหนึ่งใน JavaScript เป็นข้อมูลชนิดตัวเลข และเนื่องจากใน JavaScript มีเฉพาะ Number ไม่มี Integer ไม่มี Float ดังนั้นการเป็น Number จึงหมายถึงทั้ง จำนวนเต็มและทศนิยม ดังนั้นการ ตรวจสอบว่าค่าที่ได้นั้นเป็น Number รึเปล่าจึงหมายถึงทั้งจำนวนเต็มและเลขทศนิยม

เราสามารถใช้ function isNaN() ในการตรวจสอบว่าตัวแปรนั้นเป็น Number หรือไม่ แต่ค่าที่ได้จากฟังก์ชั่นจะเป็น false เมื่อค่าที่ส่งเข้าไปเป็นตัวเลข เนื่องจากชื่อ ฟังก์ชั่นย่อมาจาก is Not a Number แสดงว่าจะ return true เมื่อข้อมูลไม่ใช่ตัวเลข

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

หรือใช้ในการทำ Validation

เราสามารถนำเอา function นี้ไปประยุกต์ใช้งานได้อีกหลายๆรูปแบบที่เกี่ยวกับตัวเลข

ค่าที่สามารถแปลงเป็น False ได้ หรือเทียบเท่ากับ False

PHP เป็นภาษาที่ Dynamic Type โดย Complier จะทำการ convert Data Type ให้โดยอัตโนมัติ ดังนั้นสิ่งที่ต้องระมัดระวังคือ การตวจสอบว่าค่าที่ได้เป็น FALSE นั้น จริงๆแล้วอาจเป็นค่าที่เทียบเท่า FALSE ได้ ยกตัวอย่างเช่น

การใช้ strpos() ถ้าเราทำการตรวจสอบเงื่อนไข โดยใช้ “==” อาจทำให้เกิดการผิดพลาดได้ เพราะ ถ้าตัวอักษรหรือข้อความที่เราทำการค้นหาเป็นตัวแรกในข้อความ ค่าที่ return กลับมาจะเป็น 0 ซึ่ง PHP จะมองว่าเป็น FALSE กลายเป็นว่าเราหาตัวอักษรหรือข้อความที่เราต้องการไม่พบทั้งๆ ที่จริงๆแล้วพบตั้งแต่ตัวแรกของข้อความ เราจึงจำเป็นต้องใช้ “===” ในการเปรียบเทียบ

Read more ค่าที่สามารถแปลงเป็น False ได้ หรือเทียบเท่ากับ False

รู้จักกับตัวแปรแบบ Primitive และ Reference Type ใน JavaScript ตอนที่ 2

จากที่เขียนบทความเกี่ยวกับ Primitive Type และ Reference Type ใน JavaScript ไปในตอนที่แล้วก็ยังมีประเด็นอีกเล็กน้อยที่อาจยังไม่ได้พูดถึงเลยเพิ่งมาเขียนเพราะขี้เกียจ ^_^

ใน primitive type ก็มีบ้างครั้งที่มันจะแปลงร่างกลายเป็น Object โดยที่เราไม่รู้ตัว ซึ่งโดยปกติแล้วมันจะไม่ทำอย่างนั้น ต้องบอกก่อนว่าการที่เราประกาศตัวแปรชนิดที่เป็นตัวเลขเราสามารถประกาศเป็น Object ได้ด้วยคำสั่ง

1
var num = 10;

หรือ

1
var num = new Number(10);

ซึ่งสองคำสั่งนี้ให้ผลลัพธ์เหมือนกันคือ  10 แต่เป็น 10 คนละแบบอย่าเพิ่งรีบงง สิ่งที่แตกต่างกันคือแบบแรกจะเป็น 10 ที่เป็น Primitive Type ของ JavaScript เราจะไม่สามารกำหนด property ให้กับมันได้เช่น เราจะสั่ง

1
num.prop = 'test';

แบบนี้ไม่ได้ แต่ถ้าเราประกาศตัวแปรแบบที่สองคือใช้ new Number() คำว่า number ต้องเป็น N ใหญ่ด้วยนะอย่าลืม ซึ่งการประกาศตัวแปรแบบนี้มันจะมี type เป็น Object เราสามารถทดสอบได้ว่าตัวแปรที่เราได้มานั้นเป็น number ที่เป็น Primitive Type หรือว่า เป็น Object ที่เป็น Reference Type โดยการใช้คำสั่ง

1
typeof(num)

เราอาจทำการ log ดูโดยใช้คำสั่ง console.log ก็ได้ จะทำให้เรารู้ว่าชนิดของ num นั้นเป็นอะไรกันแน่ ซึ่งถ้าเป็น Object เราจะสามารถกำหนด property อะไรให้มันก็ได้ เพราะฉะนั้นเราจะสั่ง num.prop = ‘test’ ได้หรือเพิ่ม method ที่ทำงานเฉพาะกับตัวเลขนี้ก็ได้ แต่คงไม่มีใครทำเพราะมันดูไม่ค่อยมีประโยชน์เท่าไหร่แต่ที่พยายามเขียนขึ้นมาเพราะว่าเราจะได้เข้าใจว่าการที่เราสั่ง

1
"IRobust".length

ตัวแปร JavaScript จะทำการแปลง “IRobust” ที่เป็น string แบบ primitive type ไปเป็น Object ที่เป็น Reference Type ตอน run-time หลังจากนั้นก็จะแปลงกลับมาเป็น string ที่เป็น Primitive Type ตามเดิม

 

 

รู้จักกับตัวแปรแบบ Primitive และ Reference type ใน JavaScript

ตัวแปรใน JavaScirpt จะถูกแบ่งออกเป็น 2 ประเภทใหญ่ๆคือ primitive type และ reference type ซึ่งในแต่ละประเภทจะมีความแตกต่างกันที่ต้องทำความเข้าใจอยู่พอสมควรถึงแม้ว่าใน JavaScript เราจะไม่ต้องทำการระบุ data type ก็ตาม

Primitive Type ถ้าแปลตามความหมายคือตัวแปรที่เป็นพื้นฐานซึ่งจะประกอบไปด้วย

  1. Number    -> ข้อมูลที่เป็นตัวเลขทั้งหมด
  2. String      -> ข้อมูลที่เป็นข้อความ รวมทั้ง ‘1234’
  3. Boolean   -> ข้อมูลที่เป็น true หรือ false
  4. undefined -> ถ้าเราประกาศตัวแปรขึ้นมาโดยที่ยังไม่ได้กำหนดค่าจะเป็นข้อมูลชนิดนี้
  5. null          -> เป็นประเภทของข้อมูลที่ยังไม่แน่ใจว่าจะมีหรือไม่มี

ซึ่งลักษณะของ primitive type จะเป็นข้อมูลพื้นฐาน พูดง่ายๆก็คือข้อมูลใน JavaScript ถ้าไม่เป็น ข้อมูลที่เป็น primitive type ก็จะเป็นข้อมูลที่เกิดจากข้อมูลที่เป็น primitive type นี้ผสมกัน

Reference Type เป็นประเภทของข้อมูลที่เกิดจากการผสมกันของ primitive type ซึ่งจะประกอบไปด้วย

  1. Object
  2. Array
  3. Function
  4. Date
  5. RegExp

ข้อมูลประเภทที่เป็น reference จะเป็นข้อมูลที่แตกต่างออกไปจากข้อมูลประเภท primitive ซึ่งการใช้งาน reference type จะต้องทำการ instantiate ด้วย คำสั่ง new ทั้งหมดยกเว้น function และ Array ซึ่งจริงๆแล้ว Array ก็ต้องทำการ new เหมือนกันแต่สามารถเขียนสั้นๆได้เป็น

1
var arr = [];

หรือ

1
var arr = Array;

แต่สุดท้ายจะต้องถูกแปลงเป็น

1
var arr = new Array();

ดังนั้นจะมีเฉพาะ function ตัวเดียวเท่านั้นที่แตกต่างจากชาวบ้านเค้า เพราะ ภาษา JavaScript เป็น context switching คือการเปลี่ยน context ไปมา ซึ่งการ instantiate หรือการใช้คำสั่ง new จะไม่ได้ทำการจองพื้นที่ในหน่วยความจำและสร้าง reference เหมือนกับภาษาอื่น แต่จะเป็นการสร้าง reference ไปยัง function ที่เป็น context ตัวนึงเหมือนกัน ดังนั้นจึงสรุปว่า function เป็น context อยู่แล้วเลยไม่ต้อง new

รู้จักกับตัวแปรใน JavaScript

ใน JavaScript อย่างที่เรารู้ๆกันอยู่ว่าเราจะประกาศตัวแปรหรือไม่ก็ได้ ซึ่งตาม best practice ทั่วๆไปก็ต้องแนะนำให้ประกาศไว้อยู่แล้วเพื่อให้ code นั้น maintain ได้ง่าย แต่นอกจากเหตุผลนี้แล้วจริงๆแล้วการประกาศตัวแปรและไม่ประกาศมีความแตกต่างกันอย่างมากคือ ถ้าเราประกาศตัวแปร ตัวแปรนั้นจะถูกผูกติดกับ context หรือบริบทของมัน หมายถึง ถ้าอยู่นอกสุดก็จะผูกติดอยู่กับ window object

1
var variable;

ถ้าอยู่ใน function ก็จะผูกติดอยู่กับ function ที่ตัวแปรนั้นอาศัยอยู่

1
2
3
function foo(){
   var variable;
}

หรือ

1
2
3
var foo = function(){
   var variable;
}

และในกรณีที่เราไม่ได้ทำการประกาศตัวแปร อยู่ๆก็มีการใช้งานตัวแปรนั้นเลยมันจะออกไปอยู่ใน global scope ซึ่งถือว่าเป็น scope ที่ใหญ่ที่สุด ไม่ว่าใครก็สามารถเรียกใช้งานตัวแปรที่อยู่ใน global scope นี้ได้ ฟังดูอาจเหมือนว่าเป็นข้อดีแต่จริงๆแล้วไม่ใช้ เพราะการ maintain จะยากขึ้น ลองคิดดูว่าเราจะหาที่มาของตัวแปรจากตรงไหน ไม่ว่าจะเป็นการเขียนโปรแกรมด้วยภาษาใดๆก็แล้วแต่ พยายามที่จะใช้งานตัวแปรที่เป็น global ให้น้อยที่สุด แม้แต่ php เองก็แนะนำว่าไม่ควรใช้ตัวแปรประเภท global

1
global $variable;

หรือ

1
$GLOBALS['variable'];

เพราะมันทำให้เกิด dependencies ซึ่งจะทำให้ code ของเรา reuse ได้ยาก ในทางเดียวกัน javascript ก็เช่นเดียวกัน นอกจาก code จะแก้ไขได้ยากแล้วยังมีโอกาสที่ code เราจะตั้งชื่อตัวแปรซ้ำกันได้อีกด้วยเนื่องจากมันไม่ได้ผูกติดอยู่กับ window object ทำให้หลายๆ window สามารถเรียกใช้งานตัวแปรนี้ได้