[Javascript] 배열(Array) 반환 함수 & 메서드

[ Map (함수) : 결과를 반환 ]

---

→ 배열의 각 요소를 순회하며 해당 요소에 대한

변환 함수를 적용한 배열을 생성

한다.

→ 기존 배열은 변경되지 않으며 ,

변환된 결과만을 포함

하는 새 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((num) => num * 2); // doubled는 [2, 4, 6, 8, 10]을 포함하는 배열입니다.

 

[ Filter (함수) : 조건을 만족하는 요소를 반환 ]

---

→ filter 함수는 주어진 조건을 만족하는 배열의 요소 만을 남기고 나머지 요소를 제거,

새로운 배열을 생성.

→ 조건을 만족하지 않는 요소는 새 배열에 포함되지 않는다.

→ 즉 , 조건을 만족하는 요소만 새 배열에 포함되는 함수이다.

const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter((num) => num % 2 === 0); // evenNumbers는 [2, 4]를 포함하는 배열입니다.

 

[ Slice(메 드) : index 를 지정하여 배열을 추출 , 새 배열을 반환한다. ]

---

→ slice 메서드는 배열의 일부분을 추출하여 새 배열을 반환한다.

→ 시작 index 와 , 종료 index 를 지정하여 원하는 부분을 잘라낼 수 있다.

const fruits = ['apple', 'banana', 'cherry', 'date']; const slicedFruits = fruits.slice(1, 3); // slicedFruits는 ['banana', 'cherry']를 포함하는 배열입니다.

 

[ forEach(메서드) : 배열을 순회하며 어떤 작업을 수행할 때 사용 ]

---

→ foreach 메서드는 배열의 각 요소에 대해 주어진 함수를 실행한다.

→ 주로 배열을 순회하며 어떤 작업을 수행할 때 사용된다.

const numbers = [1, 2, 3, 4, 5]; numbers.forEach((num) => {   console.log(num); }); // 콘솔에 1, 2, 3, 4, 5가 출력됩니다.

 

[ 배열순회(for…of) (루프) : forEach 와 비슷하지만 더 많은 제어를 가지고 있다. ]

---

→ forEach 와 비슷한 역할을 하지만 , 더 많은 제어를 가지고 있다.

const fruits = ['apple', 'banana', 'cherry']; for (const fruit of fruits) {   console.log(fruit); } // 콘솔에 'apple', 'banana', 'cherry'가 출력됩니다.

✔️ 인덱스 및 값에 접근각 반복에서 배열의 요소 값을 직접 얻을 수 있다 /

const fruits = ['apple', 'banana', 'cherry']; for (const [index, fruit] of fruits.entries()) {   console.log(`인덱스: ${index}, 과일: ${fruit}`); } // 콘솔에 '인덱스: 0, 과일: apple', '인덱스: 1, 과일: banana', '인덱스: 2, 과일: cherry' 출력

값 뿐만 아니라 index 에도 접근이 가능하다.

✔️  break / continue 사용 가능for...of 루프 내에서 break와 continue를 사용하여 반복문을 제어할 수 있다.

const fruits = ['apple', 'banana', 'cherry']; for (const fruit of fruits) {   if (fruit === 'banana') {     break; // 'banana'를 만나면 루프를 중지합니다.   }   console.log(fruit); } // 콘솔에 'apple' 출력 후 루프 종료

특정 조건에서 루프를 중지하거나 건너뛸 수 있다.

✔️ 뒤로 돌아가거나 변경 가능 ( 역순으로 순회 가능 )배열을 순방향으로만 순회하지 않고 , 필요한 경우 역순으로도 순회할 수 있다.

const fruits = ['apple', 'banana', 'cherry']; for (const fruit of fruits.reverse()) { console.log(fruit); } // 콘솔에 'cherry', 'banana', 'apple' 역순으로 출력

 

[ reduce(메서드) : 값을 누적 ]

---

→ 배열의 각 요소를 순회하면서 해당 요소를 사용하여 어떤 값을 누적시키고자 할 때 사용한다.

→ reduce 는 배열을 단일 값으로 축소하거나 변환할 수 있는 강력한 기능을 제공한다.

// 기본 구문              // 초기값(선택적) array.reduce(callback[, initialValue])

• callback : 각 요소에 대한 처리를 수행하는 콜백 함수로 다음 4개의 인수를 받는다.
  • 1. accumulator (누적기) :
    • 현재까지 누적된 갑이다. 초기값 또는 이전 반복에서 반환된 값에서 시작한다.
  • 2. currentValue (현재값) :
    • 현재 순회중인 배열 요소의 값
  • 3. currentIndex (현재인덱스) :
    • 현재 순회 중인 배열 요소의 인덱스
  • 4. array (원본배열) :
    • reduce 가 호출된 배열 자체
  • initialValue (선택적) : 지정하지 않으면 배열의 첫 번째 요소가 초기값으로 사용된다
    • 초기값으로 사용될 값 . 지정하지 않으면 배열의 첫 번째 요소가 초기값으로 사용된다.

• reduce 동작
  1. 배열의 첫번째 요소부터 시작하거나 , initialValue 로 지정한 값을 초기값으로 사용하여 콜백 함수를 호출한다.
  1. 콜백함수는 현재 요소의 값과 이전 단계에서 누적된 값을 받아 작업을 수행한다.
  1. 콜백함수가 반환한 값을 다음 단계의 누적기로 사용하고, 배열의 다음 요소로 이동하여 작업을 반복한다.
  1. 배열의 모든 요소를 순회한 후에 최종 결과 값이 반환 된다.

• reduce 사용 예제
  • 배열의 합 구하기

    const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum은 15가 됩니다.(1 + 2 + 3 + 4 + 5 )

    1. 누적기(accumulator)가 0에서 시작합니다.
    1. 첫 번째 요소 1을 현재 값(currentValue)인 2와 더하여 누적기를 3으로 갱신합니다.
    1. 다음 요소 3을 현재 값 3과 더하여 누적기를 6으로 갱신합니다.
    1. 이어서 4와 5도 순차적으로 더하면서 누적기를 갱신합니다.
    1. 배열의 모든 요소를 순회한 후, 최종 결과로 누적된 값인 15가 sum에 할당됩니다.
  • 배열의 최댓값 구하기

    const numbers = [10, 5, 8, 20, 3]; const max = numbers.reduce((maxValue, currentValue) => Math.max(maxValue, currentValue), numbers[0]); // max는 20이 됩니다.

  • 배열의 요소를 문자열로 합치기

    const fruits = ['apple', 'banana', 'cherry']; const combined = fruits.reduce((result, fruit) => result + ', ' + fruit); // combined는 'apple, banana, cherry'가 됩니다.

 

[ 메서드 ]

---

push, pop, splice (메서드) : 배열에서 요소를 추가, 제거 또는 수정

• push (추가) : 배열의 끝에 요소를 추가
  • 배열의 끝에 요소를 추가한다.

  const fruits = ['apple', 'banana']; fruits.push('cherry', 'date'); // fruits는 ['apple', 'banana', 'cherry', 'date']가 됩니다.

• pop (제거) : 배열의 끝에서 해당 요소를 제거 , 해당요소를 반환한다.
  • pop 메서드는 배열의 끝에서 요소를 제거하고 해당 요소를 반환한다.
  • 배열의 길이가 감소하며, 제거된 요소를 반환한다.

  const fruits = ['apple', 'banana', 'cherry']; const removedFruit = fruits.pop(); // removedFruit는 'cherry'가 되고, fruits는 ['apple', 'banana']가 됩니다.

• splice (제거or추가) : 배열의 중간에 요소를 추가하거나 제거한다.
  • splice 메서드는 배열의 중간에 요소를 추가하거나 제거할 때 사용됩니다
  • 필요한 경우 요소를 추가하고 제거할 수 있으며, 제거한 요소를 반환한다.
  • 첫번째 매개변수로 시작 인덱스를 , 두번째 매개변수 로 제거할 요소 수를, 세 번째 매개변수로 추가할 요소를 전달 한다.

  const fruits = ['apple', 'banana', 'cherry']; const removed = fruits.splice(1, 1); // 인덱스 1부터 1개의 요소를 제거 // removed는 ['banana']가 되고, fruits는 ['apple', 'cherry']가 됩니다.  const vegetables = ['carrot', 'spinach']; vegetables.splice(1, 0, 'broccoli', 'celery'); // 인덱스 1에 'broccoli'와 'celery' 추가 // vegetables는 ['carrot', 'broccoli', 'celery', 'spinach']가 됩니다.