[자바스크립트 JavsScript] 맵 (Map)을 이용한 다양한 데이터 변환

코테연습 중 map을 이용한 숫자변환을 적용해 보고 다양하게 활용할 수 있는 방법을 더 찾아보게 되었다

아래 활용 예시뿐만 아니라 더 많은 활용사례가 있으니 한 번씩 찾아보는 것도 좋을 거 같다

 

https://kahee430.tistory.com/155

[코딩테스트] 자연수 뒤집어 배열만들기

---

1. 배열의 문자열 요소를 모두 대문자로 변환하기

toUpperCase() or toLowerCase()를 활용한 대소문자 변환하기

let fruits = ["apple", "banana", "cherry"];
let upperCaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperCaseFruits); // ["APPLE", "BANANA", "CHERRY"]

 

2. 배열의 숫자 요소를 제곱으로 변환하기

배열 요소에 각 요소를 제곱하기

let numbers = [1, 2, 3, 4];
let squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16]

 

3. 객체 배열에서 특정 속성만 추출하기

객체 속성에 접근해 출력하기

let people = [
  { name: "John", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Tom", age: 35 }
];
let names = people.map(person => person.name);
console.log(names); // ["John", "Jane", "Tom"]

 

4. 배열의 숫자 요소를 문자열로 변환하기

숫자 => 문자로 변환하기

let numbers = [10, 20, 30];
let stringNumbers = numbers.map(num => String(num));
console.log(stringNumbers); // ["10", "20", "30"]

 

5. 불리언 값으로 배열의 요소 검사하기

요소가 짝수, 홀수 여부를 판단해 불리언값으로 출력하기

let numbers = [1, 2, 3, 4, 5];
let isEven = numbers.map(num => num % 2 === 0);
console.log(isEven); // [false, true, false, true, false]

 

6. HTML 요소 리스트에서 특정 속성만 추출하기 (DOM과 연계)

특정 요소를 추출해서 배열로 변환하기

요소를 가져올 땐 배열이 아니기 때문에 배열로 변환한 뒤 map으로 요소 id를 추출해 배열로 반환한다

let elements = document.querySelectorAll('div'); // 모든 <div> 요소를 선택
let ids = Array.from(elements).map(el => el.id); // 각 div의 id 추출
console.log(ids); // ["header", "content", "footer"] 같은 결과

 

7. 배열의 각 문자열에 특정 글자 추가하기

요소 앞, 뒤에 원하는 글씨를 추가할 수 있다

let words = ["car", "bike", "train"];
let updatedWords = words.map(word => word + "s");
console.log(updatedWords); // ["cars", "bikes", "trains"]

 

8. 배열의 객체에 새로운 속성 추가하기

얕은 복사를 활용해 객체에 속성 추가하기

스프레드 연산자를 이용하게 되면 중첩객체는 얕은 복사가 된다 객체 내부에 참조값만 복사하기 때문(스프레드 연산자는 최상위 속성만 복사한다 그래서 단일 객체시에는 깊은 복사가 되긴 하지만 웬만하면 쓰지 말자)

 

깊은 복사를 하고 싶다면 map이 아닌 재귀함수(자기 자신을 호출하는 함수)를 사용할 것

let users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];
let updatedUsers = users.map(user => ({ ...user, isActive: true }));
console.log(updatedUsers);
/* [
  { name: "Alice", age: 25, isActive: true },
  { name: "Bob", age: 30, isActive: true }
] */