โดยส่วนใหญ่แล้วแอปพลิเคชัน JavaScript จำเป็นต้องทำงานกับข้อมูล นี่คือสองตัวอย่าง:
ร้านค้าออนไลน์ – ข้อมูลอาจรวมถึงสินค้าที่ขายและตะกร้าสินค้า
แอปพลิเคชันแชท – ข้อมูลอาจรวมถึงผู้ใช้ ข้อความ และอื่นๆ อีกมากมาย
ตัวแปรใช้เพื่อจัดเก็บข้อมูลนี้
ตัวแปรคือ “ที่เก็บข้อมูลที่มีชื่อ” สำหรับข้อมูล เราสามารถใช้ตัวแปรเพื่อจัดเก็บข้อมูลผู้เยี่ยมชม และข้อมูลอื่นๆ
หากต้องการสร้างตัวแปรใน JavaScript ให้ใช้คีย์เวิร์ด let
ข้อความด้านล่างสร้าง (หรืออีกนัยหนึ่ง: ประกาศ ) ตัวแปรชื่อ “ข้อความ”:
ให้ข้อความ;
ตอนนี้เราสามารถใส่ข้อมูลลงไปได้โดยใช้ตัวดำเนินการมอบหมาย =
:
ให้ข้อความ; ข้อความ = 'สวัสดี'; // เก็บสตริง 'Hello' ไว้ในข้อความชื่อตัวแปร
ตอนนี้สตริงถูกบันทึกลงในพื้นที่หน่วยความจำที่เกี่ยวข้องกับตัวแปรแล้ว เราสามารถเข้าถึงได้โดยใช้ชื่อตัวแปร:
ให้ข้อความ; ข้อความ = 'สวัสดี!'; การแจ้งเตือน(ข้อความ); // แสดงเนื้อหาตัวแปร
เพื่อให้กระชับ เราสามารถรวมการประกาศตัวแปรและการกำหนดตัวแปรไว้ในบรรทัดเดียว:
ให้ข้อความ = 'สวัสดี!'; //กำหนดตัวแปรและกำหนดค่า การแจ้งเตือน(ข้อความ); // สวัสดี!
นอกจากนี้เรายังสามารถประกาศตัวแปรหลายตัวในบรรทัดเดียว:
ให้ผู้ใช้ = 'จอห์น' อายุ = 25 ข้อความ = 'สวัสดี';
นั่นอาจดูสั้นกว่า แต่เราไม่แนะนำ เพื่อให้อ่านง่ายขึ้น โปรดใช้บรรทัดเดียวต่อตัวแปร
รูปแบบหลายบรรทัดนั้นยาวกว่าเล็กน้อย แต่อ่านง่ายกว่า:
ให้ผู้ใช้ = 'จอห์น'; ให้อายุ = 25; ให้ข้อความ = 'สวัสดี';
บางคนยังกำหนดตัวแปรหลายตัวในรูปแบบหลายบรรทัดนี้:
ให้ผู้ใช้ = 'จอห์น' อายุ = 25, ข้อความ = 'สวัสดี';
…หรือแม้กระทั่งในรูปแบบ “จุลภาคก่อน”:
ให้ผู้ใช้ = 'จอห์น' , อายุ = 25 , ข้อความ = 'สวัสดี';
ในทางเทคนิคแล้ว ตัวแปรเหล่านี้ทั้งหมดทำสิ่งเดียวกัน ดังนั้นมันเป็นเรื่องของรสนิยมและความสวยงามส่วนบุคคล
var
แทนที่จะ let
ในสคริปต์เก่า คุณอาจพบคำหลักอื่น: var
แทนที่จะ let
:
ข้อความ var = 'สวัสดี';
คีย์เวิร์ด var
เกือบจะ เหมือนกับคำว่า let
นอกจากนี้ยังประกาศตัวแปรด้วยวิธีการ "แบบเก่า" ที่แตกต่างออกไปเล็กน้อย
มีความแตกต่างเล็กน้อยระหว่าง let
และ var
แต่ก็ยังไม่สำคัญสำหรับเรา เราจะกล่าวถึงรายละเอียดเหล่านี้ในบท "var" เก่า
เราสามารถเข้าใจแนวคิดของ "ตัวแปร" ได้อย่างง่ายดายหากเราจินตนาการว่ามันเป็น "กล่อง" สำหรับข้อมูล โดยมีสติกเกอร์ที่มีชื่อไม่ซ้ำใครติดอยู่
ตัวอย่างเช่น message
ตัวแปรสามารถจินตนาการเป็นกล่องที่มีป้ายกำกับว่า "message"
ที่มีค่า "Hello!"
ในนั้น:
เราสามารถใส่ค่าใดๆ ลงในกล่องได้
เรายังสามารถเปลี่ยนได้บ่อยเท่าที่ต้องการ:
ให้ข้อความ; ข้อความ = 'สวัสดี!'; ข้อความ = 'โลก!'; // ค่ามีการเปลี่ยนแปลง การแจ้งเตือน(ข้อความ);
เมื่อค่ามีการเปลี่ยนแปลง ข้อมูลเก่าจะถูกลบออกจากตัวแปร:
นอกจากนี้เรายังสามารถประกาศตัวแปรสองตัวและคัดลอกข้อมูลจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่งได้
ให้สวัสดี = 'สวัสดีชาวโลก!'; ให้ข้อความ; // คัดลอก 'Hello world' จาก hello ลงในข้อความ ข้อความ = สวัสดี; // ตอนนี้ตัวแปรสองตัวเก็บข้อมูลเดียวกัน แจ้งเตือน(สวัสดี); // สวัสดีชาวโลก! การแจ้งเตือน(ข้อความ); // สวัสดีชาวโลก!
การประกาศสองครั้งทำให้เกิดข้อผิดพลาด
ควรประกาศตัวแปรเพียงครั้งเดียว
การประกาศตัวแปรเดียวกันซ้ำๆ ถือเป็นข้อผิดพลาด:
ให้ข้อความ = "นี่"; // ซ้ำ 'let' นำไปสู่ข้อผิดพลาด ให้ข้อความ = "นั่น"; // SyntaxError: 'ข้อความ' ได้รับการประกาศแล้ว
ดังนั้นเราควรประกาศตัวแปรหนึ่งครั้งแล้วอ้างอิงถึงตัวแปรนั้นโดยไม่ let
ภาษาที่ใช้งานได้
เป็นเรื่องที่น่าสนใจที่จะทราบว่ามีสิ่งที่เรียกว่าภาษาโปรแกรมเชิงฟังก์ชันล้วนๆ เช่น Haskell ที่ห้ามการเปลี่ยนแปลงค่าตัวแปร
ในภาษาดังกล่าว เมื่อค่าถูกจัดเก็บ “ในกล่อง” ค่านั้นจะอยู่ที่นั่นตลอดไป หากเราต้องการเก็บอย่างอื่น ภาษาจะบังคับให้เราสร้างกล่องใหม่ (ประกาศตัวแปรใหม่) เราไม่สามารถนำอันเก่ากลับมาใช้ใหม่ได้
แม้ว่าอาจดูแปลกเล็กน้อยตั้งแต่แรกเห็น แต่ภาษาเหล่านี้มีความสามารถในการพัฒนาอย่างจริงจัง ยิ่งไปกว่านั้น ยังมีพื้นที่อื่นๆ เช่น การคำนวณแบบขนาน ซึ่งข้อจำกัดนี้ให้ประโยชน์บางประการ
มีข้อจำกัดสองประการเกี่ยวกับชื่อตัวแปรใน JavaScript:
ชื่อต้องประกอบด้วยตัวอักษร ตัวเลข หรือสัญลักษณ์ $
และ _
เท่านั้น
อักขระตัวแรกต้องไม่เป็นตัวเลข
ตัวอย่างชื่อที่ถูกต้อง:
ให้ชื่อผู้ใช้; ให้ทดสอบ 123;
เมื่อชื่อมีหลายคำ โดยทั่วไปจะใช้ CamelCase นั่นคือ: คำต่อๆ กัน แต่ละคำยกเว้นคำแรกที่ขึ้นต้นด้วยตัวพิมพ์ใหญ่: myVeryLongName
สิ่งที่น่าสนใจคือ เครื่องหมายดอลลาร์ '$'
และขีดล่าง '_'
สามารถใช้ในชื่อได้เช่นกัน เป็นสัญลักษณ์ปกติ เช่นเดียวกับตัวอักษร โดยไม่มีความหมายพิเศษใดๆ
ชื่อเหล่านี้ถูกต้อง:
ให้ $ = 1; // ประกาศตัวแปรด้วยชื่อ "$" ให้ _ = 2; // และตอนนี้เป็นตัวแปรชื่อ "_" การแจ้งเตือน($ + _); // 3
ตัวอย่างชื่อตัวแปรที่ไม่ถูกต้อง:
ให้ 1a; // ไม่สามารถขึ้นต้นด้วยตัวเลขได้ ให้ชื่อของฉัน; // ไม่อนุญาตให้ใช้เครื่องหมายขีดกลาง '-' ในชื่อ
กรณีมีความสำคัญ
ตัวแปรชื่อ apple
และ APPLE
เป็นตัวแปรสองตัวที่แตกต่างกัน
อนุญาตให้ใช้ตัวอักษรที่ไม่ใช่ภาษาละตินได้ แต่ไม่แนะนำ
คุณสามารถใช้ภาษาใดก็ได้ รวมถึงอักษรซีริลลิก โลโกแกรมภาษาจีน และอื่นๆ เช่นนี้
ให้ имя = '...'; ให้ 我 = '...';
ในทางเทคนิคแล้ว ไม่มีข้อผิดพลาดที่นี่ ชื่อดังกล่าวได้รับอนุญาต แต่มีข้อตกลงระหว่างประเทศให้ใช้ภาษาอังกฤษในชื่อตัวแปร ถึงแม้เราจะเขียนบทเล็กๆ แต่ชีวิตข้างหน้าก็อาจยืนยาวได้ คนจากประเทศอื่นอาจต้องอ่านบ้าง
ชื่อที่สงวนไว้
มีรายการคำสงวนซึ่งไม่สามารถใช้เป็นชื่อตัวแปรได้เนื่องจากเป็นภาษาที่ใช้เอง
ตัวอย่างเช่น: let
, class
, return
และ function
ถูกสงวนไว้
รหัสด้านล่างแสดงข้อผิดพลาดทางไวยากรณ์:
ให้ ให้ = 5; // ไม่สามารถตั้งชื่อตัวแปรว่า "let" ได้ เกิดข้อผิดพลาด! ให้กลับมา = 5; // ไม่สามารถตั้งชื่อว่า "return" ได้ ผิดพลาด!
การมอบหมายโดยไม่ use strict
โดยปกติเราจะต้องกำหนดตัวแปรก่อนใช้งาน แต่ในสมัยก่อน มันเป็นไปได้ในทางเทคนิคที่จะสร้างตัวแปรโดยการกำหนดค่าโดยไม่ต้องใช้ let
การดำเนินการนี้ยังคงใช้งานได้หากเราไม่ use strict
เพื่อรักษาความเข้ากันได้กับสคริปต์เก่า
// หมายเหตุ: ไม่มี "use strict" ในตัวอย่างนี้ หมายเลข = 5; // ตัวแปร "num" จะถูกสร้างขึ้นหากไม่มีอยู่ การแจ้งเตือน (หมายเลข); // 5
นี่เป็นแนวทางปฏิบัติที่ไม่ดีและอาจทำให้เกิดข้อผิดพลาดในโหมดเข้มงวด:
"ใช้อย่างเข้มงวด"; หมายเลข = 5; // ข้อผิดพลาด: ไม่ได้กำหนด num
หากต้องการประกาศตัวแปรคงที่ (ไม่มีการเปลี่ยนแปลง) ให้ใช้ const
แทน let
:
const วันเกิดของฉัน = '18.04.1982';
ตัวแปรที่ประกาศโดยใช้ const
เรียกว่า “ค่าคงที่” ไม่สามารถมอบหมายใหม่ได้ การพยายามทำเช่นนั้นจะทำให้เกิดข้อผิดพลาด:
const วันเกิดของฉัน = '18.04.1982'; วันเกิดของฉัน = '01.01.2001'; // เกิดข้อผิดพลาด ไม่สามารถกำหนดค่าคงที่ใหม่ได้!
เมื่อโปรแกรมเมอร์แน่ใจว่าตัวแปรจะไม่เปลี่ยนแปลง พวกเขาสามารถประกาศตัวแปรนั้นด้วย const
เพื่อรับประกันและสื่อสารข้อเท็จจริงนั้นให้ทุกคนทราบ
มีวิธีปฏิบัติที่แพร่หลายในการใช้ค่าคงที่เป็นนามแฝงสำหรับค่าที่จำยากซึ่งทราบก่อนดำเนินการ
ค่าคงที่ดังกล่าวตั้งชื่อโดยใช้ตัวพิมพ์ใหญ่และขีดล่าง
ตัวอย่างเช่น เรามาสร้างค่าคงที่สำหรับสีที่เรียกว่ารูปแบบ "เว็บ" (เลขฐานสิบหก):
const COLOR_RED = "#F00"; const COLOR_GREEN = "#0F0"; const COLOR_BLUE = "#00F"; const COLOR_ORANGE = "#FF7F00"; // ...เมื่อเราต้องเลือกสี ให้สี = COLOR_ORANGE; การแจ้งเตือน (สี); // #FF7F00
ประโยชน์:
COLOR_ORANGE
จำง่ายกว่า "#FF7F00"
มาก
พิมพ์ผิด "#FF7F00"
ง่ายกว่า COLOR_ORANGE
มาก
เมื่ออ่านโค้ด COLOR_ORANGE
มีความหมายมากกว่า #FF7F00
มาก
เมื่อใดที่เราควรใช้ตัวพิมพ์ใหญ่สำหรับค่าคงที่ และเมื่อใดที่เราควรจะตั้งชื่อตามปกติ? มาทำให้ชัดเจนว่า
การมี "ค่าคงที่" หมายความว่าค่าของตัวแปรไม่เคยเปลี่ยนแปลง แต่ค่าคงที่บางตัวจะทราบก่อนดำเนินการ (เช่น ค่าเลขฐานสิบหกสำหรับสีแดง) และค่าคงที่บางค่าจะ ถูกคำนวณ ในช่วงเวลาดำเนินการ ในระหว่างการดำเนินการ แต่จะไม่เปลี่ยนแปลงหลังจากการกำหนดครั้งแรก
ตัวอย่างเช่น:
const pageLoadTime = /* เวลาที่หน้าเว็บใช้ในการโหลด */;
ไม่ทราบค่าของ pageLoadTime
ก่อนที่จะโหลดหน้าเว็บ ดังนั้นจึงตั้งชื่อตามปกติ แต่ก็ยังคงที่เพราะไม่เปลี่ยนแปลงหลังจากการมอบหมายงาน
กล่าวอีกนัยหนึ่ง ค่าคงที่ที่ตั้งชื่อด้วยตัวพิมพ์ใหญ่จะใช้เป็นนามแฝงสำหรับค่า "ฮาร์ดโค้ด" เท่านั้น
เมื่อพูดถึงตัวแปร มีอีกสิ่งหนึ่งที่สำคัญอย่างยิ่ง
ชื่อตัวแปรควรมีความหมายที่ชัดเจนและชัดเจน โดยอธิบายข้อมูลที่เก็บไว้
การตั้งชื่อตัวแปรเป็นหนึ่งในทักษะที่สำคัญและซับซ้อนที่สุดในการเขียนโปรแกรม การดูชื่อตัวแปรอย่างรวดเร็วสามารถเผยให้เห็นว่าโค้ดใดเขียนโดยผู้เริ่มต้นเทียบกับนักพัฒนาที่มีประสบการณ์
ในโปรเจ็กต์จริง เวลาส่วนใหญ่จะใช้เวลาในการแก้ไขและขยายฐานโค้ดที่มีอยู่ แทนที่จะเขียนสิ่งที่แยกจากศูนย์โดยสิ้นเชิง เมื่อเรากลับมาที่โค้ดหลังจากทำอย่างอื่นมาระยะหนึ่งแล้ว มันจะง่ายกว่ามากในการค้นหาข้อมูลที่มีป้ายกำกับชัดเจน หรืออีกนัยหนึ่งคือเมื่อตัวแปรมีชื่อที่ดี
โปรดใช้เวลาคิดเกี่ยวกับชื่อที่ถูกต้องของตัวแปรก่อนที่จะประกาศ การทำเช่นนี้จะตอบแทนคุณอย่างงาม
กฎที่ควรปฏิบัติตาม ได้แก่:
ใช้ชื่อที่มนุษย์สามารถอ่านได้ เช่น userName
หรือ shoppingCart
อย่าใช้คำย่อหรือชื่อสั้นๆ เช่น a
, b
และ c
เว้นแต่คุณจะรู้ว่ากำลังทำอะไรอยู่
ตั้งชื่อให้สื่อความหมายและกระชับที่สุด ตัวอย่างของชื่อที่ไม่ถูกต้อง ได้แก่ data
และ value
ชื่อดังกล่าวไม่พูดอะไรเลย คุณสามารถใช้มันได้ก็ต่อเมื่อบริบทของโค้ดทำให้ชัดเจนเป็นพิเศษว่าข้อมูลหรือค่าใดที่ตัวแปรอ้างอิงถึง
ตกลงเงื่อนไขภายในทีมของคุณและในใจของคุณ หากผู้เยี่ยมชมไซต์ถูกเรียกว่า "ผู้ใช้" เราควรตั้งชื่อตัวแปรที่เกี่ยวข้อง currentUser
หรือ newUser
แทน currentVisitor
หรือ newManInTown
ฟังดูง่ายเหรอ? แน่นอนว่าเป็นเช่นนั้น แต่ในทางปฏิบัติแล้ว การสร้างชื่อตัวแปรที่สื่อความหมายและกระชับนั้นกลับไม่ใช่ ไปหามัน
ใช้ซ้ำหรือสร้าง?
และบันทึกสุดท้าย มีโปรแกรมเมอร์ขี้เกียจบางคนที่แทนที่จะประกาศตัวแปรใหม่ มักจะนำตัวแปรที่มีอยู่กลับมาใช้ใหม่
เป็นผลให้ตัวแปรของมันเป็นเหมือนกล่องที่ผู้คนโยนสิ่งของต่าง ๆ โดยไม่ต้องเปลี่ยนสติกเกอร์ อะไรอยู่ในกล่องตอนนี้? ใครจะรู้? เราต้องเข้ามาใกล้และตรวจสอบ
โปรแกรมเมอร์ดังกล่าวจะประหยัดเล็กน้อยในการประกาศตัวแปร แต่จะสูญเสียการดีบักมากกว่าสิบเท่า
ตัวแปรพิเศษคือดี ไม่ใช่ชั่ว
ตัวย่อและเบราว์เซอร์ JavaScript สมัยใหม่เพิ่มประสิทธิภาพโค้ดได้ดีเพียงพอ ดังนั้นจึงไม่สร้างปัญหาด้านประสิทธิภาพ การใช้ตัวแปรที่แตกต่างกันสำหรับค่าที่แตกต่างกันสามารถช่วยให้กลไกเพิ่มประสิทธิภาพโค้ดของคุณได้
เราสามารถประกาศตัวแปรเพื่อจัดเก็บข้อมูลได้โดยใช้คีย์เวิร์ด var
, let
หรือ const
let
– เป็นการประกาศตัวแปรสมัยใหม่
var
– เป็นการประกาศตัวแปรแบบเก่า โดยปกติแล้วเราจะไม่ใช้มันเลย แต่เราจะกล่าวถึงความแตกต่างเล็กๆ น้อยๆ จาก let
ในบท "var" แบบเก่า ในกรณีที่คุณต้องการมัน
const
– ก็เหมือนกับ let
แต่ค่าของตัวแปรไม่สามารถเปลี่ยนแปลงได้
ตัวแปรควรตั้งชื่อในลักษณะที่ช่วยให้เราเข้าใจได้ง่ายว่ามีอะไรอยู่ข้างใน
ความสำคัญ: 2
ประกาศตัวแปรสองตัว: admin
และ name
กำหนดค่า "John"
ให้กับ name
คัดลอกค่าจาก name
ไปยัง admin
แสดงค่าของ admin
โดยใช้ alert
(ต้องส่งออก “John”)
ในโค้ดด้านล่าง แต่ละบรรทัดสอดคล้องกับรายการในรายการงาน
ให้แอดมินชื่อ; // สามารถประกาศตัวแปรสองตัวพร้อมกันได้ ชื่อ = "จอห์น"; ผู้ดูแลระบบ = ชื่อ; การแจ้งเตือน (ผู้ดูแลระบบ); // "จอห์น"
ความสำคัญ: 3
สร้างตัวแปรด้วยชื่อดาวเคราะห์ของเรา คุณจะตั้งชื่อตัวแปรดังกล่าวว่าอย่างไร?
สร้างตัวแปรเพื่อจัดเก็บชื่อของผู้เยี่ยมชมเว็บไซต์ในปัจจุบัน คุณจะตั้งชื่อตัวแปรนั้นว่าอย่างไร?
ง่ายมาก:
ให้ ourPlanetName = "Earth";
โปรดทราบว่าเราสามารถใช้ชื่อที่สั้นกว่า planet
ได้ แต่อาจไม่ชัดเจนว่าดาวเคราะห์นั้นหมายถึงอะไร เป็นการดีที่จะละเอียดมากขึ้น อย่างน้อยก็จนกว่าตัวแปรจะไม่ใช่TooLong
ให้ currentUserName = "จอห์น";
ขอย้ำอีกครั้งว่าเราสามารถย่อชื่อ userName
ให้สั้นลงได้หากเราทราบแน่ชัดว่าผู้ใช้รายนี้เป็นผู้ใช้ปัจจุบัน
เครื่องมือแก้ไขสมัยใหม่และการเติมข้อความอัตโนมัติทำให้ชื่อตัวแปรขนาดยาวง่ายต่อการเขียน อย่าประหยัดกับพวกเขา ชื่อที่มี 3 คำก็ดี
และหากโปรแกรมแก้ไขของคุณไม่มีการเติมข้อความอัตโนมัติที่เหมาะสม ให้รับอันใหม่
ความสำคัญ: 4
ตรวจสอบรหัสต่อไปนี้:
วันเกิด = '18.04.1982'; const age = someCode (วันเกิด);
ที่นี่เรามี birthday
คงที่สำหรับวันที่และค่าคงที่ age
ด้วย
age
คำนวณจาก birthday
โดยใช้ someCode()
ซึ่งหมายถึงการเรียกใช้ฟังก์ชันที่เรายังไม่ได้อธิบาย (เราจะอธิบายเร็วๆ นี้!) แต่รายละเอียดไม่สำคัญที่นี่ ประเด็นก็คือ age
นั้นคำนวณจาก birthday
.
birthday
ใช้ตัวพิมพ์ใหญ่ถูกต้องหรือไม่ ? สำหรับ age
? หรือแม้กระทั่งสำหรับทั้งสองอย่าง?
วันเกิด = '18.04.1982'; // ทำให้วันเกิดเป็นตัวพิมพ์ใหญ่? const AGE = someCode (วันเกิด); //ทำให้อายุเป็นตัวพิมพ์ใหญ่?
โดยทั่วไปเราใช้ตัวพิมพ์ใหญ่สำหรับค่าคงที่ที่ "ฮาร์ดโค้ด" หรืออีกนัยหนึ่งคือ เมื่อทราบค่าก่อนดำเนินการและเขียนลงในโค้ดโดยตรง
ในโค้ดนี้ birthday
ก็เป็นเช่นนั้นทุกประการ ดังนั้นเราจึงสามารถใช้ตัวพิมพ์ใหญ่กับมันได้
ในทางตรงกันข้าม age
จะถูกประเมินตามเวลารันไทม์ วันนี้เรามีอายุหนึ่ง หนึ่งปีหลังจากนั้นเราก็จะมีอีกวัยหนึ่ง มันเป็นค่าคงที่ในแง่ที่ว่ามันไม่เปลี่ยนแปลงผ่านการเรียกใช้โค้ด แต่จะ "น้อยกว่า" เล็กน้อยกว่า birthday
: มีการคำนวณ ดังนั้นเราจึงควรเก็บตัวพิมพ์เล็กไว้