JavaScript | Array.prototype이 뭔가요?

JavaScript에 대해서 MDN 자료로 공부를 하던 중, Array.prototype.reduce()와 같은 형태가 궁금해졌습니다. 그래서 찾아보니 다음과 같이 정리할 수 있었습니다.

 

Array

JavaScript에서 Array는 배열을 나타내는 내장 객체입니다. 배열은 여러 항목을 저장할 수 있는 목록과 같은 데이터 구조입니다. 예를 들면 var fruits = ['apple', 'banana', 'cherry'];과 같이 배열을 생성할 수 있습니다.

 

prototype

JavaScript는 프로토타입 기반의 언어입니다. 모든 객체는 프로토타입이라는 다른 객체에 연결됩니다. prototype은 객체지향 상속과 메소드 및 속성을 공유하는 데 사용되는 메커니즘입니다.

예를 들어, JavaScript에서 모든 배열 (Array 객체의 인스턴스)는 Array.prototype을 그들의 프로토타입으로 가집니다. 이것은 모든 배열이 Array.prototype에 정의된 메소드와 속성에 접근할 수 있다는 것을 의미합니다.

 

reduce()

reduce()는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 단일 출력 값 (즉, 축소된 값)을 반환하는 Array.prototype의 메소드입니다.

---

사실 위의 내용만으로는 잘 이해가 가지 않아서 조금 더 찾아보았습니다.

 

자바스크립트의 모든 객체는 다른 객체에 연결된 "프로토타입"을 가집니다. 이 연결된 객체를 통해 메소드와 속성을 "상속"받습니다. 이 프로토타입 체인의 끝에는 대개 null이 위치합니다.

배열의 프로토타입에 대한 이야기를 할 때, 우리는 사실 Array.prototype 객체를 가리키는 말을 합니다. 이 Array.prototype 객체는 배열과 관련된 모든 메소드와 속성을 포함하고 있습니다. 예를 들어, .map(), .filter(), .reduce() 등의 메소드는 모두 이 Array.prototype에 정의되어 있습니다.

그래서, 만약 당신이 배열에 대한 메소드를 사용하려고 할 때 (예: myArray.map(...)) 자바스크립트는 다음과 같은 과정을 거칩니다

 

1. myArray에 직접 map 메소드가 있는지 확인합니다.
2. 없다면, myArray의 프로토타입 (Array.prototype)을 확인하여 map 메소드가 있는지 확인합니다.
3. Array.prototype에 map 메소드가 있다면 그것을 실행합니다.

 

이런 방식으로, 모든 배열은 Array.prototype에 정의된 메소드와 속성을 사용할 수 있게 됩니다.

 

---

꼬리에 꼬리를 무는 궁금증이 생겼습니다. 만약 myArray에 직접 map 메소드가 있는 경우는 어떤 경우인지 말이죠. 다음과 같은 예제로 설명할 수 있다고 합니다.

 

let myArray = [1, 2, 3];

// myArray에 직접 map 메소드 추가
myArray.map = function() {
    return 'This is a custom map function!';
};

console.log(myArray.map()); // 'This is a custom map function!'

 

궁금증이 풀렸습니다.