JavaScript ขั้นสูง: กระบวนทัศน์การเขียนโปรแกรม

ส่วนที่ 1

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

นี่เป็นเพียงหนึ่งในบทความมากมายเกี่ยวกับไอที เราแบ่งงานที่ซับซ้อนออกเป็นเนื้อหาที่ย่อยง่ายสำหรับคุณ ติดตามหรือ สนับสนุน pandaquests เพื่อรับเนื้อหาดีๆ เพิ่มเติมเกี่ยวกับ JavaScript การพัฒนาเว็บ และการพัฒนาซอฟต์แวร์ เราพยายามเผยแพร่หลายครั้งต่อสัปดาห์ อย่าพลาดเนื้อหาดีๆ ของเรา

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

มีกระบวนทัศน์การเขียนโปรแกรมอีกสองสามแบบ นอกเหนือจากที่กล่าวไว้ในตอนต้น ที่สามารถนำไปใช้ใน JavaScript ได้ แม้ว่าพวกมันจะไม่ได้มีลักษณะเฉพาะใน JavaScript:

การเขียนโปรแกรมที่จำเป็น (IP)

การเขียนโปรแกรมเชิงความจำเป็นเป็นกระบวนทัศน์การเขียนโปรแกรมที่มุ่งเน้นไปที่การอธิบายวิธีการทำงานของโปรแกรมโดยการระบุลำดับของคำสั่งที่เปลี่ยนสถานะของโปรแกรม ใน JavaScript การเขียนโปรแกรมที่จำเป็นมักใช้เพื่อจัดการข้อมูลและควบคุมการไหลของโปรแกรมโดยใช้คำสั่งเช่น if, for และ while

นี่คือตัวอย่างของการเขียนโปรแกรมที่จำเป็นใน JavaScript:

let sum = 0;
for (let i = 1; i <= 10; i++) {
    sum += i;
}
console.log(sum); // 55

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

ตัวอย่างอื่น

let numbers = [1, 2, 3, 4, 5];
let doubleNumbers = [];
for (let i = 0; i < numbers.length; i++) {
    doubleNumbers.push(numbers[i] * 2);
}
console.log(doubleNumbers); // [2, 4, 6, 8, 10]

ที่นี่ เราใช้ for loop เพื่อวนซ้ำอาร์เรย์ของตัวเลข และในการวนซ้ำแต่ละครั้ง เราจะเพิ่มตัวเลขเป็นสองเท่าและพุชไปยังอาร์เรย์ใหม่ที่ชื่อ doubleNumbers

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

การเขียนโปรแกรมตามขั้นตอน

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

ใน JavaScript การเขียนโปรแกรมตามขั้นตอนสามารถทำได้โดยใช้ฟังก์ชัน ลูป และเงื่อนไขเพื่อดำเนินการกับข้อมูล

นี่คือตัวอย่างของโปรแกรมขั้นตอนที่คำนวณแฟกทอเรียลของจำนวนที่กำหนด:

function factorial(n) {
    let result = 1;
    for (let i = 1; i <= n; i++) {
        result *= i;
    }
    return result;
}
console.log(factorial(5)); //120

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

อีกตัวอย่างหนึ่งของการเขียนโปรแกรมเชิงขั้นตอนใน JavaScript ก็คือฟังก์ชันที่ยอมรับสตริง และพิมพ์อักขระทุกตัวทีละตัว:

function printChars(str) {
    for (let i = 0; i < str.length; i++) {
        console.log(str[i]);
    }
}
printChars("Hello World");

ในที่นี้ ฟังก์ชัน printChars เป็นขั้นตอนที่รับอาร์กิวเมนต์สตริง และใช้การวนซ้ำเพื่อพิมพ์อักขระแต่ละตัวของสตริงนั้นทีละตัว

ในทั้งสองตัวอย่าง ฟังก์ชันใช้วิธีการทีละขั้นตอนเพื่อทำงานให้สำเร็จและสามารถนำมาใช้ซ้ำได้

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

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

การเขียนโปรแกรมเชิงวัตถุ (OOP)

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

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

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

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

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

นี่คือตัวอย่างคำจำกัดความคลาสพื้นฐานใน JavaScript:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
let person = new Person("John", 30);
person.sayHello(); 
// Output: "Hello, my name is John and I am 30 years old."

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

ในตัวอย่างนี้ อ็อบเจ็กต์ถูกสร้างขึ้นจากคลาส Person และเรียกใช้เมธอด sayHello บนคลาสนั้น

การเขียนโปรแกรมฟังก์ชั่น (FP)

Functional Programming (FP) คือกระบวนทัศน์การเขียนโปรแกรมที่เน้นการใช้ฟังก์ชันล้วนๆ ซึ่งเป็นฟังก์ชันที่ส่งคืนเอาต์พุตเดียวกันสำหรับอินพุตที่กำหนดเสมอ และไม่มีผลข้างเคียง ในการเขียนโปรแกรมเชิงฟังก์ชัน ข้อมูลจะถือว่าไม่เปลี่ยนรูปและฟังก์ชันถือเป็นพลเมืองชั้นหนึ่ง ซึ่งหมายความว่าสามารถส่งผ่านเป็นอาร์กิวเมนต์หรือส่งคืนเป็นค่าได้

ใน JavaScript การเขียนโปรแกรมเชิงฟังก์ชันสามารถทำได้โดยใช้ฟังก์ชันที่มีลำดับสูงกว่า (ฟังก์ชันที่รับฟังก์ชันอื่นเป็นอาร์กิวเมนต์หรือฟังก์ชันส่งคืนเป็นเอาต์พุต) การปิด และวิธีการอาร์เรย์ฟังก์ชัน เช่น map, filter และ reduce

นี่คือตัวอย่างการใช้ฟังก์ชัน map เพื่อเพิ่มค่าในอาร์เรย์เป็นสองเท่าในลักษณะการทำงาน:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

การเขียนโปรแกรมเชิงฟังก์ชันใน JavaScript ยังสนับสนุนการใช้การเรียกซ้ำแทนการวนซ้ำ และการใช้องค์ประกอบของฟังก์ชันและการแกงเพื่อสร้างฟังก์ชันที่ซับซ้อนจากฟังก์ชันที่เรียบง่าย

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

เราเขียนบทความต่างๆ เปรียบเทียบ OOP และ FP ใน JavaScript พร้อมตัวอย่างโค้ด:

ที่นั่นคุณมีมัน เราหวังว่าคุณจะสนุกกับบทความนี้ คุณมีคำถามใดๆ? แจ้งให้เราทราบและแสดงความคิดเห็นด้านล่าง

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

เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter, LinkedIn, YouTube และ Discord .

สนใจที่จะขยายขนาดการเริ่มต้นซอฟต์แวร์ของคุณหรือไม่ ลองดูที่ วงจร