다형성-part2

이번에는 다형성에 대해 알아볼게요!

이미 존재하는 filter, map 메소드

우리가 그동안 만들었던 세가지 함수(_filter, _each, _map)는 이미 자바스크립트에 존재하는 메소드들입니다.

먼저 _map 함수와 같은 기능을 하는 map이라는 메소드를 살펴보겠습니다.

1
2
3
4
5
console.log(
[1,2,3].map(function(val){
return val*2;
})
);

map은 Array라는 내장객체에 이미 존재하는 함수입니다.
배열에 map이라는 함수를 적용하고, val이라는 값을 받아 배열 순서대로 2를
곱하여 결과값을 리턴합니다.

이번에는 filter 메소드를 살펴보겠습니다.

1
2
3
4
5
console.log(
[1,2,3,4].filter(function(val){
return val % 2;
})
);

filter함수도 Array 객체안에 이미 존재하는 함수입니다.
이번에는 1부터 4까지 배열을 받아 2로 나누어 지지 않는 것들을 차례로 리턴해줍니다.

메소드를 따로 함수로 정의하는 이유

하지만 우리가 그동안 왜 이미있는 것들을 만들었는지 궁금하지 않나요?

그 이유는 이미존재하는 함수는 사실 함수가 아니라 Array객체의 메소드 입니다.

그렇기 떄문에 해당 instance가 아니면 사용할 수 없습니다.
즉, Array가 아닌 객체들에서는 사용할 수 없다는 것이죠.
그래서, 다형성을 지원하기 어려운 부분이 있습니다.

하지만,
함수가 기준이 되는 함수형 프로그래밍에서는
함수를 먼저 만들고,
그 함수에 맞는 데이터을 구성해서 함수에 적용하는 식으로 프로그래밍을 하게 됩니다.
이는 굉장히 유연하고 실용적인 형태라고 볼 수 있겠죠!

그래서

1
2
3
4
5
console.log(
document.querySelectorAll('*').map(function(node){
return node.nodeName;
})
);

위를 실행하게 되면
Uncaught TypeError: document.querySelectorAll(…).map is not a function
이와같이 map이라는 메소드가 실행되지 않는 것을 볼 수 있습니다.

실제로,

1
alert(document.querySelectorAll('*'));

를 해보면 배열과 같은 형태를 갖추고 있는 것을 확인할 수 있습니다.

하지만, 이는 array_like 로 실제 Array객체가 아닌 NodeList라는 프로토타입을 가지는걸 확인하실수있습니다.
그렇기 때문에 Array객체의 메소드인 map이 실행되지 않는 다는 뜻이죠.

반면에 , 우리가 만들었던 _map함수를 이용하면

1
2
3
4
5
console.log(
_map(document.querySelectorAll('*'), function(node){
return node.nodeName;
})
);

결과값

1
// (7) ["HTML", "HEAD", "META", "TITLE", "BODY", "SCRIPT", "SCRIPT"]

위와 같이 제대로 된 결과를 얻을 수 있습니다.

외부 다형성과 내부 다형성

1
2
3
_map([1,2,3,4], function(v){
return v + 10;
});

위에서 function(v){return v+10} 부분을 콜백함수라고 부르기도 합니다.
함수형프로그래밍에서는 두번째 함수가 어떤 역할을 하는 함수인지에 따라서 다양한 이름을 가지는 것이 중요합니다.
콜백함수는 무조건 어떤일을 다~ 수행된 다음에 디시 돌려주는 것을 뜻하는 데요.

이전에 우리가 만들었던 두번째 함수인 predi, iter, mapper 처럼 각각의 역할이 다른 함수들을 다르게 이름짓는 것이 좋습니다
이런 두번쨰 함수들을 보조함수라고 부르는데 ,

_map, _each, _filter가 외부에서 큰 틀을 잡았다면(외부 다형성) ,

이 보조함수들은 실제로 개발자가 원하는 일들을 수행시키기 위해 정의하는 부분(내부 다형성)이라고 보면 되겠습니다.

Share