• 목록
  • 아래로
  • 위로
  • 0
  • 네모
  • 조회 수 1719

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으로 하기에는 무리가 있습니다.

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

 

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

 

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

작성자
네모 71 Lv. (51%) 409190/414720EXP

인스타그램 : http://instg.me/nemo_9l

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 시스템 점검 작업 완료 안내 10 마스터 마스터 24.09.05.16:25 3217
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 10604
140 메일수신이 안된다고...? mail.yandex.com mx 리코드를 이용해보자 2 image djdisodo 18.02.21.17:04 2285
139 [게임하시는 분들을 위한 팁] 프래임 드랍 해결하기! ProjectSE ProjectSE 18.02.18.16:59 508
138 여러분은 Behance를 아시나요? Seia Seia 17.12.15.20:51 380
137 For Intel 8th GEN 4 Seia Seia 17.12.15.20:14 464
136 직구나 프로그램 다운로드시 사용 가능한 무료 해외 SMS 수신 사이트 8 이니스프리 이니스프리 17.12.09.14:50 3209
135 [멀웨어 정보] KT 홈허브 관련 DHCP 설정 변조 관련 멀웨어 유포 정보 및 대처 방법 6 이니스프리 이니스프리 17.12.05.23:20 899
134 Windows 배치파일 작성 시 귀차니즘 1% 해결 Seia Seia 17.12.03.11:37 390
133 윈도우 10 업그레이드 후 windows.old 삭제 방법 4 이니스프리 이니스프리 17.12.01.20:55 740
132 SKT 데이터 함께 쓰기, 회선수 제한, 직구폰 개통, 아이폰 직구시 주의사항 등 관련 팁 2 이니스프리 이니스프리 17.11.23.20:58 4088
131 URL에 ?ckattempt=1이 붙거나 403 에러가 뜨는 경우에 해결 방법 (카페24) 2 이니스프리 이니스프리 17.11.22.20:56 1553
130 DB 설계하실 때 사용하면 좋을거 같은 사이트 공유합니다. 1 image JAVA JAVA 17.11.21.15:06 7093
JavaScript에서 문자열 결합 방식의 성능차이 네모 네모 17.11.17.23:01 1719
128 아미나빌더 1.7.20 업데이트 5 이니스프리 이니스프리 17.11.10.16:01 447
127 Windows 10 에서 Telnet 사용하기.. 1 image 여우나라 title: Fox여우나라 17.11.10.10:49 937
126 이북 무료 제공 - JavaScript: Novice to Ninja 4 이니스프리 이니스프리 17.11.09.13:35 546
125 [밤에 하는 사람들을 위한 팁] Windows 10에 내장된 야간모드 image Seia Seia 17.11.09.00:44 491
124 PHP 7에서 아미나 구형 위젯 사용시 수정해야 할 부분 2 이니스프리 이니스프리 17.11.07.20:48 591
123 웹사이트 개인정보보호 의무조치 개선방법 안내 (방송통신위원회, 한국인터넷진흥원 작성) 1 file 이니스프리 이니스프리 17.11.02.20:22 479
122 (펌) 스포어 에디터 단축키 1 이니스프리 이니스프리 17.11.01.21:45 858
121 물리학에 대해서 좀더 심층적으로 배워보고 싶다하는 분들 들어와보세요 Adam title: 대한민국 국기Adam 17.10.09.17:32 462