React배열데이터 가공 reduce, concat, slice, splice (2)

이전 포스트에 이어서 리액트 배열 데이터 가공시 활용도가 높은 함수인 reduce(), concat(), slice(), splice()에 대해 설명하고자 합니다.

 

1.  reduce()

reduce 함수는 JavaScript에서 배열을 순회하고 하나의 결과를 누적하는 데 사용되는 고차 함수입니다. reduce 함수는 인자로 콜백 함수를 받으며, 이 함수는 배열의 각 요소에 적용되며 중간 결과를 추적하는 누적기(accumulator)가 있습니다.

reduce 함수의 기본 구문은 다음과 같습니다.

array.reduce(callback, initialValue);

 

• callback: 배열의 각 요소에 대해 한 번씩 호출되는 함수로, 네 가지 인수를 받습니다.
  • accumulator: 콜백의 반환 값들을 누적하는 변수로, 이전 반복의 누적 결과입니다.
  • currentValue: 배열에서 현재 처리 중인 요소입니다.
  • currentIndex: 현재 처리 중인 요소의 인덱스입니다.
  • array: reduce가 호출된 배열입니다.
• initialValue (옵션): 누적기의 초기 값으로, 제공된 경우 콜백은 초기 값으로 실행됩니다. 제공되지 않은 경우 배열의 첫 번째 요소가 초기 누적기 값으로 사용되며, 반복은 두 번째 요소부터 시작됩니다.
• reduce 함수가 어떻게 동작하는지 설명하기 위해 간단한 예제를 살펴보겠습니다.
  배열의 모든 요소의 합을 찾고자 하는 경우 입니다.

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 출력: 15

• accumulator는 초기 값 0으로 시작합니다.
• 콜백 함수는 배열의 각 요소(1, 2, 3, 4, 5)에 대해 실행되며 현재 요소를 누적기에 더합니다.
• 최종 결과는 배열의 모든 요소의 합으로, 즉 15가 됩니다.

reduce 함수를 사용하여 최댓값이나 최솟값을 찾거나 데이터를 변환하거나 배열을 평탄화하는 등 다양한 작업에 활용할 수 있습니다.
이는 콜백 함수에서 구현한 로직에 따라 달라집니다.

 

2.  concat()

concat 함수는 배열을 결합하여 새로운 배열을 생성하는 메서드입니다. 이 함수는 기존 배열을 변경하지 않고 새로운 배열을 반환합니다. concat 함수를 사용하면 두 개 이상의 배열을 합칠 수 있습니다.

 

기본적인 concat 함수의 문법은 다음과 같습니다.

const newArray = array1.concat(array2, array3, ..., arrayN);

 

여기서 array1, array2, ..., arrayN은 결합하려는 배열들입니다. concat 함수는 인자로 전달된 배열들을 순서대로 결합하여 새로운 배열 newArray를 반환합니다.

 

간단한 예제를 통해 concat 함수를 설명하겠습니다. 두 개의 배열을 결합하는 경우 입니다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const newArray = array1.concat(array2);

console.log(newArray); // 출력: [1, 2, 3, 4, 5, 6]

 

이 예제에서는 array1과 array2를 concat 함수를 사용하여 결합했습니다. 새로운 배열 newArray는 [1, 2, 3, 4, 5, 6]이 됩니다. 기존 배열들은 변경되지 않습니다.

concat 함수는 여러 개의 배열을 결합할 수 있으며, 필요에 따라 더 많은 배열을 추가할 수 있습니다.

결과로 반환되는 배열은 모든 원래 배열의 요소를 포함합니다.

이 함수는 또한 배열에 원시 값(숫자, 문자열 등)을 추가할 때에도 사용할 수 있습니다.

다만, 이때는 concat 함수를 사용할 필요 없이 배열에 push() 로 직접 값을 추가하는 것이 더 간단할 수 있습니다.

 

3.  slice()

slice 함수는 배열에서 일부분을 추출하여 새로운 배열을 생성하는 메서드입니다.

slice 함수는 기존 배열을 변경하지 않고 지정된 범위의 요소들을 가져와 새로운 배열을 반환합니다.

 

기본적인 slice 함수의 문법은 다음과 같습니다.

const newArray = array.slice(startIndex, endIndex);

 

여기서 startIndex는 추출을 시작할 인덱스이고, endIndex는 추출을 종료할 (하지만 포함하지 않을) 인덱스입니다.

startIndex가 생략되면 배열의 처음부터, endIndex가 생략되면 배열의 끝까지 추출됩니다.

간단한 예제를 통해 slice 함수를 설명하겠습니다. 다음은 배열에서 일부분을 추출하는 예제입니다.

 

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

// 인덱스 1부터 3까지의 요소를 추출
const selectedFruits = fruits.slice(1, 4);

console.log(selectedFruits); // 출력: ['banana', 'orange', 'grape']

 

4.  splice()

splice 함수는 배열의 내용을 수정하는 메서드로, 배열에서 요소를 추가하거나 제거할 수 있습니다.

이 함수는 원본 배열을 변경하며, 제거한 요소들이나 추가한 요소들을 포함한 새로운 배열을 반환합니다.

 

기본적인 splice 함수의 문법은 다음과 같습니다.

array.splice(startIndex, deleteCount, item1, item2, ...);

 

• startIndex: 수정을 시작할 인덱스입니다.
• deleteCount: 제거할 요소의 개수입니다. 0일 경우 제거하지 않고, 양수일 경우 해당 개수만큼 제거합니다.
• item1, item2, ...: 추가할 요소들입니다. 이 부분은 생략 가능합니다.

간단한 예제를 통해 splice 함수를 설명하겠습니다.

다음은 배열에서 요소를 제거하고 새로운 요소를 추가하는 예제입니다.

 

const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

// 인덱스 2부터 2개의 요소를 제거하고, 'melon', 'peach'를 추가
const removedFruits = fruits.splice(2, 2, 'melon', 'peach');

console.log(removedFruits); // 출력: ['orange', 'grape']
console.log(fruits); // 출력: ['apple', 'banana', 'melon', 'peach', 'kiwi']

 

이 예제에서는 fruits 배열에서 인덱스 2부터 2개의 요소를 제거하고, 그 자리에 'melon'과 'peach'를 추가했습니다.

removedFruits 배열은 제거된 요소인 ['orange', 'grape']를 포함하고, fruits 배열은 변경된 배열을 나타냅니다.

 

splice 함수는 배열의 일부를 제거하거나 대체하는 데 사용할 수 있습니다.

주의할 점은 splice 함수는 원본 배열을 직접 수정하므로 주의가 필요합니다.

 

2024.01.21 - [리액트(React)] - React 배열 데이터 가공 - map,find,findindex,filter (1)

React 배열 데이터 가공 - map,find,findindex,filter (1)