split(""), [...str](스프레드 문법) 중 뭐가 나은 방법일까?

js에서 string을 글자 하나하나 배열로 바꿀 때, split("") 메서드를 쓰는게 좋아, 아님 [...str] 처럼 스프레드 문법을 쓰는게 좋아?

두 방법 비교

1. split("")

const str = "hello";
const arr = str.split("");
console.log(arr); // ["h", "e", "l", "l", "o"]

동작 방식

문자열을 빈 문자열 기준으로 나눠 문자 단위 배열로 변환합니다.

특징

문자열 메서드이기 때문에 다소 직관적입니다.

ES5 이전부터 사용 가능하여 모든 환경에서 호환됩니다.

제약

UTF-16 surrogate pair(예: 이모지) 처리에서 완벽하지 않습니다.

2. 스프레드 문법 [...str]

const str = "hello";
const arr = [...str];
console.log(arr); // ["h", "e", "l", "l", "o"]

동작 방식

스프레드 문법은 이터러블(문자열도 이터러블) 객체를 펼쳐 배열로 만듭니다.

특징

ES6 이후에 도입된 문법으로, 최신 JavaScript 환경에서 주로 사용됩니다.

UTF-16 surrogate pair를 정확히 처리합니다. (예: 이모지도 정상적으로 분리)

UTF-16 Surrogate Pair 예제

const str = "hello 😊";
console.log(str.split("")); // ["h", "e", "l", "l", "o", " ", "�", "�"]
console.log([...str]);      // ["h", "e", "l", "l", "o", " ", "😊"]

이모지나 특수문자를 포함한 문자열을 처리할 때는 스프레드 문법이 더 정확합니다.

split("")은 surrogate pair를 분리해 올바른 결과를 반환하지 못합니다.

성능 비교

일반적인 ASCII 문자열의 경우 두 방법의 성능 차이는 미미합니다.

UTF-16 surrogate pair를 많이 포함한 문자열을 처리하거나 최신 문법 사용이 가능하다면 스프레드 문법이 더 좋습니다.

결론

일반 문자열 처리: 선호에 따라 둘 중 하나를 선택.

이모지 등 포함 가능성: 스프레드 문법 [...str] 사용 권장.

최신 JavaScript 프로젝트에서는 [...str]을 기본으로 사용하는 것이 좋은 선택입니다.