Understanding JavaScript Spread Operator on Strings and Emoji Sequences

Hello, I am 卡颂. In everyday development you often use the spread syntax (Spread operator), for example to expand an array.

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
// 6
console.log(sum(...numbers));

You can also clone an object:

const clone = { ...obj };

But have you ever seen the spread operator applied to a string?

Effect of the Spread Operator on Strings

The iterable type was added in ES2015. The spread operator can act on any iterable , expanding it into zero or more arguments. Both Array and String are iterable types.

An iterable can be traversed with for..of syntax, for example:

for (let i of 'abc') {
  console.log(i)
}
// a
// b
// c

While it is obvious that Array is iterable, why is String also iterable? Before ES2015, String already implemented the same elements that Array uses for iteration: it has a .length property and characters can be accessed by index. Therefore, from an iteration perspective, String behaves like an Array .

Consequently, when ES2015 made Array an iterable that supports for...of , String also needed to support the same syntax.

Emoji Sequence

Multiple emoji can be combined into a single visual unit called an Emoji Sequence . This relies on the fact that text can be composed of combining characters.

In Thai, characters are built by entering a base character, then a “hat” (tone mark), then a “shoe” (final consonant), and finally an ending character. The same principle applies to emoji.

When you spread the emoji sequence “👨‍👩‍👦” (a family of three), the first and third items are zero‑width joiner characters ( \u200D ). The zero‑width joiner is normally used for typography, but in an Emoji Sequence it acts as glue between individual emoji.

By inserting \u200D between emoji, you can combine them into a new Emoji Sequence . For example, combining 👨 (father), 👩 (mother), and 👦 (son) yields the family emoji, and you can also create variations with 👧 (daughter) or add other symbols such as a graduation cap.

Summary

After understanding the combination method, you can use existing emoji to construct new Emoji Sequence representations, such as families with two fathers or two mothers and a child.