배열은 JavaScript에서 가장 일반적으로 사용되는 데이터 구조 중 하나입니다. 이를 통해 단일 변수에 여러 값을 저장할 수 있으며 데이터를 간단하고 효율적으로 조작하고 작업할 수 있는 풍부한 내장 함수 세트가 함께 제공됩니다. 이 문서에서는 JavaScript 배열 함수를 자세히 살펴보고 이를 익히는 데 도움이 되는 설명, 예제 및 설명을 제공합니다.

JavaScript 배열 소개

배열은 숫자, 문자열, 개체 및 기타 배열을 포함하여 다양한 유형의 데이터를 담을 수 있는 항목의 정렬된 컬렉션입니다.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

배열 만들기

배열 리터럴이나 배열 생성자를 사용하여 배열을 만들 수 있습니다.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

배열 속성

• 길이: 배열의 요소 수를 반환합니다.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

배열 방법

1. 푸시()

배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2.팝()

배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. 시프트()

배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. 쉬프트 해제()

배열의 시작 부분에 하나 이상의 요소를 추가하고 새 길이를 반환합니다.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. 연결()

두 개 이상의 배열을 병합하고 새 배열을 반환합니다.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. 조인()

배열의 모든 요소를 ​​문자열로 결합합니다.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. 역방향()

배열의 요소 순서를 반대로 바꿉니다.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8.슬라이스()

배열 일부의 얕은 복사본을 새 배열 객체로 반환합니다.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. 스플라이스()

요소를 제거, 교체 또는 추가하여 배열의 내용을 변경합니다.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. 정렬()

배열의 요소를 제자리에 정렬하고 정렬된 배열을 반환합니다.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. 필터()

제공된 함수로 구현된 테스트를 통과한 모든 요소로 새 배열을 생성합니다.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. 지도()

호출 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 새 배열을 만듭니다.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. 감소()

누산기와 배열의 각 요소에 대해 함수를 적용하여 단일 값으로 줄입니다.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

14. 찾기()

제공된 테스트 함수를 만족하는 배열의 첫 번째 요소 값을 반환합니다.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. 찾기인덱스()

제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환합니다.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. 모든()

배열의 모든 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지 테스트합니다.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x 




  
  
  17. 좀()


배열에 있는 하나 이상의 요소가 제공된 함수에 의해 구현된 테스트를 통과하는지 테스트합니다.



let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true





  
  
  18. 포함()


배열의 항목 중 특정 값이 포함되어 있는지 확인합니다.



let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true





  
  
  19. 인덱스오브()


배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.



let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2





  
  
  20. 라스트인덱스오브()


배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.



let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5





  
  
  21. 플랫()


모든 하위 배열 요소가 지정된 깊이까지 반복적으로 연결된 새 배열을 만듭니다.



let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]





  
  
  22. 플랫맵()


먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 평면화합니다.



let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]





  
  
  23. 에서()


유사 배열 또는 반복 가능한 객체에서 얕은 복사된 새 배열 인스턴스를 만듭니다.



let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]





  
  
  24. isArray()


전달된 값이 배열인지 확인합니다.



console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false





  
  
  25. of()


생성

인수의 수나 유형에 관계없이 가변 개수의 인수가 있는 새로운 배열 인스턴스입니다.



let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]





  
  
  실제 사례



  
  
  예 1: 배열에서 중복 항목 제거




let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]





  
  
  예 2: 배열의 모든 값 합산




let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 15





  
  
  예제 3: 깊게 중첩된 배열 평면화




let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]





  
  
  예제 4: 배열에서 최대값 찾기




let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5





  
  
  예 5: 키-값 쌍 배열 생성




let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]





  
  
  결론


배열은 JavaScript의 필수 부분으로, 데이터 컬렉션을 관리하는 강력한 방법을 제공합니다. 배열 기능을 익히면 복잡한 데이터 조작을 쉽게 수행하고 보다 효율적이고 읽기 쉬운 코드를 작성할 수 있습니다. 이 포괄적인 가이드는 JavaScript의 가장 중요한 배열 기능을 다루었으며 자세한 예제와 설명도 포함되어 있습니다. 이러한 기능을 사용하는 방법을 연습하고 다양한 사용 사례를 실험하여 이해도를 높이고 코딩 기술을 향상시키세요.