Javascript로 Python range 함수 구현하기

아래와 같이 python range 함수와 유사한 구현을 만들어 봅니다.

javascript

range(0, 5) // [0, 1, 2, 3, 4, 5]
range(3, 9, 3) // [3, 6, 9]
range(10, 50, 10) // [10, 20, 30, 40, 50]

파이썬으로 자주 사용하던 해당 함수를, 자바스크립트로 어떻게 구현할까요?

stackoverflow에도 구현 예제가 많지만, Arrays.from 두번째 인자를 활용하는 방법은 처음 봐서 소개합니다.

모질라의 스펙에 따르면, Arrays.from은 3개의 인자를 허용합니다.

반응형

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Array.from() - JavaScript | MDN

Array.from(arrayLike)

// Arrow function
Array.from(arrayLike, (element) => { /* … */ })
Array.from(arrayLike, (element, index) => { /* … */ })

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function (element) { /* … */ })
Array.from(arrayLike, function (element, index) { /* … */ })
Array.from(arrayLike, function (element) { /* … */ }, thisArg)
Array.from(arrayLike, function (element, index) { /* … */ }, thisArg)

첫번째 인자 : arraylike

• 배열로 변환할 이터러블 객체, arraylike 객체입니다.

두번째 인자 : mapFn (optional)

• 첫번째 인자 배열의 모든 아이템에 대해 ​​호출할 맵 함수입니다.
  • 두 가지 인자를 허용합니다.
    • element : 첫번째 객체 배열의 아이템 입니다.
    • index : 첫번째 객체 배열 아이템의 인덱스 입니다.
• 이 인자를 제공하면, 배열에 추가할 모든 값이 이 함수에 먼저 전달되며, mapFn의 반환 값이 배열에 추가됩니다.

세번째 인자 : thisArgs (optional)

• 두 번쨰 인자인 mapFn의 실행 컨텍스트로 사용할 객체입니다.

이를 감안하면 아래와 같이 구현이 가능합니다.

const range = (start, stop, step=1) => {
  return Array.from(
    { length: (stop - start) / step + 1 },
    (_, i) => start + i * step
  )
}

• Array.from()을 사용하여 지정된 길이의 배열(ArrayLike)을 생성하고, 두번째 인자 함수를 통해 생성된 값으로 배열을 채웁니다.
• 길이는 (stop - start) / step + 1로 계산되며 원하는 범위의 아이템 갯수를 나타냅니다.
• Array.from()에 전달된 함수는 start로 시작하여 i * step씩 증분하여 각 아이템을 생성합니다.
  • i는 현재 요소의 인덱스입니다.
  • _에는 undefined가 전달됩니다.

출처

https://bytes.dev/archives/157

Bytes #157 - SQLite on the Edge