ตัวแปรคืออะไร?

บทช่วยสอน JavaScript
ตัวแปรการเขียนโปรแกรม
เรียนรู้ JavaScript
ตัวแปรคืออะไร? cover image

การทำความเข้าใจตัวแปรในการเขียนโปรแกรม

ตัวแปรคืออะไร

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

การกำหนดค่าให้กับตัวแปร

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

ตัวอย่างเช่น:

  let firstName = 'Joe';
    console.log(firstName);
    // Output: Joe

ในที่นี้ สตริง 'Joe'' ถูกกำหนดให้กับตัวแปร firstName`

หมายเหตุ: อย่าสับสนระหว่างโอเปอเรเตอร์การกำหนด = กับโอเปอเรเตอร์เท่ากับ == โอเปอเรเตอร์ = จะกำหนดค่า ในขณะที่ == ตรวจสอบว่าสองค่าเท่ากันหรือไม่

รับข้อมูลจากผู้ใช้

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

ตัวอย่างเช่น:

  const prompt = require('prompt');

    prompt.start();
    let { name } = await prompt.get(["name"]);
    console.log(name);

    // Input: Bob
    // Output: Bob

ฟังก์ชัน "พร้อมท์" จะจับอินพุตจากผู้ใช้และจัดเก็บไว้ในตัวแปร "ชื่อ"

ขอบเขตตัวแปร

ขอบเขตของตัวแปรจะกำหนดตำแหน่งที่สามารถเข้าถึงได้ภายในโปรแกรม ขอบเขตถูกกำหนดโดยตำแหน่งที่ตัวแปรถูกเตรียมใช้งาน

ขอบเขตตัวแปรในฟังก์ชัน

ในฟังก์ชัน ตัวแปรที่เริ่มต้นภายในฟังก์ชันจะสามารถเข้าถึงได้ภายในฟังก์ชันนั้นเท่านั้น

ตัวอย่างเช่น:

let name = 'Somebody Else';

function printFullName(firstName, lastName) {

  let name = firstName + ' ' + lastName;

  console.log(name);

}

printFullName('Peter', 'Henry');  // prints Peter Henry

printFullName('Lynn', 'Blake');   // prints Lynn Blake

console.log(name);                // prints Somebody Else

ในที่นี้ ตัวแปร name ภายในฟังก์ชัน printFullName จะแยกจากตัวแปร name ภายนอก

ขอบเขตและบล็อกของตัวแปร

บล็อกคือส่วนของโค้ดที่ตามหลังคำสั่งควบคุม เช่น if, for หรือ While และคั่นด้วยเครื่องหมายปีกกา {}

ตัวอย่างเช่น:

let total = 0;

\[1, 2, 3].forEach(function(number) {

  total += number;

});

console.log(total);  // Output: 6

total = 0;

for (let i = 0; i < 3; i++) {

  total += (i + 1);

}

console.log(total);  // Output: 6

ในทั้งสองกรณี บล็อกสามารถเข้าถึงและแก้ไขตัวแปร 'ผลรวม' ที่กำหนดไว้นอกบล็อกได้ อย่างไรก็ตาม ตัวแปรที่เริ่มต้นภายในบล็อก (เช่น i และ number) ไม่สามารถเข้าถึงได้ภายนอกบล็อก

ประเภทของตัวแปร

ตัวแปรใน JavaScript มีสามประเภท: var, let และ const

- var: ประกาศตัวแปร โดยเลือกที่จะเริ่มต้นตัวแปรให้เป็นค่าก็ได้ var มีขอบเขตของฟังก์ชัน ซึ่งหมายความว่าสามารถใช้ได้ทั่วทั้งฟังก์ชันที่ประกาศไว้

var varVariable = 'I am a var variable';

- let: ประกาศตัวแปรโลคอลที่มีขอบเขตบล็อก โดยสามารถเลือกกำหนดค่าเริ่มต้นให้เป็นค่าก็ได้ let ดีกว่า var เนื่องจากมีขอบเขตบล็อก

let letVariable = 'I am a let variable';

- const: ประกาศค่าคงที่ที่มีขอบเขตแบบบล็อกและตั้งชื่อแบบอ่านอย่างเดียว ค่าของตัวแปร const ไม่สามารถเปลี่ยนแปลงได้ด้วยการกำหนดใหม่

const constVariable = 'I am a const variable';

ตัวอย่างขอบเขตของตัวแปร

let a = 5;  // variable is initialized in the outer scope

for (let i = 0; i < 3; i++) { 

  // block scope with a for loop

  a = 3;  // a is accessible here, in an inner scope

  let b = 5;  // b is initialized in the inner scope

}

console.log(a);  // Output: 3

console.log(b);  // ReferenceError: b is not defined

ในตัวอย่างนี้ ตัวแปร a สามารถเข้าถึงได้ทั้งภายในและภายนอกบล็อก ในขณะที่ b สามารถเข้าถึงได้ภายในบล็อกเท่านั้น

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


Career Services background pattern

บริการด้านอาชีพ

Contact Section background image

มาติดต่อกันกันเถอะ

Code Labs Academy © 2024 สงวนลิขสิทธิ์.