9 tip cho các Javascript Developer trong năm 2019
Lại một năm nữa trôi qua và JavaScript vẫn còn thay đổi nữa. Tuy nhiên, có một số tip có thể giúp bạn viết code clean và hiệu quả hơn trong năm 2019. Dưới đây là danh sách 9 tip hữu ích sẽ giúp bạn trở thành một developer giỏi hơn. 1. async / await Nếu không thật sự cần ...
Lại một năm nữa trôi qua và JavaScript vẫn còn thay đổi nữa. Tuy nhiên, có một số tip có thể giúp bạn viết code clean và hiệu quả hơn trong năm 2019. Dưới đây là danh sách 9 tip hữu ích sẽ giúp bạn trở thành một developer giỏi hơn.
1. async / await
Nếu không thật sự cần thiết thì đừng sử dụng callback, ví dụ như được yêu cầu bởi một library hoặc vì lý do hiệu suất. Promise cũng ổn, nhưng sẽ hơi khó sử dụng nếu codebase của bạn ngày càng trở nên lớn hơn. Giải pháp của tôi là async / await, cái này giúp việc đọc và cải thiện code clean hơn rất nhiều. Thực ra, bạn có thể await mọi Promise trong JavaScript, trong trường hợp library bạn đang sử dụng đang trả lại một Promise, chỉ cần await nó. Trong thực tế, async / await chỉ là phần bọc ngoài bên cạnh các Promise. Để code hoạt động, bạn chỉ cần thêm từ khóa async trước một function. Dưới đây là một ví dụ ngắn:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
async function getData() { const result = await axios.get('https://dube.io/service/ping') const data = result.data console.log('data', data) return data } getData() |
Lưu ý rằng await ở cấp cao nhất là không thể, bạn chỉ có thể call một async function.
async / await tuân theo ES2017, vậy nên hãy đảm bảo transpile code của bạn.
2. async control flow
Thông thường, ta cần phải tìm về nhiều dataset và làm gì đó cho mỗi data hoặc hoàn thành một task sau khi tất cả các async call đã trả về một giá trị.
for…of
Ví dụ chúng ta có một vài Pokemon trên page và chúng ta phải lấy thông tin chi tiết về chúng. Chúng ta không muốn đợi tất cả các call kết thúc, đặc biệt là khi chúng ta không biết có tất cả bao nhiêu call, nhưng lại muốn cập nhật dataset của mình ngay khi nhận được cái gì đó. Chúng ta có thể sử dụng for ... of để lặp một array và thực hiện async code bên trong block, việc thực thi sẽ bị tạm dừng cho đến khi mỗi call thành công. Điều quan trọng cần lưu ý là hiệu suất có thể bị tắc nghẽn nếu bạn làm điều này trong code của mình, nhưng sẽ rất hữu ích khi giữ trong toolset của bạn. Đây là một ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import axios from 'axios' let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}] async function fetchData(dataSet) { for(entry of dataSet) { const result = await axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`) const newData = result.data updateData(newData) console.log(myData) } } function updateData(newData) { myData = myData.map(el => { if(el.id === newData.id) return newData return el }) } fetchData(myData) |
Đây đều là những ví dụ thực tế, cứ tự nhiên copy và paste chúng vào code sandbox yêu thích của bạn
Promise.all
Nếu bạn muốn fetch tất cả các Pokemon cùng lúc? Vì ta có thể await tất cả các Promise, bạn chỉ cần sử dụng Promise.all:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import axios from 'axios' let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}] async function fetchData(dataSet) { const pokemonPromises = dataSet.map(entry => { return axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`) }) const results = await Promise.all(pokemonPromises) results.forEach(result => { updateData(result.data) }) console.log(myData) } function updateData(newData) { myData = myData.map(el => { if(el.id === newData.id) return newData return el }) } fetchData(myData) |
for...of và Promise.all tuân theo ES6+, vì vậy hãy đảm bảo transpile code của bạn.
3. Destructuring & default values
Hãy quay lại ví dụ trước, khi chúng ta làm như sau:
|
1 2 3 4 |
const result = axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`) const data = result.data |
Có một cách dễ dàng hơn để làm việc đó, chúng ta có thể sử dụng destructuring để lấy một hoặc một số value từ một object hoặc một array. Chúng ta sẽ làm thế này:
|
1 2 3 |
const { data } = await axios.get(...) |
Chỉ còn một dòng code! Yay! Bạn cũng có thể đổi tên biến của mình:
|
1 2 3 |
const { data: newData } = await axios.get(...) |
Một tip hay khác là đưa ra các default value khi destructuring. Điều này đảm bảo rằng bạn sẽ không bao giờ gặp undefined và không phải kiểm tra các biến một cách thủ công.
|
1 2 3 4 |
const { id = 5 } = {} console.log(id) // 5 |
Những tip này cũng có thể được sử dụng với các tham số function, ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function calculate({operands = [1, 2], type = 'addition'} = {}) { return operands.reduce((acc, val) => { switch(type) { case 'addition': return acc + val case 'subtraction': return acc - val case 'multiplication': return acc * val case 'division': return acc / val } }, ['addition', 'subtraction'].includes(type) ? 0 : 1) } console.log(calculate()) // 3 console.log(calculate({type: 'division'})) // 0.5 console.log(calculate({operands: [2, 3, 4], type: 'multiplication'})) // 24 |
Ban đầu xem ví dụ có thể hơi khó hiểu, nhưng hãy dành thời gian thực hành nó. Khi chúng ta không chuyển bất kỳ value nào làm argument cho function, các default value được sử dụng. Ngay khi chúng ta bắt đầu chuyển các value, chỉ các default value cho các argument không tồn tại được sử dụng.
Destructuring và các default value tuân theo ES6, vì vậy hãy đảm bảo transpile code của bạn.
4. Truthy và falsy values
Khi sử dụng các default value, việc kiểm tra các value đang tồn tại sẽ không còn cần thiết. Tuy nhiên, thật tuyệt khi bạn có thể làm việc với các truthy và falsy value. Điều này sẽ cải thiện code và giúp bạn bỏ qua một vài bước hướng dẫn. Thường mọi người làm như thế này:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if(myBool === true) { console.log(...) } // OR if(myString.length > 0) { console.log(...) } // OR if(isNaN(myNumber)) { console.log(...) } |
Rút gọn thành:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
if(myBool) { console.log(...) } // OR if(myString) { console.log(...) } // OR if(!myNumber) { console.log(...) } |
Để tận dụng những tính năng này, bạn phải hiểu truthy và falsy values là gì. Đây là bản tóm tắt ngắn gọn:
Falsy
- chuỗi có độ dài bằng 0
- số 0
- false
- undefined
- null
- Nan
Truthy
- các array trống
- các object trống
- bất kỳ thứ gì
Lưu ý rằng khi kiểm tra các truthy/falsy value sẽ không có sự so sánh rõ ràng, giống như việc kiểm tra hai dấu bằng bằng nhau == chứ không phải ba ===. Nói chung, chúng hoạt động theo cách giống nhau nhưng có một số tình huống bạn sẽ gặp phải bug. Đối với tôi, chuyện này xảy ra chủ yếu với số 0.
5. Logical và ternary operators
Chúng được sử dụng để rút ngắn code. Thường thì chúng là những tool tốt và giúp giữ cho code của bạn clean, nhưng chúng cũng có thể tạo ra một số nhầm lẫn, đặc biệt là khi xâu chuỗi.
Logical operators
Về cơ bản, các logical operator kết hợp hai biểu thức và sẽ trả về true, false hoặc value phù hợp và được hiển thị bằng &&, có nghĩa là “and” – cũng như | | có nghĩa là “or”. Hãy xem ví dụ sau:
|
1 2 3 4 5 6 7 8 9 10 |
console.log(true && true) // true console.log(false && true) // false console.log(true && false) // false console.log(false && false) // false console.log(true || true) // true console.log(true || false) // true console.log(false || true) // true console.log(false || false) // false |
Chúng ta có thể kết hợp các logical operator với các truthy và falsy value. Khi sử dụng các logical operator, các quy tắc sau được áp dụng:
- &&: Các falsy value đầu tiên được trả về, nếu không có giá trị nào thì truthy value cuối cùng được trả về.
- ||: Các truthy value đầu tiên được trả về, nếu không có giá trị nào, operation sẽ bằng falsy value cuối cùng.
|
1 2 3 4 5 6 7 8 |
console.log(0 && {a: 1}) // 0 console.log(false && 'a') // false console.log('2' && 5) // 5 console.log([] || false) // [] console.log(NaN || null) // null console.
Có thể bạn quan tâm
0
|
