JavaScript의 배열

JavaScript의 배열은 처음에는 혼란스럽고 이해하기 어려울 수 있으며, 특히 고급 개념을 다룰 때 더욱 그렇습니다. 나 역시 처음에는 JavaScript 배열을 이해하는 데 어려움을 겪었습니다. 이 글에서는 JavaScript의 배열에 대한 이해를 돕고, 여러분이 자신있게 배열을 사용할 수 있도록 알아야 할 모든 것을 분류하는 것을 목표로 합니다.

정의

배열이란?

배열은 인덱스로 각각 액세스할 수 있는 요소 컬렉션을 저장하는 데이터 구조입니다. 많은 프로그래밍 언어에서 배열은 연속적인 메모리 위치에 요소를 저장합니다. JavaScript에서 배열은 단일 변수에 여러 값을 저장하는 데 사용되는 상위 수준의 목록형 개체입니다. 인덱스는 0입니다. 즉, 첫 번째 요소는 인덱스 0에 있습니다.

JavaScript의 배열

JavaScript는 동적으로 유형이 지정되는 언어이므로 배열은 다양한 유형의 요소를 보유할 수 있습니다. 배열에는 숫자, 문자열, 부울, 객체 및 기타 배열이 포함될 수 있습니다. 이는 배열이 일반적으로 동일하고 동일한 데이터 유형의 요소를 포함해야 하는 Java 또는 C와 같은 정적으로 유형이 지정된 언어와 다릅니다.

배열을 사용하는 이유는 무엇입니까?

배열을 사용하면 값을 저장, 액세스 및 조작할 수 있어 데이터를 효율적으로 관리할 수 있습니다. 전자상거래 장바구니의 항목을 관리하거나 사용자 입력을 추적하는 등 목록이나 컬렉션과 관련된 모든 작업에 사용됩니다.

JavaScript에서 배열을 만드는 방법

JavaScript에서 배열을 만드는 방법은 여러 가지가 있습니다. 그 중 몇 가지를 살펴보겠습니다.

1. 배열 리터럴 사용 []

자바스크립트에서는 []를 변수나 상수에 할당하여 간단하게 배열을 만들 수 있습니다.

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

배열의 요소는 쉼표로 구분됩니다.

2. 배열 생성자 사용

다음 구문을 사용하여 기본 JavaScript 배열 생성자의 인스턴스로 배열을 만들 수도 있습니다.
const myArray = 새로운 배열()
Array 생성자는 하나 이상의 인수(숫자여야 함)를 사용하며 전달한 인수 수에 따라 다르게 동작합니다!
하나의 인수(const myArray = new Array(4))를 전달하면 4개의 빈 요소가 있는 새 배열이 생성됩니다!

하나 이상의 인수를 전달하는 경우: const myArray = new Array(1, 2, 3), 이는 각각 3개의 숫자 1, 2, 3으로 구성된 배열을 생성하며 const myArray = [1, 2를 작성하는 것과 유사합니다. , 3]!

이게 혼란스러워 보이지만 좀 더 연습해 보면 쉽다고 믿으세요!

3. Array.of 메소드 사용

Array.of 메소드를 사용하여 배열을 생성할 수도 있으며 인수로 전달한 모든 요소를 ​​포함하는 배열을 생성합니다. Array.of와 Array 생성자를 사용하는 것의 차이점은 하나의 인수를 받을 때 동작하는 방식에 있습니다!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Array.of가 하나의 매개변수를 수신할 때 어떻게 작동하는지 확인하세요. n 개의 빈 요소로 구성된 배열을 생성하는 Array 생성자와 달리 Array.of는 전달한 요소가 하나인 배열을 생성합니다!

4. Array.from 메소드 사용

또한 반복 가능해야 하는 하나의 인수를 받고 그로부터 배열을 생성하는 Array.from(iterable) 메서드를 사용할 수도 있습니다! 예를 들어 이 메서드에 집합을 전달하고 해당 집합의 값에서 배열을 만들 수 있습니다!

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

JavaScript의 배열 조작

배열이 무엇인지, JavaScript에서 배열을 생성하는 방법을 살펴보았습니다. 이제 스스로에게 물어볼 수 있는 남은 문제는 배열을 어떻게 사용하고 작업합니까?
좋은 질문이네요!

JavaScript에서 배열을 사용하는 전통적인 방법

전통적으로 우리는 루프를 사용하여 배열에 저장된 요소를 반복하고 사용합니다!
다음 예에서는 숫자 배열을 반복하고 배열 내부에 있는 모든 숫자의 두 배를 표시하는 방법을 보여줍니다.

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  최신 JavaScript 배열 메서드 구문 사용


JavaScript에는 기본적으로 다양한 배열 메소드(고차 함수)가 제공되며 Array.prototype 객체를 통해 모든 배열 인스턴스에 액세스할 수 있습니다. 우리는 JavaScript에서 제공하는 메소드를 사용하여 배열에 저장된 데이터를 조작하고 작업합니다! 우리는 우리만의 배열 메소드를 만들 수도 있습니다(이 내용은 다음 장에서 살펴보겠습니다)

다른 함수를 인수로 사용하고 해당 함수를 사용하여 배열에 저장된 데이터를 조작하기 때문에 고차 메서드입니다!

이러한 배열 방법은 두 가지 범주로 분류됩니다.


변경: 이는 배열을 반복하고 콜백 함수를 적용하는 동안 원래 배열도 변경합니다!

비변환: 이는 배열을 반복하고 콜백 함수를 적용하지만 원래 배열을 변경하는 대신 새 배열을 반환합니다.

  
  
  1. forEach() 메소드


forEach()는 배열의 요소를 반복하고 원래 배열을 수정하거나 새 배열을 생성하지 않고 모든 요소에 콜백 함수를 적용하는 데 사용되는 배열 고차 메서드입니다!

일반적으로 익명 함수인 콜백 함수의 구문(일반적으로 다른 모든 메서드에서 동일함):

function (currentElement[, index, targetArray]) {}




이는 반복할 때마다 배열 메서드가 반복의 현재 요소(currentElement), 선택적인 배열 인덱스의 인덱스, 메서드가 실행되는 대상 배열에 대한 참조에 액세스할 수 있음을 의미합니다. 선택 사항인 targetArray입니다. 하지만 해당 매개변수를 원하는 대로 호출할 수 있으므로 해당 위치에만 주의하면 됩니다.


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2. map() 메소드


 forEach 맵과 마찬가지로 배열 요소를 반복하고 모든 요소에 콜백 함수를 적용하는 또 다른 방법이지만 forEach 맵과 달리 변경되지 않는 메서드이므로 다음의 결과로 새 배열을 생성하고 반환합니다. 반복하고 원래 배열을 변경하지 않습니다!

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. 필터() 메소드


filter() 메서드는 원하지 않는 요소를 제거하여 배열을 필터링할 때 사용됩니다. 이 메서드는 변경되지 않는 메서드이며 새 배열을 반환합니다!

모든 반복에서 filter() 내부의 콜백은 현재 요소가 필터링된 새 배열에 포함될지 여부를 나타내는 부울 값을 반환해야 합니다.

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. 감소() 방법


reduce() 메소드는 위와 약간 다릅니다. 각 요소에 하나씩 함수를 적용하여 배열의 모든 요소를 ​​단일 값으로 결합하는 방법으로 생각하세요. 배열의 모든 요소에서 단일 값을 반환하며, 합계, 평균, 최대 또는 최소와 같은 배열의 모든 요소에서 단일 값을 원할 때 사용합니다!

구문도 다릅니다.

Array.reduce(function(accumulator, element[, index, targetArray]) [,initialValue])

이 메서드는 두 개의 인수를 사용합니다. 첫 번째 인수는 다른 메서드와 마찬가지로 콜백 함수이고 두 번째 인수는 accumutator 변수의 초기 값입니다. 이 두 번째 인수는 선택 사항입니다. 제공되지 않으면 축소는 배열의 첫 번째 요소를 누산기
의 초기 값으로 사용합니다.

누산기는 각 반복에서 콜백 함수에 의해 반환된 결과를 보유하며 반복이 끝나면 축소에서 반환된 최종 결과가 됩니다!

숫자 배열에서 합계를 구해 보겠습니다.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. 슬라이스() 메소드


slice()는 JavaScript의 또 다른 유용한 배열 메소드로, 배열의 작은 부분을 추출하는 데 사용됩니다! Slice()는 원래 배열을 수정하지 않고 기존 배열의 섹션을 복사하여 새 배열을 만듭니다.

slice() 메소드의 구문은 다음과 같습니다.

Array.slice(startIndex, endIndex) startIndex는 추출의 시작점을 나타내며 포함되며 endIndex는 추출의 끝 요소를 나타내며 선택적이고 배타적입니다. 제공되지 않은 경우 슬라이스 메소드는 startIndex에서 배열 끝까지 배열을 복사합니다!

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. splice() 메소드


splice()는 JavaScript의 배열 메소드로 배열의 요소를 추가, 제거 및 교체하는 데 사용됩니다. splice()는 배열의 요소를 추가, 제거 또는 교체하여 배열의 내용을 변경합니다.

splice() 메소드의 구문은 다음과 같습니다.

Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)

혼란스러워 보일 수도 있지만 설명해 보겠습니다.

index는 요소 제거가 시작되는 배열의 시작 인덱스를 의미하며 포함됩니다.

elementsToRemove는 배열에서 제거하려는 인덱스의 요소 수를 나타냅니다. 새 요소만 추가하려는 경우 이 위치에 0을 제공할 수 있습니다.

newElement1, newElement2 등. 이는 배열에 추가하려는 요소 수에 제한이 없으며 배열에 지정한 elementsToRemove 요소를 대체합니다!

자세한 내용은 다음과 같습니다. 예를 살펴보겠습니다.

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "pineapple") 이는 1의 인덱스에서 1개의 요소를 제거하고 'pineapple'을 추가한다는 의미입니다.

다른 값을 바꾸지 않고 배열에 파인애플만 추가하고 싶다면 다음과 같이 작성할 수 있습니다.
과일.splice(1, 0, "pineapple") 이렇게 하면 index1의 요소 뒤에 파인애플이 추가되고 이 배열에서 다른 요소는 제거되지 않습니다.

  
  
  결론


배열은 JavaScript의 기본적이고 다양한 기능으로, 데이터 컬렉션을 저장하고 조작하는 데 필수적인 구조를 제공합니다. 리터럴을 사용한 간단한 배열 생성부터 Array.of() 및 Array.from()과 같은 고급 메서드에 이르기까지 JavaScript 배열은 다양한 유형의 데이터를 처리하는 다양한 방법을 제공합니다. 루프나 forEach(), map(), filter(), Reduce(), Slice() 및 splice()와 같은 최신 메서드를 통해 배열 조작을 마스터하면 복잡한 작업을 효율적으로 수행할 수 있습니다. 이러한 배열 기능을 이해하는 것은 JavaScript에 능숙해져서 더욱 깔끔하고 간결하며 강력한 코드를 작성할 수 있는 열쇠입니다.