Javaสคริปต์ตัวแปร: ประกาศ กำหนดค่า พร้อมตัวอย่าง
เจมส์ ฮาร์ทแมน
⚡ สรุปอย่างชาญฉลาด
Javaตัวแปรในสคริปต์ใช้สำหรับเก็บค่าต่างๆ เช่น ชื่อและตัวเลข หรือผลลัพธ์ของนิพจน์ การประกาศตัวแปรด้วย var, let หรือ const จะเป็นการจองช่องข้อมูลที่มีชื่อ ซึ่งส่วนที่เหลือของสคริปต์สามารถอ่านและอัปเดตได้
ตัวแปรใช้สำหรับเก็บค่า (name = “John”) หรือนิพจน์ (sum = x + y) ทุกค่าที่สคริปต์เก็บไว้ใช้ในภายหลัง ไม่ว่าจะเป็นชื่อผู้ใช้ ผลรวมที่คำนวณได้ หรือสถานะใช่/ไม่ใช่ ล้วนอยู่ในตัวแปร ดังนั้นการประกาศและการตั้งชื่อตัวแปรให้ดีจึงเป็นทักษะแรกที่ควรเรียนรู้ Javaต้นฉบับ.
ประกาศตัวแปรใน Javaต้นฉบับ
ก่อนที่จะใช้ตัวแปร คุณต้องประกาศตัวแปรนั้นก่อน โดยใช้คำหลัก `var` ในการประกาศตัวแปร ดังนี้:
var name;
การประกาศตัวแปรเพียงอย่างเดียวสร้างชื่อตัวแปรขึ้นมาเท่านั้น ไม่มีอะไรเพิ่มเติม ในขั้นตอนนี้ ตัวแปรมีอยู่แล้ว แต่มีค่าพิเศษคือ "undefined" เนื่องจากยังไม่มีการใส่ค่าใดๆ ลงไป
⚠️ หมายเหตุเกี่ยวกับเวอร์ชัน: `var` เป็นคำหลักในการประกาศตัวแปรแบบดั้งเดิมและยังคงใช้งานได้ในทุกเบราว์เซอร์ (ES6 ปี 2015) เพิ่มเข้ามา ให้ และ constซึ่งเป็นคำสำคัญที่ทันสมัย Javaสคริปต์ใช้ตัวแปร var สองตัวนี้ โดยจะเปรียบเทียบกับตัวแปร var ที่อยู่ด้านล่างของหน้านี้
กำหนดค่าให้กับตัวแปร
คุณสามารถกำหนดค่าให้กับตัวแปรในขณะที่ประกาศตัวแปรหรือหลังจากประกาศตัวแปรแล้ว
var name = "John";
OR
var name; name = "John";
ทั้งสองรูปแบบให้ผลลัพธ์เหมือนกัน เครื่องหมายเท่ากับตัวเดียวคือ ผู้ดำเนินการมอบหมาย: มันคัดลอกค่าทางด้านขวาไปยังตัวแปรทางด้านซ้าย มันไม่ใช่การทดสอบความเท่าเทียมกัน ซึ่งเขียนว่า == หรือ === และควรอยู่ในหมวดหมู่อื่น คำสั่งแบบมีเงื่อนไข.
การตั้งชื่อตัวแปร
ถึงแม้คุณจะตั้งชื่อตัวแปรได้ตามใจชอบ แต่การเขียนโปรแกรมที่ดีควรตั้งชื่อตัวแปรให้มีความหมายและสื่อความหมายได้ดี ยิ่งไปกว่านั้น ชื่อตัวแปรควรขึ้นต้นด้วยตัวอักษร และต้องตรงตามตัวพิมพ์ใหญ่-เล็ก ดังนั้น ตัวแปร studentname และ studentName จึงแตกต่างกัน เพราะตัวอักษร n ในชื่อต่างกัน (n และ N)
มีกฎสี่ข้อที่ใช้ตัดสินว่าชื่อนั้นถูกต้องตามกฎหมายหรือไม่:
- อักขระตัวแรกต้องเป็นตัวอักษร เครื่องหมายดอลลาร์ หรือเครื่องหมายขีดล่างเท่านั้น ห้ามเป็นตัวเลขเด็ดขาด
- หลังจากอักขระตัวแรกแล้ว สามารถใช้ตัวอักษร ตัวเลข เครื่องหมายดอลลาร์ และเครื่องหมายขีดล่างได้ทั้งหมด
- ไม่อนุญาตให้เว้นวรรค ดังนั้นคำสองคำจึงถูกรวมเข้าด้วยกันเป็น studentName แทนที่จะแยกเป็นสองคำ
- คำสงวน เช่น var, let, const, class และ return ไม่สามารถนำมาใช้ซ้ำเป็นชื่อได้
ตามธรรมเนียมปฏิบัติ Javaชื่อสคริปต์ใช้รูปแบบ camelCase กล่าวคือ คำแรกเป็นตัวพิมพ์เล็ก และคำต่อๆ ไปจะขึ้นต้นด้วยตัวพิมพ์ใหญ่ เช่น firstName, totalPrice, isLoggedIn
สคริปต์ด้านล่างนี้ประกาศตัวแปรสองตัว ใช้ตัวดำเนินการทางคณิตศาสตร์ทั้งห้ากับตัวแปรเหล่านั้น และเขียนผลลัพธ์แต่ละตัวลงบนหน้าเว็บ ลองทำด้วยตัวเองดู:
<html>
<head>
<title>Variables!!!</title>
<script type="text/javascript">
var one = 22;
var two = 3;
var add = one + two;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
document.write("First No: = " + one + "<br />Second No: = " + two + " <br />");
document.write(one + " + " + two + " = " + add + "<br/>");
document.write(one + " - " + two + " = " + minus + "<br/>");
document.write(one + " * " + two + " = " + multiply + "<br/>");
document.write(one + " / " + two + " = " + divide + "<br/>");
</script>
</head>
<body>
</body>
</html>
var, let และ const ใน Modern Javaต้นฉบับ
มีเพียงตัวแปร var เท่านั้นที่มีอยู่เมื่อ Javaสคริปต์ถูกเขียนขึ้นครั้งแรก และมีสองนิสัยที่อาจทำให้ผู้เริ่มต้นประหลาดใจ คือ สามารถประกาศซ้ำได้โดยไม่แสดงข้อความแจ้งเตือน และไม่สนใจขอบเขตของบล็อก คำสั่ง `let` และ `const` ถูกเพิ่มเข้ามาเพื่อแก้ไขทั้งสองอย่างนี้ ตารางด้านล่างแสดงคำหลักทั้งสามคำไว้เคียงข้างกัน
| พฤติกรรม | คือ | ให้ | const |
|---|---|---|---|
| ขอบเขต | ฟังก์ชันทั้งหมด | บล็อกล้อมรอบ | บล็อกล้อมรอบ |
| สามารถโอนย้ายได้ | มี (ใบกำกับภาษีเต็มรูปแบบ) | มี (ใบกำกับภาษีเต็มรูปแบบ) | ไม่ |
| สามารถประกาศซ้ำได้ในขอบเขตเดียวกัน | มี (ใบกำกับภาษีเต็มรูปแบบ) | ไม่ | ไม่ |
| มูลค่าที่ต้องระบุในช่องสำแดงสินค้า | ไม่ | ไม่ | มี (ใบกำกับภาษีเต็มรูปแบบ) |
| อ่านก่อนการประกาศ | ส่งคืนค่าที่ไม่กำหนด | ข้อผิดพลาดในการอ้างอิง | ข้อผิดพลาดในการอ้างอิง |
นิสัยง่ายๆ เพียงอย่างเดียวก็ครอบคลุมเกือบทุกกรณี: เอื้อมมือไปหยิบ const ขั้นแรก ให้เปลี่ยนไปใช้ ให้ ในขณะที่ค่าจำเป็นต้องเปลี่ยนแปลงอย่างแท้จริง เช่น ค่าตัวนับภายในอุปกรณ์ใดอุปกรณ์หนึ่ง Javaลูปสคริปต์และเก็บตัวแปร var ไว้สำหรับอ่านโค้ดเก่าแทนที่จะเขียนโค้ดใหม่
ขอบเขตการทำงานที่ปรับเปลี่ยนได้และการยกใน Javaต้นฉบับ
ขอบเขต (Scope) จะกำหนดว่าส่วนใดของสคริปต์สามารถมองเห็นตัวแปรได้ การประกาศตัวแปรด้วย `var` จะเป็นของฟังก์ชันที่บรรจุตัวแปรนั้น ดังนั้นมันจึงไม่ถูกรบกวนจากบล็อก `if` หรือ `for` ภายในฟังก์ชันนั้น การประกาศตัวแปรด้วย `let` หรือ `const` จะเป็นของวงเล็บปีกกาคู่ที่มันอยู่ภายใน และจะไม่ถูกรบกวนเมื่ออยู่นอกวงเล็บปีกกาเหล่านั้น
function demo() { if (true) { var wide = "visible throughout demo()"; let narrow = "visible only inside these braces"; } console.log(wide); console.log(narrow); }
คำสั่ง console.log แรกแสดงข้อความออกมา ส่วนคำสั่ง console.log ที่สองจะเกิดข้อผิดพลาด ReferenceError เนื่องจากตัวแปร narrow ไม่มีอยู่แล้วเมื่อบล็อก if สิ้นสุดลง
hoisting เป็นครึ่งหลังของเรื่องราว Javaสคริปต์จะลงทะเบียนการประกาศทุกรายการในขอบเขตก่อนที่จะรันบรรทัดใดๆ ในขอบเขตนั้น ชื่อตัวแปร var จะถูกลงทะเบียนและตั้งค่าเป็น undefined ดังนั้นการอ่านค่าก่อนกำหนดจึงถูกต้องตามกฎหมายแต่ไม่มีประโยชน์ ชื่อ let หรือ const จะถูกลงทะเบียนโดยไม่มีค่า และช่องว่างระหว่างส่วนบนสุดของบล็อกกับบรรทัดการประกาศเรียกว่า `\n` โซนตายชั่วคราว.
console.log(a); var a = 1; console.log(b); let b = 2;
บรรทัดแรกแสดงค่า undefined บรรทัดที่สามแสดงข้อความว่า “ไม่สามารถเข้าถึง 'b' ก่อนการเริ่มต้น” ซึ่งเป็นข้อผิดพลาดที่ทำให้ let ปลอดภัยกว่า var เพราะมันชี้ให้เห็นข้อผิดพลาดที่แท้จริงแทนที่จะซ่อนมันไว้
ข้อผิดพลาดทั่วไปเมื่อทำการประกาศ Javaตัวแปรสคริปต์
ข้อความห้าข้อความนี้คิดเป็นส่วนใหญ่ของข้อความที่แสดงในคอนโซลสำหรับผู้เริ่มต้นเรียนรู้เรื่องตัวแปร แต่ละข้อความระบุสาเหตุที่เฉพาะเจาะจง ดังนั้นวิธีแก้ไขมักจะใช้เพียงบรรทัดเดียว
| ข้อความคอนโซล | ก่อให้เกิด | แก้ไขปัญหา |
|---|---|---|
| ข้อผิดพลาดทางไวยากรณ์: ตัวระบุ 'x' ได้ถูกประกาศไปแล้ว | ใช้คำสั่ง let หรือ const สองครั้งสำหรับชื่อเดียวกันในบล็อกเดียวกัน | ใช้ตัวแปรที่มีอยู่แล้ว หรือเปลี่ยนชื่อตัวแปรตัวที่สอง |
| TypeError: การกำหนดให้กับตัวแปรคงที่ | ค่าคงที่ได้รับค่าใหม่ | ถ้าค่าของตัวแปรต้องเปลี่ยนแปลง ให้ประกาศตัวแปรด้วยคำสั่ง `let` |
| ReferenceError: ไม่สามารถเข้าถึง 'x' ก่อนการเริ่มต้นใช้งานได้ | มีการอ่านค่า let หรือ const ภายในโซนเวลาที่หยุดนิ่ง | ย้ายค่าที่อ่านได้ไปไว้ด้านล่างบรรทัดการประกาศ |
| ReferenceError: x ไม่ได้ถูกกำหนดไว้ | ชื่อดังกล่าวไม่เคยถูกประกาศ หรือไม่ก็สะกดผิด | ระบุให้ชัดเจน หรือแก้ไขการสะกดและการใช้ตัวพิมพ์ใหญ่-เล็ก |
| คำว่า undefined ปรากฏขึ้นในตำแหน่งที่คาดว่าจะแสดงค่า | ตัวแปรถูกประกาศไว้ แต่ไม่เคยถูกกำหนดค่า | กำหนดค่าก่อนการอ่านครั้งแรก |
การเพิ่ม “use strict” ไว้ด้านบนสุดของไฟล์ จะเปลี่ยนเวอร์ชันเงียบของกรณีที่สี่ — การกำหนดค่าให้กับชื่อที่ไม่เคยประกาศมาก่อน — ให้กลายเป็นข้อผิดพลาดที่มองเห็นได้ ซึ่งเป็นเหตุผลว่าทำไมจึงควรมีอยู่ในทุกสคริปต์ใหม่ กฎตัวแปรเดียวกันนี้ยังคงใช้ได้โดยไม่เปลี่ยนแปลง อาร์เรย์, วัตถุและโค้ดฝั่งเซิร์ฟเวอร์ที่เขียนขึ้นสำหรับ Node.js.
