Hướng dẫn dùng funxtions JavaScript
Các hàm (Function) là một trong những nền tảng cơ bản trong Javascript. Vậy bạn đã nắm hết những kiến thức về Function trong Javascript chưa? Show
Function(Hàm) là gì?Function (hàm, chức năng), gọi chung là subprogram (chương trình con) có thể được gọi ở bên ngoài hoặc bên trong chính nó. Nó bao gồm tập hợp các câu lệnh gọi là function body. Các giá trị có thể truyền đến một hàm, và một hàm có thể trả về giá trị. Bây giờ, với các ứng dụng hiện đại, các function có thể là một chương trình hoàn chỉnh, chứ không phải là khái niệm tổng quát như ''subprogram" nữa. Có sự khác nhau giữa function và procedure (thủ tục) rằng sự lý tưởng của function nên trả về một giá trị còn procedure thì không ( bây giờ điều này có thể thay đổi theo ngôn ngữ lập trình). 1. Khai báo hàmĐể khai báo hàm, chúng ta dùng từ khóa
Ví dụ, để định nghĩa một hàm in ra chữ "Hello World" ở console:
2. Biểu thức hàm (Hàm trong biến)Trong khi việc khai báo hàm ở trên là một câu lệnh về mặt cú pháp, các hàm cũng có thể tạo ra bằng một biểu thức hàm (function expression). Một hàm như vậy có thể nặc danh; nó không cần phải có tên. Ví dụ, hàm sayHello ở trên có thể được khai báo như sau:
Tuy nhiên, một cái tên có thể được cung cấp trong một biểu thức hàm. Việc cung cấp tên cho phép hàm có thể chạy chính nó, hoặc có thể sử dụng hệ thống debug để nhận dạng hàm trong stack traces.
3. Các ràng buộc về tên hàmJavascript cũng giống như các ngôn ngữ khác nó cũng có các ràng buộc về tên hàm sau đây:
Các loại hàm1. Hàm cơ bảnĐây là dạng hàm cơ bản nhất trong Javascript, cú pháp có dạng như sau:
Trong đó: doSomeThing là tên của hàm bạn muốn đặt và Ví dụ: Tạo hàm in ra tên website codelearn ở console
2. Hàm có tham số truyền vàoĐây là một dạng hàm rất hay được sử dụng, cú pháp có dạng như sau:
Trong đó:
VD: Tạo hàm tính tổng 2 số
3. Hàm có tham số mặc địnhĐây thực ra là dạng hàm có truyền tham số và đồng thời xét luôn giá trị mặc định cho các tham số đó. Cú pháp:
Trong đó:
VD: với hàm getSum ở trên mình sẽ xét tham số mặc định cho nó.
4. Hàm có và không trả về giá trịTrong javascript có hai loại hàm,đó là hàm có giá trị trả về và hàm không có giá trị trả về.
VD: khai báo hàm getSum ở trên là hàm có giá trị trả về.
Gọi hàmViệc định nghĩa một hàm sẽ không thực thi nó. Định nghĩa một hàm đơn giản chỉ là đặt tên cho hàm và chỉ định những việc cụ thể sẽ làm khi hàm đó được gọi. Ví dụ, nếu bạn định nghĩa hàm sayHello, bạn có thể gọi nó như sau:
Câu lệnh trên gọi hàm sayHello, kết quả trả về chữ "Hello World" tại console. Các hàm phải đặt trong phạm vi (in scope) khi nó được gọi, nhưng việc khai báo hàm có thể được hoisted (câu lệnh khai báo hàm xuất hiện bên dưới dòng gọi hàm trong đoạn code), như ví dụ này:
Phạm vi (scope) của một hàm là khoảng không gian bên trong hàm mà nó được khai báo (hoặc là cả chương trình, nếu nó được khai bảo ở top level, tức là nó không nằm trong hàm nào khác). Lưu ý: Điều này chỉ đúng khi định nghĩa một hàm bằng cách sử dụng các cú pháp ở trên (ví dụ
Một hàm có thể gọi chính nóVí dụ, đây là một hàm tính giai thừa đệ quy:
Bạn có thể tính giai thừa của
Có những cách khác để gọi hàm. Có nhiều trường hợp mà tại đó một hàm cần phải được gọi một cách tự động, hoặc làm thay đổi số lượng đối số truyền vào một hàm, hoặc trong trường hợp mà việc gọi hàm cần được gắn với một object nhất định được quyết định tại thời điểm runtime. Điều đó lại hóa ra là các hàm tự bản thân chúng là các object, và kết quả là, những object này có các phương thức. Một trong số chúng, phương thức Phạm vi của hàm (Function Scope)Các biến được định nghĩa bên trong một hàm không thể được truy cập từ nơi nào khác bên ngoài hàm, bởi vì biến đó được định nghĩa chỉ trong phạm vi của hàm. Tuy nhiên, một hàm có thể truy cập đến mọi biến và mọi hàm khác trong cùng phạm vi mà nó được định nghĩa. Nói cách khác, một hàm được định nghĩa trong phạm vi global có thể truy cập tới tất cả các biến đã được định nghĩa trong phạm vi global. Một hàm được định nghĩa bên trong một hàm khác có thể truy cập đến tất cả biến được định nghĩa bên trong hàm cha của nó, và bất cứ biến nào khác mà hàm cha của nó có quyền truy cập đến. Các bạn có thể tham khảo ví dụ dưới đây:
Các tham số của FunctionKể từ ES6, xuất hiện 2 dạng tham số mới: default parameters và rest parameters 1. Default parametersTrong JavaScript, các tham số của function được mặc định
là Khi không có default parameters (trước ES6)Trong quá khứ, cách thông thường để thiết lập các giá trị mặc định là kiểm định giá trị của các tham số bên trong body của function và gán giá trị cho nó nếu nó là Trong
ví dụ sau, nếu không có giá trị nào được truyền cho
Khi có default parameters (sau ES6)Với default parameters, việc kiểm tra thủ công bên trong body của function không
còn cần thiết. Bạn có thể đơn giản chỉ là đặt
2. Rest parametersCú pháp rest parameter cho phép chúng ta dùng 1 mảng để đại diện cho số lượng vô hạn các đối số. Trong ví dụ sau, hàm
Arrow FunctionTrong ES6, arrow function là một cú pháp mới dùng để viết các hàm trong JavaScript. Nó giúp tiết kiệm thời gian phát triển và đơn giản hóa phạm vi function (function scope). Arrow function - còn được gọi là "fat arrow", là cú pháp được mượn từ CoffeeScript (một
ngôn ngữ chuyển tiếp), cú pháp này là cách ngắn gọn hơn dùng để viết function. Ở đây sử dụng kí tự Dưới đây là 1 vài ví dụ về việc sử dụng Arrow fucntion trong Javascript 1. Trường hợp có nhiều tham số
Ví dụ trên cho cùng một kết quả, tuy nhiên cú pháp với arrow function tốn ít dòng mã hơn. Trong trường hợp chỉ có một biểu thức thì không cần tới dấu ngoặc nhọn: Ví dụ trên có thể viết lại như sau:
2. Trường hợp có 1 tham sốDấu ngoặc đơn là không bắt buộc khi chỉ có 1 tham số.
3. Trường hợp không có tham sốDấu ngoặc đơn là bắt buộc khi không có tham số.
ClosuresClosures là một trong những chức năng quyền lực nhất của JavaScript. JavaScript cho phép lồng các function vào nhau, và cấp quyền cho function con, để function con có toàn quyền truy cập vào tất cả các biến và function được định nghĩa bên trong function cha (và tất cả biến và function mà function cha được cấp quyền truy cập đến). Tuy nhiên, function cha không có quyền truy cập đến các biến và function được định nghĩa bên trong function con. Điều này tạo nên một dạng bảo mật khép kín cho các biến của function con. Bên cạnh đó, vì function con có quyền truy cập đến scope của function cha, các biến và function được định nghĩa bên trong function cha sẽ vẫn tồn tại dù việc thực thi function cha đã kết thúc, nếu function con xoay sở để tồn tại lâu hơn thời gian sống của function cha. Một closure được tạo ra khi một function con bằng cách nào đó trở nên khả dụng với bất kỳ scope nào bên ngoài function cha. Hãy xem các ví dụ sau đây để hiểu hơn về Closures VD1:
Trong ví dụ trên, hàm VD2:
Chú ý, biến Callback FunctionCallback function có thể được hiểu nôm na như sau: callback tức là ta truyền một đoạn code (Hàm A) này vào một đoạn code khác (Hàm B). Tới một thời điểm nào đó, Hàm A sẽ được hàm B gọi lại (callback). Javascript là một ngôn ngữ lập trình hướng sự kiện và bất đồng bộ nên callback function đóng vai trò rất quan trọng, bạn sẽ truyền một callback function vào các sự kiện và xử lý bất đồng bộ đó.. Về Callback Function thì mình cũng đã có viết 1 bài riêng để chúng ta cùng tìm hiểu về nó. Các bạn có thể đọc thêm ở đây. Tạm kếtNhư vậy trong bài viết này, chúng ta đã cùng nhau tìm hiểu những vấn đề cơ bản về Function trong Javascript. Bạn thấy thế nào về JS, hãy đưa ra những ý kiến trong quá trình sử dụng js nhé. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo! Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn! |