<h3 style="margin-left:0;">Definition :</h3>The spread is the operator that allows us to expand iterables into individual elements.The rest is the operator we use to represent an indefinite number of arguments in an array.Both are written using the three dots <code>...</code>, but you'll see that it's easy to identify when it's a spread and when it's a rest! At the end, there's also a good tip for you!<h3 style="margin-left:0;">Spread Operator</h3><h4 style="margin-left:0;">Concatenating Arrays</h4>The spread allows us to combine two or more arrays, maintaining a concise and clean language.Let's have some coffee? ☕️ Consider the two arrays below: &nbsp;<pre><code class="language-javascript">const coffee = ['coffee', 'water'];
const spices = ['cinnamon', 'nutmeg', 'cardamom'];
</code></pre>&nbsp;We can use the spread to mix the ingredients into a single array: &nbsp;<pre><code class="language-javascript">const coffeeReady = [...coffee, ...spices];

console.log(coffeeReady) 
// output:
// ['coffee', 'water', 'cinnamon', 'nutmeg', 'cardamom'];
</code></pre>&nbsp;Simple! Much better than writing item by item from each of the two arrays to form <code>coffeeReady</code>.Important:1. Changes in <code>coffee</code> will NOT affect <code>coffeeReady</code>!To better understand: when we make a copy, we can either create a new reference to the original value or just copy the value. Creating a new reference is simply creating a variable that will point to the same location in memory where the original value is.If we had created a new reference, any changes in <code>coffee</code> would change <code>coffeeReady</code> and vice versa. But what we did with the spread was to copy only the value, which in turn will be stored in another location in memory. Thus, changes in one array will not affect the other.However, some details could change this picture! That's because...2. The spread only creates a shallow copy!This means that, depending on the data contained in <code>coffee</code>, some changes could indeed alter <code>coffeeReady</code>! If <code>coffee</code> contained some non-primitive value, the computer would have created a reference to the values in memory. So, any change in one array would affect the other, since both would be storing a reference to the same location in memory. See below: &nbsp;<pre><code class="language-javascript">const a = [1, [2, 3]];
// [2, 3] is an array nested in a, and therefore
// it is a non-primitive value
const b = [4, 5, 6];

const c = [...a, ...b];
console.log(c);
// output: [1, [2, 3], 4, 5, 6]

a[0] = 11;
a[1][0] = 22;

console.log(c);
// output: [1, [22, 3], 4, 5, 6]
</code></pre>&nbsp;See above that changing <code>a[0]</code> did not affect <code>c</code>, because we changed a primitive value. In other words, <code>a[0]</code> and <code>c</code> point to equal values, but they are in different locations in memory. However, changing <code>a[1][0]</code> modified <code>c</code>, because we changed the value to which both <code>a[1][0]</code> and <code>c</code> point.<h4 style="margin-left:0;">Merging Objects</h4>We can also merge objects into one using the spread: &nbsp;<pre><code class="language-javascript">const myParents = { 
 fathersName: 'Michael', 
 mothersName: 'Louise'
};
const mySiblings = { 
 brothersName: 'Philip', 
 sistersName: 'Lara' 
};

const myFamily = { ...myParents, ...mySiblings };
console.log(myFamily);
/* output:
{ 
 fathersName: 'Michael', 
 mothersName: 'Louise', 
 brothersName: 'Philip', 
 sistersName: 'Lara' 
} 
*/
</code></pre>&nbsp;However, it is important to remember that the spread does not clone identical properties! Below we have two objects with <code>brothersName</code>: &nbsp;<pre><code class="language-javascript">const myParents = { 
 fathersName: 'Michael', 
 mothersName: 'Louise',
 brothersName: 'Gabriel'
};
const mySiblings = { 
 brothersName: 'Philip', 
 sistersName: 'Lara' 
};

const myFamily = { ...myParents, ...mySiblings };
console.log(myFamily);
/* output:
{ 
 fathersName: 'Michael', 
 mothersName: 'Louise', 
 brothersName: 'Philip', 
 sistersName: 'Lara' 
}
*/
</code></pre>&nbsp;Note that the final object does not inherit both <code>brothersName</code> keys. In fact, only one prevails, which is from the second object.<h4 style="margin-left:0;">Copying Arrays and Objects</h4>Got the idea so far? If we can merge arrays and also objects, that means we can also copy them individually: &nbsp;<pre><code class="language-javascript">// creating a shallow copy of coffee:
const coffee = ['coffee', 'water'];
const coffeeCopy = [...coffee];
console.log(coffeeCopy)
// output: 
// ['coffee', 'water'];

// creating a shallow copy of mySiblings:
const mySiblings = { 
 brothersName: 'Philip', 
 sistersName: 'Lara' 
};

const myFamily = { 
 fathersName: 'Michael', 
 mothersName: 'Louise',
 ...mySiblings
};
// Now we can treat brothersName and sistersName as 
// a property of myFamily:
console.log(myFamily.brothersName) 
// output: Philip
</code></pre>&nbsp;<h4 style="margin-left:0;">Turning Strings into Arrays</h4>It is also possible to use the spread to turn a string into an array. This allows us to have more flexibility when manipulating strings, since we will be able to apply array methods to strings: &nbsp;<pre><code class="language-javascript">const str = 'coffee';
const letters = [...str, 's.', '☕️']; 
console.log(letters);// ["c", "o", "f", "f", "e", "e", "s.", "☕️"]
</code></pre>&nbsp;<h3 style="margin-left:0;">Rest Operator</h3>As mentioned above, the rest operator is used to pack elements into an array. You'll see that the rest operator is a great ally when dealing with many values or an uncertain number of values.<h4 style="margin-left:0;">Function Parameters</h4>The rest operator allows us to represent an indefinite number of arguments as an array. &nbsp;<pre><code class="language-javascript">const order = function(beverage, ...otherIngredients) {
 console.log(beverage);
 console.log(otherIngredients);
};

order('green tea', 'milk', 'brown sugar'); 
// output:
// green tea 
// ['milk', 'brown sugar']
</code></pre>&nbsp;Note that this allows us to call the same function with more arguments, as the rest operator will put them all in the <code>otherIngredients</code> array: &nbsp;<pre><code class="language-javascript">const order = function(beverage, ...otherIngredients) {
 console.log(beverage);
 console.log(otherIngredients);
};

order('green tea', 'milk', 'brown sugar', 'mint', 'tonka'); 
// output:
// green tea 
// ['milk', 'brown sugar', 'mint', 'tonka']
</code></pre>&nbsp;🍵 An important detail is that the rest must be the last parameter in the function! If we wrote <code>function(...otherIngredients, beverage)</code> the computer wouldn't know when to stop and this code would generate an error.<h3 style="margin-left:0;">Destructuring with Rest and Spread</h3>Rest and spread are also widely used in destructuring. If you don't know what that is yet, I suggest my other two articles here: <a href="https://dev.to/baroblesvi/destructuring-arrays-in-javascript-4c5n">array destructuring</a> and <a href="https://dev.to/baroblesvi/object-destructuring-in-javascript-39g6">object destructuring</a>.Using rest: &nbsp;<pre><code class="language-javascript">const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others); 
// output: 1 2 [3, 4, 5]
</code></pre>&nbsp;Now, take this tip so you don't confuse rest with spread here: the rest is on the left side of <code>=</code> and the spread is on the right side of <code>=</code>....rest = ☕️🍵 = ...spreadThanks for making it this far! I hope this post has helped you! Thoughts? Please, comment below!Reference: <a href="https://dev.to/baroblesvi/spread-vs-rest-operators-in-javascript-45f3">https://dev.to/baroblesvi/spread-vs-rest-operators-in-javascript-45f3</a>&nbsp;

Spread vs Rest Operators in JavaScript

<h2 style="margin-left:0px;">Hiểu lầm lớn nhất khi mới học JavaScript</h2>Chúng ta đều biết JavaScript là ngôn ngữ lập trình có khả năng xử lý bất đồng bộ. Vậy nên khi mới học JavaScript, các bạn newbie thường nghĩ rằng code trong JavaScript chạy "lộn xộn", đoạn code A chạy chưa xong là đến đoạn code BVí dụ đoạn code dưới đây, một số bạn nghĩ console.log('Done') sẽ chạy trước khi vòng for hoàn thành, vì bất đồng bộ mà 😂.&nbsp;<pre><code class="language-javascript">// Vòng for 100 lần
for (let i = 0; i &lt; 100; i++) {}
console.log('Done')</code></pre>Nhưng điều này là sai nha, bất đồng bộ trong JavaScript chỉ xảy ra khi chúng ta gọi đến một hàm bất đồng bộ, ví dụ như setTimeout, fetch, axios, fs.readFile, fs.writeFile, ...Còn những đoạn code bình thường như for, if, while, switch, ... thì vẫn chạy tuần tự như bình thường.Chúng ta cần phải biết cái nào là bất đồng bộ, cái nào là đồng bộ, để biết được đoạn code nào chạy trước, đoạn code nào chạy sau. Thường những đoạn code bất đồng bộ sẽ có callback, promise, async/await.OK, đơn giản vậy thôi, nhưng nhiều bạn không rõ đấy 😁<hr><h2 style="margin-left:0px;">🥇Callback</h2>Callback là một hàm được truyền vào một hàm khác như một tham số.Cái function callback được truyền vào setTimeout là một callback. Nó sẽ được gọi sau 1 giây khi setTimeout được gọi.&nbsp;<pre><code class="language-javascript">function callback() {
 console.log('Hello World')
}
setTimeout(callback, 1000)</code></pre>Callback thường được dùng trong xử lý bất đồng bộ, nhưng lưu ý rằng callback vẫn có thể là đồng bộ, không nhất thiết cứ callback là auto nó bất đồng bộ.Ví dụ cái function callback được truyền vào syncFunction được gọi là một callback. Nó sẽ được gọi ngay lập tức khi syncFunction được gọi. Như bạn thấy đấy, chả có bất đồng bộ gì ở đây cả.&nbsp;<pre><code class="language-javascript">function callback() {
 console.log('Hello World')
}
function syncFunction(cb) {
 cb()
}
syncFunction(callback)</code></pre><hr><h2 style="margin-left:0px;">🥇Promise</h2>Dân tình có câu "Javascript Promises are Eager and Not Lazy"Trong ngữ cảnh của JavaScript và Promises, "eager" có nghĩa là Promise sẽ được thực thi ngay lập tức khi nó được tạo ra, ngay cả trước khi bạn gọi phương thức then() để xử lý kết quả.Khi bạn tạo ra một Promise, một công việc bất đồng bộ sẽ được khởi tạo. Promise sẽ bắt đầu thực hiện công việc đó ngay lập tức, ngay cả khi bạn chưa sử dụng phương thức then() để xử lý kết quả. Điều này có nghĩa là Promise sẽ bắt đầu thực thi công việc bất đồng bộ và không chờ đợi cho việc gọi then().Ví dụ, trong đoạn mã sau:&nbsp;<pre><code class="language-javascript">const promise = new Promise((resolve, reject) =&gt; {
 console.log('Executing promise')
 resolve('Success')
})


promise.then((result) =&gt; {
 console.log('Promise resolved:', result)
})


console.log('Promise created')</code></pre>Đầu tiên, khi bạn tạo một Promise, đoạn mã trong hàm khởi tạo sẽ được thực thi và thông báo "Executing promise" sẽ được log ra. Tiếp theo, "Promise created" sẽ được log ra. Cuối cùng, khi bạn gọi phương thức then() trên Promise, hàm callback trong then() mới được gọi và thông báo "Promise resolved: Success" sẽ được log ra.Nếu bạn muốn khi then() thì mới được gọi thì bạn phải chuyển nó thành một function return promise. Như thế này mới gọi là lazy nhá.&nbsp;<pre><code class="language-javascript">const promiseFunc = () =&gt;
 new Promise((resolve, reject) =&gt; {
 console.log('Executing promise')
 resolve('Success')
 })


promiseFunc().then((result) =&gt; {
 console.log('Promise resolved:', result)
})


console.log('Promise created')</code></pre>Với cách này thì khi chúng ta gọi promiseFunc() thì "Executing promise" mới được log ra. Kết quả đoạn code trên là&nbsp;<pre><code class="language-plaintext">Executing promise
Promise created
Promise resolved: Success</code></pre>Có thể bạn thấy nó không khác gì cái code trên đó, nhưng nếu comment cái dòng lệnh promiseFunc().then((result) =&gt; {... đi thì bạn sẽ thấy nó không log ra "Executing promise" nữa. Còn cái code trên thì nó vẫn log ra "Executing promise" ngay cả khi chúng ta không gọi promise.then((result) =&gt; {....Oke, tiếp tục dưới đây là những đoạn code ngắn gọn, có thể coi là cheatsheet cũng được, nó sẽ giúp các bạn ôn luyện nhanh promiseChuyển một callback thành một promise&nbsp;<pre><code class="language-javascript">const getProduct = new Promise((resolve) =&gt; {
 // setTimeout sẽ được gọi ngay lập tức
 setTimeout(() =&gt; {
 // còn callback trong này sau 1s sẽ chạy
 console.log('setTimeout')
 resolve([])
 }, 1000)
})</code></pre>Promise là 1 biến chứ không phải là function gì cả nhé, biến đây là object. Còn thứ chúng ta hay thấy khi gọi api kiểu như getApi().then() thì khi gọi getApi(), nó return về 1 promise chứ không phải getApi là 1 promise&nbsp;<pre><code class="language-javascript">// Tạo nhanh một promise mà sẽ resolve
const presolve = Promise.resolve(100)
// Tạo nhanh một promise mà sẽ reject
const preject = Promise.reject(new Error('loi'))</code></pre>Một số function mà return về promise tương đương nhau&nbsp;<pre><code class="language-javascript">// Một async function sẽ return về một promise
// Cho dù giá trị return bên trong function không phải là promise
const handle = async () =&gt; {
 return 'hello'
}


// Trong trường hợp giá trị return là một promise
// Thì mọi thứ vẫn không thay đổi, vẫn như trên
// Không có chuyện lồng nhau như `handle().then(promise =&gt; promise.then(res =&gt; {console.log(res)}))`
const handle2 = async () =&gt; {
 return Promise.resolve('hello')
}
// Đây cũng là một function return promise tương tự 2 trường hợp trên
// Chỉ khác là nó không khai báo async thôi
const handle3 = () =&gt; {
 return Promise.resolve('hello')
}</code></pre>Xử lý promise chainTrong .then() chúng ta return cái gì thì nó sẽ là data cho cái then tiếp theo. Cho dù bạn có return về 1 promise trong then thì nó cũng giống return thường&nbsp;<pre><code class="language-javascript">handle3()
 .then((res) =&gt; {
 // 2 cái return này tương đương nhau
 // return Promise.resolve(res + ' hi')
 return res + ' hi'
 })
 .then((res) =&gt; {
 console.log(res)
 })</code></pre>Nếu muốn ở chain tiếp theo không nhảy vào then mà nhảy vào .catch thì cần throw() hoặc return Promise.reject() trong .then() trước đó&nbsp;<pre><code class="language-javascript">handle3()
 .then((res) =&gt; {
 return Promise.reject(new Error('error'))
 // Dùng new Error để khi nó log ra nó kèm dấu vết bị lỗi
 // throw new Error('error')
 })
 .then((res) =&gt; {
 console.log(res)
 })
 .catch((e) =&gt; {
 console.log(e)
 })</code></pre>Xử lý phụ thuộc khi dùng promise, ví dụ function handle4 cần kết quả của function handle2 trả về<pre><code class="language-javascript">const handle4 = (value) =&gt; {
 return Promise.resolve('handle4 ' + value)
}


// ❌ callback hell, không nên dùng
// handle2().then((res) =&gt; {
// handle4(res).then((v) =&gt; {
// console.log(v)
// })
// })


// ✅ hạn chế được callback hell
handle2()
 .then((res) =&gt; {
 return handle4(res)
 })
 .then((v) =&gt; {
 console.log(v)
 })</code></pre>1 promise mà nó reject thì sẽ làm crash ứng dụng. Muốn không bị crash thì phải luôn luôn .catch nó.catch mà không không làm gì trong đó (ví dụ không console.log) thì khi nó lỗi không biết lỗi chỗ nào đấy (lỗi vô hình)Một khi đã .catch thì cái chain phía sau luôn luôn là promise.resolve, trừ khi bạn throw hoặc return Promise.reject trong .catch&nbsp;<pre><code class="language-javascript">handle2()
 .then((res) =&gt; {
 throw new Error('error')
 })
 .catch((e) =&gt; {
 console.log('Chắc chắn sẽ nhảy vào đây')
 })
 .then((v) =&gt; {
 console.log('Nhảy vào đây vì trước đó đã catch, và giá trị v là undefined vì trong catch không return gì cả')
 })</code></pre><hr><h2 style="margin-left:0px;">🥇Async/Await</h2>Async await giúp chúng ta loại bỏ được callback trong promise. Nhưng vẫn không thoát khỏi promise nhé, chúng nó kế thừa lẫn nhau thôi.Lưu ý quan trọng:Chỉ nên dùng async await cho function mà bên trong có xử lý promiseChỉ await được promise, không await được callback hay mấy cái function thườngAsync function là function return về promise&nbsp;<pre><code class="language-javascript">const p = Promise.resolve('hello')


// Muốn dùng async await cho cái promise trên thì phải tạo 1 function
// Vì async chỉ dùng cho function
// main là 1 function return về promise nhé
const main = async () =&gt; {
 const data = await p
 console.log(data)
}
main()</code></pre>Tương tự khi dùng promise thì phải thêm .catch(), dùng async await thì phải try catch, không thì khi nó lỗi nó sẽ crash app.&nbsp;<pre><code class="language-javascript">const main = async () =&gt; {
 try {
 const data = await p
 console.log(data)
 } catch (error) {
 console.log(new Error(error))
 }
}
main()</code></pre>Khi throw trong 1 async function thì nó sẽ ngay lập tức cho function đó return một promise.reject()&nbsp;<pre><code class="language-javascript">const main = async () =&gt; {
 const data = await p
 console.log(data)
 throw new Error('Chủ động quăng lỗi')
}
main()</code></pre>Nếu có nhiều async function lồng nhau, không cần try catch từng async function, mà chỉ cần try catch async function ngoài cùng là được.Lưu ý: phải đảm bảo dùng await cho async function bên trong thì mới được nhé&nbsp;<pre><code class="language-javascript">const getApi1 = () =&gt; {
 return Promise.reject(new Error('Loi API'))
}


const getApi2 = async () =&gt; {
 await getApi1()
}


const getApi3 = async () =&gt; {
 try {
 await getApi2()
 } catch (error) {
 // xử lý lỗi tại đây</code></pre>&nbsp; }}Tương tự bên promise, một khi đã try catch thì function luôn return một promise.resolve(x) trừ khi bạn chủ động throw hoặc return Promise.reject(x)<hr><h2 style="margin-left:0px;">🥇Promise.all</h2>Dùng promise.all khi ta muốn chạy song song nhiều promise, và khi tất cả các promise đó đều resolve thì mới thực hiện tiếp.Ứng dụng khi ta có nhiều promise không phụ thuộc kết quả của nhauVí dụ dưới đây, promise1, promise2, promise3 không phụ thuộc kết quả của nhau, nên ta có thể dùng promise.all để chạy song song 3 cái promise này, thay vì đợi từng cái chạy xong rồi mới chạy cái tiếp theo.&nbsp;<pre><code class="language-javascript">const promise1 = () =&gt;
 new Promise((resolve, reject) =&gt; {
 setTimeout(() =&gt; resolve('Promise 1'), 2000)
 })


const promise2 = () =&gt;
 new Promise((resolve, reject) =&gt; {
 setTimeout(() =&gt; resolve('Promise 2'), 1000)
 })


const promise3 = () =&gt;
 new Promise((resolve, reject) =&gt; {
 setTimeout(() =&gt; resolve('Promise 3'), 1500)
 })


Promise.all([promise1(), promise2(), promise3()])
 .then((results) =&gt; {
 console.log('Results:', results)
 })
 .catch((error) =&gt; {
 console.log('Error:', error)
 })


// Hoặc dùng async await
const main = async () =&gt; {
 try {
 const [result1, result2, result3] = await Promise.all([promise1(), promise2(), promise3()])
 } catch (error) {
 console.log('Error:', error)
 }
}</code></pre>Áp dụng promise.all đúng cách sẽ giúp tối ưu hiệu suất ứng dụng lên nhiều lần.<hr><h2 style="margin-left:0px;">🥇Tổng kết</h2>Bài này nói chung là những ghi chú của mình về callback, promise, async await. Mong rằng nó giúp các bạn ôn tập lại kiến thức để sẵn sàng học React, Vue, Node.js,...dễ dàng hơn.Bài viết gốc: <a href="https://duthanhduoc.com/blog/on-tap-callback-promise-async-await">https://duthanhduoc.com/blog/on-tap-callback-promise-async-await</a>

Ôn tập callback, promise, async/await

The diagram below explains what ACID means in the context of a database transaction.<a href="https://blog.bytebytego.com/subscribe"><img src="https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F826d6425-8401-4806-b801-5ff758d5c69f_1280x1664.gif" alt="graphical user interface, application" srcset="https://substackcdn.com/image/fetch/w_424,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F826d6425-8401-4806-b801-5ff758d5c69f_1280x1664.gif 424w, https://substackcdn.com/image/fetch/w_848,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F826d6425-8401-4806-b801-5ff758d5c69f_1280x1664.gif 848w, https://substackcdn.com/image/fetch/w_1272,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F826d6425-8401-4806-b801-5ff758d5c69f_1280x1664.gif 1272w, https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_lossy/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F826d6425-8401-4806-b801-5ff758d5c69f_1280x1664.gif 1456w" sizes="100vw" width="684"></a>Atomicity The writes in a transaction are executed all at once and cannot be broken into smaller parts. If there are faults when executing the transaction, the writes in the transaction are rolled back. So atomicity means “all or nothing”.Consistency Unlike “consistency” in CAP theorem, which means every read receives the most recent write or an error, here consistency means preserving database invariants. Any data written by a transaction must be valid according to all defined rules and maintain the database in a good state.Isolation When there are concurrent writes from two different transactions, the two transactions are isolated from each other. The most strict isolation is “serializability”, where each transaction acts like it is the only transaction running in the database. However, this is hard to implement in reality, so we often adopt loser isolation level.Durability Data is persisted after a transaction is committed even in a system failure. In a distributed system, this means the data is replicated to some other nodes.

New Blog

Spread vs Rest Operators in JavaScript

Ôn tập callback, promise, async/await

What does ACID mean?

All Blog