[JS 연산 성능 시리즈] 문자열 접합 방법 및 성능 비교

여러 문자열을 이어붙이는 방법에는 보통 3가지 방법이 있는데, 실무에서 자주 사용하는 방법입니다.

문자열 연결 연산자 '+', 'string1' + 'string2' + ...를 사용하세요.

배열의 조인 기능을 사용하세요. 먼저 문자열을 임시 배열에 쓴 다음 배열의 조인 메서드를 호출하여 문자열 요소를 연결합니다.

문자열 연결 기능을 사용하세요.

방법 1: 문자열 연결자 '+' 사용

var concat1 = function(str1, str2){
    return str1 + str2;
};

방법 2: 배열의 Join 함수 사용

var concat2 = function(str1, str2){
    var arr = [];
    arr.push(str1);
    arr.push(str2);

    return arr.join();
};

방법 3: 문자열 사용 concat 함수

var concat3 = function(str1, str2){
    return str1.concat(str2);
};

성능 요약

위 두 가지 방법의 성능을 비교하기 위해 로컬에서 Benchmark를 사용했습니다. 테스트 환경은 Testing in Chrome 46.0.2490 / Mac OS X 10.10.4입니다. , 결과는 다음과 같습니다.

concat#+ x 90,483,047 ops/sec ±2.06% (84 runs sampled)
concat#array-jion x 12,303,912 ops/sec ±0.90% (82 runs sampled)
concat#string-concat x 40,845,196 ops/sec ±0.83% (89 runs sampled)
Fastest is concat#+

즉, Chrome 46에서는 문자열 연결 문자 '+'를 사용하는 것이 훨씬 더 효율적입니다.
물론 이는 Chrome 46 환경에서의 테스트일 뿐이며 모든 브라우저 플랫폼을 대표하는 것은 아닙니다.

jsPerf에도 비슷한 성능 테스트가 있습니다 https://jsperf.com/concat-vs-...
테스트 결과는 다음과 같습니다.

오래된 브라우저(ie7-)에서 Join을 사용하는 것이 더 효율적입니다.

최신 브라우저에서는 효율성을 높이려면 "+"를 사용해 보세요.

물론 일부 최신 브라우저에서는 "+"가 조인보다 빠르지 않을 수 있습니다(예: Safari 5.0.5, Opera 11.10)

자체는 문자열 배열이며 직접 조인입니다. 더 좋아질 것입니다.

'+'와 concat 사이에는 물론 '+'를 사용하는 것이 더 편리하고 직관적이며 효율적입니다.