Function trong JavaScript (Phần 2) - Các kiến thức mở rộng

Dẫn nhập

Ở bài trước, chúng ta đã cùng nhau tìm hiểu khái quát về function trong JavaScript .

Trong bài này, chúng ta sẽ cùng nhau mở rộng hơn kiến thức của mình về function

Nội dung

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

• Function trong Js
• Vòng lặp trong Js
• Biến và kiểu dữ liệu trong Js

Những nội dung mà chúng ta sẽ cùng tìm hiểu:

• Arrow function
• Lệnh yield
• Generator

Arrow function

Nếu các bạn có biết về ngôn ngữ lập trình Python, thì chắc hẳn các bạn sẽ biết ít nhiều về lambda – một kiểu rút gọn của hàm. Còn đối với các bạn mà không biết về lambda, thì đừng lo, Kteam sẽ giải thích cho các bạn

Arrow function là một hình thức thu gọn của function, giúp chúng ta viết ít code hơn, và gọn hơn trong nhiều trường hợp.

Vì là một dạng thu gọn của function, nên về bản chất, Arrow function vẫn là function.

Ví dụ:

> Print = () => "Hello"
[Function: Print]
> Print()
'Hello'
> typeof(Print)
'function'
1
2
3
4
5
6
7

Nhìn câu lệnh khởi tạo Arrow function bên trên, liệu các bạn có thể đoán được cú pháp của nó chứ ? Nếu không được, thì đừng lo, Kteam sẽ chỉ cho các bạn ngay bên dưới

<Tên biến> = (<p1>, <p2>, …, <pn>) => <statement>

Trong đó:

• <p1>, <p2>, …, <pn>: là các tham số trong function. Nếu như chỉ có 1 tham số, ta có thể loại bỏ dấu ngoặc.
• <statement>: Là lệnh (hoặc khối lệnh) của function.

Ví dụ:

square = (x) => x*x // Mặc định là return x*x
// [Function: square]
square(23) // gọi hàm để sử dụng một cách simple
// 529
Sum = x => { // Y hệt cách sử dụng function
 let S = 0;
 for(let i = 1; i <= x; i++)
 S += i
 return S
}
// [Function: Sum]
Sum(100)
// 5050
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Nếu function chỉ có một câu lệnh, thì ta có thể bỏ dấu ngoặc và từ khóa return, như trong ví dụ trên.

Từ khóa yield và hàm next trong JavaScript 

Có bao giờ bạn tự hỏi: liệu một function nào đó có thể bị pause lại trong quá trình thực hiện, rồi sau đó lại continue tiếp không ?

Nếu là mình, thì trước khi biết đến lệnh yield, thì mình cũng sẽ trả lời là không.

Bây giờ, Kteam sẽ chỉ cho các bạn về generator và lệnh yield trong JavaScript 

Generator

Bạn có thể hiểu một cách đơn giản, generator gần giống như function, chỉ khác ở một điểm là nó sẽ được chạy một cách ngắt quãng, chứ sẽ không chạy một lèo như là function. Các lệnh trong generator sẽ được thực hiện chỉ khi ta gọi nó.

Nói về lý thuyết thì có vẻ khó hiểu, nhưng nếu vào practice, thì cũng không khó lắm đâu

Để khởi tạo một generator, ta cũng dùng function, nhưng khác ở chỗ là ta sẽ đặt dấu * (dấu hoa thị) sau từ khóa “function”.

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

<statement>

}

Ví dụ:

function* a() {
}
// undefined
a // Một generator function
// [GeneratorFunction: a]
1
2
3
4
5
6

Để có thể sử dụng được generator, ta phải dùng biến và gán cho nó giá trị của function generator vừa tạo:

function* a() {
}
// undefined
a
// [GeneratorFunction: a]
t = a()
// Object [Generator] {}
1
2
3
4
5
6
7
8

Như ta có thể thấy, giá trị của biến t trong trường hợp trên không phải là function, mà là Object [Generator] {}. Điều này chứng tỏ nó là generator.

Khác với function thông thường, generator cho phép sử dụng một câu lệnh (khác với return) để trả về một giá trị, và nó là lệnh yield.

Cụ thể, với một lệnh yield, nó sẽ tạm dừng chương trình và trả về một giá trị. Sau đó, cứ mỗi lần yield, thì nó sẽ lại dừng, sau đó lại chạy…cho đến hết generator function.

Để có thể nhận giá trị trong một generator bằng lệnh yield, thì ta dùng hàm next().

Với mỗi lần dùng hàm next(), nó sẽ trả về 2 giá trị: value và done. Value sẽ là giá trị mà function đó yield về, còn done sẽ là trạng thái của function đó, nó cho biết function đã được chạy hết hay chưa.

Ví dụ:

function* generator() {
 yield 1
 yield 2
 yield 3
}
// undefined
g = generator()
// Object [Generator] {}
g.next() // yield lần 1
// { value: 1, done: false }
g.next() // yield lần 2
// { value: 2, done: false }
g.next() // yield lần 3
// { value: 3, done: false }
g.next() // yield lần 4, lúc này done = true
// { value: undefined, done: true }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Việc cho phép dùng hàm next(), biến generator thành một iterator.

Generator

Vòng lặp for..of và khái niệm iterable

Đối với việc lặp qua các ký tự trong một chuỗi, thì như đã tìm hiểu ở bài trước, một phương án hiệu quả là việc lặp qua chỉ số của các ký tự trong chuỗi, và từ đó lấy ra các ký tự trong chuỗi đó. Dưới đây là một ví dụ minh họa:

string = 'howKteam'
// 'howKteam'
for(let i = 0; i < string.length; i++) console.log(string[i]);
// h
// o
// w
// K
// t
// e
// a
// m
// undefined
1
2
3
4
5
6
7
8
9
10
11
12
13

Nhưng bên cạnh đó, còn có một cách lặp khác, cũng có công dụng giúp chúng ta lấy từng ký tự của một chuỗi, đó là dùng for..of.

Cú pháp:

for(<variable> of <iterable>)

<statement>

Trong đó:

• <variable>: là biến dùng để chạy trong vòng lặp, và có thể được khởi tạo bằng các từ khóa let hoặc var trước khi vòng lặp được thực hiện.
• <iterable>: là một khái niệm mới, dùng để chỉ những kiểu dữ liệu mà ta có thể dùng vòng lặp for..of để duyệt qua các phần tử của nó.
• <statement>: giống với vòng lặp for thông thường, là một câu (hoặc một khối) lệnh.

Trong mỗi lần lặp, thì <variable> sẽ lần lượt mang các giá trị của các “thuộc tính” bên trong <iterable>. Và cũng giống như vòng lặp for thông thường, for..of cũng là một vòng lặp biết trước số lần lặp, và số lần lặp sẽ bằng với độ dài của <iterable>, và nó không bị ràng buộc theo điều kiện.

Vậy…iterable là cái gì thế ?

Từ các giải thích về vòng lặp for..of như trên, chắc các bạn cũng phần nào đoán ra được rằng iterable là gì. Kteam khuyến khích các bạn hiểu một cách đơn giản:

• iterable là các kiểu dữ liệu mà những giá trị thuộc các kiểu dữ liệu đó có thể được xé nhỏ, bóc tách ra thành những giá trị nhỏ hơn.

Lấy ví dụ với kiểu dữ liệu chuỗi: Với chuỗi, ta có thể dùng for..of để duyệt qua các ký tự của chuỗi, đó là dấu hiệu cơ bản nhất

Ví dụ:

string = 'howKteam'
// 'howKteam'
for(let char of string) console.log(char)
// h
// o
// w
// K
// t
// e
// a
// m
// undefined
1
2
3
4
5
6
7
8
9
10
11
12
13

Do đó, ta có thể kết luận rằng, chuỗi là một iterable.

Ngoài string, có nhiều kiểu dữ liệu khác cũng là iterable: array (mảng), set (tập hợp), map, …. Một vài loại iterable đơn giản nhất sẽ được Kteam giới thiệu đến các bạn trong các bài kế tiếp.

Việc hiểu về iterable theo cách Kteam giải thích như trên có thể giúp các bạn biết về iterable. Nhưng về mặt bản chất, nó được quy định bởi phương thức Symbol.iterator của chính kiểu dữ liệu đó.

Tức là, người dùng có thể biến một kiểu dữ liệu nào đó thành một iterator.

Các giải thích dưới đây là phần mở rộng, và do đó nên đừng lo nếu bạn gặp một chút khó khăn trong việc hiểu nó.

Việc quy định một kiểu dữ liệu nào đó có phải là một iterable hay không phụ thuộc vào việc kiểu dữ liệu đó có chứa phương thức Symbol.iterator hay không. Do đó, việc tạo ra phương thức này cho một kiểu dữ liệu nào đó, sẽ biến nó thành một iterable.

Lấy ví dụ với kiểu dữ liệu số. Ban đầu, nó không thể được duyệt qua bằng for..of:

kteam = 6
// 6
for(let t of kteam) console.log(t)
// Uncaught TypeError: kteam is not iterable
1
2
3
4
5

Nhưng sau đó, ta sẽ phù phép để có thể dùng for..of cho một số:

Number.prototype[Symbol.iterator] = function* () {
 yield 'this';
 yield 'is';
 yield 'number';
}
// [GeneratorFunction (anonymous)]
kteam = 6
// 6
for(let t of kteam) console.log(t)
// this
// is
// number
// undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Với for..of, các lệnh như break và continue được dùng bình thường.

Generator là một iterable

Ta có thể đơn giản lặp qua một generator bằng for..of, điều này chứng tỏ nó là một iterable.

function* g() {
 yield 'we'
 yield 'are'
 yield 'kters'
}
// undefined
f = g()
// Object [Generator] {}
for(let i of f) console.log(i)
// we
// are
// kters
// undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vậy…còn iterator ?

Như Kteam có nhắc đến, rằng generator là một iterator.

Bạn có thể đã sử dụng iterator hàng ngày nhưng không nhận ra, vì nó khá trừu tượng.

Hiều đơn giản, thì iterator là cái giúp chúng ta lặp qua một chuỗi, một generator, một array, ….

Việc sử dụng vòng lặp for..of chính là một biểu hiện rõ rệt nhất.

strs = 'JavaScript'
// 'JavaScript'
for(let str of strs) console.log(str.concat(' + '))
// J +
// a +
// v +
// a +
// S +
// c +
// r +
// i +
// p +
// t +
// undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Từ những khái niệm như trên, chắc hẳn các bạn đã biết được sự khác biệt giữa iterator và iterable rồi nhỉ ?

Rất đơn giản: một cái là một cấu trúc dữ liệu có thể được lặp qua. Còn một cái là thứ giúp chúng ta thực hiện việc lặp.

Kết luận

Qua bài này, các bạn đã biết thêm về function trong Js, ngoài ra còn có vòng lặp for..of và khái niệm iterator.

Trong bài sau, Kteam sẽ giới thiệu đến các bạn một khái niệm mới liên quan đến function, đó là đệ quy

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ó”.

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Function trong JavaScript (Phần 2) - Các kiến thức mở rộng dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

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.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK