JavaScript에서 배열을 만드는 것은 기본적인 작업이지만 숙련된 개발자라도 간과할 수 있는 몇 가지 미묘한 차이와 문제가 있습니다. 기본 사항을 자세히 살펴보고 깨달을 수 있는 배열 생성 및 조작의 몇 가지 흥미로운 측면을 살펴보겠습니다.

기본 배열 생성

배열을 만드는 가장 간단한 방법은 배열 리터럴을 사용하는 것입니다.

let arr = [];

그런 다음 루프를 사용하여 이 배열을 채울 수 있습니다.

for (let i = 0; i 



이것은 [0, 1, 2, 3, 4] 요소로 구성된 배열을 생성합니다. 그러나 채우지 않고 빈 배열을 생성하면 항목도 없고 빈 슬롯도 없는 배열이 생성됩니다.


  
  
  배열 생성자 사용


배열을 만드는 또 다른 방법은 배열 생성자를 사용하는 것입니다:


let arr = Array(5);




단일 숫자 인수가 전달되면 지정된 길이는 있지만 실제 요소가 없는 희소 배열이 생성됩니다.


console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  희소 배열


스파스 배열에는 "빈 슬롯"이 있어 맵, 필터 또는 forEach와 같은 메서드를 사용할 때 예기치 않은 동작이 발생할 수 있습니다. 다음 메소드는 빈 슬롯을 건너뜁니다.


let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




이러한 배열을 채우려면 값을 수동으로 설정해야 합니다.


arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  희소 배열 처리


희소 배열을 효과적으로 처리하려면 채우기와 같은 메서드를 사용하여 값을 초기화할 수 있습니다.


let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




하지만 객체나 배열로 채울 때는 주의하세요.


let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




각 요소는 동일한 개체를 참조합니다. 이를 방지하려면 map:
을 사용하세요.


let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Array.from 메서드


Array.from은 유사 배열 또는 반복 가능한 객체에서 배열을 생성하는 다양한 방법을 제공합니다.


let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




이 방법은 2차원 배열을 만들 때도 도움이 될 수 있습니다.


let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  배열 반복


자바스크립트는 배열을 반복하는 여러 가지 방법을 제공하며 각각 희소 배열을 다르게 처리합니다.

• for 루프: 빈 슬롯을 정의되지 않은 것으로 처리하여 모든 인덱스를 처리합니다.
• for...in: 빈 슬롯을 건너뛰고 배열의 인덱스를 반복합니다.
• for...of: 값을 반복하여 빈 슬롯을 정의되지 않은 것으로 처리합니다.

결론

JavaScript의 복잡한 배열 생성 및 조작을 이해하면 일반적인 함정을 피하고 보다 효율적인 코드를 작성하는 데 도움이 될 수 있습니다. 배열 리터럴, 배열 생성자 또는 Array.from 및 채우기와 같은 메서드를 사용하든 이러한 도구의 작동 방식을 알면 프로젝트에서 배열을 효과적으로 처리할 수 있습니다.

이 가이드가 도움이 되었다면 알려주시기 바랍니다. 저는 항상 JavaScript의 기본 사항을 탐구하는 더 많은 콘텐츠를 만들고 싶습니다. 읽어주셔서 감사합니다. 즐거운 코딩 되세요!