<div id="readability-page-1" class="page"><article id="post-10387">
	
		<div>
			
<p>자바스크립트의 <code>Object</code> 타입에는 <code>toString()</code>이라는 메서드가 정의되어 있다. 이름에서 보듯이 어떠한 타입을 문자열로 변환해준다. <code>Object</code>가 자바스크립트에서 모든 타입의 조상이라는 걸 생각하면 자바스크립트의 모든 타입은 어떤 형태로든 <code>toString()</code>이라는 메서드가 있다는 의미가 된다.</p>



<p>이 글에서는 이렇게 널리 퍼져있는 <code>toString()</code>을 조금 더 잘 이해하고 이용하는 방법에 대해 다루어 보겠다.</p>



<h2>1. Object.prototype.toString()</h2>



<p>제일 단순한 형태부터 살펴보자. 새로운 <code>Object</code> 인스턴스를 작성하고 <code>toString()</code>을 호출할 수 있다.</p>



<pre><code>var o = new Object();
o.toString(); // [object Object] 반환</code></pre>



<p>이 경우에는 <code>[object Object]</code>라는 문자열이 반환되는데 추가된 프로퍼티가 있든 없는 항상 같은 문자열만 반환한다. 그다지 쓸모있는 정보는 아닐 것이다. <code>toString()</code>은 아마 명시적으로 호출하기 보다는 문자열과 합칠 때 자동 변환 용도로 더 많이 사용될 것이다.</p>



<pre><code>var o = new Object();
console.log('--&gt; ' + o); // --&gt; [object Object]</code></pre>



<p>예를 들어, 위 예제는 <code>"--&gt; "</code>라는 문자열에 <code>o</code>라는 객체를 더했는데 두 변수의 타입이 다르므로 에러가 나거나 자동 형변환이 되어야 할 것이다. 이 경우에는 <code>o</code> 객체가 문자열로 자동 변환되는데, 이 때 객체의 <code>toString()</code>이 자동으로 호출된다. 이렇게 자바스크립트에서는 문자열과 더하기 연산을 하면 문자열이 앞에 있든 뒤에 있든 문자열 아닌 타입이 문자열로 변환을 시도한다.</p>



<h2>2. 사용자 정의 클래스</h2>



<p>사용자 정의 클래스의 인스턴스 역시 <code>Object</code> 타입을 상속하기 때문에 따로 정의하지 않아도 <code>toString()</code> 메서드가 정의되어 있다. 당연히 <code>Object</code>에  있는 것과 같은 것이다.</p>



<pre><code>class C{}
var c = new C();
c.toString(); // [object Object]
Object.prototype.toString === C.prototype.toString // true</code></pre>



<p>물론, 사용자 정의 클래스 고유의 toString()을 정의할 수도 있다.</p>



<pre><code>class D{
  toString() {
    return '[class D]';
  }
}
var d = new D();
console.log('Hello, ' + d); // Hello, [class D]</code></pre>







<p><code>Array</code> 타입에는 <code>toString()</code>이 <code>Object</code>와는 다르게 정의되어 있다.</p>



<pre><code>var arr = [1, 2, 3];
arr.toString(); // 1,2,3 반환</code></pre>



<p>보다시피 배열 각 원소를 쉼표로 구분하여 연결한 것을 반환한다. 배열의 원소를 살펴보기에는 좋은 방법이기는 한데, 혹시라도 <code>[object Object]</code>와 같은 형태로 표현할 수는 없을까? 당연히 있다. <code>Object.prototype.toString()</code>을 호출하면서 <code>this</code> 객체를 배열의 인스턴스로 바꾸어주면 된다.</p>



<p>"함수를 호출하면서 <code>this</code>를 바꾸는" 이 작업은 함수, 즉 <code>Function</code> 타입의 인스턴스에 있는 <code>call</code> 또는 <code>apply</code>를 사용하면 가능하다. 두 메서드에 관한 자세한 내용은 관련 문서를 각자 확인해보고, 여기서는 위에서 질문한 내용을 해결해보자.</p>



<pre><code>var arr = [1, 2, 3];
Object.prototype.toString.call(arr); // [object Array]</code></pre>



<p>배열은 <code>Array</code> 타입의 인스턴스이기 때문에 <code>Object</code>와는 다른 결과가 나타났다. 예전에는 이를 활용해서 배열인지 아닌지 확인하기도 했다. 지금은 <code>Array.isArray</code>라는 전용 함수가 존재하지만 모든 브라우저가 해당 함수를 지원하지 않았던 시기에는 <code>toString()</code>을 사용해 폴리필을 만들기도 했었다.</p>



<pre><code>if (typeof Array.isArray !== 'undefined') {
  Array.isArray = function(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
  }
}</code></pre>



<h2>4. null, undefined, 다른 타입</h2>



<p>배열에서 다루었던 것과 같은 방식을 사용하면 <code>null</code>과 <code>undefined</code>도 비슷한 결과를 얻을 수 있다.</p>



<pre><code>Object.prototype.toString.call(null); // [object Null]
<meta charset="utf-8">Object.prototype.toString.call(undefined); // [object Undefined]</code></pre>



<p>물론, 두 값은 그냥 일치 연산자(===)를 사용해서 확인하는 게 가장 편하다. 그 외의 타입, <code>Math</code>, <code>Date</code>, <code>String</code>, <code>RegExp</code>도 같은 방식을 사용해 결과를 얻을 수 있으니 한 번 테스트 해보자.</p>



<h2>5. 숫자</h2>



<p>당연히 <code>Number</code> 타입의 인스턴스인 숫자에도 <code>toString()</code>은 존재한다. 다만, 아래와 같이 직접 <code>toString()</code>을 호출하면 에러가 발생한다.</p>



<pre><code>100.toString(); // Uncaught SyntaxError</code></pre>



<p>자바스크립트의 숫자 타입은 정수와 소수를 모두 포현한다. 따라서 자바스크립트 파서는 정수 숫자 뒤에 점이 있으면 소숫점 이하의 수가 표현될 것이라고 기대한다. 그런데 갑자기 숫자가 아닌 <code>toString()</code>이라는 문자열이 나타나니 문법적으로 맞지 않다고 오류를 발생시키는 것이다. 이럴 때는 두 가지 방법이 있는데, 하나는 점을 두 번 사용해서 첫 번째 점으로는 소숫점을 표현하며 두 번째 점으로 메서드를 표현하는 방법이고, 다른 하나는 숫자를 괄호로 묶어서 숫자의 영역을 명확히 하는 방법이 있다. 물론, 변수라면 두 방법 모두 필요없다.</p>



<pre><code>100..toString(); // 100
(100).toString(); // 100</code></pre>



<p>숫자 타입의 <code>toString()</code>은 다른 타입과 다르게 인수를 전달할 수 있다. 이 인수는 주어진 숫자를 어느 진법을 사용해서 변환할 것인지 정한다. 기본값은 10, 즉 10진법을 사용하는 것이지만 2~36까지 다양한 값을 사용할 수 있다. 16진수가 9를 넘는 한자리 숫자에 a-f까지의 알파벳 문자를 할당하듯이 36진수에서는 9를 넘는 한자리 숫자에 a-z까지의 알파벳 문자를 사용한다.</p>



<pre><code>(100).toString(8); // 144 &lt;- 8진수
(100).toString(2); // 1100100 &lt;- 2진수
(100).toString(36); // 2s &lt;- 36진수</code></pre>



<p>16진수가 필요한 경우도 많지 않을텐데 36진수까지 사용할 일이 얼마나 있을까 생각할 수도 있다. 개인적으로는 랜덤한 아이디를 만들 때 잘 사용하고 있는데, 큰 범위의 숫자를 압축해서 보여주고 있어서 중복되기 힘들어서 코드의 양에 비하면 꽤 괜찮은 방법이라 생각한다.</p>



<pre><code>function uniqueId() {
  const min = 10**6; // 최소한의 길이를 보장하기 위한 최솟값
  return Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER - min) + min ).toString(36);
}</code></pre>



<p>랜덤함을 순수하게 <code>Math.random()</code>에만 의존하고 있으므로 당연히 중복이 발생할 수 있지만 간단히 테스트 해본 결과  100만 번 내에서는 중복이 거의 발생하지 않았다. 혹여라도 고유성이 굉장히 중요한 애플리케이션이라면 아이디를 만든 후 중복을 확인하는 별도의 로직이 필요할 것이다. 혹은 정적인 변수를 두고 순차적으로 증가하게 하는 방법도 있을 것이다.</p>



<pre><code><meta charset="utf-8">let uniqueIdCounter = 10**6;
function uniqueId() {
  return Math.floor(uniqueIdCounter++).toString(36);
}</code></pre>



<p>결과는 직접 사용하면서 확인해보자.</p>



<h2>마치며</h2>



<p>어떤 기능은 오랫동안 당연하게 사용하고 있어서 팁이라는 생각도 못하는 경우가 있다. 마지막에 언급한 숫자의 <code>toString()</code>이 바로 그렇다.  이 글을 작성하면서 중복된 자료는 없는지 검색을 해보았다. <code>toString()</code>을 다루는 글은 많았고, 숫자의 <code>toString()</code>에 전달하는 인수에 관해 다루는 글도 있었지만 16진수보다 큰 진법을 다루거나 위처럼 고유 아이디를 만드는 데 사용하는 글은 찾지 못했다. (물론, 검색 능력의 문제일 가능성도 있다) 내가 사용해 온 기간을 생각하면 그런 팁을 쉽게 찾을 수 없다는 게 오히려 특이한 느낌이다.</p>



<p>가끔 기회가 될 때마다 "매뉴얼 읽기"를 강조하는데 이 글에서 설명한 기술은 모두 매뉴얼만 정독해도 알 수 있는 그리 어렵지 않은 것뿐이다. 때로는 전혀 예상하지 못한 곳에서 재밌는 기능을 발견하는 경우도 있으므로 기회가 된다면 공식 레퍼런스를 재차 읽어보기를 추천하고 싶다.</p>
		</div>
	</article></div>

코드쓰는사람

자바스크립트의 Object 타입에는 toString()이라는 메서드가 정의되어 있다. 이름에서 보듯이 어떠한 타입을 문자열로 변환해준다. Object가 자바스크립트에서 모든 타입의 조상이라는 걸 생각하면 자바스크립트의 모든 타입은 어떤 형태로든 toString()이라는 메서드가 있다는 의미가 된다. 이 글에서는 이렇게 널리 퍼져있는 toString()을 조금 더 잘 이해하고 이용하는 방법에 대해 다루어 보겠다. 1. Object.prototype.toString() 제일 단순한 형태부터 살펴보자. 새로운 Object 인스턴스를 작성하고 […]

toString() 사용 설명서

댓글