ตัวดำเนินการไปป์ไลน์ JavaScript: การประกอบฟังก์ชันเพื่อโค้ดที่สะอาดตายิ่งขึ้น

ในโลกที่เปลี่ยนแปลงตลอดเวลาของการพัฒนา JavaScript การเขียนโค้ดที่สะอาด บำรุงรักษาได้ และอ่านได้ง่ายเป็นสิ่งสำคัญยิ่ง เครื่องมือหนึ่งที่ช่วยอย่างมากในการบรรลุเป้าหมายนี้คือตัวดำเนินการไปป์ไลน์ JavaScript (|>) แม้ว่ายังเป็นข้อเสนอ (ในขั้นตอนที่ 1 ณ เวลาที่เขียนนี้) นักพัฒนาจำนวนมากกำลังใช้งานผ่านปลั๊กอิน Babel หรือในสภาพแวดล้อมที่รองรับอยู่แล้ว และการนำไปใช้กำลังเติบโตอย่างต่อเนื่องเนื่องจากความสามารถในการปรับปรุงความชัดเจนของโค้ดและปรับปรุงการประกอบฟังก์ชัน บทความนี้ให้การสำรวจที่ครอบคลุมเกี่ยวกับตัวดำเนินการไปป์ไลน์ ประโยชน์ และการใช้งานจริง

การประกอบฟังก์ชันคืออะไร

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

พิจารณาสถานการณ์ง่ายๆ: คุณมีตัวเลข และคุณต้องการยกกำลังสองแล้วเพิ่มค่า ด้วยการประกอบฟังก์ชัน คุณอาจเขียนบางอย่างเช่นนี้:

            const number = 5;
const squared = square(number);
const incremented = increment(squared);
console.log(incremented); // Output: 26

function square(x) {
  return x * x;
}

function increment(x) {
  return x + 1;
}
            

              
                Copy
              
            
          

ด้วยการประกอบฟังก์ชัน คุณสามารถกำหนดฟังก์ชันที่ประกอบขึ้นเช่นนี้ (โดยใช้วิธีการที่ทันสมัยกว่า):

            const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

const square = x => x * x;
const increment = x => x + 1;

const squareAndIncrement = compose(increment, square);

const number = 5;
const result = squareAndIncrement(number);
console.log(result); // Output: 26
            

              
                Copy
              
            
          

แม้ว่าฟังก์ชัน 'compose' ด้านบนจะมีประโยชน์ แต่ตัวดำเนินการไปป์ไลน์ทำให้สิ่งนี้ง่ายยิ่งขึ้น

แนะนำตัวดำเนินการไปป์ไลน์ JavaScript (|>)

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

เมื่อใช้ตัวดำเนินการไปป์ไลน์ ตัวอย่างก่อนหน้าจะมีลักษณะเช่นนี้ (สมมติว่าคุณกำลังใช้ transpiler เช่น Babel ที่ติดตั้งปลั๊กอินตัวดำเนินการไปป์ไลน์):

            function square(x) {
  return x * x;
}

function increment(x) {
  return x + 1;
}

const number = 5;
const result = number
  |> square
  |> increment;

console.log(result); // Output: 26
            

              
                Copy
              
            
          

โค้ดนี้อ่านและเข้าใจได้ง่ายกว่ามาก ข้อมูลไหลจากบนลงล่าง แสดงให้เห็นลำดับการดำเนินการอย่างชัดเจน

ประโยชน์ของการใช้ตัวดำเนินการไปป์ไลน์

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

ตัวอย่างการใช้งานจริงของตัวดำเนินการไปป์ไลน์

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

ตัวอย่างที่ 1: การแปลงข้อมูล

ลองนึกภาพว่าคุณมีอาร์เรย์ของออบเจ็กต์ผลิตภัณฑ์ และคุณต้องทำการแปลงหลายอย่าง:

1. กรองผลิตภัณฑ์ที่หมดสต็อก
2. จับคู่ผลิตภัณฑ์ที่เหลือกับชื่อของผลิตภัณฑ์
3. จัดเรียงชื่อตามตัวอักษร
4. แปลงอาร์เรย์ของชื่อเป็นสตริงที่คั่นด้วยเครื่องหมายจุลภาค

หากไม่มีตัวดำเนินการไปป์ไลน์ โค้ดอาจมีลักษณะเช่นนี้:

            const products = [
  { name: 'Laptop', price: 1200, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Monitor', price: 300, inStock: true },
];

const outOfStock = (product) => product.inStock === true;
const getName = (product) => product.name;

const processProducts = (products) => {
    const inStockProducts = products.filter(outOfStock);
    const productNames = inStockProducts.map(getName);
    const sortedNames = productNames.sort();
    const commaSeparated = sortedNames.join(', ');
    return commaSeparated;
};


const result = processProducts(products);
console.log(result); // Output: Laptop, Monitor, Mouse
            

              
                Copy
              
            
          

เมื่อใช้ตัวดำเนินการไปป์ไลน์ โค้ดจะอ่านได้ง่ายขึ้นมาก:

            const products = [
  { name: 'Laptop', price: 1200, inStock: true },
  { name: 'Keyboard', price: 75, inStock: false },
  { name: 'Mouse', price: 25, inStock: true },
  { name: 'Monitor', price: 300, inStock: true },
];

const filterInStock = (products) => products.filter(product => product.inStock);
const mapToName = (products) => products.map(product => product.name);
const sortAlphabetically = (names) => [...names].sort(); // Create a copy to avoid modifying the original array
const joinWithComma = (names) => names.join(', ');

const result = products
  |> filterInStock
  |> mapToName
  |> sortAlphabetically
  |> joinWithComma;

console.log(result); // Output: Laptop, Monitor, Mouse
            

              
                Copy
              
            
          

เวอร์ชันนี้แสดงให้เห็นอย่างชัดเจนถึงลำดับของการแปลงที่ใช้กับอาร์เรย์ products

ตัวอย่างที่ 2: การดำเนินการแบบอะซิงโครนัส

ตัวดำเนินการไปป์ไลน์ยังสามารถใช้กับการดำเนินการแบบอะซิงโครนัส เช่น การดึงข้อมูลจาก API

            async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return await response.json();
}

function extractData(data) {
  //Process the Json into something more manageable
  return data.results;
}

function processData(results) {
  //Further processing of the results
  return results.map(result => result.name);
}

function displayData(processedData) {
  //Diplay the processed Data.
  return processedData;
}

async function main() {
  try {
    const url = 'https://api.example.com/data'; // Replace with a real API endpoint

    const result = await (url
      |> fetchData
      |> extractData
      |> processData
      |> displayData);

    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}

// main(); // Commenting this out as the url is a dummy value.

            

              
                Copy
              
            
          

ในตัวอย่างนี้ ฟังก์ชัน fetchData ดึงข้อมูลจาก API และฟังก์ชันที่ตามมาจะประมวลผลและแสดงข้อมูล ตัวดำเนินการไปป์ไลน์ช่วยให้มั่นใจได้ว่าแต่ละฟังก์ชันถูกเรียกในลำดับที่ถูกต้อง และผลลัพธ์ของแต่ละฟังก์ชันจะถูกส่งไปยังฟังก์ชันถัดไป

ตัวอย่างที่ 3: การจัดการสตริง

พิจารณาสถานการณ์ที่คุณต้องดำเนินการหลายอย่างกับสตริง:

1. ลบช่องว่างนำหน้าและต่อท้าย
2. แปลงสตริงเป็นตัวพิมพ์เล็ก
3. แทนที่ช่องว่างหลายช่องด้วยช่องว่างเดียว
4. พิมพ์ตัวพิมพ์ใหญ่ตัวแรกของแต่ละคำ

            function trim(str) {
  return str.trim();
}

function toLower(str) {
  return str.toLowerCase();
}

function removeMultipleSpaces(str) {
  return str.replace(/\s+/g, ' ');
}

function capitalizeWords(str) {
  return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}

const inputString = '  Hello   World  ';

const result = inputString
  |> trim
  |> toLower
  |> removeMultipleSpaces
  |> capitalizeWords;

console.log(result); // Output: Hello World
            

              
                Copy
              
            
          

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

ข้อควรพิจารณาและแนวทางปฏิบัติที่ดีที่สุด

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

การนำไปใช้และเครื่องมือ

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

            npm install --save-dev @babel/plugin-proposal-pipeline-operator
            

              
                Copy
              
            
          

จากนั้นกำหนดค่า Babel เพื่อใช้ปลั๊กอินในไฟล์ .babelrc หรือ babel.config.js ของคุณ:

            {
  "plugins": [["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }]]
}
            

              
                Copy
              
            
          

ข้อเสนอขั้นต่ำมักได้รับการสนับสนุนเนื่องจากความเรียบง่าย มีข้อเสนออื่นๆ (เช่น "fsharp") แต่มีความซับซ้อนกว่า

ทางเลือกอื่นนอกเหนือจากตัวดำเนินการไปป์ไลน์

ก่อนตัวดำเนินการไปป์ไลน์ นักพัฒนามักใช้เทคนิคอื่นๆ เพื่อให้บรรลุการประกอบฟังก์ชัน ทางเลือกทั่วไปบางส่วน ได้แก่:

• การเรียกใช้ฟังก์ชันที่ซ้อนกัน: นี่เป็นแนวทางพื้นฐานที่สุด แต่สามารถอ่านและเข้าใจได้ยากอย่างรวดเร็ว โดยเฉพาะอย่างยิ่งกับการประกอบที่ซับซ้อน
• ฟังก์ชัน Helper (Compose/Pipe): ไลบรารีอย่าง Lodash และ Ramda มีฟังก์ชัน compose และ pipe ที่ช่วยให้คุณสร้างฟังก์ชันที่ประกอบขึ้น
• Method Chaining: ไลบรารีบางตัว เช่น Moment.js ใช้ method chaining เพื่อมอบอินเทอร์เฟซที่คล่องตัวสำหรับการดำเนินการกับออบเจ็กต์ อย่างไรก็ตาม แนวทางนี้จำกัดเฉพาะออบเจ็กต์ที่มีเมธอดที่ออกแบบมาสำหรับการเชื่อมโยงเท่านั้น

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

สรุป

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

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