พื้นฐานของจาวาสคริปต์

บทความนี้อธิบายพื้นฐานของจาวาสคริปต์

YouTube Video

การรัน Hello World!

ภาพรวมของจาวาสคริปต์

จาวาสคริปต์เป็นหนึ่งในภาษาการเขียนโปรแกรมที่ใช้กันมากที่สุดในวงการพัฒนาเว็บไซต์ โดยหลักจะใช้ในการเพิ่มองค์ประกอบที่มีการโต้ตอบให้กับเว็บเพจ ช่วยให้สามารถจัดการกับอินเทอร์เฟซผู้ใช้, ส่งผ่านข้อมูล และสร้างภาพเคลื่อนไหว สามารถทำงานได้ทั้งฝั่งลูกข่าย (ในเบราว์เซอร์) และฝั่งเซิร์ฟเวอร์โดยใช้เทคโนโลยีเช่น Node.js ด้วยความเรียบง่ายและความยืดหยุ่นของมัน ทำให้มือใหม่สามารถเรียนรู้ได้ง่าย และเป็นที่นิยมในหมู่นักพัฒนามืออาชีพ

ตัวแปรในภาษา JavaScript

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

การประกาศตัวแปร

ในภาษา JavaScript มีคีย์เวิร์ดสามตัวสำหรับการประกาศตัวแปร

• var: วิธีเก่าที่ใช้ในการประกาศตัวแปร แต่การจัดการขอบเขต (scope) มีความซับซ้อนและต้องระมัดระวัง มันทำงานโดยพึ่งพาขอบเขตของฟังก์ชัน (function scope)

1var x = 10;

• let: นำมาใช้ใน ES6 เป็นวิธีการประกาศตัวแปรที่มีขอบเขตภายในบล็อก (block scope) สามารถกำหนดค่าใหม่ได้ แต่ไม่สามารถประกาศตัวแปรซ้ำในขอบเขตเดียวกันได้

1let y = 20;

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

1const z = 30;

ขอบเขต

ตัวแปรมีแนวคิดของขอบเขตการใช้งาน

ขอบเขตระดับโลก

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

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

ขอบเขตของบล็อก

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• ขอบเขตของบล็อก: ตัวแปรที่ประกาศด้วย let หรือ const ใช้งานได้เฉพาะภายใน {} (วงเล็บปีกกา)

• เกิดข้อผิดพลาดเมื่อพยายามเข้าถึงจากภายนอก {} (วงเล็บปีกกา)

ขอบเขตของฟังก์ชัน

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

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

• ในตัวอย่างนี้ ตัวแปร functionVar สามารถเข้าถึงได้จากภายนอก {} (วงเล็บปีกกา) ตราบใดที่ยังอยู่ในขอบเขตของฟังก์ชัน ในทางกลับกัน การเข้าถึงตัวแปร functionScoped จากภายนอกขอบเขตของฟังก์ชันจะส่งผลให้เกิดข้อผิดพลาด

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

ประเภทข้อมูล

ตัวแปรใน JavaScript สามารถเก็บค่าที่มีประเภทข้อมูลหลากหลายได้ มี string สำหรับจัดการข้อความ และ number สำหรับจัดการค่าตัวเลข

ประเภทข้อมูลหลักมีดังนี้:

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• ประเภทข้อมูลพื้นฐาน:
  • number: จัดการค่าตัวเลข (จำนวนเต็มและจำนวนทศนิยม)
  • string: จัดการข้อความหรือสายอักขระ
  • boolean: ใช้จัดการค่าบูลีน true หรือ false
  • null: แสดงถึงค่าที่ไม่มีอะไรชัดเจน
  • undefined: ค่าที่ถูกกำหนดโดยอัตโนมัติให้กับตัวแปรที่ยังไม่ได้รับการกำหนดค่าเริ่มต้น
  • Symbol: ประเภทข้อมูลที่ใช้สร้างค่าที่ไม่ซ้ำ

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• ประเภทของวัตถุ:
  • Object: โครงสร้างข้อมูลที่มีคุณสมบัติหลากหลาย
  • Array: รายการที่มีค่าหลายค่า
  • Function: วัตถุที่เป็นฟังก์ชัน

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

ตัวแปรที่ประกาศด้วย let หรือ var สามารถกำหนดค่าใหม่ได้ แต่ const ไม่สามารถกำหนดค่าใหม่ได้หลังจากที่ประกาศ

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

การเลื่อนลอยตัวแปร (Variable Hoisting)

ใน JavaScript มีปรากฏการณ์ที่ตัวแปรจะถูก 'เลื่อน' ไปที่ด้านบนสุดของขอบเขตของมัน ตัวแปรที่ประกาศด้วย var จะถูกเลื่อนขึ้นด้านบน แต่การใช้ let หรือ const ก่อนการประกาศจะก่อให้เกิดข้อผิดพลาด

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• ในกรณีนี้ ตัวแปรที่ประกาศด้วย var จะถูกยกขึ้น (hoisted) และค่าในตัวแปรจะถูกแสดงผล

1console.log(b); // ReferenceError
2let b = 20;

• ตัวแปรที่ประกาศด้วย let จะไม่ถูกยกขึ้น (hoisted) ซึ่งจะทำให้เกิดข้อผิดพลาด

การใช้ตัวแปรอย่างเหมาะสม

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

• ควรใช้ const และหลีกเลี่ยงการใช้ var
• ปฏิบัติตามกฎการตั้งชื่อตัวแปร
  • ใช้ camelCase เช่น userName หรือ totalPrice
  • หลีกเลี่ยงชื่อที่คลุมเครือ เช่น data หรือ value และใช้ชื่อที่สื่อความหมายเพื่อเพิ่มความอ่านง่าย
  • ชื่อตัวแปรไม่สามารถเริ่มต้นด้วยตัวเลข ดังนั้นชื่อเช่น 1variable จึงไม่สามารถใช้ได้
• การใช้ตัวแปร global มากเกินไปอาจทำให้เกิดความคลุมเครือของ scope และนำไปสู่ข้อผิดพลาด ดังนั้นควรหลีกเลี่ยงการใช้เมื่อเป็นไปได้

สรุป

• var: วิธีการประกาศตัวแปรแบบเก่าที่มีขอบเขตระดับฟังก์ชัน
• let: ตัวแปรที่มีขอบเขตระดับบล็อกและสามารถกำหนดค่าใหม่ได้
• const: ตัวแปรที่มีขอบเขตระดับบล็อกและไม่สามารถกำหนดค่าใหม่ได้ (ค่าคงที่)
• การใช้ตัวแปรควรสอดคล้องกับชนิดข้อมูลของมันและต้องใส่ใจกับขอบเขตของตัวแปร

ตัวอักษรหลบหนี (Escape Characters) ใน JavaScript คืออะไร?

ตัวอักษรหลบหนีคือวิธีที่ใช้ในการแทนตัวอักษรที่มีความหมายพิเศษภายในสตริงธรรมดา ใน JavaScript ตัวอักษรหลบหนีจะถูกนำเสนอด้วยแบ็กสแลช \ เพื่อสร้างเอฟเฟกต์พิเศษให้กับสตริงหรือเพิ่มตัวอักษรควบคุม (Control Characters) ตัวอักษรหลบหนีมีประโยชน์สำหรับการเพิ่มองค์ประกอบเช่น ขึ้นบรรทัดใหม่ (newlines) แท็บ (tabs) หรือเครื่องหมายคำพูดในสตริง

ตัวอย่างการใช้งานตัวอักษรหลบหนี

ด้านล่างคือตัวอย่างโค้ดที่ใช้ตัวอักษรหลบหนี

การหลบหนีเครื่องหมายคำพูดคู่และเดี่ยว

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

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

การหลบหนีแบ็กสแลช

หากต้องการใช้แบ็กสแลชในสตริง ให้หลบหนีมันด้วย \

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

การหลบหนีขึ้นบรรทัดใหม่และแท็บ

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

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

การหลบหนีตัวอักษร Unicode

การใช้ลำดับการหลบหนี Unicode อนุญาตให้คุณแทนตัวอักษรเฉพาะด้วยรหัสฐานสิบหก

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

หมายเหตุ

การใช้การหลบหนีมากเกินไปอาจทำให้การอ่านโค้ดยากขึ้น

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

ลองพิจารณาใช้เทมเพลตลิตเทอรัล (Template Literals)

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

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

สรุป

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

เวอร์ชันของจาวาสคริปต์

จาวาสคริปต์มีมาตรฐานที่เรียกว่า ECMAScript (ES) จาวาสคริปต์ได้รับการพัฒนาขึ้นบนพื้นฐานของมาตรฐานนี้ ด้านล่างเป็นคำอธิบายความเปลี่ยนแปลงในแต่ละเวอร์ชันหลัก

• ES3 (1999)

  เวอร์ชันแรกที่ถูกนำไปใช้อย่างแพร่หลาย มีการกำหนดไวยากรณ์พื้นฐานและฟีเจอร์เบื้องต้น

• ES5 (2009)

  เพิ่มฟีเจอร์ใหม่ เช่น strict mode, Array.prototype.forEach, Object.keys และอื่น ๆ

• ES6 / ES2015 (2015)

  มีการอัปเดตสำคัญของ JavaScript ฟีเจอร์พื้นฐานหลายอย่างของ JavaScript ยุคใหม่ เช่น let, const, arrow functions, classes, promises, modules และอื่นๆ ถูกนำมาใช้

• ES7 / ES2016 (2016)

  เพิ่ม Array.prototype.includes และ Exponentiation Operator (**)

• ES8 / ES2017 (2017)

  นำเสนอ async/await ทำให้การเขียนกระบวนการแบบอะไชนโครนัสง่ายขึ้น

• ES9 / ES2018 (2018)

  เพิ่มอิเทอร์เรเตอร์แบบอะไชนโครนัสและ Rest/Spread Properties

• ES10 / ES2019 (2019)

  เพิ่ม flatMap และ Object.fromEntries

• ES11 / ES2020 (2020)

  เพิ่ม Optional Chaining (?.) และ Nullish Coalescing Operator (??) ทำให้สามารถเขียนโค้ดได้ง่ายและปลอดภัยยิ่งขึ้น

• ES12 / ES2021 (2021)

  เพิ่ม String.prototype.replaceAll และ Promise.any เป็นต้น

• ES13 / ES2022 (2022)

  เพิ่ม Array.prototype.at และฟิลด์ private ของคลาส (#field) เป็นต้น

• ES14 / ES2023 (2023)

  เพิ่ม Array.prototype.toSorted และ Symbol.prototype.description เป็นต้น

• ES15 / ES2024 (2024)

  เพิ่ม Promise.withResolvers เพื่อการจัดการ Promise ที่ง่ายขึ้น และ ArrayBuffer ที่ปรับขนาดได้ เป็นต้น

JavaScript ปัจจุบันมีการอัปเดตทุกปี และเพิ่มฟีเจอร์ใหม่แม้แต่ในเวอร์ชันล่าสุด

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video