Data transformation: map,filter

Juyeon Lee·2022년 2월 22일
0
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
const eurToUsd = 1.1;
const movementsUSD = movements.map(function (mov) {
  return mov * eurToUsd;
});
console.log(movements);
console.log(movementsUSD);

map도 callback function 형식이고 return값을 정해주면
movementsUSD는 원래 있던 array값에 1.1곱한 값들 array형태로
나오게 된다.

loop of 방법으로

const movementsUSDfor = [];
for (const mov of movements) movementsUSDfor.push(mov * eurToUsd);
console.log(movementsUSDfor);

이렇게 해줄수도 있지만 map 이용하는게 더 간편한듯..
위에 map이용한 걸 이렇게 간편하게 arrow function으로도
표현해 줄 수 있다.

const movementsUSD = movements.map(mov => mov * eurToUsd);
console.log(movementsUSD);

map에서 index 뽑아주는건 저번에 배웠던 것과 같은 방식으로

const movementDescription = movements.map((mov, i, arr) => {
  if (mov > 0) {
    return `Movement ${i + 1}: You deposited ${mov}`;
  } else {
    return `Movement ${i + 1} :You withdrew ${Math.abs(mov)}`;
  }
});
console.log(movementDescription);

이렇게 해줄 수 있다. 근데 코드를 더 클린하게
이렇게 표현 해 줄 수도 있음

const movementDescription = movements.map(
  (mov, i, arr) =>
    `Movement ${i + 1} :You ${mov > 0 ? 'deposited' : 'withrew'} ${Math.abs(
      mov
    )}`
);
console.log(movementDescription);

다음으로 filter에 대해 알아보자

const deposits = movements.filter(function (mov) {
  return mov > 0;
});
console.log(movements);
console.log(deposits);

이렇게 간단하게 0보다 큰 애들만 array에 새로 담아줄 수 있음.
이걸 loop of 방법으로 했다면

const depositsFor = [];
for (const mov of movements) if (mov > 0) depositsFor.push(mov);
console.log(depositsFor);

이렇게 해줬어야 했는데 filter가 훨씬 간편함.

const withdrawals = movements.filter(function (mov) {
  return mov < 0;
});
console.log(withdrawals);

이건 반대로 0보다 적은거 return해줄때...
arrow function으로 이렇게 표현해줄 수도 있다.

const withdrawals = movements.filter(mov => mov < 0);
console.log(withdrawals);

3/25
map 더 간략한 예시

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const doubles = numbers.map(function (num) {
    return num * 2;
})


const movies = [
    {
        title: 'Amadeus',
        score: 99
    },
    {
        title: 'Stand By Me',
        score: 85
    },
    {
        title: 'Parasite',
        score: 95
    },
    {
        title: 'Alien',
        score: 90
    }
]

const titles = movies.map(function (movie) {
    return movie.title.toUpperCase();
})

function parameter 쓰고 끄집어 내는게 좀 헷갈린다.
아하 map이 array에 있는 애들 불러서 callback function에
넣어주고... 나는 그 function에서 끄집어 내거나
아니면 숫자곱해주거나 하는걸 하면 되는거군.

filter도 아래의 코드를 보니 더 이해가 쉽다

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

numbers.filter(n => {
    return n < 10
})


const movies = [
    {
        title: 'Amadeus',
        score: 99,
        year: 1984
    },
    {
        title: 'Sharknado',
        score: 35,
        year: 2013
    },
    {
        title: '13 Going On 30',
        score: 70,
        year: 2004
    },
    {
        title: 'Stand By Me',
        score: 85,
        year: 1986
    },
    {
        title: 'Waterworld',
        score: 62,
        year: 1995
    },
    {
        title: 'Jingle All The Way',
        score: 71,
        year: 1996
    },
    {
        title: 'Parasite',
        score: 95,
        year: 2019
    },
    {
        title: 'Notting Hill',
        score: 77,
        year: 1999
    },
    {
        title: 'Alien',
        score: 90,
        year: 1979
    }
]



const badMovies = movies.filter(m => m.score < 70)

const recentMovies = movies.filter(m => m.year > 2000)

이렇게 조건에 맞는 elements들을 filtering 해줄 수 있음
filter은 map하고 같이 많이 쓰인다. 아래처럼

const goodMovies = movies.filter(m => m.score > 80)
const goodTitles = goodMovies.map(m => m.title)

score가 80보다 이상인elements 중에 title만 뽑아준다..

하............ 애로우 펑션으로 하려니까
너무 헷갈림 ㅠㅠㅋㅋㅋ애로우 펑션 더 연습해야겠음..껄껄

0개의 댓글