Map , Filter , Every

내승현·2022년 3월 27일
0

map

배열.map((요소, 인덱스, 배열) => { return 요소 });

map의 기본 원리는 간단하다.
반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 것이다. 그래서 이름이 map입니다. 매핑한다고 표현한다.
어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 되는 것이다


const oneTwoThree = [1, 2, 3];
let result = oneTwoThree.map((v) => {
  console.log(v);
  return v;
});
// 콘솔에는 1, 2, 3이 찍힘
oneTwoThree; // [1, 2, 3]
result; // [1, 2, 3]
oneTwoThree === result; // false

반복문으로 요소를 순회(1, 2, 3 순서로)하면서 각 요소를 어떻게 짝지어줄지 알려준다. 함수가 그냥 return v를 하기 때문에 같은 값을 그대로 짝짓는다.

알아둘 점은, map을 실행하는 배열과 결과로 나오는 배열이 다른 객체라는 것입니다. 기존 배열을 수정하지 않고 새로운 배열을 만들어냅니다. 단, 배열 안에 객체가 들어있는 경우, 객체는 공유됩니다.

포인트 = 요소들이 원래 자리로 돌아감

  • 화살표 함수이기 때문에 가능함

  • 규칙적인 배열만 반환할 수 있는게 아니라, 함수 안에 적어준대로 반환할 수 있기 때문에 자유도가 높다.

정리하자면, map은 배열을 1대1로 짝짓되 기존 객체를 수정하지 않는 메서드입니다.

result = oneTwoThree.map((v) => {
  if (v % 2) {
    return '홀수';
  }
  return '짝수';
});
result; // ['홀수', '짝수', '홀수']

MDN- Array.prototype.map()

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

filter


리턴 함수

function add(){
    const a = 1
    const b = 2

    console.log(a+b)
}

add()

function add2(aaa, bbb) {
    console.log(aaa + bbb)
}

add2(1, 2)

add2(5, 10)

function multi(zzz, qqq){
    console.log(zzz * qqq)
}
//undefined
multi(2, 4)

function add3(aaa, bbb) {
    return aaa + bbb
}

const result1 = add3(2, 3)

function multi3(zzz, qqq){
    return zzz * qqq
}

const result2 = multi3(2, 4)

result1
//5
result2
//8
function multi3(zzz, qqq){
    return
}

return 위에 특별한 로직 없으면 중괄호 생략 가능

const add = (aaa, bbb) => {
    return aaa + bbb
}

add(1, 2)
//3
const add2 = (aaa, bbb) => (aaa + bbb)

const add3 = (aaa, bbb) => aaa + bbb

생략이 불가능 한 경우

const add = (aaa, bbb) => {
    return aaa + bbb
}

add(1, 2)
3
const add2 = (aaa, bbb) => (aaa + bbb)

const add3 = (aaa, bbb) => aaa + bbb

const classmates= [
    { name: "철수" },
    { name: "영희" },
    { name: "훈이" }
]

classmates.map((el) => { name: el.name + "어린이" })
(3) [undefined, undefined, undefined]

HTML과 연결

실제 프로젝트에서는 컴포넌트의 리턴값 안에서 많이 사용하게 된다.
map을 리턴값 안에서 사용하기 위해 {}으로 감싸서 사용한다.
*return 안에 자바스크립트를 가지고 오기 위해서 {}을 사용하는 것이다.

Filter + Map

fitler - 원본의 갯수가 작거나 같다
Map - 원본의 갯수가 같음

ex) 게시판 목록 뿌리기

filter 예시

Every

every 함수는 배열의 모든 요소가 callbackFunction 에서 true를 리턴해야 true를 리턴,

하나라도 false가 떨어지면 false를 리턴한다.

array.every(callbackFunction(currentValue, index, array), thisArg)

구문은 filter, map과 같습니다.

callbackFunction, thisArg 두개의 매개변수를 갖고,callbackFunction은

currentValue : 배열의 현재 값

index : 배열의 현재 값의 인덱스

array : 현재 배열

thisArg : this값으로 활용될 것이다.

그럼 예를 보자.

<script type="text/javascript">
(function test(){
    var testArray = [1,2,3,4,5];
    var resultArray = [];
    function underThree(value){
        return (value<3) ? true : false;
    }
    function underTen(value){
        return (value<10) ? true : false;
    }
 
    resultArray.push(testArray.every(underThree));
    resultArray.push(testArray.every(underTen));
})(); 
</script>

테스트 배열이 존재하고 그에 따른 결과를 받을 배열을 생성했다.

그리고 3이하일 경우 true, 아닐 경우 false를 리턴하는 함수와

10이하일 경우 true, 아닐 경우 false를 리턴하는 함수를 생성했다.

위에서 말한대로 every 는 callbackFunction에서 모두 true를 리턴해야 true가 된다.

false, true, true, true 가 나왔죠.
첫번째의 경우 4,5 에서 false가 리턴이 되니 false

두번째의 경우 모두 10 미만이니 true
세번째의 경우 1,2,3 에서 true 이니 true

네번째의 경우 모두 true이니 true 값이 리턴된 것이다.

every 함수의 경우 배열내 값이 존재하는지 확인할때나 조건에 맞는(혹은 맞지 않는) 값이 있는지 확인 할 때 등 활용이 가능합니다.

profile
아토언니의 성장기 ,,

0개의 댓글