JavaScript에서 문자열 결합 방식의 성능차이

JavaScript에서 문자열을 결합할 때, 보통 아래와 같은 방법을 사용합니다.

 

var TEXT = "안녕하세요!"
TEXT += "여기는 세상입니다?";

 

그리고, 그 선택은 대부분 올바릅니다.

 

var TEXT = "";

for(var cnt = 0; cnt < 50; cnt++){
  TEXT += "안녕하세요!";
}

console.log(TEXT);

 

var ARR = [];

for(var cnt = 0; cnt < 50; cnt++){
  ARR.push("안녕하세요!");
}

console.log(ARR.join(""));

 

두개의 코드중에서 덧셈을 사용한 코드가 조금 더 빠릅니다.

제가 사용하는 PC에서는 덧셈이 65,520 Ops/sec 으로 61,453 Ops/sec 인 Join 보다 조금 더 성능이 좋습니다.

 

그러나, 이 선택이 언제나 올바른 것은 아닙니다.

 

var TEXT = "";

for(var cnt = 0; cnt < 1000; cnt++){
  TEXT += "안녕하세요!";
  TEXT += " ";
}

console.log(TEXT);

 

var TEXT = "";

for(var cnt = 0; cnt < 1000; cnt++){
  TEXT += "안녕하세요! ";
}

console.log(TEXT);

 

var ARR = [];

for(var cnt = 0; cnt < 1000; cnt++){
  ARR.push("안녕하세요!");
}

console.log(ARR.join(" "));

 

위 코드에서는 꽤 다른 성능을 보입니다.

 

첫번째 코드는 덧셈을 사용하면서, 각 문자열을 공백 하나로 구분합니다.

이 코드는 6,465 Ops/sec 으로 측정되었습니다.

공백과 문자열을 따로 결합하다 보니 연산횟수가 많아 그런것 같습니다.

 

두번째 코드는 문자열 뒤에 공백을 추가했습니다.

공백을 같이 처리해서 그런지 12,676 Ops/sec 으로 첫번째 코드보다는 성능이 좋습니다.

 

그런데, 세번째 코드는 두개의 코드들보다 더욱 성능이 좋습니다.

15,117 Ops/sec 으로, 세개의 코드 중에서 제일 좋은 성능을 보입니다.

 

테스트를 해 보고 싶으시다면

https://jsperf.com/ndev-js-plus-append-1 에서 확인해 볼 수 있습니다.

 

 

 

 

 

장문일 것을 예상하여 모든 결합을 Join으로 하기에는 무리가 있습니다.

오히려 속도가 느려질 가능성도 있습니다.

 

그렇다고 단문으로만 가정하여 덧셈 기호를 사용하는 것도 성능에 안좋은 영향이 있습니다.

 

문자열의 길이와 상황에 따라서 사용할 방식을 골라 사용하는 것이 제일 현명한 것 같습니다.