📚챕터

Array 프로토타입의 메서드들 정리

📆학습 날짜

2024 / 01 / 01 (월)
새해 복 많이 받으세요 🙇🏻‍♂️

---

👨🏻‍💻 학습 내용

🎯Array 프로토타입의 메서드

JSX 내부에서 배열을 조작해 바로 원하는 JSX를 반환하는 특성상
map filter reduce 이 3개의 메서드가 자주 쓰인다.
그리고 이 메서드는 기존 배열의 값을 건드리지 않고 새로운 값을 만들어 내기 때문에 기존 값이 변경될 걱정 없이 안전하게 사용할 수 있다.
추가적으로 forEach까지 포함해서 소개할 메서드들은 ES5에서부터 사용한 문법이기 때문에 별도의 트랜스파일이나 폴리필 없어도 부담 없이 사용할 수 있다.

📌 Array.prototype.map

Array.prototype.map은 인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드다. 배열의 각 아이템을 순회하면서 각 아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있다.

<script>
const arr = [1,2,3,4,5]
const doubleArr = arr.map((item) => item * 2)
// [2,4,6,8,10]
</script>

리액트에서는 주로 특정 배열을 기반으로 어떠한 리액트 요소를 반환하고자 할 때 많이 사용한다.

<script>
const arr = [1,2,3,4,5]
const Elements = arr.map((item) => {
	return <Fragment key={item}>{item}</Fragment>
})
</script>

📌 Array.prototype.filter

Array.prototype.filter 메서드는 콜백 함수를 인수로 받는데,이 콜백 함수에서
truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드다.
말 그대로 필터링하는 역할의 메서드이며,filter의 결과에 따라 원본 배열의 길이 이하의 새로운 배열이 반환된다. 즉, 앞선 map과 다르게 같은 크기의 배열이 나오지 않을 수도 있다. 주로 기존 배열에 대해 어떠한 조건을 만족하는 새로운 배열을 반환할 때 쓰인다.

<script>
const arr = [1,2,3,4,5]
const evenArr = arr.filter((item) => item % 2 === 0)
// [2 , 4]
</script>

📌 Array.prototype.reduce

Array.prototype.reduce는 map , filter 메서드와 다르게 조금 복잡한 메서드다.
처음 JS를 접한 초보 개발자들이 흔히 헷갈리는 메서드라고도 한다.
이 메서드는 콜백 함수와 함께 초깃값을 추가로 인수를 받는데, 이 초깃값에 따라 배열이나 객체,또는 그 외의 다른 무언가를 반환할 수 있는 메서드다.

<script>
const arr = [1,2,3,4,5]
const sum = arr.reduce((result , item) => {
	return result + item
},0//초깃값)
// 15
</script>

먼저 0은 reduce의 결과를 누적할 초깃값이다. 그리고 reducer 콜백 함수의 첫 번째 인수는 앞서 선언한 초깃값의 현재값을 의미하고,두 번째 인수는 현재 배열의 아이템을 의미한다.즉, 이 콜백의 반환값을 계속해서 초깃값에 누적하면서 새로운 값을 만든다고 볼 수 있다.

reduce는 단순히 합계를 구하는 것뿐만 아니라 배열을 원하는 하나의 객체로 변환하는 등 다양한 예제에서 사용된다. 그리고 filter와 map의 작동을 reduce 하나로 구현할 수 있는데,reduce는 앞선 두 메서드에 비해 사용법이 복잡해 코드가 직관적이지 않다.따라서 짧은 코드라면 filter와 map을 각각 활용해 구현하는것도 때에 따라서 나쁘지 않다고한다.

🤔 Array.prototype.forEach

Array.prototype.forEach 는 콜백 함수를 받아 배열을 순회하면서 단순히 그 콜백 함수를 실행하기만 하는 메서드다.

<script>
const arr = [1,2,3,4,5]

arr.forEach((item) => console.log(item))
// 1,2,3,4,5
</script>

리액트 코드 내부에서 map,filter,reduce가 널리 사용되면서 forEach도 자주 사용되는 것을 볼 수 있다. 그러나 forEach는 사용할 때 주의가 필요한 메서드라고 한다.
먼저 forEach는 아무런 반환값이 없다. 단순히 콜백 함수를 실행할 뿐,map과 같이 결과를 반환하는 작업은 수행하지 않는다.
즉, 콜백 함수 내부에서 아무리 반환해도 모두 의미 없는 값이 된다고한다.
forEach의 반환값은 undefined로 의미 없다는 것을 알아두어야 한다.

또 한 가지 주의할 점은 forEach는 실행되는 순간 에러를 던지거나 프로세스를 종료하지 않는 이상 이를 멈출 수 없다는것이다.break,return, 그무엇을 이용해도 배열 순회를 멈출 수 없다고한다.

➡️ 다음글에서는 삼항 조건 연산자에 대해 살펴보자.