Spread Operator

Spread operator(...) maybe the most used ES6 new feature in among my coding.

Spread syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. - MDN

Spread operator and decontruction (important!)

We use this a lot, especially in React.


// Array descontruction
const arr = [1,2,3,4,5];
const [a, ...b] = arr;
console.log(a); // 1
console.log(b); // [2,3,4,5]

// Object deconstruction
const obj = { title: "es6 tips", tag: "coding", desc: "spread operator" };
const { title, ...others } = obj;
console.log(title); // "es6 tips"
console.log(others); // { tag: "coding", desc: "spread operator"  }

const { title: t } = obj; // rename;
console.log(t); // "es6 tips"

Merge object and array

// merge array
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]

const mergedArr = [...arr1, ...arr2]

console.log(mergedArr) // [1, 2, 3, 4, 5, 6]

//merge object
const joe = { firstName: "Joe", lastName: "Zhang" };
const info = { age: 50, gender: "male" };

const mergedObj = {...joe, ...info };

console.log(mergedObj) // { firstName: "Joe", lastName: "Zhang", age: 50, gender: "male" }

Function arguments

function sum(...args) {
	console.log(args)
}
sum(1,2,3,4,5,6,7); // [1,2,3,4,5,6,7]

Spread operator and copy

Some programmer use spread operator to copy an array or an object. Like this:

const arr = [1,3,4,5];
const copyArr = [...arr];

console.log("arr is ", arr, " ,copyArr is ", copyArr);
//arr is, Array(4) [ 1, 3, 4, 5 ] ,copyArr is Array(4) [ 1, 3, 4, 5 ]

Let’s go a little further

const ann = { name: "ann", age: 20};
const joe = { name: "joe", age: 20};

const arr = [ann, joe];
const copyArr = [...arr];

console.log("arr is ", arr, "\ncopyArr is ", copyArr);
// arr is [{ name: "ann", age: 20}, { name: "joe", age: 20}]
// copyArr is [{ name: "ann", age: 20}, { name: "joe", age: 20}]
// they are the same


// let's change the name of ann
ann.name = "anna";

console.log("arr is ", arr, "\ncopyArr is ", copyArr);
// arr is [{ name: "anna", age: 20}, { name: "joe", age: 20}]
// copyArr is [{ name: "anna", age: 20}, { name: "joe", age: 20}]
// they are the still same, but all of them has chnaged

From the above example, we could clearly see the spread operater do a shallow copy, which means it copy the reference of the object. So, if you copy an Array or an Object with spread operator, be careful, every change in a reference data would influence the copy.

Spread operator and prototypes

Both of the JavaScript programmers are fimilar with prototypes and prototype chain. This is mechanism for JavaScript inheritance. For example:

function Student(name) {
	this.name = name;
}

Student.prototype.age = 21;

Student.prototype.getName = function() {
	return this.name;
}

Object.prototype.getAge = function() {
	if (this.age) {
		return this.age;
	} else {
		return new Error("there is no age proprety");
	}
}

const ann = new Student("ann");
console.log(ann.age); //21
console.log(ann.getName()); // "ann"
console.log(ann.getAge()); // 21

In this example , we defined an object which called Student, added some property on its prototype and parental prototype. How would it work in with a spread operator?

const annCopy = {...ann};
console.log(annCopy.age); // undefined
console.log(annCopy.getName()); // Uncaught TypeError: annCopy.getName is not a function
console.log(annCopy.getAge()); // Error: there is no age proprety

The spread operator did not copy the property on the prototype chain. I know it is complicated, but don’t worry, we don’t use this usage that often.

Reference: MDN spread operator

Last modified on 2021-08-20