우린 어떻게 “abc”에 toUpperCase를 사용할 수 있을까?

 

🍋 의문점

---

알고리즘 문제를 풀던 중 문자열 “abc”를 대문자로 변환하는 함수 toUpperCase를 사용해야 했다.

사용만 하다가 갑자기 문득 의문이 들었다.

“abc” 데이터 타입은 당연하게도 객체도 아니고 문자열인데, 어떻게 toUpperCase라는 메서드를 가질 수 있는 거지?

console.log(typeof "abc") // string

 

 

🍋 자… 원시값을 객체처럼 다룰 수 있다고?

---

자바스크립트에서 객체는 다른 언어에서 부르는 클래스와 같이 다양한 값과 메서드를 응집화시킬 수 있게하는 데이터 타입이다.

다양한 종류의 값을 프로퍼티로 가질 수 있고, 내부에 메소드를 추가해 객체 자체를 다룰 수 있다..

const 랜덤문자 = new Object();

랜덤문자.value = "abc";
랜덤문자.toUpperCase = function (){
    // value를 대문자로 바꾸는 알고리즘 ...
    return this.value
}

하지만 원시형 (여기서 가리키는 문자열)은 객체 형태가 아니기에 객체를 다루는 메소드를 구현할 수 없어,

구현하려는 로직을 외부에 위임해야 한다는 한계가 있었고,

그래서 자바스크립트 창립자는 다음과 같이 원시값을 객체로 다룰 수 있는 장치를 추가하게 된다.

1. 원시값을 선언한다.
2. 자바스크립트가 원시값에 메서드(지금 예제에선 toUpperCase)에 접근하려는 시도를 허용한다.
3.1. toUpperCase()가 호출된 런타임에서 내부적으로 toUpperCase를 가진 Object wrapper 객체 생성
3.2. toUpperCase 메서드 실행
3.3. 실행 후 결괏값 반환
3.4. 과정 a에서 생성한 객체 파괴
3.5. 반환된 결괏값만 생존.

 

위 장치들로 인해 원시타입에도 메서드를 사용할 수 있게 된다. 고민 해결 땅땅땅

 

 

🍋 의도치 않은 Object wrapper의 생성?

---

자바스크립트는 원시값에 메소드를 접근하려는 시도를 허용한다.

'use strict';

let name = "송강"

name.sayHi = function(){console.log('hi')}

console.log(name.sayHi) // undefined

따라서 위 예시와 같이 임의의 문자열 name에 sayHi라는 함수를 프로퍼티로 추가하려 한다면, 다음의 과정을 거치게 된다.

1. 원시값 name에 sayHi라는 메소드를 호출하면서 Wrapper Object가 생성
2. sayHi를 메소드를 가진 Wrapper Object가 바로 삭제됨
3. sayHi 메소드를 다시 찾을 수 없어 undefined 출력

위와 같은 이슈를 사전에 방지하기 위해 strict mode를 활성화시킬 수 있다. 그렇게 되면 Wrapper Object가 생성되지만, readonly인 객체에 sayHi라는 메서드를 추가하려는 시도가 사전에 차단되어 에러를 보여주게 된다.

 

 

🍋 확장 공부: 생길 수 있는 문제에 대한 고민

---

위 개념과 연결 지어 문자열 객체와 문자열 리터럴 선언 과정을 봐보자.

문자열 리터럴은 그 자체로 string 타입을 갖고, 생성자를 통해 생성한 문자열 객체는 object 타입을 갖는다.

console.log(typeof "abc") // string
console.log(typeof new String("abc")) // object

의도적으로 만든 welcome 함수를 메서드로 가진 문자열 객체를 생성했고, 이 문자열 객체의 prototype을 welcome 함수로 설정하는 예시이다. 이때 toUpperCase()라는 메서드를 사용하는 경우를 상상해 보자.

let name = new String("song kang")
String.prototype.welcome = function(){
    console.log(this + " 입니다") // song kang 입니다
}
name.welcome()

생성한 name 객체에 toUpperCase()라는 메서드를 사용하면, toUpperCase 메소드가 반환한 결과값만이 생존되고 나머지 객체는 파괴된다. 이 값을 오버라이딩 시킨다면 문자열로 형변환이 일어나며 이전에 만든 welcome 함수는 사라지게 된다!

console.log(typeof name) // object
console.log(typeof name.toUpperCase()) // string

물론 이런 시나리오를 빈번히 마주하게 될 것이라 예상하진 않지만... 이 형변환을 막을 수 있는 방법에 대해 고민해보고 싶었다.

 

 

🍋 확장 공부: 어떻게 해결할 수 있을까?

---

1. Object freeze로 객체 동결 ❌

객체를 동결시키는 Object.freeze() 메소드를 사용하면 속성이 추가되고 제거되는 것을 방지하기에 불변성을 유지한다고 알고 있다.
하지만 이 경우에선 객체의 형태를 변형하는 것이 아닌 타입이 캐스팅되는 것이기에 적용이 불가하다.

 

1. 메소드 Overriding ✅

우리는 생성자 '함수' (또는 new 연산자)를 통해 만든 객체는 생성자 함수의 프로토타입 정보를 사용해 Prototype을 설정할 수 있다.

이 특성을 활용해, 형변환이 일어나는 경우를 애초에 방지하는 차원에서 String 인스턴스에 추가하려는 메소드를 prototype 유전자 심어줄 수 있다. 여기서 toUpperCase는 String 객체에 property값에 포함된 메서드이다.

String.prototype.toUpperCase()

자바스크립트 Class 문법이 등장한 이래로 Prototype은 거의 사용되지 않는다고 하지만, 클래스 개념에 대입하였을 때,

String이라는 클래스가 가진 toUpperCase 메서드를 객체를 반환하도록 Overriding 할 수 있지 않을까?라는 생각이 들었다.

toUpperCase 함수를 재정의 하지 않고서야 결괏값을 바꿀 수 없기에, 차선책으로 toUpperCase 메소드가 반환하는 결과값을 새로운 String 생성자에 담아 반환한다면, 모든 String의 prototype 메서드를 상속받은 문자열 객체를 반환할 수 있겠다고 생각했다. 

const x = new String("hello")

String.prototype.welcome = function(){
    console.log(this + " 입니다")
}

String.prototype._toUpperCase = function(){ // 객체를 반환하는 커스텀 toUpperCase 함수
    const newStr = String.prototype.toUpperCase()
    return new String(newStr)
}

console.log(x._toUpperCase())

console.log(typeof x)
console.log(typeof x._toUpperCase())

 

 

🍋 느낀 점

---

말로 인한 결과를 화자가 책임지듯, 개발자로서 발생할 결과를 예측하고 코드를 짜는 것이 중요하다고 생각한다. 이를 위해 단순히 모든 결과를 “마법”이 아닌 “과학”으로 바라보는 시각을 갖는 게 중요하다는 생각이 들었다. 

 

 

 

 

 

참고자료:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management
https://ko.javascript.info/function-prototype
https://ko.javascript.info/primitives-methods