[개념 문제] 08.for - 1. for문 기초/2. Iterate with JavaScript For Loops/ 3. Iterate Odd Numbers With a For Loop 1 /4. For Loop 2

for문이란 무엇일까요?

javascript 세상에서는 생각보다 반복적으로 해야할 일들이 많습니다.

자료의 개수가 5개 정도라면 일일히 세거나 특정 단어를 입력하는 등의 일이 쉽습니다.

하지만 자료의 개수가 20개라면..?! 100개라면..? 생각이 달라지겠죠?

그래서 필요한 것이 반복문입니다.

반복문은 여러 종류가 있는데 이번 시간에는 javascript 세상에서 가장 널리 쓰이는 for문에 대해 알아보도록 합시다.

위의 그림과 같이 for문을 작성할 때는 소괄호 안에 초기화문, 조건문, 증감식을 쓰고 사이사이에 세미콜론(;)을 입력해주어야 합니다.

예를 들어 1부터 10까지의 합을 구해보겠습니다.

let result = 0;
for(let i=0; i <= 10 ; i++) {
result += i
}
console.log(result) // 45

 

초기화문

• 초기화문 작성 시 변수 선언자를 써주어야 합니다.
• 변수명은 보통 index를 의미하는 i로 선언합니다.
• index가 증가할 경우 숫자는 보통 0부터 시작합니다.

조건문

• index의 범위를 설정합니다.
• index가 증가할 경우 특정한 숫자 미만 혹은 이하로 설정합니다.
• index가 감소할 경우 0 이상으로 설정합니다.
• 조건문이 true일 경우 반복문을 계속 실행합니다.
• 조건문이 false일 경우 반복문이 종료됩니다.

증감식

• index가 1씩 증가할 경우 ++을 써줍니다.(index의 숫자가 하나씩 증가)
• index가 1씩 감소할 경우 --를 써줍니다.(index의 숫자가 하나씩 감소)
• i++은 i = i+1 을 줄여서 쓴 것입니다. i += 1 로 표현할 수도 있습니다.
• i++는 ++1로 표현할 수 있습니다.

for문이 어떻게 동작 하는지 알아볼까요?

종이와 펜을 꺼내주세요!

1부터 10까지의 합을 구하는 for문 코드를 표를 그려보며 익혀봅시다.

위의 그림처럼 i값과 n값 그리고 result값을 쭉 적어보세요.

우리가 위의 조건문에서 i <= 10 이라는 조건을 주었기 때문에 n이 10이 될 때까지 작성해줍니다.

결과값을 확인하고 싶다구요?

Run.js 혹은 개발자도구의 console 창을 열어서 for문을 작성하고 console.table로 결과를 확인해주세요!

let result = 0;
for(let i=0; i <= 10 ; i++) {
result += i
console.table({
index: i,
result : result
})
}


console.log(result)

 

표를 다 완성하셨고, for문이 돌아가는 원리에 대해 이해하신 분들은 submit 버튼을 힘차게 눌러주세요! :)

 

| (index) | Values |
--------------------
|  index  |   0    |
| result  |   0    |

| (index) | Values |
--------------------
|  index  |   1    |
| result  |   1    |

| (index) | Values |
--------------------
|  index  |   2    |
| result  |   3    |

| (index) | Values |
--------------------
|  index  |   3    |
| result  |   6    |

| (index) | Values |
--------------------
|  index  |   4    |
| result  |   10   |

| (index) | Values |
--------------------
|  index  |   5    |
| result  |   15   |

55
| (index) | Values |
--------------------
|  index  |   6    |
| result  |   21   |

| (index) | Values |
--------------------
|  index  |   7    |
| result  |   28   |

| (index) | Values |
--------------------
|  index  |   8    |
| result  |   36   |

| (index) | Values |
--------------------
|  index  |   9    |
| result  |   45   |

| (index) | Values |
--------------------
|  index  |   10   |
| result  |   55   |

 

---

2. Iterate with JavaScript For Loops

for문

for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복합니다.

for문의 구성은 이런 식으로 되어 있습니다.

for ([초기문]; [조건문]; [증감문])

let ourArray = []; //ourArray라는 변수 선언하고, 빈 배열 생성
for (var i = 0; i < 5; i++) {
ourArray.push(i);
}


//ourArray will now contain [0,1,2,3,4].

 

위의 예시를 살펴본다면 [초기조건 : i = 0] / [조건 : i < 5 ] / [증감 : i++ : 하나씩 증가] 형태로 이루어졌습니다.

Assignment

예시를 참고해서 forLoops() 함수를 작성해주세요.

for문을 사용하여 myArray 배열에 1부터 5까지의 숫자가 요소로 포함될 수 있도록 해주세요.

 

문제

function forLoops() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [];

  // 아래에 코드를 작성해주세요


  // 아래의 코드를 수정하지 마세요.
  return myArray;
}

풀기

function forLoops() {
  let myArray = [];
  for(var i = 1; i < 6; i++)
    {myArray.push(i)}
  return myArray;
}
console.log(forLoops());
//[ 1, 2, 3, 4, 5 ]

복기

함수를 선언하여 변수+반복문 함께 실행될 수 있도록 묶는다 (함수이기 때문에 항상 return을 잊지말자)

1~5까지 이기 때문에 초기조건을 0으로 시작, 6보다 작고 (혹은 i <= 5도 가능), 1씩 증감

빈 배열인 myArray에 i변수를 하나씩 대입하여 추가

 

---

3. Iterate Odd Numbers With a For Loop 1

for문에서 i가 2씩 증가한다면 어떨까요?

지난 시간에 for문에서 i가 1씩 증가하는 방식에 대해 알아 보았는데요!

이번 시간에는 응용편입니다.

왼쪽에 두 개의 함수식이 있습니다.

각 함수식에 원하는 결과값이 나올 수 있도록 for문을 작성해주세요!

 

1~30까지의 숫자 중에 addEvenNumber 함수는 짝수만을 result 배열에 담아 리턴하고,

addOddNumber 함수는 홀수만을 result 배열에 담아 리턴합니다.

i가 2씩 증가하도록 증감식을 잘 설정해주세요!

Hint!

초기화문에서 index가 어떤 숫자부터 시작하는지가 중요합니다.

 

문제

function addEvenNumber() {
  let result = [];
  // 여기에 식을 작성해주세요!
  // result 배열안에 짝수가 들어가야 합니다.
}

function addOddNumber() {
  let result = [];
  // 여기에 식을 작성해주세요!
  // result 배열안에 홀수가 들어가야 합니다.
  
}

풀기

function addEvenNumber() {
  let result = [];
for(i = 2; i < 31; i = i+2)
{result.push(i);}
  return result;
}
console.log(addEvenNumber())

function addOddNumber() {
  let result = [];
  for(i = 1; i < 31; i = i+2)
  {result.push(i);}
  return result;
}
console.log(addOddNumber())

복기

function 마지막에는 return을 넣는 것을 잊지 말자. 

for문에 소괄호()에 조건식을 넣고 {}에는 실행문을 넣는다. 넣은 대로 보여지기 위해서는 .push(i)

 

---

4. Iterate Odd Numbers With a For Loop 2

var ourArray = [];
for (var i = 0; i < 10; i += 2) {
ourArray.push(i);
}


// ourArray will now contain [0,2,4,6,8]

 

Assignment

• for문을 사용하여 1부터 9까지의 숫자 중에 홀수인 숫자를 myArray 배열에 순서대로 추가해주세요.

문제

function forLoops() {
  // 아래의 코드를 수정하지 마세요.
  let myArray = [];
  
  // 아래에 코드를 작성해주세요
  
  

  // 아래의 코드를 수정하지 마세요.
  return myArray
}

풀기

function forLoops() {
  let myArray = [];
 for (i = 1; i < 10; i+=2)
   myArray.push(i);
  return myArray
}
console.log(forLoops())
//[ 1, 3, 5, 7, 9 ]

복기

반복문 중 맨 마지막에 위치하는 증감식의 표현방법은 다양하다. 다양한 표현방법에 익숙해 지자

i = i + 1

i++

i += 1

++1

 

특히나 i +=1 표현 방식이 어색하게 느껴진다. 이와 같이 표현되는 것을 더하기 할당addition assignment operator라고 한다. 

 

더하기 할당
더하기 할당 연산자(+=)는 오른쪽 피연산자의 값을 변수에 더한 결과를 다시 변수에 할당합니다. 두 피연산자의 타입이 더하기 할당 연산자의 동작을 결정하며, 덧셈 또는 문자열 연결이 가능합니다.

 

참조

더하기 할당 (+=) - JavaScript