[일일코딩] 기본 function에 prototype으로 빌트인 만들기

Daily Codewars #13

Question

http://www.codewars.com/kata/525d50d2037b7acd6e000534/train/javascript

This kata is designed to test your ability to extend the functionality of built-in ruby classes. 
In this case, we want you to extend the built-in Array class with the following methods:
square(), cube(), average(), sum(), even() and odd().

var numbers = [1, 2, 3, 4, 5];
numbers.square(); // must return [1, 4, 9, 16, 25]
numbers.cube(); // must return [1, 8, 27, 64, 125]
numbers.average(); // must return 3
numbers.sum(); // must return 15
numbers.even(); // must return [2, 4]
numbers.odd(); // must return [1, 3, 5]

My Answer

Array.prototype.square = function() {
    return this.map(function(item) {
        return Math.pow(item, 2);
    });
}

Array.prototype.cube = function() {
    return this.map(function(item) {
        return Math.pow(item, 3);
    });
}

Array.prototype.average = function() {
    if(this.length==0){return NaN}
    return this.reduce(function(p, c) {return p+c;}) / this.length;
}

Array.prototype.sum = function() {
    if(this.length==0){return 0}
    return this.reduce(function(p, c) {
        return p+c;
    });
}

Array.prototype.even = function() {
    return this.filter(function(item) {
        return item%2==0;
    });
}

Array.prototype.odd = function() {
    return this.filter(function(item) {
        return item%2==1;
    });
}

reduce에 빈 배열이 넘어왔을 때의 코드를 따로 처리했는데

Array.prototype.average = function () { return this.sum() / this.length; }
Array.prototype.sum     = function () { return this.reduce(function(a, b) { return a + b; }, 0); }

사실 이렇게 두번째 인자로 처리만 해줘도 되었다.

Refer

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Prototype기반 프로그래밍?

객체의 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는 프로그래밍 기법.
이렇게 만들어진 객체 역시 자기 자신의 프로토타입을 갖는다.
이런 구조로 객체를 확장하는 방식이 Prototype기반 프로그래밍
JS에선 class가 존재하지 않으므로 객체의 원형인 prototype을 이용한 클로닝과 객체특성을 확장해나가는 방식을 통해 새로운 객체를 생성.
JS 프로토타입 객체의 확장은 옵져버패턴 따른다.

자바스크립트의 Prototype

var foo = {name: "lezhin"};
foo.prototype.a = "comics";
console.log(foo.a); //syntax error

왜 syntax error일까?
JS에서 사용되는 프로토타입이란 용어는 크게 두가지로 나뉜다.
- Prototype Object
  - Prototype Property가 가리키고 있는 것
- Prototype Link
  - 자기 자신을 만들어낸 객체의 원형
JS의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다.
이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이라 한다.
- JS의 모든 객체는 Object객체의 프로토타입을 기반으로 확장되었기 때문에 이 연결의 끝은 Object객체의 프로토타입 Object이다.
즉 어떤 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라 한다.

reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
http://insanehong.kr/post/javascript-prototype/
http://run2you.tistory.com/12

안녕하세요, 수련중인 개발자입니다.
피드백이나 오류 정정을 해주시면 감사히 받겠습니다!

##Prototype기반 프로그래밍?
– 객체의 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는 프로그래밍 기법.
– 이렇게 만들어진 객체 역시 자기 자신의 프로토타입을 갖는다.
– 이런 구조로 객체를 확장하는 방식이 Prototype기반 프로그래밍
– JS에선 class가 존재하지 않으므로 객체의 원형인 prototype을 이용한 클로닝과 객체특성을 확장해나가는 방식을 통해 새로운 객체를 생성.
– JS 프로토타입 객체의 확장은 옵져버패턴 따른다.

##자바스크립트의 Prototype
“`javascript
var foo = {name: “lezhin”};
foo.prototype.a = “comics”;
console.log(foo.a); //syntax error
“`
– 왜 syntax error일까?
– JS에서 사용되는 프로토타입이란 용어는 크게 두가지로 나뉜다.
+ **Prototype Object**
* Prototype Property가 가리키고 있는 것
+ **Prototype Link**
* 자기 자신을 만들어낸 객체의 원형
– JS의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다.
– 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이라 한다.
+ JS의 모든 객체는 Object객체의 프로토타입을 기반으로 확장되었기 때문에 이 연결의 끝은 Object객체의 프로토타입 Object이다.
– **즉 어떤 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라 한다.**

##reference
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
http://insanehong.kr/post/javascript-prototype/
http://run2you.tistory.com/12

Tag: prototype