자바스크립트의 추상화: 함수와 고차 함수로 코드 간소화하기

프로그래밍에서 추상화란 복잡하고 불필요한 세부 사항을 숨겨 코드를 더 간단하고 읽기 쉽고 유지 관리하기 쉽게 만드는 프로세스이다. 추상화를 달성하는 한 가지 방법은 관련 작업을 그룹화하고 재사용 가능한 코드 블록을 제공할 수 있는 함수를 사용하는 것이다. JavaScript에서는 맵, 축소, 필터와 같은 고차 함수를 활용하여 일반적인 연산을 추상화하고 코드를 더욱 간소화함으로써 한 단계 더 나아갈 수 있다.

이 글에서 예를 들어 설명할 코드의 시작은 다음과 같다.

const lstOfStrings = ['6', '7', '8'];
let sum = 0;
for (let i = 0; i < lstOfStrings.length; i++) {
  sum += parseInt(lstOfStrings[i]);
}
console.log(sum); // Output: 21

그다지 예쁜 코드라고는 볼 수 없다. 추상화 개념을 하나씩 적용해 가면서 개선해볼 것이다.

함수를 사용한 추상화

일부 로직을 별도의 함수로 추상화하여 코드를 개선한다. 문자열 목록을 받아 정수 목록으로 변환하는 함수와 숫자 목록을 합산하는 함수를 만든다. 문제를 더 작고 재사용 가능한 함수로 나누면 코드가 더 모듈화되고 읽고 이해하기 쉬워진다.

function stringToInt(str) {
  return parseInt(str);
}

function sumList(lst) {
  let sum = 0;
  for (let i = 0; i < lst.length; i++) {
    sum += stringToInt(lst[i]);
  }
  return sum;
}

const lstOfStrings = ['6', '7', '8'];
const result = sumList(lstOfStrings);
console.log(result); // Output: 21

문자열을 정수로 변환하는 함수와 정수 목록의 합계를 계산하는 함수를 별도로 만들어 코드를 보다 모듈화하고 읽기 쉽게 만들었다.

중첩 함수를 사용하여 문자열을 정수로 변환하는 것을 캡슐화하면 코드를 더욱 개선할 수 있다.

function sumList(lst) {
  function stringToInt(str) {
    return parseInt(str);
  }

  let sum = 0;
  for (let i = 0; i < lst.length; i++) {
    sum += stringToInt(lst[i]);
  }
  return sum;
}

const lstOfStrings = ['6', '7', '8'];
const result = sumList(lstOfStrings);
console.log(result); // Output: 21

stringToInt 함수를 sumList 안에 중첩시킴으로써 stringToInt가 sumList 내에서만 사용되도록 명확하게 만들 수 있다.

고차(Higher-Order) 함수 — map, reduce및 filter

JavaScript의 고차 함수인 map, reduce, filter를 이용해서 코드를 더 많이 추상화 해 보자. 문자열을 정수로 변환하는 함수를 맵과 화살표 함수를 사용하여 각 문자열을 정수로 변환하는 한 줄 함수로 대체한다. 그런 다음 합계 함수를 reduce와 숫자 목록을 더하는 또 다른 화살표 함수로 대체한다.

function sumList(lst) {
  const nums = lst.map(str => parseInt(str));
  const sum = nums.reduce((acc, num) => acc + num);
  return sum;
}

const lstOfStrings = ['6', '7', '8'];
const result = sumList(lstOfStrings);
console.log(result); // Output: 21

map을 사용하여 각 문자열을 정수로 변환하고 reduce를 통하여 정수의 배열을 합산함으로써 코드를 단 몇 줄로 줄일 수 있다.

마무리

추상화는 코드를 보다 모듈화되고 재사용 가능하며 이해하기 쉽게 만드는 프로그래밍의 강력한 도구다. 복잡한 작업을 더 작고 관리하기 쉬운 함수로 나누고 map, reduce, filter와 같은 고차 함수를 활용하면 코드를 단순화하고 더 우아하게 만들 수 있다. 자바스크립트에서는 표현력이 풍부하고 읽기 쉬운 방식으로 함수형 코드를 작성할 수 있기 때문에 이 장점을 더 잘 살릴 수 있다.