자바스크립트 배열 심화 [1] – forEach 반복문, map, filter, reduce 메소드

배열 메소드

slice

// SLICE (start index, end index)
console.log(arr.slice(2));  // ['c', 'd', 'e']
console.log(arr.slice(2, 4));  // ['c', 'd']
console.log(arr.slice(-2));  // ['d', 'e']
console.log(arr.slice(-1)); // ['e]
console.log(arr.slice(1, -2)); // ['b', 'c']
console.log(arr.slice()); // shallow copy
console.log([...arr]); // shallow copy

splice

// SPLICE (start index, remove count): change original array - MUTATE 
console.log(arr.splice(2, 1));  // 삭제되는 요소를 출력 ['c']
console.log(arr); // ['a', 'b', 'd', 'e']
arr.splice(-1); // 마지막 원소만 삭제
console.log(arr); // ['a', 'b', 'd']

reverse

// REVERSE - MUTATE
arr = ['a', 'b', 'c', 'd', 'e'];
const arr2 = ['j', 'i', 'h', 'g', 'j'];
console.log(arr2.reverse());  // ['j', 'g', 'h', 'i', 'j']
console.log(arr2); // ['j', 'g', 'h', 'i', 'j']

concat

// CONCAT
const letters = arr.concat(arr2);
console.log(letters); // ['a', 'b', 'c', 'd', 'e', 'j', 'g', 'h', 'i', 'j']
console.log([...arr, ...arr2]);

join

// JOIN
console.log(letters.join(' - ')); // a - b - c - d - e - j - g - h - i - j

at 메소드(ES2022)

const arr = [23, 11, 64];
console.log(arr[0]); // 23
console.log(arr.at(0)); // 23

// get last element
console.log(arr[arr.length - 1]); // 64
console.log(arr.slice(-1)[0]); // 64
console.log(arr.at(-1));

• at 메소드의 지원으로 마지막 요소를 가져오기 편해졌다.
• 메소드 체이닝 할 때도 더 편리하게 사용 가능하다.
• 문자열도 at 메소드 사용이 가능하다.

forEach

// for (const movement of movements) {
for (const [i, movement] of movements.entries()) {
  if (movement > 0) {
    console.log(`Movement ${i + 1}: You deposited ${movement}`);
  } else {
    console.log(`Movement ${i + 1}: You withdrew ${Math.abs(movement)}`);
  }
}

console.log('---- FOREACH ----');
movements.forEach(function (mov, i, arr) {
  if (mov > 0) {
    console.log(`Movement ${i + 1}: You deposited ${mov}`);
  } else {
    console.log(`Movement ${i + 1}: You withdrew ${Math.abs(mov)}`);
  }
});
// 0: function(200)
// 1: function(450)
// 2: function(400)
// ...

• forEach 메소드는 함수를 인자로 넣어 콜백함수를 반복적으로 호출한다.
• 콜백 함수의 파라미터로 인덱스와 반복문을 도는 배열도 같이(item, index, array 순서 지켜야 함) 넣어줄 수 있으므로 인덱스와 배열이 필요한 경우에도 코드가 간결해진다.

맵과 세트에서 forEach 사용하기

Maps

// forEach With Maps and Sets
// Map
const currencies = new Map([
  ['USD', 'United States dollar'],
  ['EUR', 'Euro'],
  ['GBP', 'Pound sterling'],
]);

currencies.forEach(function (value, key, map) {
  console.log(`${key}: ${value}`);
});

• 콜백함수의 파라미터는 (value, key, map) 순서이다.

Sets

// Set
const currenciesUnique = new Set(['USD', 'GBP', 'USD', 'EUR', 'EUR']);
console.log(currenciesUnique);
currenciesUnique.forEach(function (value, _, map) {
  console.log(`${value}: ${value}`);
});

• 콜백함수의 파라미터 역시 (value, key, map) 순서이다.
  • sets는 key가 없으므로 value와 똑같은 값이 들어온다. 그래서 관용적으로 (value, _, map)로 사용한다.

forEach 반복문으로 DOM Elements 생성하기

const displayMovements = function (movements) {
  containerMovements.innerHTML = ''; // 초기화

  movements.forEach(function (mov, i) {

    const type = mov > 0 ? 'deposit' : 'withdrawal';
    const html = `
      <div class="movements__row">
        <div class="movements__type movements__type--${type}">${i + 1
      } ${type}</div>
        <div class="movements__value">${mov}€</div>
      </div>
    `;
    containerMovements.insertAdjacentHTML('afterbegin', html); // containerMovements = document.querySelector('.movements');
  });
};
displayMovements(account1.movements);

데이터 조작 관련 메소드

map

const eurToUsd = 1.1;
const movementsUSD = movements.map(function (mov) {
  return mov * eurToUsd;
});
console.log(movements); // [200, ...]
console.log(movementsUSD) // [220.00000000000003, ...]

const movementsDescriptions = movements.map(
  (mov, i) =>
    `Movement ${i + 1}: You ${mov > 0 ? 'deposited' : 'withdrew'} ${Math.abs(
      mov
    )}`
);
console.log(movementsDescriptions); // ['Movement 1: You deposited 200', ...]

• forEach와 비슷하게 사용할 수 있지만 map은 새로운 배열을 리턴한다.
• 콜백함수로 arrow 표현식을 사용하면 코드가 훨씬 간결해지므로 arrow 함수 사용법을 잘 익혀두면 좋다.

filter

const deposits = movements.filter(function (mov, i, arr) {
  return mov > 0;
});
console.log(movements); // [200, 450, -400, 3000, -650, -130, 70, 1300];
console.log(deposits); // [200, 450, 3000, 70, 1300]

const depositsFor = [];
for (const mov of movements) if (mov > 0) depositsFor.push(mov);
console.log(depositsFor); // [200, 450, 3000, 70, 1300]

const withdrawals = movements.filter(mov => mov < 0);
console.log(withdrawals); // [-400, -650, -130]

• 특정 조건만 만족하는 새로운 배열을 리턴한다.
• for-of 문으로 작성하면 복잡한 코드도 간결하게 표현할 수 있다.

reduce

// accumulator -> SNOWBALL
// const balance = movements.reduce(function (acc, cur, i, arr) {
//   console.log(`Iteration ${i}: ${acc}`);
//   return acc + cur;
// }, 0);
const balance = movements.reduce((acc, cur) => acc + cur, 0);
console.log(balance); // 3840

let balance2 = 0;
for (const mov of movements) balance2 += mov;
console.log(balance2); // 3840

// Maximum value
const max = movements.reduce((acc, mov) => {
  if (acc > mov) return acc;
  else return mov;
}, movements[0]);
console.log(max); // 3000

• 여러개의 데이터를 하나의 데이터로 만드는데 사용한다(e.g. accumulator)
  • 맵리듀스 할 때 그 reduce랑 동일한 의미
• 파라미터 (acc, cur, i, arr)의 첫번째 파라미터가 하나의 값이 될 snowball 역할을 한다.
• reduce 메소드의 첫번째는 인자에는 콜백함수, 두번째 인자에는 초깃값을 작성해준다.