[책] 자바스크립트 코드 레시피 278 - 240일차

배열과 객체에 독자적인 메소드 추가하기

• 배열에 셔플 함수를 추가하고 싶을 때
• 객체에 JSON 변환 메소드를 추가하고 싶을 때

구문

객체.prototype[심볼] = function() {} // 객체에 독자적인 메소드 추가
객체[심볼]() // 독자적인 메소드 실행

설명

Array, Date, Object 등 기존의 객체(빌트인 객체)에 독자적인 메소드를 추가하고 싶을 때는 다음과 같이 프로토타입과 심볼을 사용합니다.

// 'myMethod' 이름의 심볼 생성
const myMethod = Symbol();

// 독자적인 메소드 추가
Array.prototype[myMethod] = function() {
  console.log('독자적인 메소드입니다.');
}

// 독자적으로 추가한 메소드 실행
const array = [1, 2, 3];
array[myMethod]();

배열에 셔플용 메소드를 추가하는 샘플을 확인합니다.

---

프로토타입은 객체(Object)에 멤버(멤버 변수, 멤버 함수)를 추가하는 속성이다. Array, Date, Function은 모두 Object를 계승하는 객체(빌트인 객체)이므로 모든 객체에 프로토타입이 존재합니다.

console.dir()을 사용해 프로토타입의 내부를 확인하면 다음과 같은 멤버의 확인이 가능합니다.

• 문자열(string 객체)dml length나 indexOf() 등 모든 멤버
• 배열(Array 객체)의 map()이나 filter() 등 모든 멤버
• Date 객체의 getDate()나 getFullYear() 등 모든 멤버

---

응용

프로토타입에 멤버를 추가하면 '객체.멤버명' 접근으로 사용할 수 있습니다.

Array.prototype.myMethod = function(isCount) {
  console.log('안녕하세요');
  for (let i = 0; i < arrayArea.length; i++) {
    console.log(arrayArea[i]);
  }

  // 숫자 뽑아내기 myMethod() 응용
  if (arrayArea[isCount - 1] === undefined) {
    console.log('입력하신 숫자가 없습니다.');
  } else {
    console.log(arrayArea[isCount - 1] + '번 입니다.');
  }
}
const arrayArea = [1, 2, 3];
array.myMethod(2);

사용된 멤버명을 재사용해 정의하면 덮어쓰기 작업이 이루어집니다.