JavaScript 배열함수 map(), filter()

HGY·2023년 8월 8일
0

React

목록 보기
5/9

배열함수

배열의 값을 다루기 위해 만들어진 기능
배열에만 사용 할 수 있다.

map()

주어진 함수를 호출한 결과를 모아서 새로운 배열을 생성하는 함수

let teacherList = ['선영표', '박수현', '최영화', '김석훈']

// 각 값에 '선생님' 이라는 값을 붙이고 싶다면?
let newList = teacherList.map(item => item + '선생님')

// map() 안에는 함수를 작성한다.
// 위의 구문을 해석하자면 teacherList에서 값 하나하나를 꺼내서 item이라 명명하고, 
// 그 item에 '선생님'을 더한 후 newList에 저장한다는 뜻이다.

const cityArr = [
        { city: 'seoul', temp: 86 },
        { city: 'gwangju', temp: 85 },
        { city: 'busan', temp: 72 },
]

// item => item.temp -> 이런 식으로 작성 하는 것은 Arrow Function의 줄임말
// (item) => {return item.temp} -> 이게 원래 식

// 함수로 분리
const toCelcius = (item) => {

// ... 스프레드 문법 (ES6)
// => 객체나 배열과 함께 사용하면 내가 변경할 아이템은 제외하고 나머지는 그대로 유지한다

        return { ...item, temp: 5 / 9 * (item.temp - 32) }
}

let newCityArr = cityArr.map(toCelcius)
console.log(newCityArr)

filter()

배열의 각 요소에 대해서 주어진 함수의 결과 값이 true인 요소들만 모아서
새로운 배열로 반환하는 함수를 의미한다

let person = [
        { name: '안유진', age: 20, gender: '여자' },
        { name: '이영지', age: 21, gender: '여자' },
        { name: '나영석', age: 47, gender: '남자' },
]

// 배열 person에서 gender가 '여자'인 값만 추출 하려면?
let womanList = person.filter(item => item.gender == '여자')
console.log('womanList : ', womanList)

// person 이라는 배열 내에서 나이가 29살 이상인 사람만 모아서 adultList를 생성하려면?
let adultList = person.filter(item => item.age >= 29)
console.log('adultList : ', adultList)

 // Filter 함수 예제
    
let nums = [1,2,3,4,5,6]

// 1. nums 배열 안에서 짝수만 모아서 새로운 배열 생성 => evenNums
// 2. evenNums 안에 있는 짝수 데이터에 *10

let evenNums = nums.filter(item => item%2 == 0)
console.log('짝수 : ' , evenNums)

console.log('10 곱한 값 : ' , evenNums.map(item => item*10))
profile
바보 개발자 지망생

0개의 댓글