[React] React의 다양한 함수들 - forEach, map

1. ForEach함수

배열 함수 forEach()는 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 다만, 배열의 처음부터 마지막 순번까지 모두 작업하는 경우에는 forEach()함수를 사용하는 것이 간편하다.
다음 예시를 확인해보자.

class R014_ForEach extends Component {
    componentDidMount(){
        var For_Arr = [3,2,8,8];
        var For_newArr = [];

        for (var i = 0; i < For_Arr.length; i++){
            For_newArr.push(For_Arr[i]);
        }
        console.log("1. For_newArr : ["+ For_newArr+ "]");

        var ForEach_Arr=[3,3,9,8];
        var ForEach_newArr =[];
        ForEach_Arr.forEach((result)=>{
            ForEach_newArr.push(result);
        })
        console.log("2. ForEach_newArr : [" + ForEach_newArr+ "]");

두 코드를 비교해보면 차이점이 느껴진다.

2. Map()함수

배열 함수 map()은 forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 차이점은 map()은 forEach()와 달리 return을 사용하여 반환 값을 받을 수 있다.

class R015_Map extends Component {
  componentDidMount(){
      var Map_Arr =[3,2,8,8]
      let Map_newArr = Map_Arr.map(x => x)
      console.log("1. Map_newArr : [" + Map_newArr+ "]")
```에 저
기존 배열 `Map_Arr`에서 map()함수를 이용하여 순서대로 하나씩 요소에 접근한다. 이때마다 콜백 함수가 실행된다. 가져온 값을 변수 x에 넣은 뒤에, 그대로 반환하여 `x=>x` 순서대로 쌓아둔다. 마지막 요소까지 반복했다면 한번에 새로운 배열 Map_newArr에 저장한다.
여기서 `x=>x`는 `Map_Arr.map( x => {return x})` 와 같다. 화살표 함수는 return 구문을 생략 가능하다.

이제 곱셈을 해서 새로운 배열에 저장해보자.
```js
let Map_mulitiArr = Map_Arr.map(x => x * 2)
      console.log("2. Map_mulitiArr : [" + Map_mulitiArr + "]")

타단~ 이렇게 저장된다!

다음으로는 배열 안에 객체를 생성한다.

var ObjArray = [{key: 'react', value : '200'}, {key : '리액트', value : 'TwoHundred'}];

배열 안에 있는 객체를 순서대로 가져와 콜백 함수를 실행한다. 가져온 값을 obj라는 변수에 저장한다. 콜백 함수의 두번째 인자인 index는 기존 배열의 인덱스와 동일하다!

let Map_objArr = ObjArray.map((obj,index) => {

자. 이제 새로운 객체 Obj를 선언해보자. 기존 객체 ObjArray의 key, value값을 새로운 객체 Obj의 key, value 값으로 저장한다. 모든 반복이 끝나면, Map_objArr 변수에 반환 값들을 저장한다.

let Map_objArr = ObjArray.map((obj,index) => {
            console.log((index+3)+". obj : " + JSON.stringify(obj))
            var Obj = {};
            Obj[obj.key] = obj.value;
            return Obj;
        });

짜잔~ objArray가 예쁘게 Map_objArr에 담겨져있다.