[JavaScript] 문자열에서 배열 변환하는 방법 비교 : split & spread & Array.from

 

JavaScript를 이용해 코딩테스트를 풀다 보면 문자열을 배열로 변환해야 하는 경우가 존재한다.

예를 들어 'javascript'라는 문자열을 ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't']로 변환하는 것처럼이다.

이 과정에서 사용할 수 있는 방법은 크게 3가지가 있다.

 

이번 포스팅에서는 문자열을 배열로 변환하는 방법을 알아보고 코딩테스트를 풀 때 어떤 방법이 가장 효율적인지에 대해 알아보고자 한다.

 

01. 문자열에서 배열 변환하는 방법 3가지

1️⃣ split 메서드

'string'.split('');

 

2️⃣ 스프레드 연산자

[...'string'];

 

3️⃣ Array.from 메서드

Array.from('string');

 

 

 

02. 3가지 방법 속도 비교 : 스프레드 연산자가 가장 빠름

앞선 문자열을 배열로 변환하는 3가지 방법의 속도를 MeasureThat에서 벤치마크 테스트를 통해 비교해 보았다.

출처 : https://measurethat.net/Benchmarks/ShowResult/354565

Benchmark 테스트를 통해 각 코드의 평균 실행 시간과 성능 차이를 알아보았다.

위 Benachmark results 결과는 각 테스트 케이스에 대해 초당 실행 횟수(ops/sec)를 보여주어 이 값이 높을수록 코드가 더 빠르게 실행된다.

 

따라서 실행 결과 스프레드 연산자의 실행 속도가 가장 빠르고, 다음으로 Array.split, Array.from인 것을 확인할 수 있다.

즉, 스프레드 연산자가 Array.from에 비해 약 2배 정도 빠른 성능을 보여준다.

속도가 중요한 상황이면 스프레드 연산자를 사용하는 것이 유리하다.

 

또한 스프레드 연산자를 우선시해서 사용해야 하는 이유가 있다.

바로 split 메서드는 문자열에 이모티콘과 같은 멀티바이느 UTF-8 문자가 포함되어 있다면 원하는 결과를 얻을 수 없다.

예를 들어, 문자열 'computer💻'를 배열로 변환한다면 결과는 다음과 같을 것이다.

'computer💻'.split(''); 
// [ 'c', 'o', 'm', 'p', 'u', 't', 'e', 'r', '\ud83d', '\udcbb' ]

[...'computer💻'];      
// [ 'c', 'o', 'm', 'p', 'u', 't', 'e', 'r', '💻' ]

Array.from('computer💻'); 
// [ 'c', 'o', 'm', 'p', 'u', 't', 'e', 'r', '💻' ]

 

split('')는 이모티콘을 제대로 분리하지 못하고 UTF-16 코드 단위로 나누어 버린다.
결과적으로 우리가 원하는 "💻" 대신 '\ud83d'와 '\udcbb' 같은 코드가 나온다.

반면 스프레드 연산자와 Array.from은 이모티콘을 제대로 처리한다.

즉, 이모티콘이나 멀티바이트 문자를 다룰 가능성이 있다면 split은 적합하지 않다.

 

 

💡 스프레드 연산자의 가독성과 코드 간결함

스프레드 연산자는 가독성과 간결함 면에서도 큰 장점이 있다.

const result1 = 'string'.split('');
const result2 = [...'string'];
const result3 = Array.from('string');

 

• split은 의도가 다소 모호하다. ' '라는 빈 문자열이 의미하는 바가 분명하지 않을 수 있다.
• Array.from은 조금 더 명확하지만, 함수 호출 방식이라 코드가 길어진다.
• 스프레드 연산자는 단순하고 간결하며, 배열로 변환한다는 의도가 한눈에 드러난다.

 

 

🎯 결론

1. 성능: 스프레드 연산자가 가장 빠름
2. 문자 처리: 멀티바이트 문자(이모티콘 포함)를 제대로 처리
3. 가독성: 간결하고 명확

따라서 문자열을 배열로 변환해야 할 때는 스프레드 연산자를 사용하는 것을 추천한다.

 

 

---

References

https://measurethat.net/Benchmarks/ShowResult/354565

Run results for: array.split vs array.from vs spread - MeasureThat.net

https://velog.io/@sunohvoiin/JavaScript-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%9D%84-%EB%B0%B0%EC%97%B4%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%98%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-convert-string-to-array

[JavaScript] 문자열을 배열로 변환하는 3가지 방법 (convert string to array)