[JS] JavaScript 메서드를 설계 관점에서 파헤쳐보자.
Object.keys()는 되는데, 왜 obj.keys()는 안 되는 걸까?
우아한테크코스에서는 레벨이 끝날 때마다 레벨 인터뷰라는 시스템을 진행합니다.
일종의 회고이자 모의 면접 같은 시간인데, 이 과정에서 시지프 코치가 제게 흥미로운 질문을 하나 던졌습니다.
“조금 심화적인 질문일 수 있는데요. Object.keys()나 Object.create()는 바로 호출하는데, 왜 Array 관련 메서드는 Array.prototype.filter처럼 호출할까요? Object 메서드들은 static 메서드인 걸까요? JS의 설계 관점에서 생각해보면 좋을 것 같아요.”
이 질문에 선뜻 대답하지 못했고, 저는 그 순간 JavaScript에 대한 깊은 이해가 부족하다는 걸 느꼈습니다. 그래서 이 글을 통해 그 이유를 스스로 정리해보고자 합니다.
1. 자바스크립트의 프로토타입 체이닝
자바스크립트는 프로토타입 기반의 객체지향 언어입니다. 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체를 갖고 있고, 이 연결고리를 통해 필요한 메서드를 찾습니다. 이를 프로토타입 체이닝이라고 하죠.
const arr = [1, 2, 3];
arr.filter(num => num > 1);
// → arr → Array.prototype.filter
우리가 arr.filter()라고 쓸 수 있는 이유는 Array.prototype에 filter라는 메서드가 정의되어 있기 때문입니다.
이처럼 배열 인스턴스들은 자신들의 프로토타입에 정의된 메서드에 접근할 수 있습니다.
2. 프로토타입 체인의 최상위는 Object
모든 객체의 프로토타입 체인을 따라가다 보면 결국 Object.prototype에 도달합니다.
그리고 Object.prototype은 더 이상 부모가 없는, 프로토타입 체인의 최상단 객체입니다.
즉, 아래와 같은 구조로 생각해볼 수 있죠.
Object → null
Array → Object → null
Function → Object → null
Date → Object → null
3. 그렇다면 Object.prototype.values가 존재한다면?
만약 우리가 흔히 쓰는 Object.values(obj)를 인스턴스 메서드로 만들 수 있다면 좋겠죠?
const obj = { a: 1 };
obj.values(); // => [1] 이 되면 얼마나 직관적일까?
하지만 여기서 문제가 발생합니다. 예를 들어 Object.prototype.values를 정의하게 되면, 이 메서드는 모든 객체의 조상인 Object.prototype에 존재하게 됩니다.
그 말은 즉,
new Date().values(); // ???
(10).values(); // ???
false.values(); // ???
이런 식으로 원시값을 포함한 거의 모든 값이 .values() 메서드를 사용할 수 있게 되어버립니다. 이것은 설계 상 명확하지 않은 동작을 유발할 수 있으며, JS의 일관성도 해칠 수 있습니다.
4. 그래서 객체 관련 메서드는 'static 메서드'처럼 보이는 것이다
이러한 이유로 JavaScript는 Object 관련 메서드들을 모두 생성자 함수에 직접 정의해두었습니다.
Object.keys(obj);
Object.values(obj);
Object.freeze(obj);
Object.create(proto);
이 메서드들은 일종의 static 메서드처럼 동작하지만, 사실 ES5 시절에는 클래스가 없었기에 그냥 Object 함수에 직접 붙은 메서드일 뿐이었죠.
결국 이 설계는 "불필요한 오염을 막기 위한 프로토타입 체이닝의 고려"라고 볼 수 있습니다.
5. 반면 Array는 괜찮은 이유는?
Array.prototype.filter, map, reduce 등의 메서드는 배열 인스턴스에만 필요한 기능입니다. 그래서 이들은 Array.prototype에 정의되어 있어도 문제없습니다.
[1, 2, 3].filter(fn); // 가능
'abc'.filter(fn); // 불가능 (문자열에는 filter가 없음)
문자열, 숫자, 불리언 등의 값은 Array.prototype과 아무 관계가 없기 때문에, 이 메서드들이 불필요하게 확장되는 일은 없습니다.
결론
- Object.keys()는 왜 obj.keys()가 아닌가? → Object.prototype에 메서드를 넣으면 모든 값에서 호출 가능해지기 때문!
- 그래서 Object 관련 메서드는 모두 정적(static) 메서드처럼 설계되었다.
- Array.prototype은 배열 전용 메서드만 포함하고 있기 때문에, 인스턴스 메서드로 제공해도 문제 없음.
출처: 코어자바스크립트