[Javascript/Object/Array] map, filter (자바스크립트, 배열 반복, 객체 반복, 배열 찾기, 객체 찾기, prototype)

📚 map, filter

• 자바스크립트의 배열 프로토타입
• 배열의 반복을 통해 콜백 함수를 실행하고 새로운 배열을 리턴

---

📗 map

배열의 모든 요소를 반복하며 콜백 함수를 실행 후 새로운 배열 리턴

• 숫자 배열의 숫자들을 제곱해서 새로운 배열 생성

    var arr1 = [1, 4, 9];
    var arr2 = arr1.map(e => Math.pow(e, 2));
  
    console.log(arr1);
    console.log(arr2);

    [ 1, 4, 9 ]
    [ 1, 16, 81 ]

• 숫자 배열의 숫자들의 제곱근을 구해서 새로운 배열 생성

    var arr1 = [1, 4, 9];
    var arr2 = arr1.map(Math.sqrt);
  
    console.log(arr1);
    console.log(arr2);

    [ 1, 4, 9 ]
    [ 1, 2, 3 ]

• 배열에서 원하는 타입 찾기
  map 은 배열의 모든 원소를 반복하여 같은 크기의 배열을 생성하기 때문에 원하지 않은 원소는 undefinded 처리되어 저장된다

    var arr = [
      { test1: "테스트1", test2: "테스트2" },
      ["a", 1, "b", 2],
      "문자열",
      100
    ];
  
    var arr2 = arr.map(e => {
      if (Array.isArray(e)) return e;
    });
  
    console.log(arr2);

    [ undefined, [ 'a', 1, 'b', 2 ], undefined, undefined ]

---

📒 fiter

배열의 모든 요소를 반복하며 콜백 함수를 실행 후 통과한 요소들로 새로운 배열 리턴

• 배열에서 원하는 타입 찾기
  map 과 차이점을 알 수 있다

    var arr = [
      { test1: "테스트1", test2: "테스트2" },
      ["a", 1, "b", 2],
      "문자열",
      100
    ];
  
    var arr2 = arr.filter(e => {
      if (Array.isArray(e)) return e;
    });
  
    console.log(arr2);

    [ [ 'a', 1, 'b', 2 ] ]

• 콜백함수에서 아무것도 통과하지 못했을 때
  배열에서 어떠한 원소도 통과하지 못하면 빈 배열을 반환한다

    var arr1 = [100, 200, 300, 400];
    var arr2 = arr1.filter(e => e > 400);
    console.log(arr2);

    []

---