<JavaScript> 배열 메서드의 기본 사용법과 예제

배열이란?

배열의 특징

• 순서가 있습니다: 배열에 저장된 각 항목은 특정 순서를 가지며, 이 순서는 0부터 시작하는 인덱스로 표현됩니다.
• 다양한 데이터 타입을 저장할 수 있습니다: 숫자, 문자열, 객체, 심지어 다른 배열까지도 배열에 저장할 수 있습니다.
• 동적 크기: 자바스크립트의 배열은 크기가 고정되어 있지 않습니다. 필요에 따라 자동으로 확장되거나 축소됩니다.

배열의 활용

배열은 데이터 목록을 관리할 때 매우 유용합니다. 예를 들어, 사용자 목록, 상품 목록, 할 일 목록 등을 저장하고 관리하는 데 사용됩니다. 배열은 순서가 중요하거나, 같은 종류의 여러 데이터를 묶어서 처리할 때 특히 유용합니다.

---

배열 메서드의 기본 사용법과 예제

자바스크립트에서는 배열을 처리하는 데 있어 핵심적인 역할을 하는 메서드들을 제공합니다. 이러한 메서드의 기본 사용법과 예제를 살펴보겠습니다.

원본 배열을 수정하는 메서드

1. push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.

   const fruits = ['apple', 'banana'];
   fruits.push('orange'); // fruits: ['apple', 'banana', 'orange']

2. pop(): 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

   const fruits = ['apple', 'banana', 'orange'];
   const last = fruits.pop(); // last: 'orange', fruits: ['apple', 'banana']

3. shift(): 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다.

   const fruits = ['apple', 'banana', 'orange'];
   const first = fruits.shift(); // first: 'apple', fruits: ['banana', 'orange']

4. unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다.

    const fruits = ['banana', 'orange'];
    fruits.unshift('apple'); // fruits: ['apple', 'banana', 'orange']

5. splice(): 배열의 기존 요소를 삭제하거나, 새 요소를 추가하여 배열의 내용을 변경합니다.

   const fruits = ['apple', 'banana', 'orange'];
   fruits.splice(1, 1, 'mango'); // fruits: ['apple', 'mango', 'orange']

6. split(): 문자열을 ()안의 기준으로 배열의 요소로 분열합니다.

   const str = 'The quick brown fox jumps over the lazy dog.';
   
   const words = str.split(' ');
   console.log(words[3]);
   // Expected output: "fox"
   
   const chars = str.split('');
   console.log(chars[8]);
   // Expected output: "k"
   
   const strCopy = str.split();
   console.log(strCopy);
   // Expected output: Array ["The quick brown fox jumps over the lazy dog."]

---

새 배열을 반환하는 메서드

1. map(): 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아 새 배열을 반환합니다. 매핑(mapping)해주는 함수. 매핑(mapping)은 한 데이터 집합의 요소들을 특정 규칙이나 함수를 사용하여 다른 형태의 요소로 변환하는 과정을 의미합니다. 이 때 각 요소는 새로운 요소로 "매핑"됩니다.

   const numbers = [1, 2, 3];
   const doubled = numbers.map(num => num * 2); // doubled: [2, 4, 6]

2. filter(): 주어진 함수의 테스트를 통과하는 모든 요소로 이루어진 새 배열을 반환합니다.

   const numbers = [1, 2, 3, 4, 5];
   const evens = numbers.filter(num => num % 2 === 0); // evens: [2, 4]

3. slice(): 배열의 일부분을 얕은 복사하여 새 배열 객체로 반환합니다.

   const fruits = ['apple', 'banana', 'orange', 'mango'];
   const citrus = fruits.slice(2, 4); // citrus: ['orange', 'mango']

4. concat(): 기존 배열에 다른 배열이나 값들을 합쳐서 새 배열을 만듭니다.

   const fruits = ['apple', 'banana'];
   const moreFruits = fruits.concat(['orange', 'mango']);

5. forEach(): 배열의 각 요소에 대해 주어진 함수를 실행합니다. 이 메서드는 배열을 순회하면서 각 요소에 대해 지정된 콜백 함수를 한 번씩 호출합니다. map()과 달리 항상 undefined를 반환합니다.

   let arr = ["Bilbo", "Gandalf", "Nazgul"];
   
   arr.forEach(function(item, index, array) {
     alert(`${item} is at index ${index} in ${array}`);
   });

6. for..of:를 사용하면 현재 요소의 인덱스는 얻을 수 없고 값만 얻을 수 있습니다.

   let fruits = ["사과", "오렌지", "자두"];
   
   for (let fruit of fruits) {
     alert( fruit );
   }

7. for..in : 모든 프로퍼티를 대상으로 순회합니다. 키 값이 숫자가 아닌 프로퍼티도 순회 대상에 포함됩니다. 유사 배열 객체와 for..in을 함께 사용하면 이 모든 것을 대상으로 순회가 이뤄집니다. 따라서 ‘필요 없는’ 프로퍼티들이 문제를 일으킬 가능성이 생깁니다.

   let arr = ["사과", "오렌지", "배"];
   
   for (let key in arr) {
     alert( arr[key] ); // 사과, 오렌지, 배
   }

---

결과값을 반환하는 메서드

1. reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 단일 결과값을 반환합니다. 여기서 말하는 리듀서(reducer)는 배열의 모든 요소를 하나의 값으로 축소하는 함수입니다. 배열에서 전체 요소들을 하나의 값으로 줄이는 역할을 함으로써 리듀서라 하는 것이죠.

   const numbers = [1, 2, 3, 4];
   const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum: 10

2. find(): 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.

   const numbers = [1, 2, 3, 4, 5];
   const firstEven = numbers.find(num => num % 2 === 0); // firstEven: 2

3. some(): 배열의 어떤 요소라도 주어진 테스트 함수를 만족하면 true를, 모두 만족하지 않으면 false를 반환합니다.

   const numbers = [1, 2, 3, 4, 5];
   const hasEven = numbers.some(num => num % 2 === 0); // hasEven: true

4. every(): 모든 요소가 주어진 테스트 함수를 만족하면 true를, 하나라도 만족하지 않으면 false를 반환합니다.

   const numbers = [2, 4, 6, 8];
   const isAllEven = numbers.every(num => num % 2 === 0); // allEven: true

5. includes(): 배열이 특정 요소를 포함하고 있는지 여부를 true 또는 false로 반환합니다.

   const fruits = ['apple', 'banana', 'mango'];
   const hasBanana = fruits.includes('banana'); // hasBanana: true

6. indexOf(): 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환합니다.

   const fruits = ['apple', 'banana', 'mango'];
   const bananaIndex = fruits.indexOf('banana'); // bananaIndex: 1

7. lastIndexOf(): indexOf()와 유사하지만, 배열을 끝에서부터 검색합니다.

   const fruits = ['apple', 'banana', 'apple'];
   const lastAppleIndex = fruits.lastIndexOf('apple'); // lastAppleIndex: 2