Spread Operator và Rest Operator trong Javasccript
Giải thích chi tiết về cách sử dụng Spread Operator (...) để tách chuỗi, nối mảng và Rest Operator để xử lý tham số trong JavaScript với các ví dụ thực tế và trực quan.

Spread Operator là gì?
Chắc hẳn, không ít lần bạn thấy ba dấu chấm ... trong Javascript thế này, và tự hỏi cài quỷ này là gì, hôm nay chúng ta sẽ cùng tìm hiểu 3 dấu chấm đó nhé.
Spread tức là 'banh ra', tức là thấy gì sẽ banh nó ra, thôi thì ta cứ đi vào ví dụ cụ thể để bạn dễ hiểu hơn nhé
Spread chuỗi
Ta thử gõ như sau vào Consoletrong trình duyệt để xài Command Line API
Thì sẽ được kết quả sau:
Tức là spread operator đang 'tách' chuỗi string là thành mảng phần tử
Nối mảng
Ví dụ có mảng sau:
const iphones = ['iphone4','iphone5','iphone6'];
const macbooks = ['macbook2012','macbook2013','macbook2014'];
Ta muốn gộp 2 mảng này thành một mảng thì làm như sau:
const AppleProducts = iphones.concat(macbooks);
// ["iphone4", "iphone5", "iphone6", "macbook2012", "macbook2013", "macbook2014"]
Nhưng ta muốn thêm iphone7 , iphone7s và sau mảng iphones và macbook2011 trước macbooks , macbook2015 vào sau cùng thì phải concat rồi push phần tử vô nhiều lần đúng không?
Nhưng với spread operator, mọi chuyện đã nhanh gọn lẹn hơn như sau:
const AppleProducts = [ ...iphones, "iphone7", "iphone7s", "macbook2011", ...macbooks, "macbook2015" ];
//["iphone4", "iphone5", "iphone6", "iphone7", "iphone7s", "macbook2011", "macbook2012", "macbook2013", "macbook2014", "macbook2015"]
Copy Array
Nếu ta copy như thế này thì không đúng:
const oldModels = macbooks;
oldModels[0] = "macbook2010";
// macbooks: ["macbook2010", "macbook2013", "macbook2014"]
Vì khi gán bằng thì khi oldModels thay đổi thì macbooks cũng thay đổi theo.
Với spread operator, ta có thể copy mảng an toàn hơn như sau:
const oldModels = [...macbooks];
oldModels[0] = "macbook2010";
// macbooks: ["macbook2012", "macbook2013", "macbook2014"]
Spread operator khi gọi hàm
Ví dụ ta có hàm tính tổng sum, trong hàm này dùng for ... of
const values = [69,96,1];
function sum(){
var total = 0;
for (const value of arguments){
total += value;
}
return total;
}
console.log(sum(values[0],values[1],values[2]));
// 166
Mà lỡ cái mảng ta truyển vào có 100 phần tử, chẳng lẽ cùng truyền 100 đối số vào sao? Mọi việc sẽ đơn giản hơn nếu dùng spread operator:
console.log(sum(...values)) // 166
...Rest Operator là gì?
Cũng là ba dấu chấm ... nhưng rest lại có cách dùng khác hoàn toàn với spread. Spread tức là banh ra, tách ra, từ một array thành nhiều phần tử.
Còn rest thì ngược lại: gom những phần tử thành array. Rest operator được dùng trong parameter của function và destructuring
...rest trong function
Ví dụ ta có hàm tính điểm trung bình học sinh, với toán, văn nhân hệ số 2, còn lại bao nhiêu môn không cần biết hệ số 1. Mình sẽ viết theo kiểu dùng ...rest luôn, bạn có thể viết lại dùng arguments của hàm và sẽ nhận thấy rằng dùng ...rest sẽ tiết kiệm vài dòng code và nhìn pro hẳn lên
function calculateGPA(math, literature, ...otherSubject){
console.log(otherSubject); // [6, 7, 5, 4]
}
calculateGPA(8, 7.5, 6, 7, 5, 4);
Lúc này bạn sẽ thấy otherSubject là một array, tức là ...rest đã gom lại thành 1 mảng rồi. Công việc bây giờ chỉ cần dùng hàm sum() ở trên là xong:
function calculateGPA(math, literature, ...otherSubject){
return (math * 2 + literature * 2 + sum(...otherSubject)) / (otherSubject.length + 4);
}
console.log(calculateGPA(8, 7.5, 6, 7, 5, 4));
// 6.625
Tiếp theo còn một trường hợp hay dùng Rest nữa đó là:
...rest với Destructuring
const VietNamTeam = [ "Nguyen Huu Thang", "Nguyen Cong Phuong", "Luong Xuan Truong", "Nguyen Van Toan", "Nguyen Tuan Anh", "Phan Van Hau", "Ha Duc Chinh" ];
const [coach, captain, ...players] = VietNamTeam;
console.log(coach);
console.log(captain);
console.log(players);
// Nguyen Huu Thang
// Nguyen Cong Phuong
// ["Luong Xuan Truong", "Nguyen Van Toan", "Nguyen Tuan Anh", "Phan Van Hau", "Ha Duc Chinh"]
Kết
Hy vọng với bài viết này, bạn đã hiểu rõ cũng như phân biệt được Spread Operator và Rest Operator. Mọi góp ý và thắc mắc hãy comment chia sẻ nhé!
Related Posts
Discover more content you might enjoy

Vibe Coding - Code lại blog từ đầu và rebrand thành khoa.blog
Chia sẻ chi tiết quá trình build lại blog từ đầu với vibe coding, từ việc chuyển đổi dữ liệu đến việc triển khai các tính năng mới, giúp người đọc hiểu rõ hơn về quá trình phát triển blog cá nhân.

Game Theory trong thời đại AI: Khi máy móc tham gia vào "trò chơi"
Bài viết phân tích sự giao thoa giữa lý thuyết trò chơi (Game Theory) và trí tuệ nhân tạo, giải thích cách AI đang thay đổi các nguyên lý cân bằng Nash và chiến lược tối ưu. Tác giả đưa ra các ví dụ thực tế về ứng dụng trong kinh doanh, giao thông và an ninh mạng.

Bài này không phải AI viết
Suy ngẫm chân thành về giá trị của việc viết thủ công trong kỷ nguyên AI. Dù AI có thể tạo nội dung hiệu quả, bài viết này là lời khẳng định về sự kết nối cá nhân và giá trị độc đáo mà con người mang lại cho văn bản của mình.

Vibe Coding và các nhược điểm của nó
Phân tích chi tiết các nhược điểm và rủi ro của phương pháp Vibe Coding - cách tiếp cận để AI viết code mà không cần sự giám sát của con người, giúp người đọc hiểu rõ hơn về những thách thức trong việc áp dụng công nghệ AI vào phát triển phần mềm.

Những quyển sách hay mình đã đọc năm 2016
Bài viết giới thiệu và đánh giá 8 cuốn sách hay tác giả đã đọc trong năm 2016, bao gồm tiểu sử Elon Musk, The Personal MBA, Will It Fly của Pat Flynn, hai tác phẩm của Charles Duhigg về thói quen và hiệu suất làm việc, Predictably Irrational về tâm lý học quyết định, Moonwalking with Einstein về rèn luyện trí nhớ, và How to Fail at Almost Everything and Still Win Big về vượt qua thất bại.

Tại sao tôi muốn trở thành một Product Manager
Bài viết chia sẻ hành trình chuyển hướng sự nghiệp từ iOS developer sang Product Manager, phân tích lý do tác giả không phù hợp với lập trình thuần túy, giải thích vai trò và trách nhiệm của một Product Manager trong việc phát triển sản phẩm có giá trị, khả dụng và khả thi, cùng với những kỹ năng cần thiết để thành công trong vị trí này.