3 điểm cần chú ý về hàm ở Javascript

Spread the love

Trong loạt bài này thì mình sẽ giới thiệu cách tiếp cận Javascript một cách cơ bản nhất cho những người mới bắt đầu làm quen với ngôn ngữ này. Việc viết một đoạn code để thực thi một tác vụ đối với người có kinh nghiệm lập trình thì có lẽ đơn giản, mình hi vọng chúng ta có thể bỏ ra thêm 1 ít thời gian để suy ngẫm sâu hơn xíu về vấn đề, lúc đó chắc chắn sẽ ra được thêm nhiều điều đáng học hỏi nữa. Thôi mình bắt đầu với vài đoạn code thực tế như bên dưới

Câu lệnh return trong javascript


Javascript là ngôn ngữ rất “mở”. Trong câu lệnh của javascript thường được kết thúc bằng dấu “;” tuy nhiên, dấu chấm phẩy này đôi khi cũng thường bị các bạn bỏ quên đi. Tuy nhiên trong một vài trường hợp thì dấu “;” này chắc chắn sẽ gây ra trở ngại lớn nếu ta không chú ý kĩ. Hãy thử xem đoạn code bên dưới

var getTriangle = function(base, height){
   return
   base * height / 2;
}
console.log('The area is:' + getTriangle(5,2));

Đoạn code trên theo ý định thì sẽ được trả ra console giá trị là  tuy nhiên thực tế thì undefined

Lý do ?: ngay sau câu lệnh return thì nếu gặp dấu xuống dòng LF thì đoạn code trên sẽ được Javascript hiểu theo ý bên dưới

return;
base * height / 2;

Vì vậy , dù Javascript là một ngôn ngữ dễ tính đến mức nào thì chúng ta cũng nên xóa đi dấu xuống dòng nếu không thật sự cần thiết và nhớ kết thúc câu lệnh javascript bằng dấu “;”. Điều này cũng sẽ làm tăng tính dễ đọc của đoạn code cũng như giảm thiểu các bug có thể phát sinh sau này. Cũng cùng lý do trên, nếu không thật sự cần thiết thì các bạn nên cũng nên xóa đi

  • Câu lệnh break / continue
  • Câu lệnh throw
  • Toán tử ++, — ( dạng x–, x++)

Tóm lại là không phải là chúng ta không nên sử dụng dấu xuống dòng, tuy nhiên nên sử dụng đúng mục đích (làm cho code dễ đọc, phân bố lại cấu trúc code) thay vì sử dụng dấu xuống dòng vô tội vạ.

Hàm cũng là một dạng data 


Nếu các bạn đã học qua các ngôn ngữ khác, khi xem đoạn code bên dưới thì chắc sẽ có bạn bảo rằng “Đoạn code bên dưới có gì đó không đúng rồi”

var getTriangle = function(base, height){
   return base * height / 2;
}
console.log('The area is:' + getTriangle(5,2));
getTriangle = 0;
console.log(getTriangle);

Chắc chắn sẽ có bạn nói rằng :”Tên hàm thì không được sử dụng làm tên biến, việc assign lại như thế này chắc chắn sẽ gây ra lỗi”
Tuy nhiên đoạn code trên là một đoạn code chính xác trong javascript.

Javascript hiểu rằng getTriangle là một biến được trỏ tới một function nên sau này bạn có định nghĩa lại nó là biến trỏ tới giá trị 0 thì cũng không sao cả.

Hãy cùng xem thử nếu ta log đoạn code phía bên dưới:

var getTriangle = function(base, height){
   return base * height / 2;
}
console.log(getTriangle);

Output sẽ là

function(base,height){

return base * height / 2;

}

Ở đây biến số getTriangle đang trỏ về hàm tính diện tích nên một cách tự nhiên là khi gọi câu lệnh console.log(getTriangle) do getTriangle đang là hàm nên nó sẽ tự động được gọi Function.toString() và đó chính là nội dung hàm được trả về trong console.log

Khác biệt của khai báo hàm bằng “function XXX và “var XXX = function() ?


Trước khi kết thúc bài viết này, chúng ta cùng tham khảo 2 đoạn code bên dưới

console.log('The triangle area:" + getTriangle(5,2));

function getTriangle(base, height){
   return base * height / 2;
}

Đoạn code này có gây ra lỗi không ? khi ta gọi hàm getTriangle trước lúc mà nó được khai báo ? Câu trả lời là KHÔNG . Thật sự thì tại function chính là 1 keyword dùng để khai báo các hàm tại lúc compile. Có nghĩa là compiler đã đi tìm các keyword này và đăng kí chúng vào vùng nhớ trước khi đoạn code bắt đầu được thực thi , nên lúc này hàm getTriangle là một hàm đã được định nghĩa.

Vậy ta thử thay đổi đoạn code ở trên từ keyword function thành Function literal  thì kết quả như thế nào nhỉ ?

console.log('The triangle area:" + getTriangle(5,2));

var getTriangle = function (base, height){
   return base * height / 2;
}

Tôi hẳn là sẽ nghĩ kết quả không có gì thay đổi. Chúng ta sẽ nhận được “5” tại console. Tuy nhiên kết quả nhận được thì ………. là error getTriangle is not a  function  có nghĩa là khi thực thi nếu thì những khai báo dạng Function literal như trên chỉ được thực hiện trong lúc runtime, và do vị trí chúng ta khai báo ở bên dưới đoạn code gọi nó , lúc đó getTriangle chưa được định nghĩa nên sẽ trả về lỗi.

Vậy chúng ta rút ra được kết luận

Function literal / Function constructor chỉ được thực thi lúc runtime

Nếu ở đoạn code trên ta đem đoạn khai báo var getTriangle .... lên trước đoạn gọi console.log thì chắc chắn sẽ không có lỗi.