배열함수의 한 종류인 map함수를 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* Map 함수
- 배열함수의 한종류
- 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아
새로운 배열을 반환한다.
*/
let arr1 = [1, 2, 3, 4]
// 만약 내가 arr1 안에 있는 모든 요소를 *2 해주고 싶다면 => map 함수 이용
// let newArr = arr1.map((item) => {return item*2})
let newArr = arr1.map(item => item*2)
console.log('새로운 배열 : ',newArr);
// Q. 선생님 이름 목록을 만들어 보기
let nameArr = ['황해도', '선영표', '정봉균']
// 인자가 한개일때는 그냥 작성, 인자가 두개일때는 (item, idx)
// 명령문이 return 한줄일때는 람다식 이용 가능, 두 줄 이상일 때는 retrun
// let newNameArr = nameArr.map((item, idx) => (idx+1)+"번째 " + item + " 선생님")
let newNameArr = nameArr.map((item, idx) => {
return (idx+1)+"번째 " + item + " 선생님"})
console.log("새로운 배열 : ", newNameArr);
// 객체가 들어있는 배열도 map으로 관리
let studentList = [
{name : "김유열", score : 90, grade: "A"},
{name : "이명인", score : 100, grade: "A"},
{name : "정은우", score : 80, grade: "A"}
]
const toHalf = (object) => {
return {
...object, // 기존 객체의 값중 변화가 없는 나머지 속성은 그대로 유지. 스프레드 문법
score : object.score/2}
}
const mappedList = studentList.map(toHalf)
console.log(mappedList);
// 도시의 화씨 데이터를 섭씨 데이터로 변환해보자
// 섭씨 = 5/9*(화씨 - 32)
const cityArr = [
{citiy : 'seoul', temp: 86},
{citiy : 'gwangju', temp: 89},
{citiy : 'busan', temp: 90}
]
const mappedCityArr = cityArr.map((obj) => {
return {
...obj,
temp: parseInt(5/9*(obj.temp - 32))
}
})
console.log(mappedCityArr)
</script>
</body>
</html>배열의 모든 요소에 map 괄호 안의 함수를 적용한다. 화살표 함수를 사용해도 되고 따로 함수를 생성해서 함수이름을 적어도 된다. 화살표 함수를 사용할 경우 return 값 반환해야한다. 배열 내의 객체에 map을 쓸 때 특정 key값에만 함수를 적용하고 싶다면 나머지 key값들은 건들 필요가 없으니까, obj(매개변수)가 객체 형태로 함수에 들어가는데 ...obj(매개변수)를 쓰면 나머지 key값들은 그대로 유지된다.
'Front-End > 5. 프로그래밍 패러다임' 카테고리의 다른 글
| Ex08_reduce.html (0) | 2023.07.06 |
|---|---|
| Ex07_filter.html (0) | 2023.07.06 |
| Ex05_순수함수html (0) | 2023.07.04 |
| Ex04_객체지향자판기수출.html (0) | 2023.07.04 |
| Ex03_객체지향자판기.html (0) | 2023.07.04 |
