다양한 메소드

indexOf / lastIndexOf 

- 찾고자 하는 값과 정확히 일치하는 첫 번째 요소의 인덱스를 반환

- lastIndexOf는 배열의 끝에서부터 검색

- 일치하는 값을 찾지 못하면 -1을 반환

 

find / findIndex

- 콜백함수를 넣어서 검색 조건을 지정할 수 있다는 장점.

- find는 조건에 맞는 요소를 반환. 조건에 맞는 요소가 없으면 undefined 반환

- findIndex는 조건에 맞는 요소의 인덱스를 반환. 조건에 맞는 요소가 없으면 -1 반환

 

some / every

- 조건에 만족하는 요소가 있는지 없는지만 알면 충분할 때 true, false 반환.

- some : 조건에 맞는 요소가 하나라도 있으면 true.

- every : 모든 요소가 조건에 맞으면 true.

 

forEach

- 주어진 함수를 배열 요소 각각에 대해 실행한다.

- 반환 값은 없다.

 

filter

- 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환.

map

- 배열내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.

 

reduce

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

- 네 가지 인수.(누산기, 처리할 현재요소, 처리할 현재 요소의 인덱스, reduce()를 호출한 배열)

- 누산기 : 콜백의 반환값을 누적. 콜백의 이전 반환값 또는 콜백의 첫번째 호출이면서 초기값있으면 초기값.

- 처리할 현재 요소의 인덱스 : 초기값을 제공한 경우는 0. 아니면 1부터 시작.

- 초기값 : 콜백 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값 제공하지 않으면 배열의 첫 번째 요소를 사용한다.

- 과정 : 초기값이 있을 경우, 누산기는 초기값과 같다. 처리할 현재 요소는 배열의 첫번째 값과 같다.

반변에 초기값이 없을 경우, 누산기는 배열의 첫번째와 같고 처리할 현재 요소는 배열의 두번째값과 같다.

 

값 합산

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) // logs 6

 

중첩 배열 펼치기

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

 

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

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 }] 
// }

 

객체로 이루어진 배열에 담긴 배열 연결하기

var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

var allbooks = friends.reduce(function(accumulator, currentValue) {
  return [...accumulator, ...currentValue.books];
}, ['Alphabet']);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

 

배열 중복 항목 제거

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((accumulator, current) => {
    const length = accumulator.length
    if (length === 0 || accumulator[length - 1] !== current) {
        accumulator.push(current);
    }
    return accumulator;
}, []);
console.log(result); //[1,2,3,4,5]

charAt / chartCodeAt

- charAt : index에 해당하는 문자를 리턴

- chartCodeAt : 유니코드 값을 리턴

- console.log("code".charAt(0)); // c 

- console.log("뺉".charCodeAt()); // 48777

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce