방구석에 놔둔 개발 노트

1년차 웹 / 앱 프론트엔드 엔지니어의 좌충우돌 얼렁뚱땅 앞뒤짱구 생존기

2022-12-07: Object 클래스의 상속 관계에 관해

아무리 생각해도 이해가 가지 않는 부분이 있었다.

이번에 Iterable과 Iterator, 그리고 Generator를 공부하면서 드는 의문이 몇 가지 있었다. 특히 Iterable을 공부할 때 나왔던 내용 중에는 아래와 같은 내용을 읽은 적이 있다.

문자열은 이터러블입니다.

배열과 문자열은 가장 광범위하게 쓰이는 내장 이터러블입니다.

근데, 공부할 때만 해도 Iterable은 반복이 가능한 ‘객체’라고 배웠는데… 문자열이 여기서 왜 나오지? 삼단 논법대로라고 하면 아래와 같이 표현할 수 있는데..

문자열은 이터러블입니다.

이터러블은 반복 가능한 객체를 가리킨다.

따라서, 문자열은 반복 가능한 객체이다.

원시 타입인 문자열과 참조 타입인 객체. 엄연히 타입이 다른데.. 이러다보니 내 안에 있는 JavaScript의 개념이 엄청 혼란스럽기 시작했다.

이런 의문을 SNS에 공유하면서 고통받고 있었는데, 그 내용을 본 사람들과 함께 이야기를 나눈 결과 고통받던 사항에 관한 의문점이 풀렸다.

여기서는 그 의문점을 해소한 내용을 정리해보고자 한다.

목차

 ❓ 왜 문자열은 Iterable에 쓸 수 있는 for…of를 사용할 수 있는 걸까?

 ❓ 원시 타입이라고 배운 문자열이 참조 타입처럼 써지는 이유는 무엇인가?

왜 문자열은 Iterable에 쓸 수 있는 for…of를 사용할 수 있는 걸까?

  • JavaScript에서의 문자열은 ‘유사 배열(Array-like)’ 취급을 받고 있다.
  • 문자열에 여러 메소드(method)나 속성(property)가 있는 걸 생각해보면 원시 타입이라기 보다 참조 타입의 형태를 띠고 있는 걸 떠오를 수 있다.
  • 배열의 경우, 순서가 있는 컬렉션으로 취급하는데 문자열 역시 글자들의 배열이므로 순서를 받을 수 있다.
    • 그래서 for…of 반복문도 사용할 수 있다.

원시 타입이라고 배운 문자열이 참조 타입처럼 써지는 이유는 무엇인가?

  • 이와 관련해서 다른 분들과의 이야기에서 해답을 찾게 됐다.

    @아구밍님 (Twitter)

    @빡빡이님 (Twitter)

    @달님 (Twitter)

    @제제님 (Twitter)

  • 결과적으로 JavaScriptC#이나 Python과 같이 우리가 흔히 원시 타입으로 알고 있는 친구들도 사실 Object Class에 다 묶여있다고 보면 된다.

    • Object 클래스에서 상속 받는 객체들이지만, 그게 외부로 드러나지는 않는데 아래의 코드들을 보자.
      const booleanTrue = new Boolean(true);
      booleanTrue.valueOf(true); // true
    
      const intNumber = 50;
      intNumber.toString() // '50'
    
    • boolean이나 int와 같은 원시 타입도 변수를 통해 우리는 관련 메소드들을 사용할 수 있는데, 원시 타입의 값들에 프로토타입이 있는지를 확인해보기 위해 Object의 메소드인 getPrototypeOf()를 활용해보자 아래와 같은 결과가 나왔다.

    위의 코드를 보면 Object 클래스에 있는 메소드인 getPrototypeOf()를 통해 각각의 타입 값들이 Number, Boolean, String 클래스에 담겨있는 것을 볼 수 있다.

    이 내용을 통해 우리가 사용하고 있는 원시 타입들은 각 타입의 클래스(혹은 프로토타입)에 연결되고, 이 클래스들은 전부 Object 클래스에 상속되어 나타내고 있다는 걸 알 수 있다.

정리하자면 아래와 같다.

  1. 모든 원시 타입은 사실 클래스를 통해 연결되어 있다.
  2. 그리고 그 모든 원시 타입의 클래스들은 최종적으로 Object 클래스를 상속한다.

따라서, 문자열 역시 이런 규칙에 따라 속성과 메소드를 가질 수 있어 Iterable로 표현할 수 있다.

이렇게 정리한 내용이 머릿속에 와닿지 않는다면 아래의 이미지를 참고해보길 바란다.

@미뭇상님 (Twitter)

📁 참고 자료

코딩교육 티씨피스쿨

Elements kinds in V8