Spread Operator Javascript là gì? cách sử dụng Spread Operator

Chào các bạn, lại là mình đây 😀. Ở bài viết trước chúng ta đã học về ES6 Template String trong JavaScript. Để tiếp tục các bài viết về ES6 JavaScript, hôm nay chúng ta sẽ học về Spread Operator trong JavaScript nhé!

JavaScript Spread Operator

ES6 cung cấp cho chúng ta một một toán tử mới được gọi là spread operator kí hiệu là ba dấu chấm ....

spread operator giúp chúng ta trải rộng các phần tử của một đối tượng có thể lặp lại như một array, map, hay set...

Ví dụ:

const odd = [1,3,5];
const combined = [2,4,6, ...odd];
console.log(combined);

Kết quả như sau:

[ 2, 4, 6, 1, 3, 5 ]

Trong ví dụ này, khi sử dụng ... trước mảng odd, JavaScript sẽ trải các phần tử của odd vào combined.

ES6 cũng có cú pháp ... dùng cho rest parameter, rest parameter khác với spread operator ở chỗ nó lấy tất cả các đối số còn lại của một hàm đưa vào một mảng.

Một ví dụ sử dụng rest parameter:

function f(a, ...args) {
	console.log(args);
}

f('blog', 'homiedev.com', 'front-end');

Kết quả:

['homiedev.com', 'front-end']

Trong ví dụ trên, rest parameter (...) lấy các đối số 'homiedev.com', 'front-end' tạo thành một args mảng.

Điểm khác nhau giữa rest parameter vs spread operator là:

1. spread operator giải nén các phần tử của một đối tượng có thể lặp lại (iterable).
2. rest parameter gom các phần tử thành một mảng.

rest parameter phải là đối số cuối cùng của một hàm. còn spread operator có thể ở bất cứ đâu, ví dụ:

const strings = ['homiedev', 'front-end', 'JavaScript'];
const combined = [...strings, 'html', 'css'];

console.log(combined);

Kết quả:

['homiedev', 'front-end', 'JavaScript', 'html', 'css']

Hoặc, chúng ta có thể sử dụng spread operator ở bất cứ vị trí nào:

const strings = ['homiedev', 'front-end', 'JavaScript'];
const combined = ['html', ...strings, 'css'];

console.log(combined);

Kết quả:

['html', 'homiedev', 'front-end', 'JavaScript', 'css']

Một số trường hợp sử dụng Spread Operator

Sau đây chúng ta cùng xem một số trường hợp dùng Spread Operator nhé 😀.

Clone Array sử dụng Spread Operator

Như chúng ta đã biết trong JavaScript, đối tượng được gán bằng tham chiếu (reference) chứ không phải theo giá trị (value).

Ví dụ:

let arr1 = [ 1, 2, 3];
let arr2 = arr1;

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// thêm phần tử vào mảng arr1
arr1.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3, 4] // mảng 2 cũng bị thay đổi theo

Ở đây, cả hai biến arr1 và arr2 đều tham chiếu đến cùng một địa chỉ trong bộ nhớ. Do đó, nếu chúng ta thay đổi bất cứ thứ gì từ mảng ở biến này sẽ dẫn đến sự thay đổi ở mảng của biến kia.

Tuy nhiên, nếu muốn sao chép các mảng để chúng không tham chiếu đến cùng một địa chỉ, chúng ta có thể sử dụng spread operator. Bằng cách này, sự thay đổi của mảng này sẽ không ảnh hưởng đến mảng kia.

Ví dụ:

let arr1 = [ 1, 2, 3];

// copy sử dụng spread operator
let arr2 = [...arr1];

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

// thêm một phần tử vào mảng
arr1.push(4);

console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [1, 2, 3] mảng sẽ không bị ảnh hưởng khi thay đổi mảng arr1

Mình có viết một bài liên quan đến việc so sánh hai giá trị, các bạn có thể xem thêm tại đây:

1. Tìm hiểu về Shallow Compare trong React

Copy Array sử dụng Spread Operator

Bạn cũng có thể sử dụng spread operator để copy các phần tử vào một mảng. Ví dụ:

const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four'];

console.log(arr2); 
//  ["one", "two", "three", "four"]

Spread Operator với Object

Chúng ta cũng có thể sử dụng spread operator với các object.

const obj1 = { x : 1, y : 2 };
const obj2 = { z : 3 };

// copy obj1 và obj2 vào một biến
const obj3 = {...obj1, ...obj2};

console.log(obj3); // {x: 1, y: 2, z: 3}

Hi vọng bài viết giúp ích cho các bạn! Chúng ta sẽ tiếp tục các bài viết về ES6 JavaScript nhé. Các bạn hãy theo dõi homiedev.com để nhận các bài viết khác. Cảm ơn các bạn đã đọc blog!