Function ใน JavaScript ควรรู้ก่อนเริ่มเขียน React

Web Development

Function ใน JavaScript ควรรู้ก่อนเริ่มเขียน React

หากใครเพิ่งเริ่มเขียน React อยากให้มาเรียนรู้ function ใน JavaScript ที่ใช้บ่อยๆ กันก่อน

2 เดือนที่ผ่านมา

3 min read

ในบทความนี้เราจะมารู้จัก function ใน JavaScript ที่ใช้กันบ่อยๆ ใน React.js ใครที่กำลังศึกษา React.js อยู่ ควรที่จะรู้ function เหล่านี้

map()

map ใช้ในการสร้าง array ใหม่ จะเห็นใช้บ่อยๆ สำหรับใช้สำหรับ loop เพื่อแสดงข้อมูล

const items = ["apple", "banana", "orange"];
 
const itemList = items.map((item, index) => <li key={index}>{item}</li>);
 
return <ul>{itemList}</ul>;

filter()

filter ใช้สำหรับการกรองข้อมูลตามเงื่อนไขที่เราต้องการ

const users = [
  { id: 1, name: "John", age: 25 },
  { id: 2, name: "Jane", age: 17 },
  { id: 3, name: "Doe", age: 20 },
  { id: 4, name: "Alice", age: 16 },
];
 
const filteredUsers = users.filter((user) => user.age > 18);
 
return (
  <>
    <ul>
      {filteredUsers.map((user) => (
        <li key={user.id}>
          {user.name} - {user.age} years old
        </li>
      ))}
    </ul>
  </>
);

slice()

slice() method ใช้ในการตัดข้อมูลจาก array แล้วสำหรับ array ใหม่โดยไม่มีการแก้ไขข้อมูลเดิม จะรับ parameters 2 ตัวสำหรับเริ่มต้นและสิ้นสุด

const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
 
const slicedFruits = fruits.slice(1, 3);
 
return (
  <>
    <ul>
      {slicedFruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  </>
);
 
// - banana
// - cherry

splice()

splice ใช้สำหรับ ลบค่าเดิมแล้วแทนที่ด้วยค่าใหม่ตาม index ที่เราต้องการ แต่ splice จะไม่มีการสร้าง array ใหม่ ก็คือจะเปลี่ยนแปลง array เดิมเลย และยังสามารถทำการลบ index เริ่มต้นได้ เหมือนกับ slice เลย

มาลองดูรูปแบบกันหน่อย

splice(start, deleteCount);

มาลองดูตัวอย่างกัน

อย่างเช่นผมมี array fruits แล้วอยากเพิ่มข้อมูลลงไปในค่าลงไปใน index ที่ 1 ด้วยค่า MyValue และ ไม่ทำการลบข้อมูลถัดจาก index ที่ 1 ก็จะได้เป็นแบบนี้

const fruits = ["apple", "banana", "cherry", "mango"];
fruits.splice(1, 0, "MyValue");
// fruits: ["apple", "MyValue", "banana", "cherry", "mango"]

แล้วถ้าอยากลองลบดูละ

fruits.splice(1, 2, "MyValue");

ก็นับไปอีก 2 index โดยนับจากตัวที่เราเพิ่งเพิ่มเข้าไป แน่นอนว่า banana และ cherry คือตัวที่ถูกลบ

// fruits: ["apple", "MyValue", "mango"]

concat()

concat ใช้สำหรับต่อ array 2 ตัวเข้าด้วยกัน แล้ว return เป็น array ใหม่

const arr1 = ["apple", "banana", "orange"];
const arr2 = ["grape", "kiwi", "melon"];
const concatArr = arr1.concat(arr2);
 
return (
  <>
    {concatArr.map((item) => (
      <div>{item}</div>
    ))}
  </>
);
 
// concatArr: ['apple', 'banana', 'orange', 'grape', 'kiwi', 'melon']

find()

find ใช้สำหรับหาค่าตามเงื่อนไขที่เราต้องการ เช่นในตัวอย่างนี้ ผมอยากจะหา banana ใน array fruits

const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
 
const foundFruit = fruits.find((fruit) => fruit === "banana");
 
return <div>{foundFruit}</div>;
 
// foundFruit: "banana"

findIndex()

findIndex จะเหมือนกับ find แต่จะ return เป็น index ของค่านั้นๆ

const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
 
const foundFruitIndex = fruits.findIndex((fruit) => fruit === "banana");
 
return <div>{foundFruitIndex}</div>;
 
// foundFruitIndex: 1

destructuring

เอาแบบเข้าใจง่ายๆ คือการแกะค่าออกมาจาก array หรือ object มาเป็นตัวแปรนั้นๆ อย่างเช่นถ้าเราอยากได้ ค่า title ที่อยู่ใน array post แทนที่เราจะใช้วิธีการแบบ post.title เราก็ใช้วิธีการ destructuring แทนนั่นเอง

วิธีการก็ตามด้านล่างเลย

const { title, description } = post;
 
return (
  <div>
    <h1>{title}</h1>
    <p>{description}</p>
  </div>
);

rest operator

เวลา function มี parameters เยอะๆ เราสามารถนำ rest operator มาใช้เพื่อรับ parameters ทั้งหมดได้ โดยใช้เครื่องหมาย ...

function sum(...numbers) {
    let total = 0;
    for (let number of numbers) {
        total += number;
    }
    return total;
}
 
console.log(sum(1, 2, 3, 4, 5)); // Output: 15

spread operator

ใช้เพื่อแยกข้อมูลใน array หรือ object เพื่อนำไปใช้ต่อที่อื่น โดยใช้เครื่องหมาย ...

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];
// combinedArray: [1, 2, 3, 4, 5, 6]
 
// Spread Operator ใน Object
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }

ทั้ง rest operator และ spread operator ต่างก็มีการใช้เครื่องหมายเหมือนกัน อาจจะสับสันได้ ขอให้เข้าใจว่า

  • rest operator ใช้ใน function เพื่อรับ parameters ทั้งหมดเข้าไปทำงานใน function
  • spread operator เป็นการแยกข้อมูลใน array หรือ object เพื่อนำไปใช้ต่อที่อื่น อย่างเช่นในตัวอย่างข้างบนที่มีการรวม array และ object 2 ตัวเข้าด้วยกัน

promises

อ่านที่นี่แทนนะ เขียนไว้แล้ว 😅 มาลองใช้ Promise และ Async/Await ใน React กัน

async/await

อ่านที่นี่แทนนะ เขียนไว้แล้ว 😅 มาลองใช้ Promise และ Async/Await ใน React กัน

Tags:

React JavaScript