JavaScript 기초 : 제어문 3. for반복문

3. for반복문

 

JavaScript에서 사용하는 반복문 중 가장 자주 사용하는 for문을 살펴보자!

 

//for 반복문
for (초기화부분; 조건부분; 추가동작부분) {
  동작부분
}

초기화 부분은 딱 한 번만 실행

조건부분은 불린형태로 판단 true일 경우 동작!

 

 

 

3-1. for반복문의 실제 사용

 

추가동작 부분은 무엇인지? 예시를 통해 살펴보자!

가치 있는 서비스를 개발하자! 라는 문구를 10번 콘솔에 출력해보자!

//for 반복문 변수 i는 횟수를 저장하는데 활용한다. 
for (let i = 1; i <=10; i++) {
  console.log('가치 있는 서비스를 개발하자!');
}

변수 i는 횟수를 의미한다. 

i <= 10 인가? 라는 조건을 만족시키면 글을 출력한다. 

그리고 i는 1 증가시킨다. 

i가 11이 되는 지점에서는 i <=10이라는 조건 부분이 false가 되면서 동작 하지 않는다. 

 

추가 동작 부분은 꼭 채울 필요가 없다. 

추가 동작 부분에서 i를 1씩 증가시키는 부분을 '동작' 부분에 써도 된다. 

아래 그림을 보면 동작 부분 뒤에 i++가 들어갔다. 

for (let i = 1; i <=10;) {
  console.log('가치 있는 서비스를 개발하자!');
  i++;
}

하지만 for문의 특성상 추가 동작부분 칸이 있기에

동작 부분은 실제로 반복하고자 하는 내용들만 집중하는게 좀 더 for반복문의 목적에 맞는 코드를

작성하는 것이다!

 

 

3-2. 초기화부분에서 생성한 변수는 for문의 지역변수(로컬변수)이다.

for (let i = 1; i <=10; i++) {
  console.log('가치 있는 서비스를 개발하자!');
}
console.log(i); //Error가 나게 된다!

for문이 종료되고 나서 i라는 변수값을 출력하려하면 오류가 발생한다!

 

 

 

3-3. for문의 초기화 부분 

초기화 부분도 반드시 채울 필요는 없다. 

let i = 1;
for (;, i <=10;, i++) {
  console.log(`$[i} 가치 있는 서비스를 개발하자!`);
}

위의 그림처럼 반복문 밖에 있는 글로벌 변수를 활용해도 같은 결과를 출력한다.

단! for문의 소괄호 안쪽 가장 첫번째 세미콜론은 생략이 불가능하다!

초기화부분, 조건부분을 구분하는 세미콜론이기 때문이다!

 

for문의 소괄호 안쪽은 반드시 세미콜론 2개가 필요하다!

 

세미콜론2개가 없다면 Error가 난다. 

 

 

 

3-4. for문의 실제 사용

 

 

★for문을 사용해서 1부터 100까지 중 짝수를 출력해보자!

 

 

1)짝수의 특징 : 2로 나누었을 때 나머지가 0이라는 것 활용

//i를 1부터 100까지 반복하면서 2로 나누었을 때 나머지가 0인 경우 i를 출력

for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

내가 생각했던 가장 첫 번째 방법이다. 

for문 안에 if를 써서 if의 조건을 만족시키는 경우 i를 출력하게하는 방법이다. 

 

 

2) 짝수의 특징 : 2배 했을 때 짝수가 나온다는 성질 활용 

//i를 1부터 50까지 반복하면서 i*2를 출력하는 방법

for (let i = 1; i <= 50; i++) {
  console.log(i * 2);
}

 

3) 덧셈 활용 : +2 해주는 방법 

//i를 2부터 100까지 반복하면서 i를 2씩 증가시키는 방법
for (let i = 2; i <= 100; i += 2) {
  console.log(i);
}

 

 

 

★for문을 사용해서 주어진 높이에 맞게 *로 삼각형을 그려주는 함수 triangle을 완성하고 출력해보자!

//for문이 반복될때마다 message에 *를 하나씩 추가하면서 콘솔에 message를 출력!

function printTriangle(height) {
  let message = '';
  for (let i = 0; i < height; i++) {
    message += '*';
    console.log(message);
  }
}

이 예시는 좀 어렵다. 

기본적으로 변수 i는 횟수이다. 따라서 *을 증가시키기 위해서는 새로운 변수가 필요하다. 

for문은 횟수 i를 반복하는 역할을 한다. for문이 반복되기 전에 message라는 변수를 만들었다. 

message에 *를 하나씩 추가하면서 콘솔체 message를 출력시키는 것이다. 

 

프로그래밍 언어에서 문자열의 연산 +는 연결을 의미한다.

'윤' + '주' = '윤주' 가 되는 것이다.

그래서 빈 문자열 ' '에 '*'를 더하면 '*'가 출력되고

'*' + '*' 를 하면 '**'가 된다. 

 

표로 나타내면 이렇게 나타낼 수 있지 않을까??

i	0	1	2	3	...
height	1	2	3	4	...
message	*	**	***	****	...

 

★for문을 사용해서 구구단을 만들어 보자!

 

일단 1단을 만든다고 생각하면 

for (let j = 1; j <= 9; j++) {
    console.log(`1 * ${j} = ${1 * j}`);
}

이렇게 코드를 짜면 된다. 

j부분이 변하는 수이고 1부터 9까지 변하는 거다.

 

그럼 이제 1단에 해당하는 부분도 1단~9단으로 바꿔주는 것다. 

//구구단 만들기 for문

for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= 9; j++) {
        console.log(`${i} * ${j} = ${i * j}`);
    }
}

이렇게 for문 안에 for문이 들어가게 된다. 

i는 몇 단인지를 말해주는것이고, j는 곱해지는 숫자를 말한다. 

 

 

★for문을 사용해서 피보나치 수열을 만들어 보자!

 

//for 문으로 피보나치 수열 50개 나타내기

let current = 1;
let previous = 0;

for (let i = 1; i <= 50; i++) {
  console.log(current);
  let temp = previous;  // previous를 임시 보관소 temp에 저장
  previous = current;
  current = current + temp;  // temp에는 기존 previous 값이 저장돼 있음
}

피보나치 수열...부들부들

너무 어렵다. 

기본적으로 변수 설정을 해야하는데 이게 첫 번째 관문이라고 보면 된다. 

피보나치 수열의 항은 앞선 두 항의 합으로 계산된다.

따라서 피보나치 수열의 항들을 순서대로 출력하기 위해서는 늘 마지막 두 항을 변수에 보관해야 한다. 

 

 

'현재 항'은 변수 current에, 그리고 '직전 항'은 변수 previous에 저장한다.

처음에는 current를 1로 설정하고 previous를 0으로 설정한다.

 

for문의 i는 횟수라고 했다. 그래서 50개 항을 나타낼 꺼니까 i <=50으로 적어주었다. 

for문의 수행 부분을 채워 넣는 것이 피보나치 수열 풀기의 2번째 관문이다. 

수행 부분에서 해야 할 일은 크게 2가지다.

1) current 출력

2) previous와 current 수정

 

1) console.log(current); 하면 된다.

2) 이게 문제이다. 

current는 previous 가 되고

current는 current + previous 가 된다. 

previous ← current

current ← current + previous

 

코드로 나타내보자!

//잘못된 피보나치 수열 

let current = 1;
let previous = 0;

for (let i = 1; i <= 10; i++) {
  console.log(current);
  previous = current;
  current = current + previous;
}

여기서 문제가 발생한다.

previous = current를 하면, previous와 current가 같은 값을 저장하게 되고

 기존의 previous 값은 잃어버리게 된다. 

대체를 해야 하는데 previous 값을 잃어버리게 된 것이다. 

 

그래서 임시 보관소인 temp를 만들어야 한다. 

 

temp = previous;

previous = current;

current = current + temp;

 

결국 최종 코드인

아래 코드가 나오게 된다.

//for 문으로 피보나치 수열 50개 나타내기 최종 코드

let current = 1;
let previous = 0;

for (let i = 1; i <= 50; i++) {
  console.log(current);
  let temp = previous;  // previous를 임시 보관소 temp에 저장!! 핵심!
  previous = current;
  current = current + temp;  // previous는 이미 바뀌었으므로 temp를 더해줌!!!
}

ㄷㄷㄷㄷ 뇌의 과부하...

 

 

다음 글에서는 while문을 살펴보자!