데굴데굴 블로그
thumbnail

[Ice Break] 자바스크립트 object에서 toString을 쓰면 어케 될까?

생성일2023. 10. 23.
태그
작성자지한솔

안녕하세요! 오늘은 JavaScript의 특별한 특성 중 하나인 toString 메서드와 관련하여 흥미로운 사례를 살펴보려고 합니다. 이 포스팅을 통해, 여러분은 객체와 원시 타입 간의 비교에서 toString이 어떻게 작용하는지 깊이 있게 이해할 수 있을 것입니다.
const obj = {
	name: 'hansol'
}

console.log(obj) // [object object]
여러분은 이런것을 본 적이 있으신가요? object를 직접 console에 찍어보면 [object object] 가 나올겁니다. 이건 왜 이렇게 나오는걸까요? 분명 object인 obj도 return 하는게 있으니까 위와 같은 값을 보여주는게 아닐까요? 천천히 알아보도록 하겠습니다!

1. 기본적인 개념: toString 메서드란?

모든 JavaScript 객체는 기본적으로 toString이라는 메서드를 상속받습니다. 이 메서드는 객체를 문자열로 변환하는 역할을 합니다. 기본적으로, 이 메서드는 [object Object]와 같은 형태의 문자열을 반환하나, 우리는 이 메서드를 재정의하여 원하는 문자열을 반환하게 할 수 있습니다.
예:
const person = {
    name: "hansol",
    toString: function() {
        return this.name;
    }
};

console.log(person.toString()); // "hansol"

2. 흥미로운 사례: 객체와 문자열의 비교

다음 예제를 살펴봅시다.
const obj = {
	name: 'hansol',
	toString: () => 'Jihansol'
}

console.log(obj == 'Jihansol'); // true
위의 예제에서 obj는 문자열 '지한솔'과 어떻게 동등 비교(==)가 true가 될 수 있을까요? 여기서 중요한 포인트는 obj 객체가 toString 메서드를 재정의하고 있으며, 이 메서드가 '지한솔'이라는 문자열을 반환한다는 것입니다.

3. 그렇다면 왜 이런 일이 발생하는가?

객체가 원시 타입(여기서는 문자열)과 비교될 때, JavaScript는 해당 객체를 원시 타입으로 변환하려고 시도합니다. 이 과정에서 toString 메서드가 호출되게 되며, 그 결과가 원시 타입과 비교됩니다. 이로 인해 위 예제의 비교가 true를 반환하는 것입니다.

마치며

JavaScript는 동적 타입 언어의 특성과 다양한 내부 메서드들 덕분에 많은 흥미로운 특징들을 가지고 있습니다. 이러한 특징들을 이해하고 활용하면 코드를 더 효율적으로 작성할 수 있습니다. 하지만, 또한 예기치 못한 결과를 초래할 수 있으므로 주의가 필요합니다.
오늘의 포스팅이 여러분에게 도움이 되었길 바랍니다. 다음에 또 다른 흥미로운 주제로 만나봅시다! 😊