[Part 5] JS: Function

Function

ฟังก์ชัน (Function) คือบล็อกของโค้ดที่ออกแบบมาเพื่อทำงานเฉพาะอย่าง โดยสามารถรับข้อมูลนำเข้า (parameters) และส่งค่ากลับ (return value) ได้

// Function with no parameter and return
function hello() {
  console.log('Hello, world!');
}

// Function with only return value
function greet() {
  return `hello! user`;
}

// Function with parameter and return value
function greetUser(name) {
  return `Hello! ${name}`;
}

hello();
console.log(greet());
console.log(greetUser('Mung'));

Declaration

1. Common Declaration

function add(a, b) {
  return a + b;
}

2. Function Expression

const add = function(a, b) {
  return a + b;
};

3. Arrow Function (ES6)

// In case only 1 statement
const add = (a, b) => a + b;

// Multiple statement
const multiply = (a, b) => {
  return a * b;
}

Return value

ต้องอยู่บรรทัดสุดท้ายของ statement ในฟังก์ชัน
หากไม่มีการ return จะ default return เป็น undefined

Parameter

ถือว่าเป็น variable ที่ใช้ใน scope ของ function นั้นเท่านั้น
หากฟังก์ชันกำหนด parameter แต่ตอนเรียกใช้ใส่ไม่ครบ จะ error

function addThree(a, b, c) {
  const sum = a + b + c;
  return sum;
}

// const sum = addThree(1, 2) // Error
const sum = addThree(1, 2, 3) // Should return 6

console.log(sum)

Default Parameters

กำหนดค่าเริ่มต้นให้พารามิเตอร์ได้

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

greet();           // Hello, Guest
greet("Mung");     // Hello, Mung

Rest Parameters

รวมพารามิเตอร์หลายตัวเป็น array (ใช้ spread operator ...)

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

Callback Functions

ส่งฟังก์ชันเป็น argument เพื่อให้ฟังก์ชันอื่นเรียกกลับ

function process(name, callback) {
  callback(`Hello, ${name}`);
}

process("Mungggy", msg => console.log(msg));

Higher-Order Functions

ฟังก์ชันที่ รับฟังก์ชันเป็นพารามิเตอร์ หรือ คืนค่าฟังก์ชัน

function createMultiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const triple = createMultiplier(3);
console.log(triple(5)); // 15

Immediately Invoked Function Expression (IIFE)

ฟังก์ชันที่ถูกประกาศแล้วเรียกใช้งานทันที

(function () {
  console.log("This runs immediately");
})();

Async / Await

ใช้สำหรับฟังก์ชันที่ทำงานแบบ asyncronous

async function fetchData() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const json = await res.json();
  console.log(json);
}

fetchData();

Recursive function

ฟังก์ชันที่เรียกใช้ตัวเอง และวนลูปเรียกใช้ไปเรื่อยๆ จนออกจากเงื่อนไข

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5));

Exercise

สร้างฟังก์ชันสำหรับการบวก, คูณ, หาร เลข 2 ตัว โดยแสดงคำตอบ ดังนี้
1. ผลบวกของ 44, 55 และ 71, 3
2. ผลคูณของ 2, 5 และ 3, 10
3. ผลหารของ 84, 2
สร้างฟังก์ชันสำหรับคำนวณพื้นที่ของรูปเรขาคณิตดังนี้
1. วงกลม
  1. รับค่า: รัศมี
  2. แสดงผล: โดยใช้สูตร area = π×r**2
2. สี่เหลี่ยม
  1. รับค่า: ความกว้าง, ความยาว
  2. แสดงผล: ใช้สูตร area = width x height
สร้างฟังก์ชันรับข้อมูลชื่อจากผู้ใช้ 5 ชื่อ และแสดงผลลัพธ์ Hello, ชื่อ

greetUsers(listUsers);
// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

4. Anagram Checker: ให้สร้างฟังก์ชันสำหรับเช็ค Text Input 2 ตัว ถ้าประกอบด้วยตัวอักษรที่เหมือนกัน (ไม่สนใจการเรียง) ให้แสดงผล True ถ้าไม่ใช่เงื่อนไขดังกล่าวให้แสดงผล False

anagrams("listen", "silent")) # True
anagrams("hello", "world")) # False
anagrams("hello", "hello")) # True

Assignment

จากข้อมูล user และ course enroll ดังนี้

const users = [
  {
    id: 1,
    username: "nina123",
    password: "Nina@1234",
    firstname: "Nina",
    lastname: "Supakorn",
    courses: [
      {
        name: "Programming 101",
        status: "STUDYING",
        totalDuration: 180,
        takenDuration: 65,
        expiredAt: "2025-07-20 00:00:00"
      }
    ]
  },
  {
    id: 2,
    username: "john99",
    password: "john#2023",
    firstname: "John",
    lastname: "Doe",
    courses: []
  },
  {
    id: 3,
    username: "alicex",
    password: "alice456",
    firstname: "Alice",
    lastname: "Tanaka",
    courses: []
  },
  {
    id: 4,
    username: "bee_admin",
    password: "BeeAdmin01#",
    firstname: "Bee",
    lastname: "Phuwanai",
    courses: []
  },
  {
    id: 5,
    username: "mike_dev",
    password: "devMike@1",
    firstname: "Mike",
    lastname: "Somsri",
    courses: [
      {
        name: "Programming 101",
        status: "FINISHED",
        totalDuration: 180,
        takenDuration: 250,
        expiredAt: "2025-08-14 00:00:00"
      },
      {
        name: "Biology 101",
        status: "ENROLLED",
        totalDuration: 300,
        takenDuration: 10,
        expiredAt: "2025-12-01 00:00:00"
      }
    ]
  }
];

เพิ่มฟังก์ชัน login(username, password) โดยรับ input 2 ตัวจาก user และนำมาเช็คว่าตรงกับในข้อมูล user ไหม
1. ถ้าตรง แสดงผล Login Passed
2. ถ้าไม่ตรง แสดงผล Login Failed
เพิ่มฟังก์ชัน myEnroll(userId) โดยรับ userId จาก user
1. แสดงผล ชื่อคอร์สทั้งหมดและเวลาทั้งหมด (totalDuration) ของ user คนนั้น
2. ถ้าไม่มี (Array ว่าง) ให้แสดงผล No course found
เพิ่มฟังก์ชัน checkEnrollStatus(userId, courseName)
1. แสดงผล ชื่อคอร์ส, สถานะ (status), เวลาที่ใช้ไป (takenDuration), วันหมดอายุ (expiredAt)
2. ถ้าไม่เจอให้แสดงผล No enrollment history
เพิ่มฟังก์ชัน updateEnrollment(userId, courseName, duration)
1. ให้นำ duration มาบวกกับ takenDuration ของ course ที่ user เรียน
2. ถ้าสถานะไม่ใช่ STUDYINGให้แสดงผล Cannot update enrollment
3. ให้แสดงผล ชื่อคอร์ส, ชื่อ user และ takenDuration หลังอัพเดท