JavaScript로 범위(Range) 생성하는 3가지 방법

다양한 함수를 작성하다 보면 데이터를 다루기 위해 범위(range)를 만들어야 하는 경우가 자주 있습니다. 범위란 시작 값과 끝 값을 가진 배열 또는 객체 형태의 데이터를 의미합니다.

많은 프로그래밍 언어는 범위를 생성하는 내장 메서드를 제공합니다. 예를 들어 루비(Ruby)의 to_a가 대표적입니다:

('a'..'e').to_a => ["a", "b", "c", "d", "e"]

반면 JavaScript에는 이를 위한 전용 내장 메서드가 없지만, 범위를 만들 수 있는 방법은 여러 가지가 있습니다. 이번 글에서는 그중 세 가지 방법을 소개합니다.

_.range() – Lodash 활용하기

숫자 범위를 가장 빠르게 만들고 싶다면 Lodash의 _.range() 유틸리티 메서드를 사용하는 것이 좋습니다.

이 메서드는 배열을 반환하며 세 개의 인수를 받습니다. 첫 번째는 범위의 시작(start), 두 번째는 범위의 끝(end), 세 번째는 증감 단계(step), 즉 더하거나 빼는 값입니다.

_.range(-2);
// => [0, -1]
 
_.range(1, 3);
// => [1, 2]
 
_.range(1, 10, 4);
// => [1, 5, 9]

인수를 하나만 전달하면 지정한 숫자까지의 범위가 생성된다는 점에 유의하세요. 또한 Lodash는 별도 설치가 필요한 JavaScript 라이브러리라는 사실도 잊지 마세요!

직접 range() 함수 만들기

라이브러리 도입에 따른 오버헤드를 줄이고 싶다면 숫자 범위 함수를 직접 작성할 수 있습니다. 의외로 만들기가 아주 간단합니다.

function range(start, end, step = 1){
  if(start === end) return [start];
  const range = [];
  for(let i = start; i <= end; i += step){
     range.push(i);
  }
  
  return range;
}

range(1, 10, 4)
//  => [1, 5, 9]
range(1, 10)
// => [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]

코드가 워낙 간단하기 때문에 단 하나의 함수를 위해 Lodash 같은 라이브러리를 불러올 필요 없이 직접 구현해 사용할 수 있습니다!

숫자가 아닌 범위 함수 만들기

그렇다면 문자처럼 숫자가 아닌 값의 범위는 어떻게 만들 수 있을까요? JavaScript로도 충분히 구현할 수 있습니다.

여기서는 charCodeAt() 메서드로 문자를 숫자(문자 코드)로 변환한 뒤, 이 값을 증가시키면서 String.fromCharCode()를 사용해 다시 문자로 변환하여 배열에 추가하는 방식을 사용합니다. String.fromCharCode()는 문자 코드에 해당하는 문자를 반환하는 메서드입니다.

function charRange(start, stop) {
  const range = [];
  const end = stop.charCodeAt(0)
  for (let i = start.charCodeAt(0); i <= end; i++){
    range.push(String.fromCharCode(i));
  }
  return range;
};

charRange('A','F')
// => [ 'A', 'B', 'C', 'D', 'E', 'F' ]

생각보다 훨씬 쉽죠?

마무리

이제 JavaScript만으로도 얼마나 쉽게 범위를 생성할 수 있는지 알게 되었습니다. 실무에서 유용하게 활용할 수 있으니 위 함수들을 잘 저장해 두었다가 필요할 때 꺼내 써 보세요!