[JavaScript-61] 배열 forEach, map메소드 정리

우선, 결론부터 말하면,

 

(1) forEach, map의 용도: 배열의 각 요소들을 하나씩 돌아가며 반복 작업을 수행

(2) 둘의 차이점: forEach는 반복작업 자체만 수행, map은 작업한 결과를 요소로 하는 새 배열 생성 가능

 

자, 이제 하나씩 차근차근 살펴볼게요.

코드로 보시죠

let arr1 = [1, 2, 3, 4, 5]

arr1.forEach(function(item, i, arr){
    console.log(`${i}:${item}`);
    };

자, 위의 코드가 가장 원초적인 forEach문의 생김새입니다.

하나씩 차근 차근 설명 드릴테니, 걱정하지 마세요!

 

자 우선, forEach와 map은, 배열 메소드기 때문에, 배열에만 적용이 가능해요.

먼저, 배열이름.forEach()를 해주고, 

이제 파라미터 내부를 채워줘야 하는데요,

forEach는 파라미터 안에 반드시 함수를 넣어줘야 합니다!

그래서 저는 함수를 하나 만들었어요. 

당연히, 외부에서 호출하기 위해 만드는 함수가 아니니, 이름은 지을 필요가 없겠죠?

 

자, forEach문 안에 들어가는 함수의 파라미터는 최소1개, 최대 3개까지 작성이 가능한데요!

당연히, 파라미터의 이름은 변수이니 우리가 마음대로 지어줄 수 있는데,

보통 2, 3번째는 각각 i랑 arr로 많이 적어주는 편입니다. 

왜냐?

각각의 파라미터는 이름은 자유로 짓더라도, 각 파라미터의 역할이 있기 때문입니다. 

 

우선, 첫 파라미터는 반드시 존재해야 합니다. 

이녀석은, 배열의 요소를 하나씩 받아주는 녀석이니까 가장 중요하겠죠?

두 번째 요소는 몇 번째 인덱스인지를 알려주고, 마지막은 내가 어떤 배열에 forEach를 적용했는지를 알려줍니다.

그래서, arr는 arr1이 되겠죠?

let arr1 = [1, 2, 3, 4, 5]

arr1.forEach(function(item, i, arr){
    console.log(`${i}:${item}`);
    };
    
/*
출력결과
0 1
1 2
2 3
3 4
4 5
*/

이해되시죠? 출력 결과에서 1열의 숫자들은 인덱스, 

2열의 숫자들은 배열의 요소입니다!

 

그럼, 대체 세 번째 파라미터 arr은 왜 쓰는거야? 할 수 있는데요

let arr1 = [1, 2, 3, 4, 5]

[1, 2, 3, 4, 5].forEach(function(item, i, arr1){
    console.log(`${i}:${item}`);
    };

이렇게, 배열의 이름이 아니라, 배열 자체로 forEach메소드를 적용할 경우엔, 

세 번째 파라미터까지 써줘야 하고, 이때는 배열의 이름을 써줘야 합니다.

 

마지막으로 map함수는, forEach와 동작이 완전히 같아서, forEach부분을 map으로만 바꾸면 되는데,

한 가지 차이는, map함수의 동작 부분에 return을 써주고 새 변수에 map을 할당하면,

새로운 배열을 만들어준다는 것입니다. 

let arr1 = [1, 2, 3, 4, 5]

const arr2 = arr1.map(function(item, i, arr){
    return `${i}:${item}`;
    };
    
console.log(arr2);
//['01', '12', '23', '34, '45']

forEach로는, 이렇게 새로운 변수에 할당해 새로운 배열을 만들 수 없습니다!

 

마지막으로, map을 활용한 코드 하나만 더 보면서 이번 챕터는 마무리할게요!

const quiz = ['JKKSD', 'CIUQT', 'DDNLO', 'PPEWJ', 'DASWO'];

// 여기에 코드를 작성하세요
const answer = quiz.map((item, i)=>{
  return item[i]
})

이건 코드잇의 실습문제를 약간만 변형해서 가져온 것인데요!

map이나 forEach의 두 번째 파라미터를 유용하게 활용한 예제입니다.

i는 인덱스를 받아오니까, 굳이 i++; 을 하지 않아도, 0부터 자연스럽게 1씩 증가하죠?

 

따라서, 위 코드를 뜯어서 해석해보면, 

item에는 순차적으로 배열의 요소들이 들어오고, i는 0부터 item에 새로운 요소가 들어올 때마다 1씩 늘어납니다.

그럴 때, item이라는 요소는 문자열이고, 그 문자열을 i로 인덱싱 하니까,

 

첫 요소는 0번 글자, 두 번째 요소는 1번 글자, 세 번째 요소는 2번 인덱스 글자.....

이렇게 뽑아오겠죠?

그럼, 출력 결과는? ['J', 'I', 'N', 'W', 'O']가 되겠네요!