[러닝 자바스크립트] - 제어문

러닝 자바스크립트 4장에 해당되는 부분이며, 읽으면서 자바스크립트에 대해 새롭게 알게된 것과 기록하고 싶은 부분을 정리한 내용입니다.

for 루프의 다른 패턴

for ... in 루프

for ... in 루프는 객체의 프로퍼티에 루프를 실행하도록 설계된 루프이다.

const player = { name: 'Thomas', rank: 'Midshipman', age: 25, };
for(let prop in player){
  if(!player.hasOwnProperty(prop)) continue;
  console.log(prop + ": " + player[prop]);
}
// name: Thomas
// rank: Midshipman
// age: 25

for ... of 루프

for ... of 루프는 ES6에서 새로 생긴 반복문이며 컬렉션의 요소에 루프를 실행하는 다른 방법이다. 배열과 이터러블 객채에 사용할 수 있는 범용적인 루프이지만, 반복문의 인덱스를 알아야 한다면 일반적인 for 루프를 사용하는 것이 알맞다.

const hand = [1, 2, 3];
for(let face of hand)
  console.log(`You rolled...${face}`);
// You rolled...1
// You rolled...2
// You rolled...3

유용한 제어문 패턴

continue 문을 사용하여 조건 중첩 줄이기

반복문 안에 조건문을 사용해야 할 때, continue 문을 사용해 구조를 간결하게 만들 수 있다.

while(funds > 1 && funds < 100) {
  let totalBet = rand(1,funds);
  if(totalBet === 13){
    console.log("Unlucky! Skip this round...");
  } else {
    // 플레이...
  }
}

👇

while(funds > 1 && funds < 100) {
  let totalBet = rand(1,funds);
  if(totalBet === 13){
    console.log("Unlucky! Skip this round...");
    continue;
  } 
  // 플레이...
}

break나 return 문을 써서 불필요한 연산 줄이기

원하는 것을 찾기 위해 루프를 실행했다면, 찾으려는 것을 찾은 후에는 루프를 계속해서 실행할 필요가 없다. 루프가 함수 안에 있었다면 return을, 아니라면 break 문을 사용해 루프를 빠져나갈 수 있다.

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

break 문을 사용해 루프를 종료한 뒤 인덱스 변수의 값이 필요하다면, 인덱스 변수 값을 루프 밖에서 미리 선언한 뒤 루프가 종료되어도 사용할 수 있도록 할 수 있다.

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

배열에 루프를 실행하면서 루프의 배열을 수정하는 것은 종료 조건을 변경시킬 수 있기 때문에 위험할 수 있다. 이런 경우 감소하는 인덱스를 사용해 배열 마지막 요소에서 루프를 시작하게 하면 배열에 요소를 추가하거나 제거해도 종료 조건이 바뀌는 일이 없다.

❌
for(let i=0; i<bigArrayOfNumbers.length; i++) {
  if(isPrime(bigArrayOfNumbers[i])) bigArrayOfNumbers.splice(i,1);
}
✔
for(let i=bigArrayOfNumbers.length-1; i>=0; i--) {
  if(isPrime(bigArrayOfNumbers[i])) bigArrayOfNumbers.splice(i,1);
}