[일일코딩] 기본 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

Advertisements

Javascript Prototype

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

아기_토끼

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

Javascript Prototype

#Javascript Prototype

##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