ตัวแปรและประเภทข้อมูลใน JavaScript ส่วนที่ 3 หลักสูตร JavaScript จาก Beginner ถึง Advanced ใน 10 บล็อกโพสต์

นี่เป็นส่วนที่ 3 ของชุดโพสต์บล็อก JavaScript ที่จะช่วยคุณสำรวจหัวข้อของตัวแปรและประเภทข้อมูลใน JavaScript ในตอนท้ายของชุดนี้ คุณจะรู้พื้นฐานทั้งหมดที่คุณต้องรู้เพื่อเริ่มเขียนโค้ดใน JavaScript เพื่อไม่ให้เป็นการเสียเวลา มาเริ่มกันเลยกับบทช่วยสอนที่สาม

ตัวแปรและชนิดข้อมูลใน JavaScript – สารบัญ:

1. ตัวแปร
2. ชนิดข้อมูลพื้นฐานใน JavaScript

ในบล็อกโพสต์นี้ เราจะดำเนินการต่อจากจุดที่เราทิ้งไว้จากโพสต์บล็อกที่สอง ในขั้นตอนนี้ คุณควรเปิดเบราว์เซอร์ Google Chrome และเปิดคอนโซล JavaScript โดยเฉพาะ หากคุณปิดมันด้วยเหตุผลบางประการ เป็นเวลาที่ดีที่จะเปิดมันขึ้นมาใหม่

หากคุณใช้ Mac แป้นพิมพ์ลัดเพื่อเปิดคอนโซลคือกด "Option + Command + J" หลังจากที่คุณเปิด Chrome หากคุณใช้อุปกรณ์ Windows คุณสามารถใช้แป้นพิมพ์ลัดของ “Control + Shift + J” เพื่อเปิดคอนโซล JavaScript เมื่อคุณเปิด Chrome หรือคุณสามารถไปที่เมนูด้านบนและไปที่ View -> Developer -> JavaScript Console

ตัวแปร

ตัวแปรใน JavaScript หรือภาษาการเขียนโปรแกรมอื่น ๆ เป็นเรื่องธรรมดามาก และมันเป็นเหตุผลที่ดี ตัวแปรมีบทบาทสำคัญมากในการเขียนโปรแกรม โดยสรุป ตัวแปรอนุญาตให้คุณจัดเก็บข้อมูลบางอย่างเพื่อย้ายข้อมูลไปรอบๆ แก้ไข อัปเดต หรือลบข้อมูลในโปรแกรมของคุณ เป็นแนวคิดที่สำคัญอย่างยิ่งที่คุณสามารถสร้างตัวแปรได้ 3 วิธี ศัพท์แสงการเขียนโปรแกรมสำหรับสร้างตัวแปรเรียกว่า "การประกาศตัวแปร" ซึ่งโดยทั่วไปหมายความว่าเรากำลังประกาศตัวแปรในหน่วยความจำของคอมพิวเตอร์

ในการสร้างตัวแปร เราจะใช้คำหลักหนึ่งใน 3 คำ ได้แก่ "var", "let" และ "const" สิ่งแรกที่คุณควรทราบเกี่ยวกับคีย์เวิร์ดทั้ง 3 คำนี้คือจนถึงปี 2015 มีการใช้คีย์เวิร์ด "var" เท่านั้น และคีย์เวิร์ด "let" และ "const" ได้รับการแนะนำด้วยมาตรฐาน JavaScript ที่เรียกว่า ES6 หรือ ES2015

หากคุณไม่รู้ว่า ES6 หรือ ES2015 นี่คือสิ่งที่คุณควรทราบ เมื่อ JavaScript เปิดตัวครั้งแรก บริษัทต่างๆ ได้ใช้ JavaScript เวอร์ชันต่างๆ กัน และต้องมีมาตรฐานเพื่อให้โค้ดของคุณทำงานได้อย่างคาดเดาและเชื่อถือได้ในเบราว์เซอร์หลักทั้งหมด ดังนั้นองค์กรที่เรียกว่า ECMA (สมาคมการผลิตคอมพิวเตอร์แห่งยุโรป) จึงมีชุดมาตรฐาน JavaScript ที่เบราว์เซอร์ควรนำไปใช้ ตราบใดที่คุณปฏิบัติตามมาตรฐานเหล่านั้นเมื่อคุณเขียน JavaScript โค้ดของคุณควรรันอย่างคาดเดาได้ตามมาตรฐานเหล่านั้น มาตรฐานนี้เรียกว่า EcmaScript และพวกเขาได้เผยแพร่มาตรฐานที่ได้รับการปรับปรุงมาตั้งแต่ปี 1997 และตั้งแต่ปี 2015 พวกเขาได้ออกมาตรฐานเหล่านี้ทุกปี และด้วยเหตุนี้มาตรฐานที่ปล่อยออกมาล่าสุดจึงเรียกว่า ES2021 ในขณะที่เขียนโพสต์บนบล็อกนี้

แต่ไม่ใช่ว่าทุกรุ่นจะเหมือนกัน ความแตกต่างของเวอร์ชั่นบางรุ่นนั้นไม่ใหญ่เท่าที่ควร ในขณะที่บางรุ่นก็ทำให้เกิดการเปลี่ยนแปลงครั้งใหญ่กับภาษา การเปลี่ยนแปลงครั้งใหญ่ครั้งล่าสุดเกิดขึ้นกับ ES2015 หรือที่เรียกว่า ES6 เนื่องจากเป็นการเปิดตัวมาตรฐาน ECMAScript เวอร์ชันหก การเปลี่ยนแปลงที่สำคัญประการหนึ่งเกิดขึ้นกับการประกาศตัวแปร

ก่อน ES6 จะใช้เฉพาะคีย์เวิร์ด “var” และเป็นวิธีเดียวในการประกาศตัวแปร จึงเป็นที่มาของชื่อ “var” คีย์เวิร์ด var มีความยืดหยุ่นซึ่งอาจทำให้เกิดปัญหาที่ไม่ต้องการ เนื่องจากมีความยืดหยุ่นในการใช้งานอย่างมาก จึงง่ายกว่าที่จะทำผิดพลาดกับตัวแปรหากคุณระมัดระวังน้อยกว่าที่ควรจะเป็น ตัวอย่างเช่น หากคุณประกาศตัวแปรชื่อ “user1” คุณจะไม่สามารถประกาศตัวแปรชื่อ user1 อีกครั้งด้วยคีย์เวิร์ด “let” และ “const” ใหม่ แต่คุณสามารถทำได้ด้วยคีย์เวิร์ด “var” และถ้าคุณลืมไปว่าคุณมีผู้ใช้1 ในโปรแกรมของคุณแล้ว ครั้งที่สองที่คุณประกาศผู้ใช้1 ด้วยข้อมูลผู้ใช้อื่น คุณจะแทนที่ข้อมูลของผู้ใช้รายแรกจริง ซึ่งจะลบข้อมูลของผู้ใช้รายแรกอย่างมีประสิทธิภาพ

// this can cause confusion
var user1 = "John";
var user1 = "Jack";
// if you try to do the same thing 
// with let or const you will get an error
let user1 = "John";
let user1 = "Jack";
// likewise you will also get an error
// if you try to do the same thing with the const keyword
const user1 = "John";
const user1 = "Jack";

แต่ไม่ใช่ว่าคุณจะไม่เห็นคีย์เวิร์ด “var” ถูกใช้ที่ไหนเลย คุณจะเห็นมันโดยเฉพาะหลักสูตร JavaScript ระดับเริ่มต้นบางหลักสูตร โดยเฉพาะอย่างยิ่งหากพวกเขามีอายุสองสามขวบ มีบทช่วยสอนมากมายที่จะยังคงแสดงวิธีการเขียน JavaScript แบบเก่าให้คุณเห็น แต่ความจริงก็คือ มันไม่ใช่แนวทางปฏิบัติที่ดีที่สุดที่จะใช้สิ่งนั้นอีกต่อไป แนวทางปฏิบัติที่ดีที่สุดคือการใช้คีย์เวิร์ด "let" หรือ "const" เมื่อประกาศตัวแปร ทั้งนี้ขึ้นอยู่กับความต้องการของคุณ แต่เรากำลังพูดถึงความต้องการอะไร? โดยสรุป หากคุณกำลังวางแผนที่จะเปลี่ยนค่าภายในตัวแปร คุณจะต้องใช้คีย์เวิร์ด "let" ถ้าคุณรู้ว่าคุณจะไม่เปลี่ยนค่าในตัวแปร คุณจะต้องใช้ "const" แทนที่. มาดูตัวอย่างการประกาศตัวแปรโดยใช้ทั้ง let และ const

// we can use "let" when we want to track the game level of the user
// because we know that it will change
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we can use the "const" keyword when declaring user ID
// because we know that we won't change it
const userId = 1010101999;

หากคุณสังเกตจากโค้ดด้านบนด้วยแนวทางปฏิบัติที่ดีที่สุดล่าสุด เราจะเขียนคีย์เวิร์ดสำหรับการประกาศเพียงครั้งเดียว และเราจะทำเช่นนั้นเมื่อเราประกาศตัวแปรในครั้งแรก เมื่อเราต้องการเปลี่ยนค่าภายในตัวแปรในภายหลัง เราจะไม่ใช้คีย์เวิร์ดใดๆ ก่อนชื่อตัวแปร

เมื่อเราต้องการเข้าถึงข้อมูลที่ตัวแปรหรือค่าคงที่เหล่านี้มีอยู่ เราก็สามารถใช้ชื่อของมันได้ ตัวอย่างเช่น หากเราต้องการแสดงระดับเกมและ ID ผู้ใช้ให้ผู้ใช้เห็น เราจะแสดงด้วยรหัสต่อไปนี้:

// we can add the userID to the end of the sentence with a plus sign
// we will explain this later on in the tutorial
alert("Your user ID is: " + userId);
// we can also show the user their game level like the following
alert("Your current game level is: " + gameLevel);
// alternatively we can directly display 
// the contents of the variables by showing them inside an alert
alert(userId);
alert(gameLevel);

การรันโค้ดสองช่วงสุดท้ายจะให้ผลลัพธ์ต่อไปนี้:

จะตั้งชื่อตัวแปรของคุณอย่างไร?

เมื่อตั้งชื่อตัวแปรของคุณ คุณควรคำนึงถึงกฎและแบบแผนบางประการ ข้อควรพิจารณาประการแรกคือว่าอักขระใดบ้างที่ใช้ตั้งชื่อตัวแปรของคุณได้ พวกเขาสามารถขึ้นต้นหรือลงท้ายด้วยตัวเลขได้หรือไม่? มีความจริงที่ไม่ได้พูดกันทั่วไปในการตั้งชื่อตัวแปรของคุณหรือไม่? มาตอบกันทั้งหมดและอีกมากมาย

ภาษาโปรแกรมต่างๆ มีหลักการตั้งชื่อตัวแปรต่างกัน ใน JavaScript แบบแผนคือการตั้งชื่อพวกเขาด้วยสิ่งที่เรียกว่า "camel casing" และเป็นแบบนี้ หากชื่อตัวแปรมีคำเพียงคำเดียว คุณก็เขียนคำนั้นด้วยตัวพิมพ์เล็กทั้งหมด หากชื่อตัวแปรมีหลายคำ ให้เขียนคำแรกด้วยตัวพิมพ์เล็กทั้งหมด และใช้อักษรตัวพิมพ์ใหญ่ในคำที่ตามมาทั้งหมด และเขียนโดยไม่มีการเว้นวรรคหรือเครื่องหมายอื่นๆ ตัวอย่างเช่น หากเรากำลังสร้างเกม เราสามารถตั้งชื่อตัวแปรดังนี้:

// a single word variable
let strength = 50;
// a descriptive name that includes multiple words
let numberOfArrowsLeft = 145;

นอกจากการใช้ตัวอักษรแล้ว เรายังสามารถใช้ตัวเลข เครื่องหมายดอลลาร์ และเครื่องหมายขีดล่างในชื่อตัวแปรได้อีกด้วย สิ่งสำคัญคือต้องสังเกตว่าคุณไม่สามารถเริ่มชื่อตัวแปรด้วยตัวเลขได้ แต่คุณสามารถลงท้ายด้วยตัวเลขได้

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

โปรดทราบว่าเพียงเพราะเป็นไปได้ เราไม่ต้องการตั้งชื่อตัวแปรของเราด้วยชื่อที่ไม่ชัดเจนหรือด้วยสัญลักษณ์ และนั่นเป็นอีกหัวข้อหนึ่งด้วยตัวมันเอง เมื่อตั้งชื่อตัวแปร หลักการคือต้องมีชื่อที่ชัดเจนและสื่อความหมาย ตัวอย่างเช่น หากเราจะตั้งชื่อตัวแปรเพื่อแสดงจำนวนลูกศรที่เหลืออยู่ในกระเป๋านักธนู เราควรใช้ชื่อที่สื่อความหมาย เช่น ชื่อที่เราใช้ในตัวอย่างด้านบน หากเราใช้เพียง:

let x = 145;

ชื่อนี้ไม่ได้บอกอะไรเราเกี่ยวกับคุณค่าของมัน และแม้กระทั่งสองสามวันหลังจากเขียนโค้ดนี้ เราก็จะต้องอ่านโค้ดรอบๆ เพื่อทำความเข้าใจว่าตัวแปรนั้นอาจหมายถึงอะไร นั่นเป็นเหตุผลว่าทำไม เพื่อความชัดเจนของคุณเองในการเขียนโค้ด และสำหรับตัวคุณเองในอนาคตที่อาจตรวจสอบโค้ด สิ่งสำคัญคือคุณต้องคุ้นเคยกับการตั้งชื่อตัวแปรของคุณอย่างชัดเจนและสื่อความหมาย สิ่งนี้จะยิ่งมีความสำคัญมากขึ้นเมื่อคุณเริ่มทำงานกับผู้อื่นและแสดงรหัสของคุณให้พวกเขาเห็น

ณ จุดนี้คุณอาจคิดว่า: ดีมากที่เราสามารถย้ายข้อมูลไปรอบๆ และยังสามารถเปลี่ยนแปลงได้โดยใช้ตัวแปร แต่ข้อมูลที่เรากำลังพูดถึงที่นี่คืออะไร? ทำไมเราใส่อะไหล่ในใบเสนอราคาแต่บางส่วนไม่อยู่ในใบเสนอราคา? เพื่อตอบคำถามนั้นและอื่น ๆ มาดูประเภทข้อมูลพื้นฐานใน JavaScript

ชนิดข้อมูลพื้นฐานใน JavaScript

ข้อมูลประเภทต่างๆ ทำสิ่งต่างๆ ได้ดี ในประเภทข้อมูลพื้นฐานนี้ในบทช่วยสอน JavaScript เราจะเห็นข้อมูล 3 ประเภทพื้นฐานที่สุดซึ่งมักใช้ใน JavaScript ต่อไปในซีรีส์นี้ เราจะเรียนรู้เกี่ยวกับประเภทข้อมูลอื่นๆ ใน JavaScript เมื่อคุณเรียนรู้ข้อมูลพื้นฐาน 3 ประเภทแรกเหล่านี้แล้ว การเรียนรู้ประเภทข้อมูลอื่นๆ จะง่ายขึ้นมาก ข้อมูล 3 ประเภทที่เราจะได้เห็นในบทช่วยสอนนี้คือ: Strings, Numbers และ Booleans เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มกันที่อันแรกกันเลยดีกว่า

เครื่องสาย

หากคุณได้ติดตามการสอนตั้งแต่เริ่มต้น แสดงว่าคุณได้ทำงานกับประเภทข้อมูลสตริงแล้ว! เมื่อเราเขียนข้อความแจ้งเตือนว่า “สวัสดี ชาวโลก!” ที่ใช้ชนิดข้อมูลสตริงเพื่อเก็บข้อความที่เราเขียน ใน JavaScript มี 3 วิธีในการแสดงสตริง อย่างแรกคือการล้อมรอบข้อความของคุณด้วยเครื่องหมายอัญประกาศคู่ ประการที่สองคือการล้อมรอบข้อความของคุณด้วยเครื่องหมายอัญประกาศเดี่ยว และข้อที่สามคือการล้อมรอบข้อความของคุณด้วยเครื่องหมายย้อนกลับ ทั้งสามมีลักษณะดังนี้:

const string1 = "Some text here.";
const string2 = 'Some text here.';
const string3 = `Some text here.`;

อย่างที่คุณเห็น อันที่มี "เครื่องหมายย้อนกลับ" นั้นดูค่อนข้างคล้ายกับอัญประกาศเดี่ยว แต่จะวางกลับเล็กน้อย การใช้เครื่องหมายย้อนกลับเพื่อสร้างสตริงเป็นคุณลักษณะที่นำมาใช้กับ ES6 เพื่อให้ทำงานกับข้อมูลที่เป็นข้อความได้ง่ายขึ้น มันมีข้อดีหลายประการมากกว่าอีกสองข้อก่อนหน้า ตามธรรมเนียมแล้ว คุณอาจเห็นเครื่องหมายคำพูดคู่หรือเครื่องหมายย้อนกลับถูกใช้บ่อยขึ้น คุณจะพบเครื่องหมายถูกที่ปุ่มซ้ายของหมายเลข 1 ในแป้นพิมพ์

การใช้เครื่องหมายอัญประกาศคู่ดูคุ้นเคยและเข้าใจได้ง่ายขึ้นในรูปลักษณ์แรก แต่เครื่องหมายย้อนกลับมีข้อดีโดยรวมมากกว่า ในตัวอย่างนี้ ทั้ง 3 ตัวทำงานในลักษณะเดียวกับที่เป็นตัวอย่างง่ายๆ หากต้องการแสดงทั้งสามรายการพร้อมกัน หรือแม้แต่ในบรรทัดเดียวกัน สิ่งหนึ่งที่เราทำได้คือเขียนชื่อและใช้เครื่องหมายบวกระหว่างอักขระทั้งสองเพื่อเพิ่มสตริงให้กันและกัน

alert(string1 + string2 + string3);

ดังที่คุณเห็นทั้ง 3 รายการจะปรากฏขึ้นทันทีหลังจากรายการใดรายการหนึ่งสิ้นสุดลง นี่เป็นเพราะเพิ่งบอกให้ล่ามเพิ่มสตริงให้กันและกัน หากเราต้องการเพิ่มช่องว่างระหว่างนั้น เราสามารถเพิ่มช่องว่างนั้นด้วยสตริงอื่นได้เสมอ

alert(string1 + " " + string2 + " " + string3);

นอกจากนี้เรายังสามารถตรวจสอบข้อมูลของตัวแปรโดยการเขียน "typeof" ไว้ข้างหน้า ตัวอย่างเช่น:

alert(typeof string1);

ตัวเลข

เมื่อเราทำงานกับตัวเลขใน JavaScript เรามักจะใช้ประเภทข้อมูล "Number" เป็นวิธีที่ง่ายที่สุดในการเริ่มต้นและแทบไม่มีช่วงการเรียนรู้เลย

เมื่อพิมพ์ตัวเลข จะแสดงในประเภทตัวเลข และถ้าเรากำหนดตัวเลขนั้นให้กับตัวแปรหรือค่าคงที่ พวกมันจะมีชนิดข้อมูลของตัวเลขด้วย

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

นอกเหนือจากตัวเลขปกติที่เรามีแล้ว JavaScript ยังมีคุณสมบัติอื่นๆ ที่สามารถช่วยให้เราเขียนโค้ดที่ปลอดภัยและคาดเดาได้ง่ายขึ้น ตัวอย่างเช่น ใน JavaScript เราสามารถมีสิ่งที่เรียกว่า "อินฟินิตี้" และเป็นสิ่งที่ดูเหมือน นอกจากนี้ยังสามารถเป็นอินฟินิตี้บวกและอินฟินิตี้ลบได้ เรามาดูกันว่าหน้าตาเป็นอย่างไรพร้อมตัวอย่าง

// we can divide by zero and that does not throw an error
// instead it returns Inifinity
alert(13 / 0);

// similarly we can also get negative infinity
alert(-25 / 0);

ดังที่คุณได้เห็นในตัวอย่างสองสามตัวอย่างแล้ว เรายังสามารถทำการคำนวณทางคณิตศาสตร์กับตัวเลขได้อีกด้วย ตั้งแต่การบวก การลบ คูณ หาร ไปจนถึงการคำนวณทางคณิตศาสตร์เฉพาะในการเขียนโปรแกรม เราจะเรียนรู้เพิ่มเติมเกี่ยวกับพวกเขาในบทช่วยสอนถัดไป

บูลีน

บูลีนเป็นเรื่องธรรมดามากในการเขียนโปรแกรม ส่วนใหญ่เราจะไม่ใช้ชื่อของพวกเขาอย่างชัดแจ้ง แต่เราจะใช้คุณสมบัติที่เรียบง่ายของพวกเขาภายใต้ประทุน บูลีนสามารถมีค่าได้สองค่า: "จริง" และ "เท็จ" และค่าเหล่านี้เป็นสิ่งที่ดูเหมือน หลายครั้งคุณจะพบว่าตัวเองกำลังเขียนโค้ดเพื่อเปรียบเทียบและสรุปผลจากการเปรียบเทียบนั้น

หลายครั้งที่การเปรียบเทียบเหล่านี้มีรากฐานมาจากสถานการณ์ในชีวิตจริง และเป็นไปตามตรรกะง่ายๆ ไฟเปิดหรือปิด? ข้างนอกมีฝนตกหรือไม่? คุณหิวไหม? ตัวเลขนี้มากกว่าตัวเลขอื่นหรือไม่? ย่อหน้านี้ยาวกว่าย่อหน้าถัดไปหรือไม่ ผู้ใช้อยู่บนหน้าจอขนาดใหญ่หรือไม่?

มีหลายครั้งที่คุณไม่เพียงแค่ต้องการให้มีค่าตัวเลขหรือค่าสตริงสำหรับสิ่งต่าง ๆ แต่คุณต้องการคำตอบใช่หรือไม่ใช่ โดยสรุป ในช่วงเวลานั้น เราจะใช้ประเภทข้อมูลบูลีน

// is the first number bigger than the second one
alert(13 > 12);

// check the variable type
let isRainyOutside = true;
alert(typeof isRainyOutside);

การเรียกใช้รหัสนี้จะให้ผลลัพธ์ต่อไปนี้แก่เรา:

ตอนนี้คุณรู้เกี่ยวกับตัวแปรและประเภทข้อมูลใน JavaScript แล้ว ในบล็อกโพสต์ถัดไป เราจะใช้ประเภทข้อมูลเหล่านี้เพื่อเริ่มตัดสินใจในโค้ดของเรา และอีกมากมาย!

หากคุณชอบเนื้อหาของเราอย่าลืมเข้าร่วมชุมชน Facebook!

ผู้เขียน: โรเบิร์ต วิทนีย์

ผู้เชี่ยวชาญ JavaScript และผู้สอนที่โค้ชแผนกไอที เป้าหมายหลักของเขาคือการยกระดับประสิทธิภาพการทำงานของทีมโดยการสอนผู้อื่นถึงวิธีการร่วมมืออย่างมีประสิทธิภาพขณะเขียนโค้ด

ดูกระทู้ทั้งหมด

หลักสูตร JavaScript จากระดับเริ่มต้นถึงระดับสูงใน 10 บล็อกโพสต์:

1. จะเริ่มเขียนโค้ดใน JavaScript ได้อย่างไร?
2. พื้นฐาน JavaScript
3. ตัวแปรและประเภทข้อมูลต่างๆ ใน ​​JavaScript
4. ตัวอย่างและโครงสร้างการควบคุม
5. ในขณะที่ลูปและสำหรับลูป
6. Java array
7. ฟังก์ชันจาวาสคริปต์
8. วัตถุ JavaScript
9. เมธอด JavaScript และอื่นๆ
10. สรุปหลักสูตรจาวาสคริปต์