- vừa được xem lúc

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)

0 0 24

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

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àng
const transaction = (fee, balance, amount) => ( balance + amout - fee;
); // Cách thực hiện curry đơn giản
const curry = (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); // = 100
freeTransaction(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 function
const compose = (...fns) => x => fns.reduce((y, f) => f(y), x); // Functions
const addFee = amount => amount + 2;
const addDiscount = amount => amount - 5; // Function composition
const 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 đó)

function counter() { let count = 0; function increment() { return count += 1; }; return increment;
} const generateId = counter(); generateId(); // 1
generateId(); // 2
generateId(); // 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 values
const value = 0 ?? 100; // = 0
const value = false ?? true; // = false // Default values
const value = null ?? 100; // = 100
const 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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Object trong Javascript

Xin chào mọi người,. Hôm nay mình sẽ giới thiệu về kiểu dữ liệu Object trong Javascript. Không để mọi người chờ lâu, cùng mình bắt đầu nào. .

0 0 39

- vừa được xem lúc

Bộ câu hỏi phỏng vấn Intern, Fresher cho Front-end từ A-Z

Mở đầu. Xin chào các bạn.

0 0 166

- vừa được xem lúc

Tối giản mã 1: If Boolean Then Boolean

Trong loạt bài này, chúng ta sẽ xem các tình trạng dư thừa phổ biến khiến mã của chúng ta trở nên phức tạp không cần thiết và khó đọc hơn, và chúng ta sẽ tìm hiểu cách tránh gặp phải. .

0 0 27

- vừa được xem lúc

Tối giản mã 2: Dư thừa Boolean

Kiểm tra các nguyên tắc của mã tối giản trong phần giới thiệu thử thách đầu tiên. Viết hàm trả về chuỗi "even" nếu số nguyên đã cho là chẵn và chuỗi "odd" nếu là số lẻ.

0 0 27

- vừa được xem lúc

Chiến lược tải, thực thi code JavaScript

Ba thành phần chính cấu tạo nên một trang web là HTML, CSS và JavaScript. CSS là ngôn ngữ về các kiểu áp dụng vào nội dung HTML để làm đẹp cho trang.

0 0 31

- vừa được xem lúc

UseState trong React Hook

useState() là một hook cơ bản giúp sử dụng state trong Functional Component. Hook này nhận vào input là một giá trị hoặc function và output là một mảng có hai phần tử tương ứng cho state và setState.

0 0 43