[JavaScript] 조건문과 반복문

KIM DA MI·2023년 2월 21일

JavaScript

목록 보기

2/16

1. 조건문

컴퓨터는 작성된 코드를 위에서부터 아래로 순차적으로 실행한다.
하지만 특정한 조건에 따라 코드가 실행되도록 하는 방법이 있다. 바로 조건문이다.
오늘은 이 조건문에 대해 먼저 알아보자!

학습 목표
1. 특정한 조건에서만 실행되는 코드를 작성할 수 있다.
2. truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.
3. 비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.
4. if, else if, else를 사용하여 여러 개의 조건을 중첩해서 사용할 수 있다.
5. 논리 연산자를 (&&, ||, ! ...) 통해 복잡한 조건을 간결하게 작성할 수 있다.

1-1. if문

주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정된다.
조건식은 결과가 불린(boolean) 타입이 되도록 작성해야 한다.
조건식의 평가 결과가 참일 때 문자열 ‘hello world’를 출력하기 위한 코드는 아래와 같다.
```
if (true) {
    console.log('hello world');
}
```
- if 뒤에 있는 소괄호에 조건식을 넣으면,
  조건식이 참으로 평가된 경우 코드블록({}) 내부의 코드가 실행된다.
- 지금은 true를 넣었기 때문에 console.log('hello world')가 실행된다.
- 조건식을 상황에 맞게 작성하면 특정 상황에만 코드가 실행되도록 할 수 있다.

동치연산자 (`===`)

동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다.

let name = 'kimdami';
if (name === 'kimdami') {
  console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}

!==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환한다.

let name = 'kimapple';
if (name !== 'kimdami') {
    console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}

비교연산자(`>` , `<` , `>=` , `<=`)

비교연산자는 두 피연산자의 값의 크기를 비교한다.

수학에서의 부등호 기호의 사용법과 유사한다.

let num = 5;
if (num < 10) {
    num = num + 1;
}
console.log(num); // 6

if (num > 5) {
    num = num - 1;
}
console.log(num); // 5

논리연산자(`&&`, `||`)

논리합(||)과 논리곱(&&)을 사용하면 복수의 조건을 작성할 수 있다.
||은 여러 조건 중 하나만 true여도 true로 판단된다.

&&은 여러 조건 중 하나라도 false이면 false로 판단된다.

let age = 15;
if (age > 13 && age <= 19) {
    console.log('청소년입니다.'); // '청소년입니다.'
}

부정연산자(`!`)

부정연산자는 조건을 부정한다.

조건이 true이면 false, 조건이 false이면 true를 리턴한다.

let num = 11;
if (!(num === 10)) {
    console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}

1-2. else문

조건이 true일 때, 그리고 false일 때 각각 다른 코드가 실행되도록 하기 위해서는 else문을 사용하면 된다.

else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성해야 한다.

let num = 5;
if (num % 2 === 0) {
    console.log('짝수입니다.');
} else {
    console.log('홀수입니다.'); // '홀수입니다.'
}

여기서 조건을 더 추가하고 싶으면 else if문을 사용한다.

let name = 'kimdami';
let course = 'seb be'

if(name === 'kimdami' && course === 'seb fe') {
    console.log('정보가 일치합니다.')
} else if (name === 'kimdami' && course !== 'seb fe') {
    console.log('코스를 확인하세요.') // '코스를 확인하세요.'
} else {
    console.log('일치하지 않는 정보입니다.')
}

if문과 else문은 두 번 이상 사용할 수 없지만 else if문은 여러 번 사용이 가능하다.

let age = 15;
if (age < 8) {
  console.log('미취학아동입니다.');
} else if (age >= 8 && age < 14) {
  console.log('초등학생입니다.');
} else if (age >= 14 && age < 17) {
  console.log('중학생입니다.'); // '중학생입니다.'
} else if (age >= 17 && age < 20) {
  console.log('고등학생입니다.');
} else {
  console.log('성인입니다.');
}

변수 num이 2와 9의 사이의 숫자라면 구구단을 출력하는 코드를 만들어보자.

let num = 3;
if (num <= 9 && num >= 2) {
  console.log(num * 1);
  console.log(num * 2);
  console.log(num * 3);
  console.log(num * 4);
  console.log(num * 5);
  console.log(num * 6);
  console.log(num * 7);
  console.log(num * 8);
  console.log(num * 9);
} else {
  console.log('2와 9사이의 수를 입력하세요.');
}

삼항 조건 연산자

if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있다.
```
let num = 5;
num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수입니다.'
```
- 삼항 조건 연산자는 조건식을 먼저 작성한 후 ?를 입력하고, ?뒤로 참/거짓일 때 실행할 코드를 각각 입력한다.
- 참/거짓일 때 실행할 코드는 :로 구분한다. 위 코드는 아래 코드와 동일하게 동작한다.
```
let num = 5;
if (num % 2 === 0) {
    console.log('짝수입니다.');
} else {
    console.log('홀수입니다.'); // '홀수입니다.'
}
```
위의 예시처럼 조건에 따라 실행할 코드가 간단하다면, 삼항 조건 연산자를 활용하는 것이 편리할 뿐만 아니라 가독성도 좋다.
그러나 조건에 따라 실행해야 할 내용이 복잡하다면, if문과 else문을 사용하는 것이 좋다.

2. 반복문

만약 컴퓨터에게 한 번에 한 가지 일만 시킬 수 있다면, 컴퓨터가 한 번의 일을 처리할 때마다 같은 명령을 반복적으로 해주어야 한다. 우리가 의도한 만큼 같은 동작을 반복하도록 할 수는 없을까?
이번에는 코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 방법인 반복문에 대해 알아보자.

학습 목표
1. for 반복문을 작성할 수 있다.
2. for 반복문이 여러 개의 코드 블록의 조합이라는 것을 이해한다.
3. 구구단 n단 출력을 반복문으로 구현할 수 있다.
4. 반복문 내부에 조건문을 활용할 수 있다.
5. 이중반복문의 동작 순서를 이해할 수 있다.
6. 구구단 1-9단 출력을 이중반복문으로 구현할 수 있다.
7. for반복문과 while반복문의 차이점을 설명할 수 있다.
8. for반복문으로 작성된 코드를 while반복문으로 바꿀 수 있다.

2-1. for문

먼저, 1부터 5까지의 수를 차례대로 더한 값을 구하는 코드를 작성해 보자.

let result = 0;
result = result + 1;
result = result + 2;
result = result + 3;
result = result + 4;
result = result + 5;
console.log(result); // 15

가장 쉽게 떠올릴 수 있는 방법은 1부터 5까지의 수를 모두 직접 입력하는 것이다.
하지만 만약 1부터 5까지의 합이 아니라 100,000까지의 합이라면 어떻게 될까?
이때 반복문을 사용하면 불필요한 코드를 반복적으로 사용하지 않고 간결하게 코드를 작성할 수 있다.
for문으로 구현한 1부터 100000까지의 수를 모두 더하는 코드
```
let result = 0;

for (let num = 1; num <= 100000; num++) {
  result = result + num;
}

console.log(result); // 5000050000
```
- 코드는 아래와 같은 순서로 진행된다.
  
  ① for문 내부에 num이라는 변수를 선언하고 1이라는 초기값을 할당한다.
  ② 변수 num이 100000보다 작거나 같은지 확인한다.
  ③ ②의 결과가 true면, 코드블록 내부의 코드를 실행한다.
  ④ 변수 num을 1증가 시킨다.
  ⑤ ②부터 ④까지 반복한다.
  ⑥ ②의 결과가 false면, 반복문이 종료된다.
이처럼 반복횟수가 크다고 해도 for문을 사용하면 간결하게 구현할 수 있다.
for문은 다음과 같은 형식으로 이루어져 있다.
```
for (초기값; 조건식; 증감식) {
    // 실행할 코드
}
```
- for 뒤에 오는 소괄호(())에는 각각 초기값, 조건식, 증감식이 들어간다.
- 코드블록({})에는 반복해서 실행할 코드가 들어간다.
- 초기값: 증감식 반복횟수를 카운트하는 역할을 하는 변수이다.
  (이때 변수는 정수를 의미하는 ‘integer’의 약자인 i를 주로 사용한다.)
- 조건식: 코드블록({}) 내부의 코드를 실행 여부를 결정한다.
  true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료된다.
- 증감식: 코드블록({}) 내부의 코드를 실행한 후 초기값으로 선언된 변수를
  증가 또는 감소시키기 위한 표현식이다.

2-2. 반복문 활용하기

이번에는 반복문으로 구구단을 출력해보자.

조건문을 학습한 후 다음과 같이 구구단 n단을 출력했다.

let num = 3;
if (num >= 2 && num <= 9) {
    console.log(num * 1); // 3
    console.log(num * 2); // 6
    console.log(num * 3); // 9
    console.log(num * 4); // 12
    console.log(num * 5); // 15
    console.log(num * 6); // 18
    console.log(num * 7); // 21
    console.log(num * 8); // 24
    console.log(num * 9); // 27
} else {
    console.log('2와 9사이의 수를 입력하세요.');
}

변수 num에 할당된 값에 따라 구구단의 결과가 다르게 출력된다.
좌변에 있는 변수 num과 곱해지는 우변에 있는 숫자들을 보니, 1부터 9까지의 숫자가 차례대로 나열되어 있다.

for문을 사용하면 지금보다 간결하게 코드를 작성할 수 있다.

우변에 들어갈 숫자를 반복문으로 구현해보자.

let num = 3;
if (num >= 2 && num <= 9) {
    for (let i = 1; i <= 9; i++) {
        console.log(num * i);
    }
} else {
    console.log('2와 9사이의 수를 입력하세요.');
}

문자열과 반복문

이번에는 문자열에 반복문을 사용해보자.

예시 : 문자열의 첫 번째 문자부터 마지막 문자까지 모두 출력하는 코드
```
let str = 'iceCream';
for (let i = 0; i <= 7; i++) {
    console.log(str[i]);
}
```
- 변수 i가 0부터 7까지 1씩 증가하며 반복문이 실행된다.
- 변수 str에 할당된 문자열 'iceCream'의 첫 번째 문자인 ‘i’의 인덱스는 0, 마지막 문자인 ‘m’의 인덱스는 7이므로, 결과적으로 이 코드는 각 문자를 하나씩 차례대로 출력하는 코드가 된다.
- 그런데 이렇게 코드를 구현하려면 문자열의 길이를 알고 있어야만 한다.

예시 : 문자열의 길이가 매우 길거나 알 수 없는 상태인 경우
```
let str = 'iceCream';
for (let i = 0; i <= str.length - 1; i++) {
    console.log(str[i]);
}
```
- 문자열 'iceCream'의 길이는 8이다.
- 0부터 시작하는 인덱스와는 달리, 길이는 말 그대로 문자열에 속한 문자의 개수를 나타낸다.
  따라서, 문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작다.
- 위의 예제처럼 i <= str.length - 1(또는 i < str.length)로 조건식을 작성하면, 문자열의 끝까지 순회하는 반복문을 구현할 수 있다.

2-3. 반복문과 조건문

반복이 진행되는 동안, 특정 조건에 따라 문제를 해결하도록 코드를 작성한다면, 더욱 복잡한 문제도 해결할 수 있다.

예시 : 1부터 10까지의 숫자 중 홀수만 출력하도록 코드
```
// 실습) 1부터 10까지의 숫자 중 홀수만 출력하도록 코드를 작성하세요.
for (let i = 1; i <= 10; i++) {
    // 조건문을 사용하여 홀수만 출력하도록 코드를 작성하세요.
    if (i % 2 === 1) {
        console.log(i);
    }
}
```
- i는 1에서 시작하여 1씩 증가하는 동안 반복하여 실행된다.
  - i가 10일 때까지 실행된 후, i가 11이 된 시점에서 반복문이 종료된다.
- 반복문 내부에서 실행되고 있는 코드는 if문이다.
  - if문은 소괄호 안에 있는 조건식이 true로 평가될 경우, 코드블록 내부의 코드가 실행된다.
  - 조건식은 i를 2로 나누었을 때 나머지가 1인지, 즉 홀수인지 여부를 확인하고 있다.
  - 따라서 i가 1부터 10까지 차례대로 증가하는 가운데 i가 홀수인 경우에만 i를 출력하고 있는 것이다.

예시 : 주어진 문자열의 문자들 중, 인덱스가 짝수인 문자만 출력하도록 코드

let str = 'software engineering bootcamp';

for (let i = 0; i < str.length; i++) {
  if (i % 2 === 0) {
    console.log(str[i]);
  }
}

2-4. 반복문의 중첩

반복문은 중첩이 가능하다.
다시 말해 반복문 내부에 또 다른 반복문을 사용할 수 있다.
- 예시 : 정육면체 주사위 두 개를 굴려서 나올 수 있는 모든 경우의 수를 구하기 위한 코드
```
for (let i = 1; i <= 6; i++) {
    for (let j = 1; j <= 6; j++) {
        console.log(`첫번째 주사위는 ${i}, 두번째 주사위는 ${j}입니다.`);
    }
}
```
  - 외부 반복문의 초기화와 조건식 평가가 이루어진 후, 내부 반복문이 실행된다.
  - 내부 반복문 또한 초기화와 조건식 평가가 이루어진 후 내부에 있는 코드가 실행되고, 증감식, 조건식 평가가 반복적으로 이루어진다.
  - 내부 반복문의 조건식 평가가 false가 되면, 내부 반복문은 종료가 되고 외부 반복문의 증감식과 조건식 평가가 이루어진다.
  - 이때 조건식 평가가 true면, 다시 내부 반복문을 순환하는 방식으로 진행된다.
  - 외부 반복문의 조건식이 false가 되면 모든 반복문이 종료가 된다.

2개의 반복문이 중첩된 경우 이중반복문, 3개의 반복문이 중첩된 경우 삼중반복문이라고 부르기도 한다.

예시 : 이중반복문으로 구구단 전체를 출력하는 코드

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

예시 : 3개의 반복문이 중첩된 삼중반복문

for (let first = 0; first <= 3; first++) {
  for (let second = 0; second <= 3; second++) {
    for (let third = 0; third <= 3; third++) {
      console.log(
        `first는 ${first}, second는 ${second}, third는 ${third}입니다.`);
    }
  }
}

2-5. while문

초기화, 조건식, 증감식이 모두 필요한 for문과 달리 while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록({}) 내부의 코드를 반복하여 실행한다.
```
let num = 0;

while (num < 3) {
  console.log(num); // 0 1 2
  num++
}
```
- 위 코드를 for문으로 바꾼다면 아래와 같다.
```
for (let num = 0; num < 3; num++) {
    console.log(num); // 0 1 2
}
```

while문을 사용할 때는 무한루프를 주의해야 한다.
- 무한루프 : 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상을 말한다.
```
let num = 1;
while (num > 0) {
    console.log(num);
    num++;
}
```
- 위 코드에서 num은 항상 0보다 크므로, 무한루프가 발생한다.
- 따라서 while문을 작성할 때는 조건식이 false로 평가되는 순간이 있는지 반드시 주의하여야 한다.

do…while문

while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행한다.
단, 이 경우 do의 코드블록 내부의 코드가 최소 한 번은 실행된다.
```
do {
    console.log('코드블록 내부의 코드는 최소 한 번은 실행됩니다.')
    // '코드블록 내부의 코드는 최소 한 번은 실행됩니다.'
} while (false)
```

for문과 while문

while문으로 할 수 있는 것을 for문으로 구현이 가능하고, for문으로 할 수 있는 것을 while문으로 구현이 가능하다. 그러나 주로 사용하는 상황이 있다.
- for문을 사용하는 경우
  - 반복 횟수가 비교적 명확할 때
  - 배열, 문자열 내부를 순회할 때
  - 반복문의 중첩이 필요할 때
- while문을 사용하는 경우
  - 반복 횟수가 명확하지 않을 때

KIM DA MI

이전 포스트

[JavaScript] 기초

다음 포스트

[JavaScript] 조건문과 반복문

JavaScript

1. 조건문

1-1. if문

동치연산자 (`===`)

비교연산자(`>` , `<` , `>=` , `<=`)

논리연산자(`&&`, `||`)

부정연산자(`!`)

1-2. else문

삼항 조건 연산자

2. 반복문

2-1. for문

2-2. 반복문 활용하기

문자열과 반복문

2-3. 반복문과 조건문

2-4. 반복문의 중첩

2-5. while문

do…while문

for문과 while문

[JavaScript] 기초

[JavaScript] 함수

0개의 댓글

[JavaScript] 조건문과 반복문

JavaScript

1. 조건문

1-1. if문

동치연산자 (===)

비교연산자(> , < , >= , <=)

논리연산자(&&, ||)

부정연산자(!)

1-2. else문

삼항 조건 연산자

2. 반복문

2-1. for문

2-2. 반복문 활용하기

문자열과 반복문

2-3. 반복문과 조건문

2-4. 반복문의 중첩

2-5. while문

do…while문

for문과 while문

[JavaScript] 기초

[JavaScript] 함수

0개의 댓글

동치연산자 (`===`)

비교연산자(`>` , `<` , `>=` , `<=`)

논리연산자(`&&`, `||`)

부정연산자(`!`)