[코딩온] 프론트엔드 입문 Day 24~25 (JS 조건문, 반복문)

💻 Frontend/JS, TS

[코딩온] 프론트엔드 입문 Day 24~25 (JS 조건문, 반복문)

hjinn0813 2024. 2. 28. 19:41

728x90

이번주는 JS에서 조건문(if문, switch문)과 반복문(for문,while문)에 대해서 배웠다. 특히 for문 같은 경우에는, 분명히 개념은 이해했는데 주어진 조건을 만족하며 계산되는 코드를 직접 작성하는건 왠지 어려웠다. for문을 배운 그날 새벽에 잠을 설쳐서 맑지 않은 정신으로 수업을 들은 것도 원인이었겠지만, 수포자로 살아온 지난 세월이 괜히 후회되고 자괴감이 들었다.😢

블로그에 학습내용을 정리하며 개념을 다시 한번 짚어보고, 완벽히 이해할 수 있도록 연구와 실험을 더 해봐야겠다.

JS - 조건문

특정 조건을 만족하는 경우에만 실행하고 싶은 명령이 있을 때 사용한다.

각 조건은 '분기'라고 하며, 조건에 따라 논리 구조를 나눠 다른 순서의 기능이 실행되도록 할 수도 있다.

조건문에서는 비교연산자, 일치연산자, 논리연산자를 많이 사용한다.

let num = 8;

// if문 기본 형태 (조건이 1개인 경우)
if (num > 10) {
  console.log('입력받은 수가 10보다 크다');
}

// if ~ else ~ (조건이 참/거짓 2개)
if (num > 10) {
  console.log('입력받은 수가 10보다 크다');
} else {
  console.log('입력받은 수가 10보다 작다');
}

// else if문
if (num > 10) {
  console.log('입력받은 수가 10보다 크다');
} else if (num === 10) {
  console.log('입력받은 수가 10입니다');
} else {
  console.log('입력받은 수가 10보다 작다');
}

// if의 중첩
if (userId === inputId) {
  if (userPw == inputPw) {
    console.log('로그인 성공');
    alert(`안녕하세요, ${inputId}님!`);
  } else {
    alert('비밀번호가 틀렸습니다.');
  }
} else if (inputId === '') {
  alert('아이디가 입력되지 않았습니다.');
} else {
  alert('아이디를 다시 입력해주세요.');
}

1. if 문

괄호 안에 오는 불리언 값에 따라서 출력값이 달라진다.

조건이 하나인 경우, 불리언이 true면 if 값이 출력되고, false면 코드 자체가 실행되지 않는다.

if else로 조건 2개를 작성한 경우, true는 if 값이 출력되고, false는 else값이 출력된다. (else는 조건이 필요없다.)

else if로 조건 3개 이상 작성하면, 위에서부터 코드를 읽다가 true인 경우를 실행한다. (else if는 조건이 필요하다.)

// switch문
let x = 4;
switch (x) {
  case 4:
    console.log('x는 4입니다');
    break;
  case 5:
    console.log('x는 5입니다');
    break;
  default:
    console.log('x는 4,5가 아닙니다');
}

2. switch 문

switch의 소괄호와 case에는 불리언이 아닌 값(변수)을 사용한다.

case마다 x를 대입해서 비교해보고, 값이 같으면 break를 통해 해당 scope에서 빠져나온다.

만약 모든 case의 값이 x와 다르다면 default문 다음의 코드가 실행된다.

break는 반드시 작성해야 하지만, default는 생략 가능하다.

// 삼항연산자 작성법
// 홀수, 짝수 판별하기
let num = 5;
if (num % 2 === 1) {
  console.log('홀수');
} else {
  console.log('짝수');
}

// 삼항연산자로 변환
// 조건식 ? 참일 때 실행될 코드 : 거짓일 때 실행될 코드 ;
let result = num % 2 === 1 ? '홀수' : '짝수';
console.log(result); // 변수에 담아서 출력
console.log(num % 2 === 1 ? '홀수' : '짝수'); // 콘솔에 담아서 출력

3. 삼항연산자

if ~ else ~ 형식의 코드를 한 줄로 작성하는 방법.

JS - 반복문

특정 코드를 지정된 횟수까지 반복하도록 만들어준다. 반복되는 코드를 간소화할 수 있다.

※ 반복문 관련 설명이 잘 되어있는 사이트 https://ko.javascript.info/while-for#continue

// i + 1 = i / i += 1 / i++ 모두 같은 의미

// for문 기본 형태
/* for (initialization; condition; final-expression) {
  반복문 이용해서 실행될 명령;
} */

// 0부터 9까지 1씩 늘어나는 반복문 만들기
for (let i = 0; i < 10; i++) {
  console.log('안녕', i);
  // console.log(`안녕 ${i}`); 템플릿 리터럴 방식으로도 작성 가능
}

1. for 문

기본적인 실행 원리는 위 사진과 같은데, 문장으로 풀어쓰자면,

괄호 안에서 가장 먼저 작성된 '초기화식(initialization)'을 통해 반복의 시작점을 지정하기 위한 변수를 선언한다.
'조건식(condition)'을 통해 얼마나 반복할지 횟수를 지정한다.
scope 내부의 명령을 실행해서 조건이 true면 '증감식(final-expression)'을 실행하고 '조건식'을 다시 확인한다.
명령 실행 → 증감식 실행 → 조건식 확인을 반복하다가, 조건이 false가 되면 for문의 반복이 종료된다.

// 1~n까지 모든 수를 더해 result로 콘솔에 찍기
let n = 10;
let result = 0;
for (let i = 1; i <= n; i++) {
  result = result + i
  // result += i
  console.log(result); // 실시간으로 숫자 더해지는거 확인 가능
}

그래서 위 코드를 문장으로 풀어쓰자면,

n은 10이고, "result = 0"은 scope 내부의 문장을 실행하기 위한 변수 선언.
i는 1이고 (1부터 시작해야하니까), 10보다 작거나 같고, 1씩 증가한다.
오른쪽에 result + i 를 계산해서 나온 값이 왼쪽에 대입되어 새로운 result가 나오며 scope가 반복된다.
i가 10이 되어 계산한 result 값이 나오면, for문의 반복이 종료된다.

// for문과 배열 함께 사용하기
let cafe = ['americano', 'latte', 'espresso', 'tea'];
console.log(cafe.length); // 배열의 길이 출력
for (let i = 0; i < cafe.length; i++) {
  console.log('cafe menu', cafe[i]); // 배열의 0번(i=0)부터 3번까지 순서대로 추출
}

// 배열 요소의 총합 구하기
let numArr = [99, 88, 77, 66, 55];
let numSum = 0;
for (let i = 0; i < numArr.length; i++) {
  numSum = numSum + numArr[i];
  // numSum += numArr[i];
  console.log(numSum);
}

배열의 총합을 구하는 위 코드도 마찬가지다.

"numSum = 0"은 scope 내부의 문장을 실행하기 위한 변수 선언.
i는 0부터 시작되고, 배열의 길이보다 작고, 1씩 증가한다.
→ 이는 배열의 0번째 요소부터 불러옴과 동시에, 배열의 실제 길이보다 하나 작아야 하기 때문.
오른쪽의 더하기 수식을 계산해서 나온 값이 왼쪽에 대입되어 새로운 numSum이 나오며 scope가 반복된다.
수식에서 i가 배열의 실제 길이보다 하나 작은 숫자가 되어 계산한 값이 나오면, for문이 끝난다.

// 이중 for문
// 'i 먼저 한번 찍고, j가 10이 될때까지 돌기'를 반복함
for (let i = 0; i < 5; i++) {
  console.log('i :', i);

  for (let j = 0; j < 10; j++) {
    console.log(`현재 i는 ${i}이고, J는 ${j}이다`);
  }
}

// if문과 for문 같이 사용하기
for (let i = 2; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

if문과 for문을 함께 사용하거나, for문을 중첩해서 사용할 수 있다.

for문의 중첩은 실행원리를 주석으로 달아놨으니 패스.

if문과 for문을 함께 사용한 위 코드의 실행원리를 문장으로 풀어쓰자면,

초기화식에 선언된 i의 값을 if문의 매개변수에 대입해서 콘솔을 찍는다.
증감식 실행 → 조건식 확인 → if문 실행을 반복하다가, i가 10이 되면 for문이 끝난다.

💡 여기서 잠깐!
for문 내부에서 정의한 i는 '지역변수'로서, 해당 for문의 scope 내부에서만 적용된다.
'지역변수'의 적용범위는 함수도 마찬가지로 해당 함수의 scope 내부에서만 적용된다.
'전역변수'는 이와 반대되는 개념으로, 모든 문서에서 적용되는 변수를 의미한다.

// while문 기본 형태
/* while(조건){
  조건에 만족하는동안 실행될 코드
  } */

let num = 1;
while (num <= 5){
  console.log(num);
  num++; // 여기가 없으면 무한반복됨
}

2. while 문

소괄호 안에 조건으로 불리언 값이 오고, 불리언 값이 true면 false가 될 때까지 scope 내부의 명령이 반복된다.

→ 그러므로 무한반복되지 않게 주의해야한다.

위에서 예시로 사용한 기본형태를 문장으로 해석하자면,

num은 1이고, num이 5보다 작거나 같은 경우에 콘솔에 찍는다.
num을 1씩 증가시켜서 조건을 확인하고 다시 콘솔에 찍는다.
num이 5가 되었을 때의 결과를 콘솔에 찍은 이후 반복이 종료된다.

// 응용: 1부터 30까지 숫자 중에 6의 배수만 출력
num = 1;
while (num <= 30){
  if (num % 6 === 0){
    console.log(num);
  }
  num++;
}

수업시간에 배운 내용을 응용해서 내 마음대로 함수를 만들었는데, 작동원리를 문장으로 설명하자면,

num은 1부터 시작하고, num이 30보다 작거나 같은 경우에 반복문이 실행된다.
그런데 1~30사이의 숫자 중에서도, 만약 6의 배수라면 콘솔에 찍을 것이다.
num이 1씩 증가하면서 반복문의 조건을 확인하고, if의 조건까지 충족되는 경우에만 콘솔에 찍는다.

// 무한반복: 조건식이 참이면 while문을 계속 반복
let num2 = 0;
while (true) {
  console.log(num2);
  num2++;

  // break로 빠져나가야 할 조건 설정
  // num2가 11이 되면 아래의 조건이 참이 되면서 while문 종료
  if (num2 > 10) {
    break;
  }
}

앞서 설명했듯이 while문의 조건으로 오는 불리언이 true면 false가 될 때까지 scope를 반복하기 때문에, 조건 자체를 true라고 쓰면 무한반복하게 된다. 그러므로 위 예시 코드처럼 break를 통해 반복문을 종료할 수 있도록 해야한다.

(실제 웹페이지를 만들 때, 반복문이 무한반복하면 서버가 다운될 수 있다.)

💡 여기서 잠깐!
break; - 반복문을 중단시키고 빠져나올 수 있다.
continue; - 반복문의 이번 회차를 건너뛰고 다음 회차로 진행.
★ 연속되는 반복은 반복문, 연속되지 않는 반복은 함수

for문과 while문을 비교하기 위해, 수업시간에 실습으로 했던 코드를 가져왔다.

일단 for문의 실행 원리부터 풀어쓰자면,

scope 내부의 명령을 실행하기 위해 "result1=0" 이라고 변수 선언.
i는 0부터 시작하고, 100보다 작거나 같고, 1씩 증가한다.
그런데 만약 i가 5의 배수이거나 2의 배수인 경우에만, result1에 i를 더해서 새로운 결과를 출력한다.
최종적으로 콘솔에 모두 더한 합계를 출력한다.

반면에 while문의 실행원리를 풀어쓰자면,

i는 0부터 시작하고, result2는 0이다. (라고 scope 내부 명령 실행을 위한 변수 선언)
i가 100보다 작거나 같을 때 반복문이 실행된다.
그런데 만약 i가 5의 배수이거나 2의 배수인 경우에만, result2에 i를 더해서 새로운 결과를 출력한다.
i를 1씩 증가시키며 반복문의 조건을 확인하고, if의 조건까지 충족해야 덧셈을 계산한다.
최종적으로 콘솔에 모두 더한 합계를 출력한다.

반복문의 실행원리는 알겠는데 주어진 조건에 맞는 코드를 직접 작성하는건 어려워서, 수업시간에 사용했던 코드들을 예시로 가져와서 문장으로 풀어써봤다. 이렇게 하니까 조금 더 쉽게 이해되어, 작성하기도 수월할 것 같다.👍

반복문 코드 작성에 어려움을 느꼈다는 것은, 개인적으로 SeSAC 수강을 시작하고 지금까지 순탄하게 흘러오다가 처음으로 발목이 잡힌 기분이었다. 앞으로 반복문과 더 친해질 수 있도록 연구와 실험을 많이 해야겠다는 생각이 든다.

728x90

저작자표시 비영리 변경금지