Định nghĩa hàm Javascript – 3 cách cơ bản nhất

Có một sự khác biệt “nhẹ” của function trong Javascript với các ngôn ngữ khác đó là: function trong Javascript là first-class objects.

Nghĩa là chúng có hoạt động giống với Object. Tức là chúng có thể gán cho các biến, mảng, các đối tượng khác, thậm chí có thể truyền hàm vào trong hàm như là một tham số.

Bài viết này, chúng ta cùng thảo luận về 3 cách khác nhau định nghĩa hàm Javascript nhé!

Function Javascript là gì?

Function là một trong những thành phần quan trọng bậc nhất của mọi ngôn ngữ lập trình. Function được định nghĩa để thực hiện một tác vụ cụ thể nào đó và được tái sử dụng ở nhiều nơi trong source code. Javascript cũng vậy, và cũng có rất nhiều cách để định nghĩa hàm Javascript. Một function được thiết kế tốt là function chỉ thực hiện duy nhất một tác vụ mà thôi.

Cần kiến thức cơ bản về Javascript, đọc lại bài cũ mình đã viết nhé.

• Callback hell là gì? 6 cách “trị” callback hell trong javascript

Các cách định nghĩa hàm Javascript

1. Function Declaration

Đây là cách phổ biến nhất mà các anh em nhà developer hay làm. Cú pháp nó như sau:

function name (parameter){
       //tác vụ của function. 
}

Nhìn quá quen thuộc rồi đúng không? Kể cả với bạn mới làm quen với Javascript thì cũng thấy quen vì cách viết này giống với các ngôn ngữ khác.

Điều quan trọng là bạn cần phân biệt được sự khác nhau giữa tham số và đối số truyền vào.

• Tham số là một biến khi định nghĩa function.
• Đối số là dữ liệu thực tế bạn truyền vào các tham số.

Nghe có vẻ lại hơi khó hiểu rồi đúng không? Để mình lấy một ví dụ minh họa nhé.

function hello(name){
    console.log("Hello "+ name)
}
 
hello('stuti')
// Hello stuti

hello(12)
// Hello 12

Như bạn có thể thấy, mình định nghĩa một hàm hello(name), có một đối số. Và khi thực tế gọi hàm này, mình có thể truyền được cả string và số.

Nhưng mình muốn hàm này chỉ có thể truyền vào một string thì sao? Rất tiếc là trong Javascript không thể làm như thế.

Chúng ta chỉ có thể “cheat” được như sau mà thôi:

function hello(name) {
    if (typeof name === 'string')
        console.log("Hello " + name)

    else
        console.log("Please input a Name")
}

hello(12)   
// Plese input a Name

Theo mặc định, function sẽ trả về undefined. Nếu bạn muốn nó trả về một giá trị nào đó thì cũng như bình thường thôi, dùng từ khóa return.

}
console.log(something())         // undefined

function notSomething(){
    return 1
}

console.log(notSomething())       // 1

Ngoài ra, có một điều bạn sẽ thắc mắc là: Phạm vi sử dụng của Function Declaration như nào?

Nói một cách đơn giản là cho dù bạn khai báo hàm ở bất kể đâu thì nó vẫn sẽ được đưa lên đầu trong phạm vi của chúng. Người ta gọi đây là tính “Hoisting”.

myName()
// My name is Son Duong


function myName() {
    console.log(`My name is Son Duong`)
}

2. Function Expression

Cách định nghĩa hàm kiểu này cũng khá giống với cách định nghĩa hàm Javascript trên, chỉ khác một chút là hàm không bắt buộc phải có từ khóa “function”, tên của hàm cũng là tùy chọn (có cũng được, không có cũng được).

let checkNumber = function check (num){
    return (num %2==0)?"even" : "odd"
    }
console.log(checkNumber(50))    
// even

Với hàm không có tên thì gọi là hàm ẩn danh (Anonymous Function)

//Anonymous Function 

let checkNumber = function  (num){
    return (num %2==0)?"even" : "odd"
    }
console.log(checkNumber(50))    
// even

Có một điểm khác biệt rất quan trọng giữa Function Expression và Function Declaration đó là: Function Expression không có tính ” Hoisting “.

Nếu bạn thử một đoạn code tương tự như Function Declaration thì chắc chắn sẽ bị lỗi.

myName()
// ReferenceError: myName is Son Duong


let myName =function () {
    console.log(`My name is Son Duong`)
}

3. Generator Function

Một function bình thường sẽ tuân theo mô hình: chạy-cho-tới-khi-hoàn-thành, và không thể dừng giữa chừng được.

Nếu bạn muốn thoát hàm ở giữa chừng thì chỉ có cách là gọi từ khóa return hoặc throw một error.

Với Generator Function thì lại khác, bạn có thể dừng giữa chừng được. Khi nó được gọi lại, nó sẽ lại tiếp tục thực hiện tại chỗ nó dừng.

Generator Function có cách định nghĩa/khái báo như một hàm bình thường, chỉ khác là được thêm ký tự * sau từ khóa “function”.

Một điều cần lưu ý này: trong Javascript, một generator là một function và nó trả về một Object mà bạn có thể gọi next(). Mọi lời gọi của hàm next() sẽ trả về một đối tượng có cấu trúc như thế này:

{ 
  value: Any,
  done: true|false
} 

Trong đó:

• value: giá trị thực của đối tượng
• done: là thuộc tính chỉ định kết thúc hàm. Giá trị mặc định là false, khi hàm dừng thì nó là true.

Dài dòng lý thuyết vậy thôi, giờ mình lấy một ví dụ nhé.

  console.log('first to execute');
  yield 'takes a pause';  
  
  console.log(' printed after the pause');  
  yield 'end of the function';
  
}
const gen = generatorFunction();

console.log(gen.next().value);          // first to execute
                                        // takes a pause

console.log(gen.next().value);         //  printed after the pause
                                       // end of the function

console.log(gen.next().value);            
                                      // undefined

#Tổng kết: Cách khai báo hàm nào tốt hơn?

Thật khó để đưa ra nhận định là cách định nghĩa function Javascript hàm nào tốt nhất. Cái này nó phụ thuộc vào từng tình huống, thiết kế và điều kiện ứng dụng.

Bạn có thể sử dụng Generator Function để tạo chức năng Asycn tốt hơn, còn Anonymous Function Expression nếu muốn thực hiện hàm ngay lập tức mà không cần tái sử dụng.

• Tối ưu code Javascript, tăng tốc độ với thủ thuật đơn giản