hmk run dev

javascript loop 본문

javascript

javascript loop

hmk run dev 2021. 12. 22. 16:30

나는 이때까지 대부분의 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 기능 및 성능 비교

Javascript와 jQuery를 주로 쓰면서도 궁금했다. 반복문에는 우리가 일반적으로 알고있는 for문, $.each, forEach, map, filter 등 정말 많은 종류가 있다.

daesuni.github.io

 

Comments