JavaScript 기초 <12. 배열(Array)와 고차 함수(map, filter, reduce 등) 활용>

자바스크립트 JavaScript

12. 배열(Array)와 고차 함수(map, filter, reduce 등) 활용 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. 배열(Array)이란?

배열(Array)은 여러 개의 데이터를 순차적으로 저장하는 자료구조입니다.
JavaScript에서 배열은 객체(Object)의 한 종류이며, 다양한 메서드를 제공하여 데이터를 쉽게 다룰 수 있습니다.

📌 배열을 사용하면 데이터를 효율적으로 저장하고, 관리할 수 있음!

---

 

2. 배열(Array) 선언 및 초기화

배열을 선언하는 방법은 여러 가지가 있습니다.

✅ 1) 배열 리터럴 사용

const fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // "사과"

✅ 2) Array 생성자 사용

const numbers = new Array(1, 2, 3, 4, 5);
console.log(numbers[2]); // 3

📌 배열 리터럴([])을 사용하는 것이 가독성이 좋고, 더 많이 사용됨!

---

 

3. 배열의 주요 메서드

배열은 다양한 메서드를 제공하며, 데이터를 쉽게 조작할 수 있습니다.

✅ 1) 배열 요소 추가 및 제거

메서드설명예제

push()	배열 끝에 요소 추가	arr.push(4);
pop()	배열 끝 요소 제거	arr.pop();
unshift()	배열 앞에 요소 추가	arr.unshift(0);
shift()	배열 앞 요소 제거	arr.shift();

const arr = [1, 2, 3];
arr.push(4);  // [1, 2, 3, 4]
arr.pop();    // [1, 2, 3]

📌 배열을 조작할 때는 push(), pop(), unshift(), shift()를 활용하면 편리함!

---

✅ 여기까지 배열의 기본 개념과 메서드를 배웠습니다!
👉 "그렇다면, 배열을 더 효율적으로 다루는 고차 함수(map, filter, reduce)는 어떻게 동작할까?"
✅ 2부에서 배열 고차 함수와 활용법을 상세히 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 고차 함수란?

고차 함수(Higher Order Function)란 다른 함수를 인자로 받거나, 함수를 반환하는 함수를 의미합니다.
배열에서 자주 사용되는 **map(), filter(), reduce()**는 대표적인 고차 함수입니다.

📌 고차 함수를 활용하면 배열 데이터를 효율적으로 변환할 수 있음!

---

2. map() – 배열을 변환하는 함수

map()은 배열의 각 요소를 변환하여 새로운 배열을 생성하는 함수입니다.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

📌 map()은 기존 배열을 변경하지 않고, 새로운 배열을 반환함!

---

3. filter() – 특정 조건을 만족하는 요소만 반환

filter()는 배열에서 특정 조건을 만족하는 요소만 새로운 배열로 반환하는 함수입니다.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

📌 filter()를 사용하면 조건을 만족하는 요소만 추출할 수 있음!

---

4. reduce() – 배열을 하나의 값으로 축약

reduce()는 배열의 모든 요소를 누적하여 하나의 값으로 축약하는 함수입니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

📌 reduce()를 사용하면 배열의 합계, 평균 등을 쉽게 구할 수 있음!

---

✅ 지금까지 배열과 고차 함수(map, filter, reduce)를 상세히 배웠습니다!
👉 "그렇다면, JavaScript에서 HTML을 다루는 DOM(Document Object Model)이란 무엇일까?"
✅ 다음 회차에서 DOM과 JavaScript의 상호작용을 배워봅시다! 🚀