프로토타입(prototype)의 모든 것 - 번외편 : MDN도 다 이유가 있었구나!

---

안녕하세요 이녀석입니다.😎

 

자바스크립트의 공부방법으로 공식문서인 MDN이나 W3Schools, 도서, 강의가 있을 겁니다.

저도 마찬가지였고 지금도 현재 진행형이죠.

 

공부하면서 느낀건데 MDN을 보면 번역본이다 보니 이해하기 조금 난해한 부분이 분명 있었고,

저뿐만 아닌 다른 분들도 그런 부분이 있으셨을 거예요.

 

그래서 제가 이해한 것들을 쉽게 기록을 해보려 합니다.

쉽게 하려다 보니 공식 문서나 여러 강의와 다른 부분이 있을 테지만 제 글을 읽고

분명 도움이 되리라 하는 마음에 포스팅을 작성해 나가도록 하겠습니다.

혹여 부족한 부분과 다른 좋은 내용을 언제든 알려주시면 감사히 배울 테니 언제든 알려주세요.

 

감사합니다.😎

---

 

<프로토타입(prototype)의 모든 것>은 총 3편과 번외편으로 나눠서 포스팅합니다.

• 프로토타입(prototype)을 느껴라
• 은행의 서비스 저장소
• 앱(App)으로 가능해진 은행 업무
• (번외) MDN도 다 이유가 있었구나!

---

(번외) MDN도 다 이유가 있었구나!

 

지난 포스팅을 마지막으로 <프로토타입(prototype)의 모든 것>의 본편이 마무리 되었습니다.👏👏👏

알고 있는 내용을 최대한 쉽게 하려다보니 오랜 시간이 걸렸고, 배우는 것과 알려주는 것은 정말 상이하다는 것을 깨달았습니다. 앞으로는 지금보다 더 발전한 제 모습과 코딩을 하시는 모든 분들의 발전을 바라봅니다.

 

---

 

오늘은 번외편입니다.

오늘 알려드릴 내용은 진짜 엄청 매우 왕 짧습니다.

근데 제가 처음 알았을 때, 과장 조금 보태서 전신에 소름이 돋았습니다😱

이 글을 보고 계신 여러 분들도 소름 돋았으면 좋겠네요. 시작하겠습니다🚀

 

 

배열 관련 메서드 중에서 가장 많이 사용하는 것 중에 하나가 push 메서드죠?

구글에서 mdn push라고 검색하면,

위 이미지처럼 Array.prototype.push()라고 결과가 나옵니다.

 

뭔가 느낌이 오지 않으시나요???

벌써 뭔가 소름이 슬금슬금 오고 있죠???😨

 

 

mdn화면에서 초록 형광색으로 칠한 두 메서드를 실행시켜 보겠습니다.

 

const fruits = ['apple', 'banana'];
console.log(fruits); // ['apple', 'banana']


fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']


fruits.isArray(); // Uncaught TypeError: fruits.isArray is not a function

 

 

fruits.push('orange');를 실행해보니 에러가 나지 않고 'orange'가 잘 추가가 됐습니다.

 

왜 에러가 나지 않는 거죠?

<본편>을 봤기 때문에 저희는 이미 이유를 알고 있습니다.(prototype chain으로 인해 사용할 수 있는 거죠)

 

근데,

fruits.isArray();는 왜 에러가 발생 할까요?

isArray 메서드는 prototype chain이 적용되지 않기 때문입니다.

 

mdn화면만 봐도 알 수 있습니다.

 

push는 Array.prototype에 정의가 되어 있기 때문에 모든 배열이 사용할 수 있는 것이고,

isArray는 Array에 정의 되어 있기 때문에 prototype chain이 적용이 되지 않아서 에러가 나는 것이죠.

 

 

위 이미지를 보시면 isArray는 Array에 있습니다.

함수도 객체니깐 가능한 거 아시죠?

 

그럼 isArray는 어떻게 사용 할까요?

 

Array.isArray(fruits); // true

 

생성자 함수에 정의 되어 있는 프로퍼티와 메서드는 위 코드 처럼 [ 생성자함수.프로퍼티 ] 로 사용하시면 됩니다.

 

mdn을 볼 때 

• 생성자.프로퍼티
• 생성자.메서드
• 생성자.prototype.프로퍼티
• 생성자.prototype.메서드

위 형태가 어떤 것을 뜻하는 건지 아시겠죠?

에러가 나와도 당황하지 마시고, 프로퍼티나 메서드를 검색 해보면 알 수 있습니다😀

 

---

 

이렇게 번외편도 마무리 하겠습니다!

다음에는 '객체의 참조'에 대해서 알아볼게요😎