자바스크립트 map
고차함수 HOC
맵은
배열에서 각각의 원소들마다
주어진 함수를
적용시켜주고
그 함수에서 반환된 결과를 담은
새로운 배열로 변형시켜줌.
1 2 3
map()을 돌리면
fn(1) -> 리턴값
fn(2) -> 리턴값
fn(3) -> 리턴값
이렇게 배열 원소마다 다 돌려준다.
즉, [리턴값, 리턴값 , 리턴값]
이렇게 들어가짐.
cosnt arr = [15, 30, 100]; //애를 문자열로바꿔주고 소수점 뒷자리까지(15.00) 찍어주게 만들려면,
const mapped = arr.map((value) => {
return value.toFixed(2);
})
console.log(mapped) // ['15.00', '30.00', '100.00'];
map
이점 장점:
-가독성 for문이나while문 사용하는것보다 가독성은 좋다.
즉, arr[1], arr[2] 이런식으로 일일이 접근 안해도 , map에서 알아서 다 해줌.
-원형 배열을 수정하지 않고, 새로운배열를 만들어 리턴해준다.
const location = [
{ city: "seoul", temp: 86},
{ city: "newyork", temp: 90},
{ city: "london", temp: 72},
]
화씨에서 섭씨로 변환을 해줘야하는 작업,
그럼 화씨를 섭씨로 변환시켜주는 함수를 만들어야죠.
계싼방법 공식은,
5 /9 * (f - 32)
이렇게고,
const toCelcius = obj => {
return {
...obj,
temp: Math.floor(5/9 * (obj.temp - 32))
}
}
const mapped = location.map(toCelcius);
console.log(mapped) //
{ city: "seoul", temp: 30},
{ city: "newyork", temp: 29},
{ city: "london", temp: 22}
range()
하나의 점위를 정해놓고,
그 범위안에 어떤 값들을 뽑아내는 패턴임.
range(1, 10) -> [1,2,3...9]
1 10이 있을때 1부터 9까지 만들어줘
--
const range = (start, stop) => {
new Array(stop - start).fill(0).map((value, index) => start + index);
}
console.log(range(1,10)) // [1,2,3,4,5,6,7,8,9]
["A","B","C"..."Z"]
이렇세 받아보고싶다.
String fromCharCode(65) // "A"
const charCodeToString = (value) = String.fromCharCode(value);
const AtoZ = range("A".charCodeAt(), "Z".charCodeAt() + 1).map(charCodeToString)
console.log(AtoZ);// 'A'~부터 'Z' 까지 나옴.
