[JavaScript] 배열 메서드 Push를 직접 구현해보자!

유튜브 코딩문TV님이 JavaScript 배열 메서드를 직접 구현해보라는 영상을 올려주셨다.

흥미가 생겨서 하나씩 직접 구현을 해보고 영상이랑 비교해보고 싶었다.

그러는 도중 Push 메서드에서 살짝 막혀서 그 과정과 내가 배운 내용에 대해서 한번 정리해보려고 한다.

 

Push 메서드?

JavaScript에서 Push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

그리고 하나의 요소가 아닌 여러개의 요소를 Push 할 수 있다. (ex. .push(1,2,3,4))

참고로 필자는 Push 메서드가 새로운 배열의 길이를 반환하는지 몰랐다....!

MDN에서는 예제와 함께 설명하니 참고하면 좋을 것 같다!

 

필자가 구현한 Push 메서드 (형편없음)

function pushV1(arr, ...items) {
  let idx = arr.length;

  for (const item of items) {
    arr[idx++] = item;
  }

  return arr;
}

function pushV2(arr, ...items) {
  return [...arr, ...items];
}

console.log(pushV1([1, 2, 3, 4, 5], 6, 7));
console.log(pushV2([1, 2, 3, 4, 5], 6, 7));

 

위와 같이 2개의 방법으로 작성해봤다. 하지만 실제로 우리가 사용하는 Push 메서드는 이런 형태로 사용하지 않는다. [배열].push(...args) 형태로 사용하기 때문에 우리는 수정을 해야한다.

 

수정된 Push 메서드

/**
 * 하지만 위에처럼 하는건 우리가 실제로 사용하는 배열 메서드 같지 않다.
 * 실제 배열의 Push 메서드는 길이를 반환한다.
 * 그리고 우리는 prototype을 사용해야 한다.
 */
function pushV3(...items) {
  for (let i = 0; i < items.length; i++) {
    this[this.length] = items[i];
  }

  return this.length;
}

Array.prototype.pushV3 = pushV3;

const testArray = [1, 2, 3, 4, 5];
console.log(testArray.pushV3(6, 7));   // 7
console.log(testArray);   // [1, 2, 3, 4, 5, 6, 7]

 

Prototype에 pushV3 메서드를 등록해주면서 실제로 우리가 쓰는 듯한 메서드 식으로 구현을 했다.

 

JavaScript에서 함수의 this는 함수가 호출된 컨텍스트에 따라 값이 달라지는데, obj.method()와 같이 메서드 형태로 호출되는 경우에 this는 메서드를 호출한 객체(obj)에 바인딩된다. 따라서 testArray.pushV3(...)에서 this는 testArray가 되는 것이다.

 

그리고 JavaScript에서 모든 객체는 Prototype 이라는 다른 객체를 상속받는데 프로토타입은 객체의 공통 속성과 메서드를 정의한다. Array.prototype은 모든 배열 객체가 상속받는 프로토타입 객체이다. 그래서 Array.prototype.pushV3 = pushV3는 Array 객체의 프로토타입에 pushV3 라는 메서드를 추가한다는 것이고, 이는 모든 배열 인스턴스가 pushV3 메서드를 사용할 수 있다는 것을 의미한다.

---

사실 이걸 몰랐다는 거에 너무 부끄럽지만 이렇게 사소한 것 하나하나 잡아가야 좋은 개발자가 될 수 있을 것이라고 생각한다.

그리고, 필자가 해당 내용에 대한 코드를 GitHub에 올리고 있는데 심심하면 한번씩 봐주시면 감사하겠습니당!

 

Push 메서드가 length를 반환한다는 것을.... 코딩문님 답글을 통해 알아버렸다는..! 허허..

 

- https://www.youtube.com/watch?v=j1Fvixz0RyQ