자바스크립트 내장 함수 정리 (forEach, map, indexOf, findIndex, find, filter, splice, slice, concat, join, reduce)

forEach

자바의 향상된 for문과 비슷하며 자바스크립트 for of 처럼 배열의 값을 반복으로 출력할때 사용한다

주로 for of 보다는 forEach를 활용해서 출력한다.

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach(hero => {
  console.log(hero);
});

map

배열안의 원소들을 변환할때 사용되며 map을 사용하면 새로운 배열이 만들어진다.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const square = n => n * n;
const squared = array.map(square);
console.log(squared);

 

findIndex

배열안에 있는 값이 숫자, 문자열 or boolean 일 경우 몇번째 원소인지 알아내려면 indexOf를 사용하나

배열안에 있는 값이 객체이거나 배열이라면 findIndex 를 사용한다

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const index = todos.findIndex(todo => todo.id === 3);
console.log(index);

find 

findIndex와 비슷하나 찾아낸 값이 몇번째인지를 반환하는것이 아닌 찾아낸 값의 배열의 값들을 자체 반환한다

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const todo = todos.find(todo => todo.id === 3);
console.log(todo);

 

 

filter

특정 조건을 만족하는 값들로만 따로 추출해서 새로운 배열을 만든다 

const todos = [
  {
    id: 1,
    text: '자바스크립트 입문',
    done: true
  },
  {
    id: 2,
    text: '함수 배우기',
    done: true
  },
  {
    id: 3,
    text: '객체와 배열 배우기',
    done: true
  },
  {
    id: 4,
    text: '배열 내장함수 배우기',
    done: false
  }
];

const tasksNotDone = todos.filter(todo => todo.done === false);
//const tasksNotDone = todos.filter(todo => !todo.done); 위와 같다
console.log(tasksNotDone);

splice

배열에서 특정 항목을 제거할때 사용한다

(첫번째 파라미터는 몇번째 인덱스부터 지울지를 의미하고 두번째 파라미터는 그인덱스부터 몇개를 지울지를 의미한다.)

 

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
numbers.splice(index, 1);
console.log(numbers);

slice 

splice와 비슷하나 splice를 배열을 자를때 기존의 배열에서 잘라내는 반면

slice는 기존 배열은 건들이지 않는다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지

console.log(sliced); // [10, 20]
console.log(numbers); // [10, 20, 30, 40]

concat

 

여러개의 배열을 하나의 배열로 합쳐준다

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);

console.log(concated);

join

배열안의 값들을 문자열 형태로 합쳐준다.

const array = [1, 2, 3, 4, 5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

reduce

배열에 대한 총 합을 구하는 등 누적 계산에 용이하다 (map, filter, find 등도 모두 reduce로 구현 가능하다)

배열의 값을 한개로 감소시키는 특성을 가지고 있다

 

arr.reduce((previouseValue, currentValue, currentindex, array) => {}, initialValue}

 

첫번째 인자 : callback 부분

accumulator: 마지막 콜백에서 반환된 값 또는 초기값(initialValue) ( 콜백의 반환값을 누적)

currentValue : 현재 배열 내 처리되고 있는 요소의 현재 값 (처리할 현재 요소)

currentIndex: 현재 배열내 처리되고있는 요소의 인덱스 (initialvalue를 제공한 경우 0 혹은 1부터시작)

array: reduce 호출에 사용되는 원래 배열

 

initialValue: callback의 첫번째 인수의 값에 사용되는 값(default)

 

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum);

 

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current) => {
  console.log({ accumulator, current });
  return accumulator + current;
}, 0);

console.log(sum);

 

차례차례 누적한다 0부터 시작인 이유는 초기값을 0으로 지정해주었기 때문이다

 

reduce로 평균 계산하기

const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, current, index, array) => {
  if (index === array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(sum);

배열의 중복된 갯수 구하기

const arr = ['pdf', 'html', 'html', 'gif', 'gif', 'gif'];

//반복된 횟수를 객체로 반환하라



const res = arr.reduce((total, current) => {

    console.log(`total = ${JSON.stringify(total)}`);

    console.log(`current = ${JSON.stringify(current)}`);



    // total[current] = (total[current] || 0) + 1;

    total[current] = (total[current] || 0) + 1;

    console.log(total[current]);



    return total;

}, {});



console.log(res);

reduce 활용 설명 블로그 주소 : https://steemit.com/javascript/@rouka/reduce