자주 사용하는 Array prototype method

JSX 내부에서 배열에서 바로 원하는 JSX를 반환하는 특성으로 인해 map, filter, reduce 이 3개의 메서드가 가장 자주 사용되며, 기존 배열의 값을 유지하며 새로운 값을 생성하기 때문에 안전하게 사용이 가능.

• map: 인수로 전달 받은 배열과 동일한 길이의 새로운 배열을 반환하는 메서드. 리액트에서는 특정 배열을 기반으로 요소를 반환할 때 자주 사용.

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

/* React Ex */
const Elements = arr.map((item) => {
	return <Fragment key={item}>{items}</Fragment>
})

 

• filter: 콜백 함수를 인수로 받으며 truthy한 경우만 해당 원소를 반환. 결과에 따라 기존 배열의 길이 이하의 새로운 배열이 반환 가능.

const arr = [0, 1, 2, 3]
const remain = arr.filter((item) => item % 2 === 0) // [0, 2]

 

 

• reduce: 콜백 함수와 초기값을 인수로 받으며 초기값에 따라 콜백함수를 실행하고 초기값에 누적하여 원하는 새로운 값을 반환.

const arr = [1, 2, 3]

const result = arr.filter((item) => item % 3 === 0).map((item) => item * 10)
//[10, 30]

const reduceResult = arr.reduce((result, item) => {
	if(item % 3 === 0) {
    	result.push(item * 10)
    }
    return result
}, [])
//[10, 30]

- filter, map 을 사용하면 가독성은 좋지만 같은 배열에 두 번 순환하는 문제가 있으므로 상황에 따라 reduce를 사용하는게 효율적.

 

• forEach: 콜백 하수를 받아 배열을 순회화면서 콜백 함수를 실행.

const arr = [1, 2, 3, 4]
arr.forEach((item) => console.log(item)) // 1, 2, 3, 4

function Func() {
	const arr = [1,2,3,4]
    arr.forEach((item) => {
    	console.log(item)
        if(item === 1) {
       		console.log("end")
            return
        }
    })
}

Func() // 1, end, 2, 3, 4

- 반환 값은 undefined로 반환하는 작업을 수행하지 않으며, 실행되는 순간 에러를 던지거나 프로세스 종료를 하지 않는 이상 멈추지 않음. 중간에 return은 이 함수의 return이 아닌 콜백 함수의 return으로 간주되기 때문에 절대로 중간에 순회를 멈출 수 없다. 콜백 함수는 무조건 n 만큼 실행되므로 코드 작성과 실행시 최적화 가능성에 대한 검토가 필요.