Array 관련 자주 사용하는 함수 정리

자주쓰는 함수

map, reduce, forEach, filter

// 테스트로 사용할 배열 입니다.

const testArr = [
    {
      name: 'youngjun',
      tall: 187,
      position: 'developer',
      sex: 'M',
    },
    {
      name: 'yonghoo',
      tall: 170,
      position: 'manager',
      sex: 'W',
    },
    {
      name: 'jewon',
      tall: 173,
      position: 'employee',
      sex: 'M',
    },
  ];

1. Array.map()

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

function testMap() {
    let value = testArr.map((item) => {
      item.additional = '멋진' + item.position;
      return item;
    });
    return value;
  }

testMap() // 실행

예상되는 결과는 아래와 같다.

 [
    {
      name: 'youngjun',
          ...중략...
      additional: '멋진developer'
    },
    {
      name: 'yonghoo',
	  ...중략...
      additional: '멋진manager'
    },
    {
      name: 'jewon',
	  ...중략...
      additional: '멋진employee'
    },
  ];
// 각 배열마다 additional 이라는 key 와 value 가  추가된것을 확인할 수 있다.

2. Array.reduce(), Array.forEach()

function testReduce() {
    let initialValue = {};

    let value = testArr.reduce((result, current) => {
      const nameArr = {};
      testArr.forEach((item) => {
        nameArr[item.name] = {
          position: item.position,
          sex: item.sex,
          tall: item.tall,
        };
      });
      result = nameArr;
      return result;
    }, initialValue);
    return value;
  }

testReduce() //실행

여기서 중요한 것은 reduce 함수를 실행할 때는, 기본값 즉, initialValue 가 필수적으로 들어가야 한다.

예상되는 결과는 다음과 같다.

{
  jewon: { 
    position: "employee", 
    sex: "M",
    tall: 173 
  },
  yonghoo: { 
    position: "manager",
    sex: "W",
    tall: 170
  },
  youngjun: { 
    position: "developer",
    sex: "M",
    tall: 187
  }
}

배열로 되어 있던 것을 객체로 변환시킴.

Array.filter()

function testFilter(tallSize) {
    let value = testArr.filter((item) => item.tall > tallSize);
    return value;
  }

testFilter(180) //실행

조건에 부합하면 true를 반환하여 요소를 유지하고, 조건과 맞지않아 false를 반환하면 버립니다.

	[{
      name: 'youngjun',
      tall: 187,
      position: 'developer',
      sex: 'M',
    }]

다음과 같은 값만 나오게 된다.