자바스크립트 공부하기 - 빌트인 생성자 배열 중 forEach(), map(), filter() 깊게 공부해보자

자주 쓰이는 배열 메소드 중, 세개가 개념이 비슷하고 헷갈린 것 같아서 정리의 필요성을 느꼈다.

이전 글 참조하기 ! 🍑

자바스크립트 공부하기 - 빌트인 생성자 배열

---

 

 

Q : map이 새로운 배열을 반환 하기 때문에 상수화 해줘야 하는구나 ?

A: 맞아요! 😄 map()은 새로운 배열을 반환하기 때문에, 그 값을 저장하려면 변수에 할당하거나 상수로 선언하는 게 좋아요.

예를 들어, map()을 사용할 때는 새로 생성된 배열을 활용하려면 반드시 그 값을 어디에 저장해야 하니까, 상수(const)나 변수(let)를 사용해 저장하는 것이 일반적이에요.

let candies = ['초콜릿', '사탕', '껌'];

// map()으로 변형된 새로운 배열을 반환
const wrappedCandies = candies.map(function(candy) {
  return candy + '을 포장지에 넣었어!';
});

console.log(wrappedCandies); // ["초콜릿을 포장지에 넣었어!", "사탕을 포장지에 넣었어!", "껌을 포장지에 넣었어!"]
console.log(candies); // 원본 배열은 변하지 않음 ["초콜릿", "사탕", "껌"]

왜 상수로 선언하냐면?

• map()은 새로운 배열을 반환하므로, 그 반환값을 어디에 저장해야 의미가 있어요.
• 상수로 선언하면 그 배열이 변경되지 않도록 보장할 수 있기 때문에, 값을 그대로 유지하려면 상수(const)로 선언하는 것이 안전해요.

요약:

• map()은 새로운 배열을 반환하기 때문에, 반환된 값을 변수나 상수에 할당해줘야 해요.
• 상수(const)로 저장하는 게 좋으며, 배열을 변경하지 않도록 보장할 수 있어요!

---

자 📢 ! ForEach 함수를 쉽게 공부해봅시다. 

포이치 함수를 공부하던 중, 인자를 3개까지 (포이치 콜백함수는 인자를 3개까지 받을 수 있다고 한다!) 받을 수 있다는 걸 새롭게 알게 되었다.

array.forEach(function(element, index, array) {
  // element: 현재 요소
  // index: 현재 요소의 인덱스 (0부터 시작)
  // array: 원본 배열
});

element 부분은 우리가 잘 알던 그 파트!

배열을 하나하나 처리해줄 요소인것, 그리고 두번째 index부분, array부분은 이번에 공부해서 알게 되었음 ✨

 

세 인자의  순서는 바꿀 수 없다 ! 
예를 들어, 두 번째 인자에 원본 배열을 받고 싶어도 그렇게는 안 된다는 것 :)

---

예제 1: 세 개의 인자를 모두 사용한 경우

const numbers = [10, 20, 30];

numbers.forEach(function(num, index, arr) {
  console.log(`현재 요소: ${num}, 인덱스: ${index}, 원본 배열: ${arr}`);
});

 

출력 결과:

현재 요소: 10, 인덱스: 0, 원본 배열: 10,20,30
현재 요소: 20, 인덱스: 1, 원본 배열: 10,20,30
현재 요소: 30, 인덱스: 2, 원본 배열: 10,20,30

→ 항상 num, index, arr 순서로 전달됨.

---

예제 2: 화살표 함수로 축약 가능

fruits.forEach((fruit, index) => console.log(index, fruit));

 

출력 결과:

0 apple
1 banana
2 cherry