DevLog

TypeScript에서 Python의 range()와 유사한 반복 사용법

Python에서는 일정 횟수를 반복할 때 range를 사용합니다. TypeScript에서 그와 유사한 반복을 사용해보겠습니다.

2022-12-17

2분 소요

#TypeScript
TypeScript에서 Python의 range()와 유사한 반복 사용법
Photo by  David Clode

range() in Python

Python에는 연속적인 숫자를 만들어내는 range 클래스가 있습니다. for 반복문 등에서 특정한 횟수를 반복할 때 자주 사용됩니다.

for i in range(5):
    print(i)

# output
# 0
# 1
# 2
# 3
# 4

일정한 횟수만 실행하고 싶을 때 유용한 기능이고, TypeScript에서도 유사하게 사용할 수 없을지 알아보게 되었습니다.

Array.from

Array.from은 반복 가능 객체나 유사 배열 객체를 얕게 복사해 새로운 Array 객체를 만드는 정적 메서드입니다. 중복없는 배열을 만들때도 유용합니다.

const duplicatedArray = ['Apple', 'Apple', 'Banana', 'Banana', 'Chocolate'];

Array.from(new Set(duplicatedArray));
// [ 'Apple', 'Banana', 'Chocolate' ]

Array.from은 선택적인 두번째 파라미터로 배열의 모든 요소에서 호출할 맵핑 함수를 가질 수 있어 forEachmap을 사용할 필요가 없습니다.

Array.from([1, 2, 3], (value) => value * 2);
// [ 2, 4, 6 ]

또한 Array.from는 찾고 있던 기능인 연속적인 숫자를 만드는 기능을 가지고 있습니다.

Array.from({ length: 5 });
// [ undefined, undefined, undefined, undefined, undefined ]

Array.from({ length: 5 }, (value, index) => index);
// [ 0, 1, 2, 3, 4 ]

Python의 range 클래스와 유사하게 시작, 끝, 간격을 설정하고 싶을때는 MDN의 예제를 참조하면 됩니다.

function range(start: number, stop: number, step: number): Array<number> {
  return Array.from({ length: (stop - start) / step + 1 }, (_, index) => start + index * step);
}

range(0, 5, 1);
// [ 0, 1, 2, 3, 4, 5 ]

range(2, 12, 3);
// [ 2, 5, 8, 11 ]

Summary

Python을 자주 사용하지는 않지만, 특정한 횟수만큼 반복을 해야할 때는 Python의 range가 떠오르곤 합니다.

이번에 유사한 기능을 찾을 수 있어 간결한 코드를 작성하는데 도움이 될 것 같습니다.

#TypeScript

다음 읽기

TypeScript React.js에서 useRef Hook 사용하기

2022-01-04

5분 소요

useRef Hook useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 출처 - Hooks API Reference - React React Hook은 React v16.8부터 추가된 기능으로 함수형 컴포넌트에서도 상태 관리 등을 할 수 있도록 합니다. 지금까지 useState나 useEffect Hook...

Fish shell의 유용한 단축키들

2022-12-25

2분 소요

Fish shell Fish shell은 유저 친화적인 상호작용 shell입니다. Fish shell은 자동 완성, 문법 강조, 웹 기반 설정 등 좋은 기능이 많이 있습니다. 또한 몇 가지 유용한 키보드 단축키가 있습니다. 그 일부에 대해 알아보도록 하겠습니다. Move to previous / next directory prevd: Alt + Left nextd: Alt + Right pwd # $HOME cd Downloads # ...