js pattern 01

JS
js, pattern

제어문에서의 유용한 자바스크립트 패턴

continue 이용하여 조건 중첩 줄이기

반복문 안에 조건문을 쓸 경우, 즉 특정 조건에서만 반복문을 써야 하는데 그때 continue 문을 써서 구조를 간결하게 할 수 있음

1
2
3
4
5
6
7
8
 while(funds > 1 && funds < 100){
     let total = rand(1, funds);
    if(total === 13) {
        console.log("Unlucky! Skip this round....");
        continue;
    } 
    //플레이 구문
}

break, return 문으로 불필요한 연산 줄이기

뭔가를 찾기 위해서 루프를 실행했다면, 찾고 난 후에는 계속 실행할 필요가 없음

1
2
3
4
5
6
7
8
9
10
11
et arr = [1,2,3,4,5,6,7,8,9,10];
for(let n of arr){
    if(n === 5){
        break;
    }
	console.log(n);
}
//1
//2
//3
//4

루프를 완료한 뒤 인덱스 값 사용하기

break문을 써서 루프를 일찍 종료했는데 인덱스 변수의 값이 필요할 때

1
2
3
4
5
6
7
8
9
10
let i = 0;
const arr = [1,2,3,4,5,6,7,8,9];
for(; i<arr.length; i++){
    if(arr[i] === 5) break;
}
if(i === arr.length) console.log('뭔지 모르겠다');
else console.log(`루프를 돌아서 마지막에 멈춘 수의 포지션은 ${i}입니다. `);
//루프를 돌아서 마지막에 멈춘 수의 포지션은 4입니다.

이건 break문을 써서 루프를 끝내도록 해야만 사용할 수 있다고 한다.

배열을 수정할 때 감소하는 인덱스 사용하기

1
2
3
for (let i = arr.length-1; i>=0; i--){
    if(isPrime(arr[i])) arr.splice(i, 1);
}

그 이외에 for루프를 좀 더 효율적으로 쓰기위한 패턴

이건 예전에 잠깐 패턴 공부할 때 나온적이 있는데 다시 살펴보도록 하겠음

1
2
3
4
var myArr = [1,2,3,4,5]
for (var i=0; i< myArr.length; i++){
	console.log(myArr[i]);
}
보통의 for루프

이 패턴의 문제점은 루프 순회시 마다 배열의 length 에 접근한다는 점이다.
myArr이 배열이 아니라 HTMLCollection 이라면 이 때문에 코드가 느려질 수 있다.
HTMLCollection 의 length 속성에 접근할 때마다 실제 DOM 에 질의를 요청하는 것과 같으며 일반적으로 DOM접근은 비용이 크다.
따라서 이러한 비용을 줄이기 위해 배열의 length를 캐시하면 된다.

1
2
3
for (var i=0, max = myArr.length; i<max; i++){
	console.log(myArr[i]);
}

또한 i– 를 이용한 패턴이 있음

1
2
3
4
		
for(; var i = myArr.length; i--;){
	console.log(myArr[i]);
}

공유하기 댓글