JavaScript 배열 방법 안내 - 01

Array.map() 메서드.

map 메서드는 콜백 함수를 인수로 사용하고 지정된 배열의 모든 요소에 대해 호출됩니다. map 함수는 호출 함수의 결과로 새 배열을 반환합니다. map 함수는 원래 배열을 수정하지 않습니다. 따라서 불변 함수입니다.

위의 모든 사항을 설명하기 위해 간단한 예부터 시작하겠습니다.

const fruits = ["apple", "Avocado", "Banana", "Mango", "Pineapple", "Orange"];

const result = fruits.map((fruit) => {
  return `I have a ${fruit} now.`;
});

console.log(result);
/* [
  'I have a apple now.',
  'I have a Avocado now.',
  'I have a Banana now.',
  'I have a Mango now.',
  'I have a Pineapple now.',
  'I have a Orange now.'
]*/

console.log(fruits);
//  [ 'apple', 'Avocado', 'Banana', 'Mango', 'Pineapple', 'Orange' ]

이제 콜백 함수가 현재 처리된 값을 첫 번째 인수로 취하여 처리하고 새 값을 반환하는 것을 지웁니다. 그런 다음 새 어레이로 푸시합니다.

Take a min and imagine what if we didn’t pass any parameter to map function? fruits.map(()=> {})

콜백 함수에는 선택적 매개변수가 거의 없습니다. 콜백 함수의 두 번째 인수는 배열에서 현재 호출된 값의 인덱스임을 언급하고 싶습니다.

const fruits = ["apple", "Avocado", "Banana", "Mango", "Pineapple", "Orange"];
const result = fruits.map((fruit, index) => {
  const fruitObj = {};
  fruitObj[index] = fruit;
  return fruitObj;
});
console.log(result);
// Output
/*[
  { '0': 'apple' },
  { '1': 'Avocado' },
  { '2': 'Banana' },
  { '3': 'Mango' },
  { '4': 'Pineapple' },
  { '5': 'Orange' }
]
*/

Array.reduce() 메서드

메서드 이름이 말했듯이 이 메서드는 하나의 값으로 줄어듭니다. 보다 구체적으로 이 reduce 메서드는 콜백 함수로 제공하고 각 요소를 호출하는 reducer function를 실행합니다. 마지막으로 reduce 함수는 단일 값을 반환합니다.

이 감속기 기능에는 2개의 매개변수가 필요합니다. reducer function 내에서 다음 반복에서 누산기로 사용할 값을 반환해야 합니다(undefined를 반환하지 않는 한). 처음에는 배열의 첫 번째 요소가 누산기이고 두 번째 요소가 현재 값입니다. (이는 reducer 함수를 처음 실행할 때만 발생하며 initialValue를 제공하지 않은 경우)

예를 들어 보겠습니다.

const marks = [23, 65, 12, 87, 34];

const reducer = (acc, val) => {
  console.log(`current acc: ${acc}`);
  console.log(`current val: ${val}`);
  return val;
};

const result = marks.reduce(reducer);

// const result = fruits.reduce(reducer);

console.log(result);

/*
current acc: 23
current val: 65
current acc: 65
current val: 12
current acc: 12
current val: 87
current acc: 87
current val: 34
34
*/
// because finally it return the last value of the array

우리는 그것이 어떻게 작동하는지 보았습니다. 의미 있는 예를 보자. 이 배열의 합계를 얻으려면 reducer 함수를 아래와 같이 변경할 수 있습니다.

const reducer = (acc, val) => {
  return val + acc;
};

그러나 reducer 함수에서 허용하는 다른 2개의 선택적 매개변수가 있다는 것을 아는 것이 좋습니다. currentIndex 및 array 입니다.
reduce 함수는 감속기 함수와 initialValue 두 번째 인수를 취합니다.

const marks = [23, 65, 12, 87, 34];
const reducer = (acc, val) => {
  console.log(`current acc: ${acc}`);
  console.log(`current val: ${val}`);
  return val + acc;
};

// array.reduce(reducerFunction, initialValue)
const result = marks.reduce(reducer, 30);
console.log(result);
// result
/*current acc: 30
current val: 23
current acc: 53
current val: 65
current acc: 118
current val: 12
current acc: 130
current val: 87
current acc: 217
current val: 34
251
*/

특별 시나리오:

시나리오 01:

배열에는 하나의 값만 있습니다.
reduce 함수에 초기값이 없습니다.

결과: 배열의 솔로 값이 반환됩니다.

const marks = [30];
const result = marks.reduce((acc, val) => {});
console.log(result);
// 30

시나리오 02:

배열에 값이 없습니다.
reduce 함수의 초기값이 있습니다.

결과: 초기 값이 반환됩니다.

const marks = [];

const result = marks.reduce((acc, val) => {}, 30);

console.log(result);
// 30

Above both scenarios, the callback function will not be called.

둘 다 제공되지 않으면(값과 초기 값이 있는 배열) 다음을 얻습니다TypeError..


이상으로 이 글을 마치겠습니다. 이와 관련하여 질문할 사항이 있으면 여기에 댓글을 남겨주세요. 또한 내 이해에 따라 이것을 썼습니다. 따라서 잘못된 점이 있으면 주저하지 말고 저를 수정하십시오. 정말 감사합니다.

오늘의 친구들을 위한 것입니다. 곧 봐요. 고맙습니다.

참조:

MDN JavaScript Array

기본 이미지credit