Function trong JavaScript (Phần 1) - Khái niệm về Function

***Bài học này tương đối dài và gồm nhiều phần quan trọng.

***Để có thể theo dõi bài học một cách tốt nhất, hãy đảm bảo bạn đã đọc qua các phần trong bài trước khi đi xem video về phần đó, đồng thời viết lại hoặc code lại các ví dụ để hiểu sâu hơn những vấn đề mà tác giả và người hướng dẫn đã trình bày trong bài. 

Dẫn nhập

Ở các bài trước, chúng ta đã cùng tìm hiểu về vòng lặp For trong JavaScript .

Ở bài này, chúng ta sẽ cùng tìm hiểu về một kiểu dữ liệu mới: function

---

Nội dung

Để nắm được nội dung bài này, bạn cần có kiến thức về:

• Các kiểu dữ liệu cơ bản trong JavaScript 
• Cấu trúc điều kiện
• Vòng lặp trong JavaScript 
• Biến trong JavaScript 

Những nội dung mà Kteam sẽ gửi đến các bạn:

• Giới thiệu về hàm và thủ tục trong JavaScript 
• Các đặc điểm của function
• Tham số và đối số trong function
• Lệnh return trong JavaScript 
• Biến trong function

---

Đặt vấn đề

Trong quá trình code, chắc chắn chúng ta sẽ gặp những tình huống mà để giải quyết, ta sẽ cần phải dùng đi dùng lại một đoạn code nhiều lần.

Trong những trường hợp như thế, việc copy paste lại các đoạn code thực sự rất tốn sức, nếu như không muốn nói là “bất khả”.

Và, để giúp cho người dùng đỡ mất công với việc reuse code, JavaScript hỗ trợ một kiểu dữ liệu mới, và nó được gọi là function (dịch: hàm). Về bản chất, function là một object (thứ mà ở phần sau của khóa, bạn sẽ được tìm hiểu)

---

Hàm trong JavaScript 

Kiểu dữ liệu function trong JavaScript , cũng giống như các kiểu dữ liệu khác, đều giúp lưu trữ các giá trị. Nhưng khác với các kiểu dữ liệu thông thường, function thực chất giúp chúng ta lưu trữ các “câu lệnh”, để có thể tái sử dụng một cách thuận tiện hơn.

Trong JavaScript, dù là hàm hay thủ tục, đều có một cấu trúc chung như sau:

function <function_name>(<parameter-1>, <parameter-2>,…) {

<statement>

}

Trong đó:

• <function_name>: là tên của hàm, và sẽ được sử dụng để gọi hàm (có tác dụng gần giống như là một biến)
• Các <parameter>: là các giá trị mà người dùng đưa vào cho hàm, để hàm có thể thực hiện công việc của mình
• <statement>: là một lệnh hay một khối lệnh, là những nội dung bên trong hàm.

Nếu như sau từ khóa function, mà có thêm một dấu *, thì đó là generator function (một khái niệm mà chúng ta sẽ cùng tìm hiểu ở bài sau).

Ví dụ:

function print() {
 console.log('Printed !')
 }
// undefined

Đối với hàm trên, nó không cần có các tham số, vì thực chất công việc của nó chỉ là in ra cụm từ “Printed !” chứ không thực hiện bất kỳ công việc nào khác.

Sau khi đã khởi tạo được một function như trên, ta chỉ cần “gọi” function đó ra và sử dụng:

print()
// Printed !
// undefined

Và tất nhiên, biến print sẽ có kiểu dữ liệu là function:

typeof(print)
// 'function'

Sử dụng các biến trong function:

function square(x) {
 console.log(x*x)
}
// undefined
square(5)
// 25
// undefined
square(3)
// 9
// Undefined

Bên cạnh cách khởi tạo hàm như trên, còn một cách nữa dành cho những ai thích làm khó bản thân

---

Constructor function

Cú pháp:

<new> Function(<p1>, <p2>, <p3>, …, <pn>, <functionBody>)

Cụ thể hơn một chút:

• <new>: là từ khóa new, có thể có hoặc không
• <p>: tương ứng với các các <parameter> trong cú pháp trên
• <functionBody>: là các câu lệnh trong phần thân của function.

Chú ý: cả <p> và <functionBody> đều phải được ghi ra dưới dạng một chuỗi:

Ví dụ: với hàm Print bên trên

Print = Function('console.log("Printed !!")')
// [Function: anonymous]
Print()
// Printed !!
// undefined

Đó là với những function đơn giản, giả sử các bạn muốn in 5 dòng liên tục:

Print = Function('a', 'b', 'c', 'd', 'e', 'console.log(a); console.log(b); console.log(c); console.log(d); console.log(e)') 
/// [Function: anonymous]
Print("This", 'is', 'howKteam', 'Free education', 'Website')
// This
// is
// howKteam
// Free education
// Website
// undefined

Đây là một cách rất phức tạp và khó thực hiện. Rất mong các bạn có thể đừng làm khó bản thân như thế này.

---

Gọi một function trong JavaScript 

Một function đơn giản chỉ là một đoạn code nhỏ được lưu trữ lại để lấy ra khi mà ta cần.

Để có thể thực thi những đoạn code trong một function, ta phải gọi nó. Cách gọi đơn giản là viết tên nó ra và thêm vào các đối số cần thiết (nếu có).

function plus(a, b) {
 return a + b
 }
// undefined
plus(2, 3)
// 5
plus('2', '3')
// '23'

---

Function là một loại object

Toán tử instanceof

Cú pháp:

<A> instanceof <B>

Trong đó:

• <A> là một loại object bất kì.
• <B> là một constructor

Tác dụng: Một cách dễ hiểu, thì toán tử này giúp chúng ta kiểm tra xem <A> có được xây dựng dựa trên <B> hay không. Thông thường, <A> được xem như là xây dựng từ <B> khi mà ta dùng từ khóa new kết hợp với constructor <B>

Ví dụ:

a = new Set()
// Set(0) {}
a instanceof Object
// true
b = new Number(10)
// [Number: 10]
b instanceof Number
// true
c = 'howKteam'
// 'howKteam'
c instanceof String
// false

---

Chứng minh: function được xây dựng dựa trên object

Đây là kiến thức mới, nhưng để các bạn hiểu rõ vấn đề, Kteam sẽ chứng minh việc object chính là nền tảng của function. Có nghĩa là: function là một dạng object.

function myfunc() {
 console.log('howKteam')
}
// undefined
myfunc instanceof Object
// true

---

Lệnh return

Nếu các bạn đã biết về lập trình trước đó, thì đối với hàm, ta sẽ chia ra làm 2 loại khác nhau: đó là hàm và thủ tục. Một function được định nghĩa là một thủ tục khi nó chỉ thực hiện một công việc nào đó mà không có giá trị trả về, còn hàm thì khác, nó sẽ trả về một giá trị.

Tất cả các function trong Js đều trả về một giá trị cho người dùng khi nó được gọi đến. Giá trị này sẽ được quy định bởi lệnh return (nếu có):

return <value>

Trong đó, <value> là giá trị trả về, và giá trị mặc định của nó là undefined.

Lấy ví dụ với hàm square bên trên, ta sẽ thêm lệnh return để nó trả về một giá trị:

function square(x) {
 console.log('Đây là hàm square')
 return x*x
}
// undefined

Và..khi ta lấy nó ra chạy, thì sẽ có kết quả:

square(6) // giá trị ở dòng đầu là câu lệnh bên trong hàm, giá trị ở dòng thứ 2 là giá trị mà hàm đó return về.
// Đây là hàm square
// 36

Lưu ý: khi ta dùng lệnh return, thì toàn bộ chương trình cũng sẽ kết thúc, tức là, các câu lệnh bên sau return sẽ có khả năng không được chạy.

function f(x) {
 return x
 console.log('returned')
}
// undefined
f(10)
// 10
f(20)
// 20

---

Tham số và đối số của function

Một cách dễ hiểu, tham số là những gì mà function đó yêu cầu user truyền vào để thực hiện hàm. Còn đối số là những giá trị mà ta truyền vào.

Lấy ví dụ với hàm square vừa nãy:

function square(x) { // x ở đây là tham số
  return x * x;
}
console.log(square(7)); // 7 bên trong lời gọi hàm chính là đối số

Các tham số và đối số có thể mang bất kỳ kiểu dữ liệu nào, miễn là nó hợp lệ (kể cả hàm)

Dưới đây là một số ví dụ với hàm trong JavaScript 

function upper(x) {
   return x.toUpperCase();
}
// undefined
function lower(x) {
   return x.toLowerCase();
}
// undefined
function capitalize(x) {
   let str = upper(x[0]);
   for (let i = 1; i < x.length; i++)
     if (x[i - 1] == " ") str += upper(x[i]);
     else str += lower(x[i]);
   return str;
}
// undefined

Theo mặc định, việc khởi tạo các hàm sẽ đưa chúng lên đầu chương trình, có nghĩa là, ta có thể dùng function ở dòng bên trên, và sau đó khởi tạo nó ở bên dưới (giống với từ khóa var).

console.log(capitalize('this is my book'))
function upper(x) {
  return x.toUpperCase();
}
function lower(x) {
  return x.toLowerCase();
}
function capitalize(x) {
  let str = upper(x[0]);
  for (let i = 1; i < x.length; i++)
    if (x[i - 1] == " ") str += upper(x[i]);
    else str += lower(x[i]);
  return str;
}

Đây là output:

Giả sử, ta lỡ tay quên không truyền vào tham số hay các tham số không đầy đủ thì sao ?

Trong JavaScript, các tham số sẽ luôn mang giá trị là undefined trước khi được truyền vào, có nghĩa là, nếu ta không truyền vào tham số, thì mặc định nó sẽ bằng undefined.

function Print(sentence) {
 console.log(sentence)
 }
// undefined
Print('Kteam')
// Kteam
// undefined
Print() //  Dòng đầu tiên chính là kết quả của câu lệnh console.log trong function
// undefined
// undefined

---

Biến trong function

Một function trong Js hoàn toàn có thể sử dụng được các biến toàn cục tại chương trình đó. Khi ta gọi ra một biến, nếu biến đó không trùng với các tham số, và cũng không được khởi tạo bên trong function, thì chương trình sẽ lấy giá trị của biến toàn cục tương ứng để sử dụng.

Ví dụ:

var n1 = 2, n2 = 5
// undefined
function mul() { 
 return n1*n2 // Lấy 2 biến toàn cục ra để thực hiện phép nhân
}
// undefined
mul()
// 10

Và, nếu ta thay đổi function một chút:

var n1 = 2, n2 = 5
// undefined
function mul() {
let n1 = 10, n2 = 10
 return n1*n2 // Lấy giá trị có sẵn trong function để dùng
}
// undefined
mul()
// 100

Và, mặc dù function có thể sử dụng các biến toàn cục, nhưng function không thể tạo ra nó:

function make() {
 var t = 0
}
// undefined
t
// Uncaught ReferenceError: t is not defined

Đây là lí do: Vì nó là một chương trình con, nên việc dùng var sẽ chỉ cho phép tạo ra một biến với tác dụng toàn cục ở bên trong chính function đó.

Mời các bạn cùng xem 2 ví dụ dưới đây để hiểu rõ hơn:

function kteam() {
     {
         var t = 100;
     }
     console.log(t * 2);
}
// undefined
kteam()
// 200
// undefined

function kteam() {
     {
         let t = 100;
     }
     console.log(t * 2);
}
// undefined
kteam()
// Uncaught ReferenceError: t is not defined
    at kteam (REPL6:5:17)

Qua 2 ví dụ trên, ta có thể thấy rằng, các từ khóa let, var khi được dùng trong function thì chỉ có tác dụng nội bộ trong function đó. Khi ở trong function, thì chúng có tác dụng y chang như khi chúng ở bên ngoài.

---

Kết luận

Qua bài này, Kteam đã giới thiệu đến các bạn kiểu dữ liệu function trong JavaScript 

Qua bài sau, tụi mình sẽ nói sâu hơn về function, để giúp các bạn nắm được nó một cách rõ ràng hơn

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.