인자의 갯수가 2개, 3개... 되게 많은 수의 인자를 받는 함수를 본적이 있을 것이다. 이런 데이터들을 하나의 데이터 구조로 묶어서 관리하고, 심지어 동작하는 함수를 이 객체에 실어 보낼 수도 있다.
before
const station = {
name: "ZB1",
readings: [
{
temp: 47,
time: "2016-11-10 09:10",
},
{
temp: 53,
time: "2016-11-10 09:20",
},
{
temp: 58,
time: "2016-11-10 09:30",
},
{
temp: 53,
time: "2016-11-10 09:40",
},
{
temp: 51,
time: "2016-11-10 09:50",
},
],
};
const operatingPlan = {
temperatureFloor: 49,
temperatureCeiling: 53,
};
// min, max와 같이 관련되어 있는 매개변수를 하나의 데이터 구조로 묶어서 넘겨준다.
// 이렇게 하면 이 데티어 구조를 활용하는 동작을 함수로도 추출할 수 있다.
function readingsOutsideRange(station, min, max) {
return station.readings.filter((r) => r.temp < min || r.temp > max);
}
alerts = readingsOutsideRange(
station,
operatingPlan.temperatureFloor,
operatingPlan.temperatureCeiling
);
after
const station = {
name: "ZB1",
readings: [
{
temp: 47,
time: "2016-11-10 09:10",
},
{
temp: 53,
time: "2016-11-10 09:20",
},
{
temp: 58,
time: "2016-11-10 09:30",
},
{
temp: 53,
time: "2016-11-10 09:40",
},
{
temp: 51,
time: "2016-11-10 09:50",
},
],
};
const operatingPlan = {
temperatureFloor: 49,
temperatureCeiling: 53,
};
// 범위라는 개념을 하나의 클래스로 묶어 표현한다.
class NumberRange {
constructor(min, max) {
this._data = { min, max };
}
get min() {
return this._data.min;
}
get max() {
return this._data.max;
}
// 이렇게 range에서 추출할 수 있는 동작을 함수로 선언한다.
contains(arg) {
return this.min <= arg && arg <= this.max;
}
}
const range = new NumberRange(
operatingPlan.temperatureFloor,
operatingPlan.temperatureCeiling
);
function readingsOutsideRange(station, range) {
return station.readings.filter((r) => !range.contains(r.temp));
}
alerts = readingsOutsideRange(station, range);
이 챕터에서의 핵심은 함수로 전달되는 관련된 인자들을 하나의 객체로 묶어주는 것이다. 이 과정에서 공통적으로 사용되는 행동들을 메서드로 관리해주면 훨씬더 간결하게 표현할 수 있다.
보통 라이브러리 함수들을 사용할때 이를 많이 볼 수 있다. 인자에 객체 형태로 다양한 옵션값들을 보내주는데 매개변수를 객체로 표현하는 하나의 예로 볼 수 있을 것이다.