Blog#38: 5 khái niệm quan trọng khi học JavaScript nâng cao 😊 (Series: Bí kíp Javascript – PHẦN 33)

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo 😉. Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😊. Currying Currying có nghĩa là đánh giá các hàm có nhiều đối số và phân tách chúng thành một chuỗi các hàm

Mình là TUẤN hiện đang là một Full-stack Developer tại Tokyo 😉.
Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé 😊.

Currying

Currying có nghĩa là đánh giá các hàm có nhiều đối số và phân tách chúng thành một chuỗi các hàm với một đối số duy nhất. Vì vậy, thay vì nhận tất cả các đối số cùng một lúc, hàm sẽ nhận đối số đầu tiên và trả về một hàm mới, hàm này nhận đối số thứ hai và trả về một hàm mới, hàm này nhận đối số thứ ba… cứ tiếp tục như vậy cho đến khi tất cả các đối số được cung cấp và hàm cuối cùng là executed.

Currying giúp bạn chia các hàm thành các hàm nhỏ hơn có thể tái sử dụng để xử lý một nhiệm vụ duy nhất. Điều này làm cho các function của bạn thuần túy hơn, ít bị lỗi hơn và dễ kiểm tra hơn.

Ví dụ Currying đơn giản

// Hàm transaction để xử lý giao dịch ngân hàngconsttransaction=(fee, balance, amount)=>(
  balance + amout - fee;);// Cách thực hiện curry đơn giảnconstcurry=(fn,...args)=>((..._arg)=>(fn(...args,..._arg)));// Có thể dễ dàng sử dụng lại logic giao dịch cho loại giao dịch "free"const freeTransaction =curry(transaction,0);freeTransaction(10,90);// = 100freeTransaction(100,90);// = 190

Trong ví dụ trên, chúng ta đã implement 1 logic Curry đơn giản để xử lý một hàm có chính xác ba tham số. Kiến thức và ví dụ mình đưa ra chỉ mang tính giải thích các khải niệm. Trong thực tế nếu các bạn muốn áp dụng nó mình khuyên bạn nên sử dụng Ramda hoặc các thư viện tương tự hỗ trợ các hàm currying với bất kỳ số lượng đối số nào và cũng hỗ trợ thay đổi thứ tự các đối số bằng cách sử dụng placeholders.
Tuy nhiên đôi lúc logic đơn giản mình cũng tự implement cho mình một hàm như trên vừa tiện vừa đỡ phải dùng nhiều Library.

Composition

Composition là một kỹ thuật trong đó kết quả của một function được chuyển sang function tiếp theo, function này lại được chuyển sang function tiếp theo, v.v.… cho đến khi function cuối cùng được thực thi và kết quả được tính toán. Các Compositions function có thể bao gồm bất kỳ số lượng function nào.

Composition cũng giúp chia các function thành các function nhỏ hơn có thể tái sử dụng, chịu trách nhiệm xử lý 1 logic duy nhất. (Chia để trị quá hợp lý đúng ko nào 😄).

// Compose functionconstcompose=(...fns)=>x=> fns.reduce((y, f)=>f(y), x);// FunctionsconstaddFee=amount=> amount +2;constaddDiscount=amount=> amount -5;// Function compositionconst composition =compose(addFee, addDiscount)(100);

Ramda cũng có các API dành cho Composition function với PipeCompose .

Closures

Closures là một hàm duy trì quyền truy cập vào các biến số và đối số (phạm vi) của hàm bên ngoài, ngay cả sau khi hàm bên ngoài đã thực thi xong. Closures rất hữu ích để ẩn chi tiết implement trong JavaScript. Nói cách khác, có thể hữu ích khi tạo các biến hoặc hàm riêng như sau: (Nó cũng gần gần như tính bao đóng của OOP vậy đó)

functioncounter(){let count =0;functionincrement(){return count +=1;};return increment;}const generateId =counter();generateId();// 1generateId();// 2generateId();// 3

Toán tử Nullish ??

Toán tử nullish là một cách để có thể nhanh chóng áp dụng giá trị mặc định nếu toán hạng bên trái là null hoặc không xác định. Điều này đặc biệt hữu ích trong trường hợp bạn muốn chấp nhận tất cả các falsy values khác với nullundefined. Hoặc trong trường hợp bạn muốn áp dụng các falsy values làm mặc định.

// Falsy valuesconst value =0??100;// = 0const value =false??true;// = false// Default valuesconst value =null??100;// = 100const value =undefined??100// = 100;

Reflect API

Reflect về mặt lập trình điều đó có nghĩa là một chương trình có thể tự kiểm tra bằng cách nội suy và thao tác với các cấu trúc của chính nó. Reflect API cung cấp một tập hợp các hàm hữu ích cho cả việc nội suy và thao tác thông qua các hàm tĩnh trong Reflect API.

const person ={ 
  name:'Bob',[Symbol('email')]:'bob@evil.com'};

Reflect.get(person,'name');// = Bob
Reflect.has(person,'email');// = true
Reflect.has(person,'phone');// = false
Reflect.getPrototypeOf(person);// = { constructor ... }
Reflect.getOwnPropertyDescriptor( person,'name');// = { value: 'Bob', writable: true, enumerable: true, configurable: true }
Reflect.ownKeys(person);// name, Symbol(email)

Reflect.defineProperty(person,'phone',{ writable:true});
Reflect.has(person,'phone');// = true
Reflect.set(person,'phone','123456789');

Reflect.deleteProperty(person,'phone');
Reflect.has(person,'phone');// = false

Còn nhiều điều nữa mà bạn có thể đọc chi tiết tại đây .

Roundup

Như mọi khi, mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Cảm ơn và hẹn gặp lại các bạn trong những bài viết tiếp theo! 😍

Nếu bạn thấy Blog này hay xin hãy cho mình một like và đăng ký để ủng hộ mình nhé. Thank you.😉

Ref

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ