JS. ForEach & Map 메서드

MJ·2023년 4월 25일
0

Java Script

목록 보기
49/57
post-thumbnail

ForEach

  • 배열 메서드로 함수를 인수로 받아들인다.

  • ForEach는 배열안의 요소에 대해 함수와 코드를 한 번씩 실행한다.
    그래서 어떤 함수를 넣든 상관없이 함수가 아이템별로 한 번씩 호출되고 각각의 아이템이
    함수에 자동으로 전달됩니다.


const numbers = [1,2,3,4,5,6,7,8,9,10];


numbers.forEach(function (element){
    console.log(element);
});

/* 
함수를 재사용할 필요가 없기에 익명함수를 사용
출력 : 1 2 3 4 5 6 7 8 9 10

number 배열안에 있는 아이템의 요소들의 개수만큼, 함수가 실행되고 배열의 요소들이 함수의
매개변수로 전달 됩니다.
*/

단순하게 배열안의 요소를 출력하기 위함이라면 for..of 반복문을 사용 합시다.


1.1 배열안의 객체 호출하기

const movies = [
    {
        title: '범죄와의전쟁',
        score: 99
    },
    {
        title: '지금 만나러갑니다',
        score: 90  
    },
    {
        title: '검은 사제들',
        score : 85
    }
]

movies.forEach(function (movie){
    console.log(`${movie.title} : ${movie.score}/100`);
})

/*
범죄와의전쟁 : 99/100
지금 만나러갑니다 : 90/100
검은 사제들 : 85/100
*/



forEach와 for..of

  • forEach는 사실상 많이 사용되지 않습니다.
    for..of 반복문이 출시되기 이전에 사용했던 메서드로 현재는 for..of 반복문을 많이
    사용합니다.

  • 결론적으로 for..of를 사용하자



Map

  • 함수를 배열의 요소당 1번씩 실행한다 (for Each 메서드와 비슷)
    for each와 차이점은, 함수의 반환 값을 이용해서 새로운 배열을 생성한다.

  • 배열을 다른 상태로 매핑하는 메서드

  • 기존의 배열에서 일부만 가져오거나, 정수라면 정수에 해당되는 값을 증가/감소 시킬 때
    map 메서드를 사용해서 새로운 배열에 저장할 때 사용하는 메서드입니다.


const numbers = [1,2,3,4,5,6,7,8,9,10];

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

console.log(duble);
/*
출력 
[
   2,  4,  6,  8, 10,
  12, 14, 16, 18, 20
]

numbers 배열의 요소들을 map 메서드로 인해 하나씩 불러와서 제곱한다음 반환합니다.
반환하면서 배열이 생성되고, 생성된 배열은 duble 변수에 저장 된다.

순차적으로 새로운 배열에 [2] [2,4] [2,4,6] 식으로 저장됩니다.
*/

2.1 배열안의 객체에서 map 메서드 사용

const movies = [
    {
        title: '범죄와의전쟁',
        score: 99
    },
    {
        title: '지금 만나러갑니다',
        score: 90  
    },
    {
        title: '검은 사제들',
        score : 85
    }
]

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

console.log(neww);
/* 
출력
[ '범죄와의전쟁', '지금 만나러갑니다', '검은 사제들' ]

movie 배열에 존재하는 객체들 중에서 프로퍼티가 title인 값만
새로운 배열에 반환해서 변수 neww에 저장합니다.
*/
profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글