라이브러리
[JAVASCRIPT] arr.map(callback) - 배열의 각 요소를 변형하여 새 배열 생성
arr.map(callback) 이란?
`arr.map(callback)`은 배열의 각 요소를 새로운 배열의 요소로 변환하는 메소드입니다. callback 함수는 배열의 각 요소를 인자로 받아서 변환한 결과를 반환합니다.
arr.map(callback)의 기본 구조
#hostingforum.kr
javascript
arr.map(function callback(currentValue, index, array) {
// callback 함수의 내용
return newValue;
});
- `currentValue`: 현재 처리 중인 요소
- `index`: 현재 요소의 인덱스
- `array`: 현재 처리 중인 배열
예제 1: 숫자 배열의 각 요소를 문자열로 변환
#hostingforum.kr
javascript
const numbers = [1, 2, 3, 4, 5];
const strings = numbers.map((number) => number.toString());
console.log(strings); // ["1", "2", "3", "4", "5"]
예제 2: 객체 배열의 각 요소를 이름과 나이를 포함하는 객체로 변환
#hostingforum.kr
javascript
const people = [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 },
{ name: "Bob", age: 35 },
];
const peopleWithAgeGroup = people.map((person) => {
if (person.age < 30) {
return { name: person.name, age: person.age, ageGroup: "20대" };
} else if (person.age < 40) {
return { name: person.name, age: person.age, ageGroup: "30대" };
} else {
return { name: person.name, age: person.age, ageGroup: "40대" };
}
});
console.log(peopleWithAgeGroup);
// [
// { name: "John", age: 25, ageGroup: "20대" },
// { name: "Jane", age: 30, ageGroup: "30대" },
// { name: "Bob", age: 35, ageGroup: "30대" },
// ]
예제 3: 숫자 배열의 각 요소를 제곱한 값을 반환
#hostingforum.kr
javascript
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map((number) => number ** 2);
console.log(squares); // [1, 4, 9, 16, 25]
예제 4: 객체 배열의 각 요소를 이름과 나이를 포함하는 문자열로 변환
#hostingforum.kr
javascript
const people = [
{ name: "John", age: 25 },
{ name: "Jane", age: 30 },
{ name: "Bob", age: 35 },
];
const peopleStrings = people.map((person) => `${person.name} (${person.age}세)`);
console.log(peopleStrings);
// ["John (25세)", "Jane (30세)", "Bob (35세)"]
arr.map(callback)의 사용 사례
- 데이터 변환: 배열의 각 요소를 새로운 형태로 변환할 때 사용합니다.
- 데이터 필터링: 배열의 각 요소를 필터링할 때 사용합니다.
- 데이터 정렬: 배열의 각 요소를 정렬할 때 사용합니다.
arr.map(callback)의 성능
- `arr.map(callback)`은 새로운 배열을 생성하여 반환합니다. 따라서 원본 배열의 요소는 변경되지 않습니다.
- `arr.map(callback)`은 callback 함수를 배열의 각 요소에 대해 호출합니다. 따라서 callback 함수의 성능이 좋지 않으면 `arr.map(callback)`의 성능도 좋지 않을 수 있습니다.
arr.map(callback)의 결론
`arr.map(callback)`은 배열의 각 요소를 새로운 배열의 요소로 변환하는 메소드입니다. callback 함수를 배열의 각 요소에 대해 호출하여 새로운 배열을 생성합니다. `arr.map(callback)`은 데이터 변환, 필터링, 정렬에 사용할 수 있습니다. 하지만 callback 함수의 성능이 좋지 않으면 `arr.map(callback)`의 성능도 좋지 않을 수 있습니다.
댓글목록
등록된 댓글이 없습니다.