Step 2. JavaScript(5) - for, 반복문

내 이름을 영어표기로 나타내면 Shin SeungJun이다.

var name = 'Shin SeungJun'

console.log(name[0]);
console.log(name[1]);
console.log(name[2]);
console.log(name[3]);
console.log(name[4]);
console.log(name[5]);
console.log(name[6]);
console.log(name[7]);
console.log(name[8]);
console.log(name[9]);
console.log(name[10]);
console.log(name[11]);
console.log(name[12]);

내 이름을 이렇게 1자 1자씩 출려하려면 총 13이나 써야 하는데 엄청난 중복이 발생한다. 어질어질하다. 이렇게 중복을 통해 비효율적으로 코드를 짜는 것은 코드를 짜는 시간 뿐만 아니라 코드가 실행되는 시간에도 영향을 끼친다.

 

var name = 'Shin SeungJun';

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

위와 같이 작성해도 출력되는 것은 맨 위의 코드와 같다. 더 짧고 보기에도 좋다.

 

반복문을 보면 크게 4가지 파트로 나뉜다.

for (1번 파트; 2번 파트; 4번 파트) {
  3번 파트
}

 - 1번 파트 : Initialization, for문의 초기 구동 코드이다. for문에서 '1번'만 실행되고 대체로 변수를 선언할 때 사용된다.

 - 2번 파트 : Conditional, 조건이 들어가는 결정적인 부분이다. 2번 파트의 조건에 맞지 않는다면 for문은 종료된다. 이 2번 파트의 성립 여부는 조건의 결과가 Falsy인지 Truthy인지에 따른다.

 - 3번 파트 : 실행되었으면 하는 코드를 짜는 부분이다.

 - 4번 파트 : Update, 3번 파트가 실행되고 난 후 실행되는 부분이다. 3번 파트가 여러 번 실행된다면 4번 파트 또한 여러번 실행된다. 물론 2번 파트도 매번 조건을 따져줘야 하니 동일하게 여러번 실행된다.

 - 실행 순서 : 1번 -> 2번 -> 3번 -> 4번

 

• 반복문 중단하기

console.log('before for loop');

for(var i = 1; i < 11; i +=2) {
    if (i === 7) {
    break;
    } else {
    console.log(i);
    }
}

console.log('after for loop');

위의 코드는 기본적으로 1~9까지 숫자 중 홀수만 출력되게 하는 코드이다. 여기서 i가 7일 때 break를 사용하여 for문이 중단되도록 했다. 위의 코드는 1, 3, 5를 출력한다.

 

console.log('before for loop');

for (var i = 1; i < 11; i += 2) {
  if (i === 7) {
    continue;
  }
  console.log(i);
}

console.log('after for loop');

continue는 해당 코드를 건너 뛰고 다음부터 계속해라는 것이다. 즉 i가 7일 때는 건너 뛰고 9일 때는 정상적으로 실행된다. 위의 코드는 1, 3, 5, 9를 출력한다.

 

• Quiz - 1

 - 반복문을 이용해 이름을 역순으로 출력하라.

var name = 'Shin SeungJun';

for (var i = name.length; ( 0 < i ) && ( i < name.length + 1 ); i--) {
    console.log(name[i-1]);
}

 와 생각보다 시간이 걸렸다.

 

 - 1번 파트에서 0의 index에 위치한 S부터가 아니라 마지막 n에서 시작할 수 있도록 i에 내 이름의 길이를 대입하였다.

 - 2번 파트에서 i는 13인데 단순히 i < name.length라고 해버리면 13보다 크니 조건을 만족하지 못해 for문이 중단된다. 따라서 +1을 해주어야 하는데 대신에 <을 <=으로 바꿔줘도 된다. 그리고 &&을 이용해 두 부등호 조건을 동시에 만족하도록 했다.

 - 3번 파트에서, index는 1이 아니라 0부터 시작하고 length는 1부터 길이를 측정해나가기 때문에 -1을 해주어야 서로 일치된다.

 - 4번 파트에서, 역순이기 때문에 i가 점점 작아져야 된다. 따라서 i--를 넣었다.

 

검색 없이 그냥 생각나는 대로 해본 건데 혹시 더 좋은 방법이 있다면 댓글로 알려주세요! 지식 공유에 감사드리겠습니다!

 

• Quiz - 2

 - 반복문을 활용해 문자열의 홀수번째 글자만 출력하라.

var name = "0i1a2m3k4e5n";

for (i = 0; i < name.length; i += 2) {
    console.log(name[i], '| 홀수 위치: ' + (i+1));
    
}

의외로 1번보다 쉬웠다.