JavaScript에서 배열의 처음 n개 요소를 가져오는 방법은 여러 가지가 있지만, underscore.js 라이브러리에서 제공하는 _.first() 함수를 사용하면 아주 간단하게 처리할 수 있습니다. 이 함수는 배열을 다룰 때 널리 사용되는 대표적인 유틸리티 메서드입니다.
문법
_.first(array, n);
이 함수는 배열과 숫자 두 개의 매개변수를 받습니다. 두 번째 매개변수로 전달한 숫자만큼 배열의 앞쪽 요소들이 결과로 반환됩니다.
예제 1
다음 예제에서는 배열만 인수로 전달했습니다. 반환할 개수를 지정하지 않으면 기본적으로 첫 번째 요소, 즉 인덱스 0에 해당하는 값 하나만 출력됩니다.
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<script>
var res = JSON.stringify(_.first([
{name: 'Dhoni', age: 38},
{name: 'kohli', age: 35},
{name: 'Rohit', age: 32},
{name: 'Dhawan', age: 27}
]));
document.write(res);
</script>
</body>
</html>출력
{"name":"Dhoni","age":38}예제 2
다음 예제에서는 배열과 함께 숫자 2를 전달했습니다. 따라서 배열의 처음 두 개 요소가 아래 출력 결과처럼 반환됩니다.
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
</head>
<body>
<script>
var res = JSON.stringify(_.first([
{name: 'Dhoni', age: 38},
{name: 'kohli', age: 35},
{name: 'Rohit', age: 32},
{name: 'Dhawan', age: 27}
], 2));
document.write(res);
</script>
</body>
</html>출력
[{"name":"Dhoni","age":38},{"name":"kohli","age":35}]참고: 라이브러리 없이 구현하기
별도의 라이브러리를 사용하지 않고 순수 JavaScript만으로 같은 결과를 얻고 싶다면 slice() 메서드를 활용할 수 있습니다. slice(0, n)은 인덱스 0부터 n-1까지의 요소를 새로운 배열로 반환합니다.
const arr = [
{name: 'Dhoni', age: 38},
{name: 'kohli', age: 35},
{name: 'Rohit', age: 32},
{name: 'Dhawan', age: 27}
];
console.log(arr.slice(0, 2));
// [{name: 'Dhoni', age: 38}, {name: 'kohli', age: 35}]이처럼 slice()는 원본 배열을 변경하지 않으면서 원하는 개수의 요소를 안전하게 추출할 수 있는 표준 방법입니다. 프로젝트에서 이미 underscore.js나 lodash를 사용 중이라면 _.first()가 더 간결한 선택이 될 수 있습니다.