javascript loop

나는 이때까지 대부분의 loop 문을 for문으로 사용했었는데 문득, 다른 loop문에 대해서도 궁금해졌다

분명 각기 다른 특징이 있어서 나눠놨을거란 생각으로 여러가지 loop함수에 대해 알아보고자 작성하는 글이다.

 

1. for 

for (let i = 0; i < arr.length; i++){
	console.log(arr[i])
}

가장 먼저 내가 제일 자주 쓰는 for loop

- 빠르고 단순하다 손에 익었다.

- 모든 자료형에서 사용가능

- 중간에 loop를 건너뛰거(continue)나 종료(break)가 가능하다.

- 반복범위를 조절할 수 있다 ( i++, i--, i += 2 )

- i를 index값으로 사용할 수 있다.

 

2. forEach

arr.forEach(function(v,i,arr){
	console.log(v);
})

- Array 객체에서 사용가능

- 비교적 for문 보다 가독성이 좋다

- 객체형을 다루기 수월

- 중간에 끊을 방법이 없다.

- return 값을 받을 수 없음

 

3. filter

let f_arr = arr.filter(function(v,i,arr){
	return stat
})

// 필터링 기능
let f_arr = arr.filter((item)=>{
	item > 100
})

- boolean 형태의 return 값을 받는다.

- return 값이 true인 경우 그 요소를 반환

- false일 경우 false return (빈 배열 return x )

 

4. map

const arr = [1,2,3,4,5]

let m_arr = arr.map((v,i,arr)=> {
	return v + 1;
}) // m_arr = [2,3,4,5,6]

- filter와 다르게  boolean이 아닌 새로운 값을 return 가능

- return 값 자체를 반환함

 

5. reduce

어렴풋인 알지만 쓸때마다 조금씩 헷갈리는 loop...

다른 loop와 달리 특징이 많다.

 

첫 번째 인자인 accumulator(acc) 는 return 값을 누적한고 계속해서 전달받아서 사용할 수 있다.

 

acc 초기값은 디펜던시를 이용해 임의로 설정이 가능하며 배열과 object에서 모두 사용가능하다.

const arr = [1,2,3,4,5]

let reduce_arr = arr.reduce(( acc, v, i, arr )=> {
	return acc+v
}) // 15 => 1 + 2 + 3 + 4 + 5

 

초기값 100 설정

const arr = [1,2,3,4,5]

let reduce_arr = arr.reduce(( acc, v, i, arr )=> {
	return acc+v
}, 100) // 15 => 100 + 1 + 2 + 3 + 4 + 5

 

성능비교

 

---

참고

https://daesuni.github.io/Loop-performance/

for, foreach, filter, map, reduce 기능 및 성능 비교