프로그래밍 언어와 기술/JavaScript

[JavaScript] filter, map

tero1115 2023. 7. 11. 16:55

filter

 - 배열의 데이터를 반복하는데 조건에 맞는 요소만 걸러낼 때 사용한다
 - 함수를 매개변수를 받는데 (콜백함수) return값이 true나 false 여야 한다
 - 콜백 함수의 return 값이 true면 리스트에 남고 false면 필터링 된다

 	// 나이가 13살 이상인 사람만 필터링 하는 함수
	const check = (value, index, array) => {
        return value.age > 12;
    }

    const result1 = array.filter(check);
    console.log("result1");
    console.log(result1);

 

map

 - 배열의 데이터를 반복하는데 기존의 데이터 형식을 다른 형식으로 변경할 때 사용
 - 함수 매개변수를 받는데 (콜백함수) return 값이 어느 것이든 될 수 있다
 - map은 객체 Map하고 전혀 상관이 없으니 주의
 - 기존의 객체 배열 -> 이름만 있는 문자열 배열로 전환

    const result2 = array.map((value, index, array)=>{
        return value.name;
    });

    console.log("result2");
    console.log(result2);

 

 


연습

forEach - name님 안녕하세요 반복출력
filter - 이름이 '길'자가 들어간 사람만 남기기
map - 나이만 뽑아서 숫자 배열 만들기
	//forEach - name님 안녕하세요 반복출력
    console.log("forEach");
    array.forEach((value)=>{
        console.log(value.name + "님 안녕하세요") 
    });

    // filter - 이름이 '길'자가 들어간 사람만 남기기
    console.log("filter");
    const result3 = array.filter((value)=>{
        return value.name.includes('길');
    });
    console.log(result3);
    
    // map - 나이만 뽑아서 숫자 배열 만들기
    console.log("map");
    const result4 = array.map((value)=>{
        return value.age;
    });
    console.log(result4)

return이 한줄이면 중괄호가 없어도 된다.

    const array = [
        {name : "홍길동", age : 12},
        {name : "임꺽정", age : 13}
    ];
    
    
    //forEach - name님 안녕하세요 반복출력
    console.log("forEach");
    array.forEach((value)=>console.log(value.name + "님 안녕하세요"));
    
    // filter - 이름이 '길'자가 들어간 사람만 남기기
    console.log("filter");
    const result3 = array.filter((value)=>value.name.includes('길'));
    console.log(result3);
    
    // map - 나이만 뽑아서 숫자 배열 만들기
    console.log("map");
    const result4 = array.map((value)=> value.age);
    console.log(result4)