[Javascript] 유용한 배열 메서드 정리하기

 

유용하지만 맨날 헷갈리는 .. 메서드들 🥹🥹🥹🥹🥹
자주 쓰는 단순한 메서드들만 사용하게 되서 적어놓는다.
계속 추가 예정

 

 

reduce() 

일반적으로 reduce() 는 배열에서 누적값을 다룰 때 사용한다.

 arr.reduce(콜백함수, 초기값설정)
 
 arr.reduce((acc, cur, idx, src)=>{},초기값설정)
 
// 누산기 (acc)
// 현재 값 (cur)
// 현재 인덱스 (idx)
// 원본 배열 (src)

// 리듀서 함수의 반환 값은 누산기에 할당되고, 
// 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.


주의! 초기값을 넣어주지 않으면 배열의 첫번째 요소를 사용한다.

 

객체 내의 값 인스턴스 개수 세기

var names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

 

속성으로 객체 분류하기

var people = [
  { name: "Alice", age: 21 },
  { name: "Max", age: 20 },
  { name: "Jane", age: 20 },
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, "age");
// groupedPeople is:
// {
//   20: [
//     { name: 'Max', age: 20 },
//     { name: 'Jane', age: 20 }
//   ],
//   21: [{ name: 'Alice', age: 21 }]
// }

 

 

Array.from()

!! 새로운 Array를 반환한다

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// arrayLike : 배열로 변환할 순회 가능 또는 유사 배열 객체입니다.
// mapFn(ele, index) : 모든 요소를 돌면서 호출하게 되는 함수로, 원래 요소자리에 이 함수에서 나온 반환값이 들어가게 된다.
// thisArg : mapFn 실행 시에 this로 사용할 값

 

순회 가능이 아니거나 유사 배열이 아닌 일반 객체를 배열로 변환하려면(속성 키, 값 또는 둘을 모두 열거하여) 
Object.keys(), Object.values(), 또는 Object.entries()를 사용해야 합니다. 비동기 순회 가능을 배열로 변환하려면 Array.fromAsync()를 사용합니다.