JavaScript (5) - Array.from() , Array.prototype.reduce() 사용방법

2022. 10. 13. 17:05front-end/JavaScript

728x90

Array.from() 

Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 '복사'해 새로운 Array 객체를 만든다.

console.log(Array.from('soyoung'));
// expected output: Array ["s", "o", "y", "o", "u", "n", "g"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

//배열 형채를 가진 객체(arguments)에서 배열 만들기
function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [1, 3, 3]

 

Array.prototype.reduce()

배열의 각 요소에 대해 주어진 reduce() 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

const array1 = [1, 2, 3, 4];
const initialValue = 0;

const sumValue = array1
	.reduce((previousValue, currentValue)=> previousValue+currentValue,initialValue);

console.log(sumValue) //10

reduce() 중첩 배열 합치기 concat() 사용

let flattend = [[0,1],[2,3],[4,5]].reduce((acc,curr)=> acc.concat(curr),[])
                
console.log(flattend) //[0,1,2,3,4,5]

객체 내의 값 인스턴스 개수 세기 (코딩테스트에서 유용)

let names = ['Soyoung', 'Jinhee', 'Sungsil', 'Hana', 'Soyoung'];

let countedNames = names.reduce(function(allNames, name){
	if(name in allNames){
    	allNames[name]++;
    }else {
    	allNames[name] = 1;
    }
    return allNames;
},{});

console.log('countedNames:',countedNames) 
//countedNames: { Soyoung: 2, Jinhee: 1, Sungsil: 1, Hana: 1 }

속성으로 객체 분류하기

var people = [
  { name: 'Soyoung', age: 21 },
  { name: 'Jinhee', age: 20 },
  { name: 'Sungsil', age: 20 }
];

 function groupBy(objArray, property){
    return objArray.reduce((arr,obj) => {
        let key = obj[property];
        if(!arr[key]){
            arr[key] = [];
        }
        arr[key].push(obj)
        return arr;
     },{})
 }
let groupedPeople = groupBy(people,'age')

console.log('groupedPeople:',groupedPeople)
//groupedPeople: {
  '20': [ { name: 'Jinhee', age: 20 }, { name: 'Sungsil', age: 20 } ],
  '21': [ { name: 'Soyoung', age: 21 } ]
}
728x90