Lesson 10: Function

Lý thuyết toán học

Chắc hẳn trong toán học, ta đều quen thuộc với các hàm f(x); f(x, y)...

Ví dụ:

$$f(x) = Ax + B$$

Với A, B là số bất kỳ, x là tham số. Giả sử A = 5; B = 10;

Vậy lúc này công thức hàm sẽ là:

$$f(x) = Ax + B = 5x + 10$$

Khi viết f(10) tức thay thế x bằng 10 cho công thức trên:

$$f(x) = Ax+b= 5x + 10 <=> f(10) = 5.10 + 10=60$$

Suy ra: f(10) = 60

Kết quả trên, tưởng chừng đơn giản, nhưng là một khái niệm được ứng dụng rất nhiều, mục tiêu của hàm sinh ra, là để khái quát logic, với những logic cho trước, chỉ cần truyền các giá trị tương ứng cho các tham số, sẽ được thay thế vào các vị trí trong logic để tạo ra kết quả.

Function - hàm

Trong lập trình, giả sử có một bài toán đơn giản: Tính chu vi hình chữ nhật.

Về cơ bản, ta sẽ làm như sau:

Javascript

const width = 10;
const length = 20;

const perimeter = (width + length) * 2;

Typescript

const width: number = 10;
const length: number = 20;

const perimeter: number = (width + length) * 2;

Trong trường hợp ta có nhiều phép tính phải tính với các giá trị khác nhau, ví dụ như:

const width1: number = 10;
const length1: number = 20;

const perimeter1: number = (width1 + length1) * 2;

const width2: number = 8;
const length2: number = 19;

const perimeter2: number = (width2 + length2) * 2;
// v.v

Đối với logic đơn giản, nghiệp vụ thực hiện lại rất ít, đơn giản nên ta có thể không thấy sự khó khăn ở trong này, nhưng nếu như với một logic, nghiệp vụ lớn, khó sự phức tạp, việc code đi code lại (kể cả copy & paste) cũng sẽ dẫn tới sai xót không mong muốn, thậm chí làm cho mã nguồn trở nên dày đặc, rối loạn hơn.

Vậy, giống trong toán học, hàm sẽ đại diện cho một đoạn logic nào đó, giúp việc thể hiện được ngắn gọn hơn, thậm chí là rõ ràng hơn.

Ứng dụng của hàm:

• Tái sử dụng mã: Một hàm có thể được gọi nhiều lần, giúp giảm sự trùng lặp mã.

• Tổ chức mã: Hàm giúp chia mã nguồn thành các phần logic nhỏ, giúp dễ quản lý hơn.

• Tăng tính linh hoạt: Hàm có thể nhận tham số và trả về giá trị khác nhau tùy thuộc vào cách nó được gọi.

Khai báo, gọi hàm

Cú pháp:

// khai báo
function functionName() {
    // code...
}

// gọi hàm - thực thi các đoạn code logic bên trong khối lệnh của hàm đã được khai báo
functionName();

Với:

• function - là cú pháp định nghĩa/khai báo hàm

• functionName - là tên hàm muốn đặt (thường, tên hàm cần đặt theo ý nghĩa của logic)

() là đặc trưng hàm, giống như f(x) có ()

Ví dụ:

function count0To100() {
    for(let i = 0; i <= 100; i++) {
        console.log(i);
    }
}

count0To100(); // log từ 0 đến 100
const width = 10;
const length = 20;

function parimeterReg(){
    const result = (width + length) * 2;
    console.log(result);
}
parimeterReg();

Lúc này, nếu muốn tải sử dụng các logic, chỉ cần gọi lại hàm, chương trình sẽ thực hiện chính xác logic đã được lập trình. Tuy nhiên, theo những ví dụ trên, còn thiếu việc truyền tham số.

const width = 10;
const length = 20;

function parimeterReg(){
    const result = (width + length) * 2;
    console.log(result);
}
parimeterReg();

Như ví dụ này, trong logic, vẫn nhận đầu vào width, length cố định được khai báo bên ngoài. Vậy, ta cần triển dạng hàm có thể nhận đầu vào tham số.

Tham số hàm

Giống như toán học, các hàm f(x); f(x, y) v.v... Mục tiêu là để khi truyền vào các giá trị, sẽ sử dụng giá trị đó thay thế vào logic để thực hiện kết quả. Có một lưu ý đặc biệt rằng truyền tham số phải đúng thứ tự

Cú pháp

// khai báo
function functionName(parameterA, parameterB) {
    // code...
}

// gọi hàm - thực thi các đoạn code logic bên trong khối lệnh của hàm đã được khai báo
functionName(5, 10);

Ví dụ sử dụng:

function parimeterReg(width, length){
    // lúc này, width, length đóng vai trò là 2 tham số: chiều dài, chiều rộng.
    const result = (width + length) * 2;
    console.log(result);
}
parimeterReg(5, 10);

Typescript

                    // Định nghĩa kiểu dữ liệu đầu vào cho tham số                    
function parimeterReg(width: number, length: number){
    // lúc này, width, length đóng vai trò là 2 tham số: chiều dài, chiều rộng.
    const result: number = (width + length) * 2;
    console.log(result);
}
parimeterReg(5, 10);

Khi tạo các tham số, giống như việc tạo ra 1 biến mới, sử dụng trong phạm vi của hàm, không liên quan gì tới các giá trị, hay các biến được truyền

Lưu ý:

• Số lượng tham số không giới hạn

• Tham số truyền phải đúng thứ tự

• Nên đặt tên tham số có ý nghĩa

Trả về giá trị

Các cách định nghĩa, sử dụng hàm phía trên mới chỉ log ra giá trị, như toán toán học, giả sử f(x) = Ax + B, vậy chứng tỏ rằng hàm có thể bằng một giá trị. Thử xem kết quả ví dụ sau:

function parimeterReg(width, length){
    // lúc này, width, length đóng vai trò là 2 tham số: chiều dài, chiều rộng.
    const result = (width + length) * 2;
    console.log(result);
}
console.log(parimeterReg(5, 10)); // undefined

Kết quả trên log là undefined chứng tỏ ta hoàn toàn có cách để hàm có thể có giá trị giống như kết quả của hàm trong toán học. Cú pháp như sau:

function functionName(){
    // code ...
    return value; // value là giá trị muốn trả về
}

Ví dụ:

Javascript

function parimeterReg(width, length) {
    // lúc này, width, length đóng vai trò là 2 tham số: chiều dài, chiều rộng.
    const result = (width + length) * 2;
    return result;
}
// sử dụng biến để lưu trữ kết quả khi hàm thực thi xong
const resultPR = parimeterReg(5, 10);
console.log(resultPR); // 30

Typescript

                                                    // định nghĩa giá trị trả về cho hàm    
function parimeterReg(width: number, length: number): number {
    // lúc này, width, length đóng vai trò là 2 tham số: chiều dài, chiều rộng.
    const result = (width + length) * 2;
    return result;
}
// sử dụng biến để lưu trữ kết quả khi hàm thực thi xong
const resultPR: number = parimeterReg(5, 10);
console.log(resultPR); // 30

Nếu hàm không trả về giá trị gì, thì kiểu trả về sẽ là void

Arrow function

Một dạng thức khác về việc định nghĩa Function trong Javascript. Đối với cách khai báo phía dưới đây, được gọi là Normal function

function functionName() {
    // code...
}

Arrow function

const functionName = () => {
    /// code...
}

Về cơ bản, 2 dạng thức này chỉ khác nhau về cú pháp, việc sử dụng tương đối giống nhau, tuy nhiên Arrow function sẽ có điểm mạnh khi sử dụng truyền tham số và trả về giá trị

Truyền tham số:

Nếu chỉ có một tham số, Arrow function không bắt buộc phải có ngoặc tròn. Nhưng nếu từ 2 tham số trở lên bắt buộc phải có.

const functionName = param => {
    /// code...
}

Trả về giá trị:

Nếu nội dung của hàm chỉ là một biểu thức (một phép tính hoặc logic), có thể bỏ qua dấu ngoặc nhọn {} và return, vì JavaScript sẽ ngầm định trả về giá trị của biểu thức đó.

const add = (a, b) => a + b;

console.log(add(5, 3)); // Output: 8

const isPositive = (num) => num > 0 ? 'Positive' : 'Non-positive';

console.log(isPositive(10));  // Output: Positive
console.log(isPositive(-5));  // Output: Non-positive

Sự khác biệt giữa Arrow function và Normal function còn rất nhiều và quan trọng, hãy dành thời gian tìm hiểu tiếp để nắm rõ!

Anonymous function

Hàm ẩn danh - hàm không xác định, là một khái niệm, bản chất cũng là một hàm, tuy nhiên nó là một giá trị hàm, cần có một biến để lưu trữ lại và không có tên (giống như cách sử dụng arrow function). Lúc này biến sẽ đóng vài trò giống như tên hàm.

// khai báo hàm
const newFunction = function() {
    // code..
}
newFunction(); // gọi hàm

Rest operator

Rest operator là cách để tạo ra một function với vô hạn tham số truyền vào.

function sum(...args) {
  let total = 0
	for (let i = 0; i < args.length; i++) {
		total += args[i]
  }
  return total;
}
sum(1, 2, 3, 4, 5) // 15

Lưu ý:

• Lúc này, tham số args sẽ đóng vai trò là một mảng

• Trường hợp, nếu không được truyền vào, thì args sẽ là một mảng rỗng

• Các giá trị truyền với Rest không nhất thiết phải cùng một kiểu dữ liệu

• Khi sử dụng Rest, cần đảm bảo tham số luôn phải ở vị trí cuối cùng của tham số

// Wrong: multiple rest operator
const sum = (...first, ...second) => {...}

// Wrong: rest operator cannot be the first params
const sum = {...first, second, third} => {...}

// Correct
const sum = (first, second, ...third) => {...}