배열 함수

2019-11-19
#javascript

잘 아는 줄 알았는데 사용하다보면 까먹거나 헷갈리는 부분들이 있었다.
자바스크립트에서 배열을 다룰 때 주로 사용하는 함수들에 대해서 정리해보자.

map

배열.map((요소, 인덱스, 배열) => { return 요소 });
여기서 주의할 점은 해당 배열의 length만큼 똑같이 리턴한다는 것이다. (가끔 이 부분을 깜빡했었음..ㅠ)

1
2
3
4
5
[1,2,3, -10].map(v => {
  if (v > 0) {
    return v; // [1,2,3,undefined]을 리턴한다. 
  }
});


forEach

배열.map((요소, 인덱스, 배열) => { });
기존에 for문이라고 생각하면 된다. 루프를 돌면 따로 리턴하는 값은 없다.
기존에 for문과 차이점이라면 중간에 break를 사용하여 나올 수 없다.

1
[1,2,3].forEach(v => console.log(v)); // 1,2,3


some, every

some은 return true가 되는 순간 루프문을 나오게 된다.
주로 해당 조건에서 어떠한 작업을 할 때 사용된다. 반환되는 값은 true이다.

1
2
3
4
5
6
7
8
let a = [];
[1,2,3].some(v => {
  console.log(v) // 1, 2 까지만 찍힌다.
  if (v === 2) {
    a.push(2)
    return true;
  }
})


every는 모든 배열을 다 순회한다.
모든 요소가 true로 떨어지면 treu리턴, 하나라도 false로 떨어지면 false를 리턴한다.

1
2
3
4
5
6
7
8
9
// false 리턴
[1,2,3].every(v => {
  return v < 2;
})

// true 리턴
[1,2,3].every(v => {
  return v < 4;
})


reduce

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);
초깃값을 적어주지 않으면 자동으로 0번째 인덱스의 값이 된다.
이 함수는 주로 코딩 테스트 문제를 준비하면서 접하게 되었다.
그 뒤로 자주 사용하고 있다. 매우 유용한 함수이다.
주로 덧셈을 할 때 자주 사용하고, 누적값을 활용해서 다양하게 이용 가능하다.
항상 return을 해줘야한다!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[1,2,3].reduce((acc, cur) => {
    return acc += cur; // 최종 6을 리턴
}, 0);

[1,2,3].reduce((acc, cur) => {
    cur < 3 && acc.push(cur);
    return acc; // [1,2]
}, []);


// 위와 같은 똑같은 기능을 하는 부분인데 typescript를 사용하면서 논리연사자를 사용하려고 했는데 tslint설정으로
// 따로 해주지 않아 if문으로 사용한 경우다. 
// 이 경우 if문에 해당하지 않는 경우 return 되는 값을 지정하지 않아 undefined로 리턴이 된다.
[1,2,3].reduce((acc, cur) => {
    if (cur < 3) {
      acc.push(cur);
      return acc;
    } // undefined..
}, []);
1
2
3
4
5
6
7
8
9
10
11
// 각 gender별로 몇명이 있는지 확인하고 싶을 때
let object = [{gender: 'female', name: 'july'}, {gender: 'male', name: 'kevin'}, {gender: 'female', name: 'cindy'}];
object.reduce((acc, cur) => {
      if (acc[cur.gender]) {
        acc[cur.gender] +=1;
      } else {
        acc[cur.gender] = 1;
      }
      // 자주 까먹는다.. 무조건 값을 return 해줘야한다!! 꼭!! ***
      return acc; // {female: 2, male: 1}
}, {});


filter

조건이 true가 되는 요소를 리턴해 새로운 배열을 만든다.
즉 기존 배열에 있는 length와 일치하지 않을 수 있다. (이 부분이 중간중간 헷갈렸던 부분…)

1
2
const data = [1, 2, 3, 4, 5];
data.filter(v => v>2); // [3,4,5]


find, findIndex

배열의 특정 요소를 탐색하고 싶을 때는 indexOf를 주로 사용하나 배열의 요소가 객체로 되어 있는 경우에 find, findIndex
를 사용한다.
find는 조건에 맞는 객체 자체를 반환해주며
findIndex는 조건에 맞는 index의 값을 반환해준다.

1
2
3
4
5
6
7
8
9
var commentList = [
  {id : 1, child_count: 2, message: '코딩이 재미있다.'},
  {id : 2, child_count: 3, message: '젊은 꼰대'},
  {id : 3, child_count: 0, message: 'ㅎㅎㅎㅎ'}
];

commentList.find(v => v.child_count === 0); //{id: 3, child_count: 0, message: "ㅎㅎㅎㅎ"}

commentList.findIndex(v => v.child_count === 0); //2