자바스크립트의 배열 타입의 값이 여러 개인 경우 만약 5개, 10개 등으로 최대 개수를 고정하고 싶을 수 있습니다. 이 때 어떻게 하면 되는지 생각해봅니다. 예를들어 다음과 같습니다.

Before : [1, 2, 3, 4, 5]

// 3개만 남기고 싶을 때
After : [1, 2, 3]

# 자바스크립트 배열의 최대 길이 설정하는 방법

자바스크립트의 배열은 여러 개의 값들을 가지는데요 길이를 처음 선언 한 이 후에 줄이거나 늘리는 것 역시 가능하죠. 아래에서는 lodash와 순수 자바스크립트를 사용하여 배열의 길이를 조절하거나 최대 개수를 설정하는 방법입니다.

먼저 배열을 생성할 때 원하는 길이의 배열을 만들어봅니다. 아래의 myArray는 5개의 배열 길이를 가지도록 생성하였습니다.

const maxSize = 5;
const myArray = new Array(maxSize );
console.log(myArray.length);

// Outputs
5

간단하게 5개의 값을 가진 배열을 생성하였습니다. 이제 위 배열을 최대 길이가 3개인 배열로 변경하려고 합니다. 두 가지 방법 중 하나는 lodash 라이브러리의 take() 메서드를 사용하는 방법입니다.

! lodash take() 메서드

배열에 사용하는 take() 메서드는 배열의 최대 길이를 설정해 해당 크기 이하로 반환하는 메서드입니다. 간단한 예를들어 아래의 1부터 10까지의 값을 가지는 배열에서 3개 크기 만큼의 배열을 새로 얻는 방법으로 take()를 사용할 수 있습니다.

import _ from 'lodash';

const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const myArrayFive = _.take(myArray, 5);
console.log(limitedArray.length);

// Outputs
[1, 2, 3, 4, 5]

배열의 크기가 5인 새로운 배열 myArraFive가 take()를 사용하여 간단하게 만들어졌습니다.

만약 배열이 take()에 사용한 길이가 보다 더 작은 경우는 어떻게 될까요? 이 경우 원래 배열의 크기가 더 작기 때문에 동일하게 반환되며 더 늘어나거나 하지 않습니다.

const myArray = [1, 2, 3];
const myArrayFive = _.take(myArray, 5);
console.log(limitedArray.length);

// Outputs
[1, 2, 3]

위 예제에서는 take()를 사용한 방법을 알아봤습니다. 만약 자바스크립트를 사용하는 경우 아래와 같이 작성할 수 있습니다.

! 순수 자바스크립트 사용으로 배열의 최대 길이 정하기

배열의 최대 길이를 설정하는 방법으로 length 프로퍼티를 사용하는 방법이 있습니다. 이 경우 위 예제를 아래와 같이 사용할 수 있겠습니다.

let myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
myArray.length = 5
console.log(myArray.length);

// Outputs
[1, 2, 3, 4, 5]

length를 사용하는 경우 새로운 배열 생성이 아닌 기존 배열의 길이가 변경되는 차이점이 있습니다.

만약 기존 배열의 길이가 더 작은 경우는 어떻게 될까요? 위 예제에서 변경된 [1, 2, 3, 4, 5]에 length 10을 사용한 경우입니다.

let myArray = [1, 2, 3, 4, 5];
myArray.length = 10
console.log(myArray.length);

// Outputs
[1, 2, 3, 4, 5, undefined, undefined, undefined, undefined, undefined]

이번에도 take()와는 다른 결과입니다. 배열에 빈 값들이 생성되어 배열 10크기로 변경된 것을 볼 수 있습니다.

만약 Falsy 값을 제거하려면 위에서 아래처럼 코드를 추가할 수 있겠습니다.

let myArray = [1, 2, 3, 4, 5, undefined, undefined, undefined, undefined, undefined];
myArray.filter(i => i);

// Outputs
[1, 2, 3, 4, 5]

여기까지 자바스크립트 배열의 최대 길이를 설정하는 두 가지 방법으로 lodash 라이브러리를 사용한 방법과 순수 자바스크립트를 사용한 방법을 간략하게 알아봤습니다.