자바스크립트는 최신 웹 및 모바일 애플리케이션을 구축하기 위한 사실상의 언어입니다. 간단한 웹 사이트부터 동적인 인터랙티브 앱에 이르기까지 다양한 프로젝트에 사용됩니다.
사용자가 좋아하고 인정할 만한 제품을 만들려면 기능뿐만 아니라 효율적이고 유지 관리가 쉬운 코드를 작성하는 것이 필수적입니다. 깔끔한 자바스크립트 코드는 취미로 만든 프로젝트든 복잡한 상업용 애플리케이션이든 상관없이 모든 웹 또는 모바일 앱의 성공을 위해 필수적입니다.
자바스크립트 함수의 장점은 무엇일까요?
함수는 모든 애플리케이션의 코드 작성에 필수적인 구성 요소입니다. 함수는 특정 작업을 수행하기 위해 호출할 수 있는 재사용 가능한 코드 덩어리를 정의합니다.
함수는 재사용성 외에도 매우 다양한 용도로 활용됩니다. 장기적으로는 코드베이스의 확장 및 유지 관리 프로세스를 간소화합니다. 자바스크립트의 함수를 생성하고 사용하면 개발 시간을 크게 절약할 수 있습니다.
다음은 프로젝트 코드의 품질을 크게 향상시킬 수 있는 몇 가지 유용한 JavaScript 함수입니다.
once
이 고차원 once 함수는 다른 함수를 래핑하여 한 번만 호출할 수 있도록 합니다. 이후 결과 함수를 호출하려는 시도는 자동으로 무시해야 합니다.
데이터베이스에서 데이터를 가져오기 위해 HTTP API 요청을 하고자 하는 상황을 생각해 보세요. 이벤트 리스너 함수에 대한 콜백으로 once 함수를 첨부하여 한 번만 트리거하고 그 이상은 트리거하지 않도록 할 수 있습니다.
이러한 함수를 정의하는 방법은 다음과 같습니다.
const once = (func) => {
let result;
let funcCalled = false;
return (...args) => {
if (!funcCalled) {
result = func(...args);
funcCalled = true;
}
return result;
};
};
once 함수는 함수를 인수로 받아 한 번만 호출할 수 있는 새 함수를 반환합니다. 새 함수를 처음 호출하면 주어진 인수를 사용하여 원래 함수를 실행하고 결과를 저장합니다.
이후 새 함수를 호출하면 원래 함수를 다시 실행하지 않고 저장된 결과를 반환합니다. 아래 구현을 살펴보세요:
// Define a function to fetch data from the DB
function getUserData() {
// ...
}
// get a version of the getUserData function that can only run once
const makeHTTPRequestOnlyOnce = once(getUserData);
const userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("click", makeHTTPRequestOnlyOnce);
한번 함수를 사용하면 사용자가 버튼을 여러 번 클릭하더라도 코드가 요청을 한 번만 전송하도록 보장할 수 있습니다. 이렇게 하면 중복 요청으로 인해 발생할 수 있는 성능 문제와 버그를 방지할 수 있습니다.
pipe
이 파이프 함수를 사용하면 여러 함수를 시퀀스로 연결할 수 있습니다. 시퀀스의 함수는 이전 함수의 결과를 입력으로 받고 시퀀스의 마지막 함수가 최종 결과를 계산합니다.
다음은 코드의 예입니다:
// Define the pipe function
const pipe = (...funcs) => {
return (arg) => {
funcs.forEach(function(func) {
arg = func(arg);
});
return arg;
}
}
// Define some functions
const addOne = (a) => a + 1;
const double = (x) => x * 2;
const square = (x) => x * x;
// Create a pipe with the functions
const myPipe = pipe(addOne, double, square);
// Test the pipe with an input value
console.log(myPipe(2)); // Output: 36
파이프 함수를 사용하면 복잡한 처리 로직을 간결하게 작성할 수 있어 코드의 가독성과 모듈성을 향상시킬 수 있습니다. 이렇게 하면 코드를 더 쉽게 이해할 수 있고 유지 관리도 더 쉬워집니다.
map
지도 함수는 내장된 JavaScript Array 클래스의 메서드입니다. 원래 배열의 각 요소에 콜백 함수를 적용하여 새 배열을 만듭니다.
입력 배열의 각 요소를 반복하여 콜백 함수에 입력으로 전달하고 각 결과를 새 배열에 삽입합니다.
여기서 중요한 점은 이 과정에서 원본 배열은 어떤 방식으로도 수정되지 않는다는 것입니다.
다음은 지도를 사용하는 방법의 예입니다:
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
// Output: [2, 4, 6, 8, 10]
이 예제에서 map 함수는 숫자 배열의 각 요소를 반복합니다. 각 요소에 2를 곱하고 결과를 새 배열로 반환합니다.
일반적으로 맵 함수는 자바스크립트에서 루프, 특히 무한 루프를 사용할 필요가 없습니다. 무한 루프는 상당한 계산 오버헤드를 유발하여 애플리케이션의 성능 문제를 일으킬 수 있습니다. 따라서 코드베이스가 더 간결해지고 오류가 덜 발생합니다.
선택
이 선택 함수를 사용하면 기존 개체에서 특정 속성을 선택적으로 추출하고 계산 결과로 해당 속성을 가진 새 개체를 생성할 수 있습니다.
예를 들어 애플리케이션의 보고서 기능을 생각해보면, 선택 기능을 활용하면 다양한 보고서에 포함할 속성을 명시적으로 지정하여 원하는 사용자 정보에 따라 다양한 보고서를 손쉽게 사용자 지정할 수 있습니다.
다음은 코드 예제입니다:
const pick = (object, ...keys) => {
return keys.reduce((result, key) => {
if (object.hasOwnProperty(key)) {
result[key] = object[key];
}
return result;
}, {});
};
선택 함수는 개체와 원하는 수의 키를 인수로 받습니다. 키는 선택하려는 속성을 나타냅니다. 그런 다음 일치하는 키가 있는 원래 개체의 속성만 포함된 새 개체를 반환합니다.
const user = {
name: 'Martin',
age: 30,
email: '[email protected]',
};
console.log(pick(user, 'name', 'age'));
// Output: { name: 'Martin', age: 30 }
기본적으로 선택 함수는 복잡한 필터링 로직을 단일 함수로 캡슐화하여 코드를 더 쉽게 이해하고 디버깅할 수 있습니다.
코드베이스 전체에서 선택 함수를 재사용하여 코드 중복을 줄일 수 있으므로 코드 재사용성을 높일 수도 있습니다.
zip
이 zip 함수는 각 입력 배열의 해당 요소와 일치하는 단일 튜플 배열로 배열을 결합합니다.
다음은 zip 함수의 구현 예제입니다:
function zip(...arrays) {
const maxLength = Math.min(...arrays.map(array => array.length));
return Array.from(
{ length: maxLength },
(_, index) => arrays.map(array => array[index])
);
};
const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const c = [true, false, true];
console.log(zip(a, b, c));
// Output: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]
zip 함수는 입력 배열을 받아 최장 길이를 계산합니다. 그런 다음 Array.from JavaScript 메서드를 사용하여 단일 배열을 생성하고 반환합니다. 이 새 배열에는 각 입력 배열의 요소가 포함됩니다.
여러 소스의 데이터를 즉시 결합해야 하는 경우 특히 유용하며, 코드베이스를 복잡하게 만드는 중복 코드를 작성할 필요가 없습니다.
코드에서 자바스크립트 함수로 작업하기
자바스크립트 함수는 크고 작은 코드베이스 모두에서 많은 프로그래밍 로직을 단순하고 간결하게 처리하는 방법을 제공하여 코드의 품질을 크게 향상시킵니다. 이러한 함수를 이해하고 사용하면 보다 효율적이고 가독성이 높으며 유지 관리가 용이한 애플리케이션을 작성할 수 있습니다.
좋은 코드를 작성하면 최종 사용자를 위한 특정 문제를 해결할 뿐만 아니라 수정하기 쉬운 방식으로 제품을 만들 수 있습니다.