[javascript] 배열 순회의 세 가지 방법: map, filter, forEach

JavaScript의 배열 메서드 map, filter, forEach는 코딩 초보자가 반드시 알아야 할 기본 개념이다.

이 글에서 각 메서드의 개념, 특징, 차이점을 설명하고, 실전에서 어떻게 활용할 수 있는지 정리해보겠다. 🥳

 

1. 배열 메서드란 무엇인가?

JavaScript에서 배열은 데이터를 여러 개 모아놓은 상자와 같다.

배열에는 숫자, 문자, 객체 등 다양한 데이터가 들어갈 수 있으며,

배열 메서드는 이 데이터를 더 쉽게 가공하고 조작하기 위한 도구라고 보면 된다.

 

오늘 다룰 map, filter, forEach는 배열을 반복해서 사용하거나, 데이터를 변환할 때 매우 유용하다.

 

근데, 배열이 뭔데? 🤷‍♀️ 

(1) 배열의 필요성

1. 여러 데이터를 관리하기 위한 효율적인 방법이다.

• 같은 종류의 데이터를 하나의 변수에 담아 관리할 수 있다.

• 예: 학생 점수, 쇼핑몰 상품 목록, 일정표 등.

예를 들어, 학생 점수를 개별 변수에 저장하면:

let student1 = 80;
let student2 = 90;
let student3 = 85;

이런 식으로 비효율적이다.
하지만 배열을 사용하면? 아래처럼 하나의 변수 scores로 모든 데이터를 관리할 수 있다!

let scores = [80, 90, 85];

2. 반복적인 작업을 단순화
• 배열의 요소를 순회하며 같은 작업을 수행할 수 있다.
• 예: 학생 점수의 평균을 구할 때 배열을 사용하면 더 효율적이다.
3. 동적 데이터 관리
• 배열은 새로운 데이터를 추가하거나, 기존 데이터를 제거하는 데 유용하다.
• 예: 사용자가 계속 입력하는 데이터를 저장해야 할 때.

 

(2) 배열의 기본 개념

1. 순서
• 배열은 데이터가 순서대로 저장되며, 각 요소는 0부터 시작하는 인덱스를 가진다.
• 예: arr[0]은 배열의 첫 번째 요소이다.
2. 데이터 접근
• 각 요소는 배열 이름과 인덱스를 사용해 접근할 수 있다.
• 예: arr[2]는 배열의 세 번째 요소를 의미한다.
3. 데이터의 연속성
• 메모리 상에서 배열은 연속된 공간에 데이터를 저장해 효율적으로 접근할 수 있다.
• (단, 이는 자바스크립트처럼 동적 배열을 지원하는 언어에서는 추상화되어 보이지 않을 수 있다.)

 

(3) 배열의 특징

 

(4) 자바스크립트에서 배열의 특징 : 동적 배열! 
동적 배열이란? 크기가 고정되지 않고 데이터를 추가하거나 삭제할 때 자동으로 크기가 조정

 

(5) 배열과 객체의 차이

 

(6) 배열과 관련된 핵심 메서드

• push: 배열의 끝에 요소 추가.

• pop: 배열의 끝에서 요소 제거.

• shift: 배열의 앞에서 요소 제거.

• unshift: 배열의 앞에 요소 추가.

• map: 배열의 각 요소를 변환해 새로운 배열 생성.

• filter: 조건을 만족하는 요소만 골라낸 배열 생성.

• forEach: 배열의 각 요소에 대해 작업 수행.

 

오케이! 이해됐다. 배열 메서드의 3대장을 살펴보자.

 

2. 배열 메서드의 3대장: map, filter, forEach

 

3. 각 메서드의 상세 설명

(1) map()

• 정의: 배열의 각 요소를 변환하여 새로운 배열을 반환하는 메서드이다.

* 원본 배열은 건드리지 않는다.

“숫자에 2를 곱해서 새 배열을 만들고 싶다!” 면 아래 코드를 써볼 수 있다. 

1️⃣ 코드 분석

코드는 배열의 요소를 변환하고 그 결과를 확인하는 과정이다. 아래의 코드 흐름을 따라가 보자.

const nums = [1, 2, 3, 4, 5]; 
// nums라는 배열을 선언한다.

const doubled = nums.map(num => num * 2); 
// nums 배열의 각 요소(num)에 2를 곱해 새로운 배열을 만든다.
// 이 새로운 배열은 doubled 변수에 저장된다.

console.log(doubled); 
// 새로 생성된 doubled 배열의 내용을 출력해 확인한다.

2️⃣ map 메서드의 동작 원리

nums.map(num => num * 2)는 nums 배열의 각 요소를 하나씩 꺼내와 num에 대입한 뒤, num * 2 연산을 수행해 결과를 새로운 배열로 만든다.

이 과정에서 원본 배열(nums)은 변경되지 않고, 새로운 배열(doubled)이 반환된다.

 

3️⃣ console.log(doubled);의 역할

console.log는 JavaScript에서 데이터를 확인하거나 디버깅할 때 사용하는 도구이다.

이 경우에는 doubled에 저장된 새로운 배열을 출력해 어떤 값이 들어갔는지 확인하는 것이다.

 

4️⃣ 왜 [2, 4, 6, 8, 10]이 출력되는가?

• nums.map(num => num * 2)는 다음과 같이 작동한다:

1. 1 * 2 = 2

2. 2 * 2 = 4

3. 3 * 2 = 6

4. 4 * 2 = 8

5. 5 * 2 = 10

결과적으로 [2, 4, 6, 8, 10]이라는 새로운 배열이 만들어진다.

• 이 새로운 배열이 doubled 변수에 저장된다.

• console.log(doubled);는 저장된 배열의 내용을 출력해준다.

 

5️⃣ 정리

1. map 메서드는 배열을 반복하며 각 요소를 변환해 새로운 배열을 만든다.

2. console.log는 새로운 배열의 내용을 확인하기 위해 사용한다.

3. 원본 배열은 변경되지 않고, 새로운 배열만 생성된다.

 

(2) filter 메서드

배열의 요소 중 특정 조건을 만족하는 요소만 골라내 새로운 배열을 만든다.

반환값: 조건을 만족한 요소들로 이루어진 새로운 배열.

 

1,2,3,4,5 숫자에서 짝수만 골라내보자. 

const nums = [1, 2, 3, 4, 5];
// nums 배열을 선언한다.

const evens = nums.filter(num => num % 2 === 0);
// nums 배열의 각 요소(num)에 대해 조건 num % 2 === 0 (짝수 조건)을 검사한다.
// 조건을 만족하는 요소만 골라내 새로운 배열에 담는다.

console.log(evens);
// 새로운 배열 [2, 4]을 출력한다.

 

1️⃣ 코드 분석

1. nums 배열: [1, 2, 3, 4, 5]

• 조건을 만족하는 요소만 골라낼 대상이다.

2. nums.filter(num => num % 2 === 0):

• filter 메서드는 nums 배열의 각 요소(num)를 하나씩 검사한다.

• 조건 num % 2 === 0을 만족하는 요소(짝수)만 새로운 배열에 담는다.

• 짝수인 2와 4만 골라내 새로운 배열 [2, 4]를 생성한다.

3. console.log(evens):

• evens에 저장된 새로운 배열 [2, 4]를 출력해 결과를 확인한다.

 

2️⃣ 왜 [2, 4]가 출력되는가?

1. 조건 검사를 수행:

• 1 % 2 !== 0 → 조건 불만족 → 포함되지 않음.

• 2 % 2 === 0 → 조건 만족 → 포함.

• 3 % 2 !== 0 → 조건 불만족 → 포함되지 않음.

• 4 % 2 === 0 → 조건 만족 → 포함.

• 5 % 2 !== 0 → 조건 불만족 → 포함되지 않음.

2. 결과: 조건을 만족하는 요소 [2, 4]가 새로운 배열로 반환된다.

 

3️⃣ 특징 및 요약

• 반환값: 조건을 만족하는 요소들로 이루어진 새로운 배열. 

• 원본 배열: 변경되지 않음.

• 활용 예시:

• 조건에 따라 데이터를 필터링하고 싶을 때 사용.

• 예) 특정 키워드 검색 결과 추출, 짝수/홀수 걸러내기 등.

 

(3) forEach 메서드

배열의 각 요소에 대해 반복 작업을 수행한다.

 

반복적으로 나열되게끔 해보자.

const nums = [1, 2, 3, 4, 5];
// nums 배열을 선언한다.

nums.forEach(num => {
  console.log(num);
});
// nums 배열의 각 요소를 순회하며 console.log로 출력한다.

 

1️⃣ 코드 분석

1. nums 배열: [1, 2, 3, 4, 5]

• 순회하며 각 요소(num)에 대해 작업을 수행할 대상이다.

2. nums.forEach(num => console.log(num)):

• 배열의 각 요소(num)를 하나씩 꺼내와 console.log(num)로 출력한다.

• 반복 작업 수행: 1, 2, 3, 4, 5를 순서대로 출력.

3. 반환값이 없는 이유:

• forEach는 반환값을 생성하지 않고 단순히 배열을 순회하며 작업만 수행한다.

 

2️⃣ 결과

터미널을 보면 이렇게 출력되는 것을 확인할 수 있다.

1
2
3
4
5

 

3️⃣ 특징 및 요약

• 반환값: 없음. 작업 수행 후 결과를 반환하지 않음.

• 원본 배열: 변경되지 않음.

• 활용 예시:

• 배열을 단순히 순회하며 작업을 수행할 때 사용.

• 예) 배열 요소 출력, 누적 합 계산 등.

 

---

 

사용되는 보편적인 예시

1. map: 배열의 모든 요소를 변환하여 새 배열을 만들 때.

• 예) 숫자에 특정 값을 더하거나 곱하기.

2. filter: 조건을 만족하는 요소만 골라낼 때.

• 예) 짝수/홀수, 특정 조건에 맞는 데이터 추출.

3. forEach: 배열의 각 요소를 단순히 순회하며 작업 수행.

• 예) 배열 요소 출력, 누적 작업.

 

세가지 다 써보자!

숫자 배열에서 짝수를 두 배로 변환한 새 배열을 만들고, 그 결과를 출력해보겠다. 

 

1. 우선 005.js 파일을 만들고 터미널에 nodemon 005 를 입력한다.

 

2. 문제 이해를 한다. 

• 목표: 주어진 숫자 배열에서 짝수만 추출하고, 각 짝수를 두 배로 변환한 새 배열을 만든 뒤, 그 결과를 출력한다.

• 입력: 숫자 배열 (예: [1, 2, 3, 4, 5, 6, 7, 8, 9])

• 출력: 변환된 배열의 요소들 (예: [4, 8, 12, 16])

 

3. 문제 해결할 방법을 고민한다. // 를 치고 주석으로 정리해도 좋다.

1. 숫자 배열 선언: 문제에서 사용할 숫자 배열을 선언한다.

2. 짝수 추출:

• 배열에서 짝수 조건(num % 2 === 0)에 맞는 요소만 선택한다.

• 이 작업에는 filter 메서드를 사용할 수 있다.

3. 짝수를 두 배로 변환:

• 추출된 짝수를 각각 2배로 변환한다.

• 변환 작업에는 map 메서드를 사용한다.

4. 결과 출력:

• 최종 변환된 배열의 값을 출력한다.

• 출력에는 forEach 또는 console.log를 사용할 수 있다.

 

4. 단계별로 코드를 넣는다.

1) 숫자 배열 선언

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 문제에서 주어진 숫자 배열

• 배열 nums를 선언한다. 이 배열은 우리가 작업할 데이터이다.

2) 짝수 추출

const evenNums = nums.filter(num => num % 2 === 0);

• nums 배열의 각 요소를 확인하며, 짝수(num % 2 === 0) 조건을 만족하는 요소를 선택한다.

• 결과는 [2, 4, 6, 8]이라는 새로운 배열에 저장된다.

%는 나머지 연산자로, 두 숫자로 나눴을 때 나머지를 반환한다. 예를 들어 5 % 2 -> 5 를 2로 나누면 나머지가 1임.

짝수는 2로 나눴을 때 나머지가 0이여야 한다. 짝수니께.

그니까 이건 -> 짝수(num % 2 === 0) <- num을 2로 나누었을 때 나머지가 0인지 확인하는 조건인거다. 

 

3) 짝수를 두 배로 변환

const doubledEvenNums = evenNums.map(num => num * 2);

• evenNums 배열의 각 요소를 두 배로 변환한다.

• 변환된 값은 [4, 8, 12, 16]이라는 새로운 배열에 저장된다.

 

evenMums는 이전 단계에서 만든 배열이다. map()메서드는 원본 배열 요소를 변환해서 새로운 배열을 만드는 거다. num => num * 2은 map()에 전달된 콜백 함수다. num * 2는 각 요소를 2배로 곱한 값을 반환하는 연산 이다. 이 후 반환된 값들이 새로운 배열인 doubledEvenNums에 저장되는 거다.

 

4) 결과 출력

doubledEvenNums.forEach(num => {
  console.log(`결과: ${num}`);
});

• 최종 변환된 배열 doubledEvenNums의 각 요소를 출력한다.

• 출력 결과는 다음과 같다:

결과: 4
결과: 8
결과: 12
결과: 16

 

👀 전체 코드

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // 1️⃣ 숫자 배열 선언

const evenNums = nums.filter(num => num % 2 === 0); // 2️⃣ 짝수 추출
const doubledEvenNums = evenNums.map(num => num * 2); // 3️⃣ 짝수를 두 배로 변환

doubledEvenNums.forEach(num => { // 4️⃣ 결과 출력
  console.log(`결과: ${num}`);
});