이 문서는 Google Cloud Translation API를 사용해 자동 번역되었습니다.
어떤 문서는 원문을 읽는게 나을 수도 있습니다.
함수 구성은 더 읽기 쉽고 유지 관리 가능한 코드로 이어질 수 있는 프로그램을 구성하는 강력한 기술입니다. JavaScript에는 함수 구성을 달성하는 여러 가지 방법이 있으며 각각 고유한 장단점이 있습니다.
이 게시물에서는 JavaScript에서 함수 구성을 위한 네 가지 기술을 살펴보겠습니다.
함수 연결은 각 함수가 체인의 다음 함수를 반환하도록 하여 함수를 구성하는 기술입니다. 이는 .
(점) 연산자를 사용하여 JavaScript에서 수행할 수 있습니다.
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
function multiply(x, y) {
return x * y;
}
function divide(x, y) {
return x / y;
}
// Function chaining
const result1 = add(1, 2)
.subtract(3)
.multiply(4)
.divide(5);
console.log(result1); // -> 0.6
위의 예에는 add
, subtract
, multiply
및 divide
의 네 가지 기능 체인이 있습니다. 체인의 각 함수는 이전 함수의 출력을 입력으로 사용합니다.
함수 연결은 코드를 구조화하는 편리한 방법일 수 있지만 읽고 유지하기 어려운 코드로 이어질 수도 있습니다. 특히 함수가 어떤 순서로 실행될지 알기 어려울 수 있으며 함수를 연결하는 것을 잊음으로써 버그를 도입하기 쉬울 수 있습니다.
함수 파이프라인은 함수 체인과 비슷하지만 각 함수가 파이프라인의 다음 함수를 반환하는 대신 자체 인수를 사용하여 파이프라인의 다음 함수를 호출한 결과를 반환합니다.
JavaScript에서 함수 파이프라인은 .
(점) 연산자와 Function.prototype.bind
메서드를 사용하여 구현할 수 있습니다.
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
function multiply(x, y) {
return x * y;
}
function divide(x, y) {
return x / y;
}
// Function pipelines
const result2 = add.bind(null, 1, 2)
.subtract.bind(null, 3)
.multiply.bind(null, 4)
.divide.bind(null, 5);
console.log(result2); // -> 0.6
위의 예에는 add
, subtract
, multiply
및 divide
의 네 가지 함수로 구성된 파이프라인이 있습니다. 파이프라인의 각 함수는 자체 인수를 사용하여 파이프라인의 다음 함수를 호출한 결과를 반환합니다.
함수 파이프라인은 함수 체인보다 읽고 이해하기 어려울 수 있지만 구성 및 재사용이 더 쉽다는 장점이 있습니다. 특히 기존 코드를 변경하지 않고도 새로운 기능을 파이프라인에 추가하기가 쉽습니다.
함수 트리는 트리와 같은 함수 구조를 만들어 함수를 구성하는 기술입니다. JavaScript에서 함수 트리는 .
(점) 연산자를 사용하여 구현할 수 있습니다.
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
function multiply(x, y) {
return x * y;
}
function divide(x, y) {
return x / y;
}
// Function trees
const tree = {
add,
subtract,
multiply,
divide
};
const result3 = tree.add(1, 2)
.subtract(3)
.multiply(4)
.divide(5);
console.log(result3); // -> 0.6
위의 예에는 add
, subtract
, multiply
및 divide
의 네 가지 기능 트리가 있습니다. 트리의 각 함수는 도트 연산자를 사용하여 액세스할 수 있습니다.
함수 트리는 함수 체인이나 파이프라인보다 읽고 이해하기 쉬울 수 있지만 구성하고 재사용하기는 더 어려울 수 있습니다. 특히 기존 코드를 변경하지 않고 트리에 새로운 기능을 추가하는 것은 어려울 수 있습니다.
함수 빌더는 일련의 함수를 인수로 받아 주어진 함수를 순서대로 호출하는 새로운 함수를 반환하는 빌더 함수를 생성하여 함수를 구성하는 기술입니다.
JavaScript에서 함수 빌더는 .
(점) 연산자와 Function.prototype.bind
메서드를 사용하여 구현할 수 있습니다.
function add(x, y) {
return x + y;
}
function subtract(x, y) {
return x - y;
}
function multiply(x, y) {
return x * y;
}
function divide(x, y) {
return x / y;
}
// Function builder
function builder(...funcs) {
return function (x) {
return funcs.reduce((acc, func) => func(acc), x);
};
}
const result4 = builder(
add.bind(null, 1, 2),
subtract.bind(null, 3),
multiply.bind(null, 4),
divide.bind(null, 5)
)();
console.log(result4); // -> 0.6
위의 예에서 임의의 수의 함수를 인수로 사용하고 주어진 함수를 순서대로 호출하는 새 함수를 반환하는 함수 빌더가 있습니다.
함수 빌더는 함수 체인이나 파이프라인보다 읽고 이해하기 어려울 수 있지만 구성 및 재사용이 더 쉽다는 장점이 있습니다. 특히 기존 코드를 변경하지 않고도 빌더에 새로운 기능을 쉽게 추가할 수 있습니다.
함수 구성은 프로그램을 구조화하는 강력한 기술이지만 장단점이 없는 것은 아닙니다. 특히 함수 합성은 코드를 읽고 이해하기 어렵게 만들 수 있습니다.
코드에서 함수 구성을 사용할지 여부를 결정할 때 장점과 단점을 비교하는 것이 중요합니다. 일반적으로 함수 구성은 더 모듈화되고 재사용 가능한 코드를 만드는 데 유용한 도구가 될 수 있지만 주의해서 사용해야 합니다.