String Concatenation in JavaScript

자바스크립트를 사용하면서 가장 많이 사용하는 연산자를 물어본다면 아마도 + 연산자가 아닐까 싶습니다.
자바스크립트에서 + 연산자는 Number Type에서의 덧셈 기능 외에 String Type에서 문자열간의 연결을 하는 기능으로도 많이 사용됩니다.

특히나 Ajax에서 결과값으로 HTML을 생성 할 경우 많이 사용되곤 합니다.
위와 같은 경우 HTML 코드의 길이가 기하급수적으로 커질 경우가 있습니다.

IE의 경우 + 연산자로 HTML코드를 연결 할 경우 그 수에 비례하여 퍼포먼스가 현저히 떨어지게 됩니다.
(다른 브라우저들에서도 비등한 결과치를 나타냅니다.)

다음 코드는 + 연산자로 문자열을 연결한 것과 스트링객체를 확장하여 스트링 버퍼처럼 사용한 경우의 결과를 비교한 것입니다.

	function usingAdditionOperator(max) {
		var start = new Date().getTime();
		var str = '';
		for (var i = 1; i <= max; ++i) {
			str += i + '번째 반복 문자열입니다.';	
		}
		
		var duration = new Date().getTime() - start;
		return duration;
	}
	
	function StringBuffer() {
		this.buffer = [];
	}
	
	StringBuffer.prototype.toString = function toString() {
		return this.buffer.join("");
	};
	StringBuffer.prototype.append = function append(str) {
		this.buffer.push(str);
		return this;
	};
	function usingStringBuffer(max) {
		var start = new Date().getTime();
		var sb = new StringBuffer();
		for (var i = 1; i <= max; ++i) {
			sb.append(i);
			sb.append('번째 반복 문자열입니다.');
		}
		
		var duration = new Date().getTime() - start;
		return duration;
	}
	
	var max = 5000;
	var result = '덧셈 연산자를 사용하여 문자열을 연결한 경우 걸린 시간 : ' + usingAdditionOperator(max) +
	'ms\n' + 'String Buffer을 사용하여 문자열을 연결한 경우 걸린 시간 : ' + usingStringBuffer(max) + 'ms';
	
	console.log(result);

IE에서 max값을 작은 값부터 큰 값으로 할당 후 결과값을 보면 + 연산자를 사용하여 문자열을 연결 할 경우 퍼포먼스가 현저히 떨어지는 것을 알 수 있습니다.

이런경우에는 위 코드 중 두번째와 같이 String Buffer를 만들어서 사용하는 것이 성능향상에 도움이 됩니다.