20241017 자바스크립트 map 메서드, reduce(), +().toFixed(12)

map 메서드

배열 내의 모든 요소에 대해서 어떤 함수를 호출한 결과로 새로운 배열을 만들고 싶을 때, for 반복문을 사용해서 배열의 모든 요소를 방문해서 값을 바꾸지 않고도 map 메서드를 사용하면 한번에 가능하다.
map 메서드는 일종의 반복문이라 다른 반복문이 없어도 반복이 되며, return 되는 결과에 따라 새로운 배열을 만들어 낸다.

for in 반복문을 사용했을 때,

const myArr = [1, 2, 3, 4, 5];

for (let i in myArr) {
   myArr[i] = myArr[i] * 2;
}

console.log(myArr);

//// 출력
// [2, 4, 6, 8, 10]

이러한 코드를 map 메소드를 사용하면

const myArr = [1, 2, 3, 4, 5];

const newMyArr = myArr.map(num => num * 2);

console.log(newMyArr);

//// 출력
// [2, 4, 6, 8, 10]

위와 같이 한줄로 적을 수 있다는 것이다.

• map 메소드 사용법
  map 메소드의 파라미터로는 3개가 사용될 수 있는데,
  첫번째 파라미터는 요소, 두번째는 index, 세번째는 array를 의미한다.
  

새배열 = 바꾸고_싶은_배열.map((요소, index, array) => {
   return 원하는_새배열_값 
});

reduce 함수

모든 배열의 값을 다 더한 값을 알고 싶을 때, for문을 사용하지 않고 reduce() 함수를 사용하면 편하다.

• reduce() 사용법
  

궁금한배열.reduce((acc, cur, index, src) => {
   return acc + cur;
}, initialValue);

acc : 누적 값
cur : 현재 값
index : 현재 인덱스. 생략 가능
src : 원본 배열
initialValue : 초기 값

쉽게 생각해서,

let sum = [0, 1, 2, 3].reduce((acc, cur) => {
   return acc + cur;
}, 0);

console.log(sum);

//// 출력
// 6

소수점 더하기 값이 이상할 때

소수점 더하기 값이 X.9999999999 뭐 이런식으로 나올 때가 있다.
toFixed() 함수를 사용해서 반올림해주면 된다.
toFixed()함수는 argument 자리까지 나타내주는 함수다.
즉, toFixed(2)라면 소수점 둘째자리까지 나타내고 그 이하의 소수점자리는 반올림해준다는 의미다.

그냥 원하는 더하기 값이 나왔으면 하는건데 2.4 + 3.3 의 결과가 궁금 할수도, 3.33 + 2.678의 결과가 궁금 할 수도 있는데 어떻게 몇째자리까지 나타낼지 정하냐?

고민할 필요 없이 스택오버플로우에 따르면 소수점 12번째 자리까지 나타내면 충분히 안정적으로 소수점 보정이 가능하다고 한다.
그리고 toFixed() 함수는 결과값을 string으로 반환하기 때문에 숫자라는 걸 인식할 수 있도록 앞에 +를 붙여준다.

let fixedNum = +(a + b).toFixed(12);