📌 개요
이번 글에서는 JavaScript의 객체 및 배열 조작, 데이터 필터링 및 정렬, 문자열 처리 및 정규표현식 활용 등을 학습한 내용을 정리합니다.
실제 예제를 통해 map(), filter(), reduce(), find(), sort() 등의 배열 메서드 활용법을 배우고, JSON 데이터를 다루는 방법을 실습했습니다.
또한, replaceAll(), trim(), split(), 스프레드 연산자(...), 콜백 함수, 화살표 함수 등의 다양한 기능을 활용하는 방법도 학습하였습니다.
📌 1강: 객체 및 배열 데이터 조작
🖥 1️⃣ 객체(Object) 데이터 조작
✅ 객체 배열 변환 (map(), filter(), reduce())
const employees = [
{ id: 1, name: "김철수", department: "개발", salary: 6000, years: 10 },
{ id: 2, name: "이영희", department: "디자인", salary: 5000, years: 5 },
{ id: 3, name: "박지성", department: "마케팅", salary: 7000, years: 15 }
];
// 연봉이 6000 이상인 직원 필터링
const highSalaryEmployees = employees.filter(emp => emp.salary >= 6000);
console.log(highSalaryEmployees);📌 배운 점: filter()를 사용하면 특정 조건을 만족하는 데이터만 추출할 수 있다.
✅ 배열 내 객체 정리 및 검색 (sort(), find(), reduce())
// 연봉 기준 내림차순 정렬
let sortedEmployees = employees.sort((a, b) => b.salary - a.salary);
console.log(sortedEmployees);
// 최고 연봉 직원 찾기
const maxSalary = Math.max(...employees.map(emp => emp.salary));
const highestPaidEmployee = employees.find(emp => emp.salary === maxSalary);
console.log(highestPaidEmployee);📌 배운 점: sort()를 활용하여 숫자를 기준으로 데이터를 정렬할 수 있으며, find()를 사용하면 특정 조건을 만족하는 첫 번째 요소를 찾을 수 있다.
🖥 2️⃣ JSON 데이터 활용 (JSON.parse(), JSON.stringify())
let jsonData = '{ "name": "홍길동", "age": 30 }';
let obj = JSON.parse(jsonData);
console.log(obj.name);📌 배운 점: JSON.parse()를 사용하면 JSON 데이터를 JavaScript 객체로 변환할 수 있으며, JSON.stringify()를 사용하면 다시 문자열로 변환할 수 있다.
📌 2강: 콜백 함수, 화살표 함수, 스프레드 연산자 및 문자열 처리
🖥 3️⃣ 콜백 함수 (Callback Function) 활용
function greeting(name, callback) {
console.log(`안녕하세요, ${name}님!`);
callback();
}
greeting("철수", () => console.log("반갑습니다!"));📌 배운 점: 콜백 함수는 특정 작업이 끝난 후 실행될 동작을 정의할 때 유용하다.
🖥 4️⃣ 화살표 함수 (Arrow Function) 활용
const add = (a, b) => a + b;
console.log(add(10, 5)); // 15📌 배운 점: ()=>{} 문법을 활용하면 코드를 간결하게 작성할 수 있다.
🖥 5️⃣ 스프레드 연산자 (...) 활용
✅ 배열 및 객체 복사 및 확장
const obj1 = { name: "홍길동", age: 30 };
const obj2 = { ...obj1, city: "서울" };
console.log(obj2); // { name: "홍길동", age: 30, city: "서울" }
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]📌 배운 점: ... 연산자를 활용하면 배열과 객체를 쉽게 복사하거나 확장할 수 있다.
🖥 6️⃣ 정규표현식 (Regex) 활용
✅ 특정 문자열 변환 (replace())
let menuString = "김밥 3000원<br />라면 4000원<br />떡볶이 5000원";
let formattedMenu = menuString.replaceAll('<br />', "\n");
console.log(formattedMenu);📌 배운 점: replaceAll()을 사용하면 특정 문자열을 변경할 수 있으며, HTML 태그를 제거하는 데 유용하다.
📌 전체 개념 요약
| 개념 | 설명 |
|---|---|
| JSON 데이터 처리 | JSON.parse(), JSON.stringify() 활용 |
배열 필터링 (filter()) | 특정 조건을 만족하는 데이터만 추출 |
배열 변환 (map()) | 배열에서 필요한 속성만 추출하여 새로운 배열 생성 |
배열 정렬 (sort()) | 숫자 데이터를 기준으로 정렬 (a, b) => b - a |
배열 누적 (reduce()) | 데이터를 그룹화하여 총합 계산 |
정규표현식 (Regex) | 특정 문자열을 replaceAll()로 변경 |
배열 요소 검색 (find()) | 특정 조건을 만족하는 첫 번째 요소 반환 |
콜백 함수 (Callback Function) | 함수 인자로 다른 함수를 전달하여 실행 |
화살표 함수 (Arrow Function) | ()=>{} 문법을 활용한 간결한 함수 표현 |
스프레드 연산자 (...) | 객체 및 배열을 복사하거나 확장 |
🎯 오늘 배운 핵심 사항
✅ JSON 데이터를 다루는 방법을 익힘
✅ 배열에서 원하는 데이터를 필터링하고 정렬하는 방법을 배움
✅ map(), filter(), reduce(), find() 등의 배열 메서드를 활용하여 데이터를 가공하는 방법을 익힘
✅ 정규표현식과 replaceAll()을 활용하여 문자열 데이터를 정리하는 방법을 배움
✅ 콜백 함수와 화살표 함수의 차이를 이해하고 적용하는 방법을 학습함
✅ 스프레드 연산자를 활용하여 객체와 배열을 쉽게 조작하는 방법을 실습함
