JavaScript 개발을 하다 보면 배열의 일부분, 즉 전체 길이의 특정 퍼센트에 해당하는 요소들만 필요한 경우가 종종 있습니다. 이번 글에서는 배열과 0부터 100 사이의 숫자 n을 인자로 받아, 해당 배열의 처음 n%에 해당하는 부분을 반환하는 함수를 작성해 보겠습니다.
요구 사항 정리
함수의 동작 방식은 다음과 같습니다.
- 두 번째 인자가 0이면 빈 배열을 반환합니다.
- 두 번째 인자가 100이면 배열 전체를 반환합니다.
- 두 번째 인자가 50이면 배열의 절반을 반환합니다.
- 두 번째 인자가 제공되지 않으면 기본값으로 50을 사용합니다.
구현 코드
배열의 길이에 퍼센트 값을 곱한 뒤 100으로 나누고, Math.floor()로 소수점 이하를 버려 필요한 요소 개수를 계산합니다. 그다음 slice() 메서드를 사용해 해당 개수만큼의 요소를 잘라내면 됩니다.
const numbers = [3,6,8,6,8,4,26,8,7,4,23,65,87,98,54,32,57,87];
const byPercent = (arr, n = 50) => {
const { length } = arr;
const requiredLength = Math.floor((length * n) / 100);
return arr.slice(0, requiredLength);
};
console.log(byPercent(numbers));
console.log(byPercent(numbers, 84));
console.log(byPercent(numbers, 34));코드 설명
byPercent 함수는 두 가지 핵심 단계로 구성됩니다.
- 필요한 길이 계산:
(length * n) / 100공식으로 배열 길이의 n%를 구하고,Math.floor()를 적용해 정수로 만듭니다. 예를 들어 길이가 18인 배열에 84%를 적용하면Math.floor(15.12)= 15개의 요소가 됩니다. - 배열 자르기:
slice(0, requiredLength)는 원본 배열을 변경하지 않고(index 0부터 requiredLength 직전까지) 새로운 배열을 반환하므로 안전하게 사용할 수 있습니다.
실행 결과
위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.
[
3, 6, 8, 6, 8,
4, 26, 8, 7
]
[
3, 6, 8, 6, 8, 4,
26, 8, 7, 4, 23, 65,
87, 98, 54
]
[ 3, 6, 8, 6, 8, 4 ]정리
기본 매개변수(default parameter)와 Math.floor(), slice()만 활용하면 몇 줄의 코드로 배열의 원하는 퍼센트 구간을 손쉽게 추출할 수 있습니다. 페이지네이션, 데이터 샘플링, 미리보기 목록 생성 등 다양한 상황에서 유용하게 응용할 수 있는 패턴이니 꼭 기억해 두세요.