Top 4 # Cách Viết Code Javascript Xem Nhiều Nhất, Mới Nhất 3/2023 # Top Trend | Toiyeucogaihalan.com

Test Javascript Code Với Jest

Test (hay automated test) là một phần không thể thiếu của quy trình phát triển phần mềm.Với những dự án mang tính chất phát triển lâu dài và có quy trình phát triển nhanh thì automated test là điều tối quan trọng.Bài viết này mình sẽ chia sẻ một vài kinh nghiệm viết test với javascript (Nodejs) sử dụng Jest.

Tại sao lại là Jest

Trước đây khi mới bắt đầu với Javascript mà đặc biệt là Nodejs, mình cũng hơi bị hoang mang khi tìm tool để viết test.Lạc giữa mê hồn trận các thể loại tools, nổi bật và được dùng nhiều nhất thời điểm đó vẫn là combo: Mocha + Chai + Sinon.Mình đã từng có ý định viết 1 bài blog về cách Setup đủ bộ combo này để chạy test và làm starter cho cả team, một phần vì nó khá loằng ngoằng và phức tạp.Cho đến một ngày mình gặp Jest.Jest được phát triển bởi Facebook, bạn có thể tìm hiểu thêm tại trang chủ của Jest

Vậy tại sao mình chọn Jest:

Đơn giản, dễ hiểu: bạn ko cần phải đi mò giữa nhiều thư viện khác nhau, chỉ lên trang chủ Jest là đủ

Không cần cấu hình gì cả: vâng, hoàn toàn không. Chỉ cần kéo thư viện về là bạn có thể bắt đầu viết test và test code được rồi

All in one: một mình Jest là đã cân đầy đủ test runner, assert và mock. Ngoài ra còn có thêm cả Coverage reports… rất ngầu.

Nhanh: phải nói là rất nhanh, ngoài ra terminal của test rất đẹp và thân thiện, khi dùng cảm giác rất cool.

Chừng đó đã đủ để Jest đốn tim bạn chưa? Nếu <3 rồi thì tại sao ta không tiến sâu hơn?

1

2

$ yarn add --dev jest

Nếu bạn để ý kỹ thì sẽ thấy jest bỏ qua thư mục node_modules và tự động tìm kiếm file test nằm trong thư mục __tests__ hoặc file có đuôi là: .spec.js hoặc .test.jsMình thì follow theo convention là sẽ đặt tên file test là .test.js cùng thư mục với unit code.

sum.js

1

2

3

4

function

sum

(

a, b

)

{

return

a + b;

}

module

.exports = sum;

Viết test case với Jest đơn giản chỉ là vậy. Bạn bắt đầu 1 test case với test() và sử dụng bộ assert expect() + toXXX() mà jest cung cấp.Bạn có thể tham khảo section Matchers trên trang chủ Jest, đầy đủ và rất dễ hiểu

Integration tests

Integration tests, nôm na là test xem code của mình mà có dùng đến code khác chạy có đúng không.Phần code khác, được hiểu là code của 1 unit khác, hoặc 1 thư viện mà mình nhúng vào để sử dụng.Để test được case này thì ta sẽ phải mô phỏng hành vi của phần code khác (gọi là mock), và test phần code của mình.

Mock 1 module

Giả sử mình có 1 module là total(array), nó sẽ sử dụng module sum ở trên để tính tổng các phần tử của 1 array

total.js

1

2

3

4

5

6

7

const

sum =

require

(

'./sum'

);

function

total

(

values = []

)

{

return

values.reduce(sum,

0

);

}

module

.exports = total;

Unit tests total:

Mock module thì chỉ đơn giản như vậy. Bạn có thể tham khảo kỹ hơn về mock trên trang chủ của jest.

Tất nhiên với case hàm total và sum ở trên thì bạn không cần mock vì mấy hàm này gần như cô lập và đã chạy rất nhanh.Giờ ta sẽ sang 1 case thực tế hơn, ví dụ bạn có 1 function, trong function đó gọi đến việc đọc thông tin 1 file trên ổ cứng.Trường hợp này mock sẽ giúp test case chạy nhanh hơn, mock được nhiều case hơn và bạn không cần chuẩn bị file trên ổ cứng để test.

Mock nodejs core module

Ví dụ mình có 1 hàm sử dụng core module fs để đọc thông tin file.

readContent.js

1

2

3

4

5

6

7

const

fs =

require

(

'fs'

);

function

readContent

(

file

)

{

return

fs.readFileSync(file);

}

module

.exports = readContent;

Các Chuẩn Coding Style Trong Javascript

Thế nào gọi là chuẩn Coding (Coding Standard)?

Name Standards

“ Call me by your name” trong Javascript sẽ dễ dàng hơn nếu bạn áp dụng một số quy ước cho việc đặt tên trong Javascript. Chẳng hạn như:

Ngoài ra khi viết code Javascript, ta cũng có một số quy ước đặt tên phổ biến cho hàm ví dụ như:

Một vài quy ước khác mà bạn cũng nên học hỏi thêm:

Space và Tab Indentation

Mỗi indentation level sẽ có những quy định khác nhau về việc cách nhau một nhóm các spaces nhất định với mục đích chủ yếu là để bạn hoặc thành viên khác trong team có thể dễ dàng đọc code của nhau hơn. Các Indentation level thường cách nhau bởi 2 spaces, ví dụ 2 spaces với first indentation, 4 spaces với second indentation, … Chúng ta có thể setting khi sử dụng các editor để tùy ý một tab tương ứng với bao nhiêu spaces.

Tab Indentation cũng tương tự như vậy và với mỗi indentation level ta lại sử dụng 1 tab. Nói nôm na là mỗi cấp indentation sẽ cách nhau 1 tab. Ví dụ minh họa như sau:

Thật ra thì những cái này thì mình thường dùng extension Beautiful Code trên VS Code và cứ mỗi lần save là nó lại fix những lỗi về spacing của mình nên mình cũng chẳng cần động tay động chân nhiều. Nhưng nhớ những điều này cũng sẽ có lợi cho bạn. Biết đâu đấy sau này bạn lại dùng những phần mềm khác không có tính năng này thì sao?

Hạn chế Horizontal Scrolling

Thường thì một dòng code sẽ được giới hạn bởi 80 kí tự, chính vì vậy mà ta không nên phá vỡ nguyên tắc này. Nếu bạn viết code mà khiến thành viên khác phải scroll theo chiều horizontal quá nhiều thì sẽ khiến họ cảm thấy bất tiện và khó chịu, bên cạnh đó, nó cũng không tiện cho việc review với những dự án được public lên github.

Sử dụng Black Line

if (num === 1) {

Một số chuẩn Coding khác

Những chuẩn coding này mình không biết liệt kê chúng vào đâu, nói chung là nhiều lắm nên mình chỉ liệt kê một vài chuẩn thường dùng thôi.

Đối với Object: ở JS khi ta muốn tạo các method cho object thì nên sử dụng các protype để khai báo. Việc viết như vậy sẽ tách được ra một chỗ là biến sẽ được khai báo ở trong function. Còn method nó sẽ viết ở ngoài. Ngoài ra, ta cũng nên nhớ một vài quy tắc như: tên object phải nằm cùng với dấu { đầu tiên trên cùng một hàng, sử dụng dấu hai chấm giữa key và value, không thêm dấu “,” vào cặp key-value cuối cùng, v.v….

Tạm kết

Bên trên là một vài chuẩn coding phổ biến mà mình nghĩ các anh em lập trình viên Javascript nên nhớ và áp dụng. Thật ra thì còn nhiều cái nữa lắm nhưng nếu mình liệt kê ra chắc một bài viết như thế này sẽ không đủ đâu. Và theo mình thì bấy nhiêu đó đủ để khiến code bạn trông clean hơn bao giờ hết rồi đấy!

Đừng Học Về Function Javascript Cho Đến Khi Bạn Được Được 8 Cách Viết Này

Là một lập trình viên bạn không thể không biết một trong những tính năng tốt nhất của JavaScript là triển khai các funtions. Không giống như các ngôn ngữ lập trình khác cung cấp các loại hàm khác nhau cho các kịch bản khác nhau, nhưng đối với ngôn ngữ lập trình JavaScript chỉ cung cấp cho chúng ta một loại hàm bao gồm tất cả các kịch bản như (Regular Function, Anonymous Function, Arrow Function…)

Chúng ta những lập trình viên nói chúng và lập trình viên javascript nói riêng (devjs) thường xem nhẹ vấn đề về function. Xin đừng bị lừa bởi một hàm JavaScript có vẻ đơn giản, nhìn nó đơn giản vậy thôi nhưng ẩn chưa bên trong là một sự phức tạp. Do đó toàn bộ bài viết này sẽ xoay quanh chủ để function và chúng ta cùng khám phá 8 JavaScript Functions mà devjs cần phải hiểu. Hiểu những chi tiết thường bị bỏ qua này không chỉ giúp bạn hiểu ngôn ngữ tốt hơn mà còn giúp bạn rất nhiều trong việc giải quyết các vấn đề cực kỳ phức tạp.

Function javascript là gì

Đầu tiên như thông lệ của những bài viết khác, chúng ta cần phải hiểu về Function trong javascript cơ bản. Bạn phải hiểu rằng trong javascript mọi thứ đều xảy ra phần lớn từ các functions. Và chính function có thể nói là một code block hay còn gọi là khối mã mà có thể chúng ta viết một lần những chạy bất cứ khi nào và nhiều lần. Và một điều đáng chú ý là các functions đều chấp nhận các kiểu tham số khác nhau và có thể trả về giá trị nếu cần. Và khi bắt đầu học lập trình thì bạn cũng nên cần thống nhất một số thuật ngữ cơ bản. Có thể ở đây theo tips javascript là thế này: Từ giờ trở đi, chúng ta sẽ định nghĩa function (hàm) của khái niệm “thực hiện một hành động cụ thể và cung cấp một khối riêng biệt có thể có một giá trị trả về”.

Regular Function

Có thể nói Regular Function là một hàm đơn giản và có thể là đầu tiên bạn phải học khi bước vào ngôn ngư lập trình. Ở đây chúng ta có thể khai báo function keyword, function name, parameters, và body như ví dụ bên dưới

function add(one, two) { return one + two; }

Trường hợp sử dụng Regular Function là khi bạn tái sử dụng nhiều lần thì nên viết kiểu này.

Named Function

Named Function nghe nói cho oai vậy thôi chứ thật ra chả khác con m* gì so với Regular Function, chẳng qua là đặt một cái tên cho nó đúng ngữ nghĩa để mấy thằng dev sau nhìn vào dễ hiểu và gọi cho đúng mà thôi.

Anonymous Function

Nghe tên cũng đủ hiểu thằng này rồi, chơi kiểu gì toàn ẩn danh hay éo có tên gì vậy? Nhưng nhìn vậy thôi chứ khi dùng chúng thì nó mang lại cho chúng ta hai mục đích đó là có thể truyền arguments vào trong hàm tương tự như vậy chúng ta cũng có thể sử dụng anonymous function để return về một function. Nhưng ở đây tôi muốn nói thêm là bạn có biết arguments khác với parameters như thế nào không?

//anonymous function function(name){ chúng tôi Hello ${name}) } Như ví dụ trên chúng ta có thể thấy, nó éo có tên giữa keyword và dấu ngoặc đơn. Chính vì thế không có ai có thể gọi nó một cách trực tiếp và phải thông qua một biến và chúng ta sẽ gán cho nó. Việc này chúng ta sẽ nói trong phần tiếp theo.

Function Expression

Named Function Expression.

Anonymous Function Expression

const say = function(name){ console.log(`Hello ${name}`) }

Arrow Function

Arrow function được tips JavaScript nói rất nhiều trong nhiều bài viết, nó được giới thiệu ở ES6, giúp code chúng ta ngắn gọn và xúc tích hơn nhiều, bạn có thể đọc những bài trước, cụ thể ES6 Arrow Functions Cheatsheet. Ở đó bạn sẽ không những hiểu Arrow function là gì? Mà còn giúp bạn hiểu được syntax và khi nào sử dụng Arrow function ở hoàn cảnh nào.

Chú ý: Kể từ khi arrow function ra đời thì nó được sử dụng rất rộng rãi nhưng có một điều tôi phải nhắc cho các bạn phải lưu ý đó là giữa Regular function và Arrow Function có sự khác biệt.

IIFE

IIFE là viết tắt của Immediately Invoked Function Expression, có nghĩa là khởi tạo một function và thực thi nó ngay lập tức. Cú pháp của IIFE là:

(function(name){ console.log(`Hello ${name}`) })('anonystick');

Khi sử dụng IIFE function thì có rất nhiều ưu điểm cho trường hợp này như scope, global… Bởi vậy chúng tôi đã có một bài riêng nói về “Javascript: IIFE là gì? Vì sao nên sử dụng” bạn có thể dành thời gian tìm hiểu thêm nếu bạn thật sự muốn quan tâm.

Closures

Theo cách trên, việc sử dụng một hàm bên trong sẽ có quyền truy cập vào các biến và tham số của hàm ngoài. Bạn nhớ tìm hiểu kỹ ví dụ trên trong bài viết mà chúng tôi đã đề cập ở trên.

Callbacks

Đến đây chúng ta đã thở phào nhẹ nhõm khi callback là một khái niệm quen thuộc trước ES6 ra đời. Có ai đã từng mông lung khi sử dụng callback như tôi không? Khi sử dụng callback function thì có thể chúng ta sẽ đi vào mãi mà không trở ra. Mà thôi để nói về callback là một câu chuyện dài, nếu bạn có thời gian thì có thể đọc bài viết này. Còn ở đây chúng ta thì hiểu về cú pháp mà thôi, thông thường, các callback lại được sử dụng để đạt được các hoạt động không đồng bộ trong JavaScript. Ví dụ dưới dây:

function callback(name){ console.log(`Hello ${name}`) } function b(callback){ callback('anonystick.com') }

Callbacks được sử dụng rộng rãi vì nhiều tình huống khác nhau trong lập trình như API request, I/O operations, event handling… Đến đây đáng lẽ ra chúng ta nên dừng lại nhưng tôi chợt nghĩ có thêm 2 loại function nữa mà chúng ta chưa khám phá và tìm hiểu đó là constructor function và pure function. Nhưng một khi nói đến constructor function thì chúng ta phải nói đến keyword new. Mà để hiểu vì sao phải sử dụng new thì có lẽ chúng ta sẽ dành riêng cho việc giải thích này một bài viết riêng.

Javascript Filter Function Và Cách Sử Dụng Cùng Es6

Cú pháp sử dụng Javascript Filter Function

Giải thích các thành phần:

filteredList: Vì filter sẽ làm việc với Array và trả về là 1 tập hợp Array, ta cần định nghĩa nó như kết quả (return).

list: chính là array ban đầu khi chưa cho qua Filter()

callback: là function sẽ sử dụng để kiểm tra từng item trong list và trả về true hay false

Nói thêm chút về callback, nó có thể nhận 3 giá trị như thế này. Thông thường ta chỉ tìm element thôi.

So sánh Filter và For Loop

let arr = [1, 2, 3, 4, 5, 6] let even = [] for(var i = 0; i < arr.length; i++) { if (arr[i] % 2 === 0) even.push(arr[i]) }

Đoạn code trên sẽ kiểm tra tất cả giá trị trong arr. Chỉ các giá trị là số chẵn mới được chấp nhận và thêm vào even.

Tất nhiên, đoạn code trên không có gì sau, nhưng cũng giống như bạn đi xe máy và đi ô tô, dù kết quả đều giống nhau thì cách thức thực hiện sẽ khác nhau.

let arr = [1,2,3,4,5,6] return item % 2 === 0 });

Ngạc nhiên chưa? Không cần trong vòng lặp, và cũng chẳng cần bạn phải thêm từng giá trị vào một vòng lặp nữa. Khi làm việc với filter() function, những gì bạn cần làm là xác định cái gì muốn giữ lại và trả về return true cho những giá trị đó.

Một điểm tuyệt vời nữa khi sử dụng là benchmark cho thấy filter làm việc rất tốt với các phiên bản trình duyệt web mới nhất hiện nay.

Hãy xem ví dụ ta vừa làm. Dù ta đã dùng arrow function, tuy nhiên vẫn có thể rút gọn hơn nữa. Đó là bởi vì khi trả về giá trị từ arrow function, bạn có thể bỏ qua cặp dấu {} trong function.

Đoạn code ta vừa làm ở trên có thể rút gọn hơn như sau:

Đừng lo, item vẫn biết nó là từng item trong arr nên bạn có thể sử dụng như vậy được.

Kết luận

Như vậy, bạn đã nắm được cách viết code rút gọn khi sử dụng Javascript Filter Function kết hợp với ES6. Hãy nhớ sử dụng nó thành thạo kết hợp thêm với đọc trên MDN để áp dụng. Nó là cách giúp bạn viết code ngắn hơn, logic dễ nhớ hơn và tất nhiên,… code tốt hơn.