2022-11-01 [새싹 프론트엔드] 조건문과 반복문

2022-11-01 강의내용

• 조건문 (switch, 삼항연산자, 짧은 조건문 삼항연산자와 switch문 if 문 else 문 )
• 반복문 ( for문, while문, do while문, 중첩 for문 )

 

조건문을 쓰는 이유

어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야 합니다.

예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다.

날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다.

이처럼 어떠한 조건의 결과에서 도출되는 값을 원할때 조건문을 사용한다.

 

• switch 문
• 삼항연산자
• 짧은 조건문

조건문에는 if 뿐아니라 switch, 삼항연산자, 짧은조건문 등이 조건문으로 있다.

조건문이 여러개인 이유는 한국어에도 어머니=엄마, mother=mom처럼

비슷하지만 약간씩 다르며 언어는 약속이다.

만든 사람이 그렇게 지정했으니 외워야한다!

 

switch 구문

switch문은 다른 조건에 다른 표현식을 수행한다.

if문은 조건에 대한 true,false를 처리한다면(true면 true에 맞는값 ,false면 false에 맞는값처리)

switch문은 조건당 하나의 표현식만 배당받아 사용한다.

작성방법

 

      switch(데이터){
        case 값1:
          값1과 데이터값이 맞을때 표현식;
          break; // case 값1 에서 벗어날떈 break를 써줌
        case 값1:
          값1과 데이터값이 맞을때 표현식;
          break;
        default: // 
          값의 기본처리표현식;  
      }

실습문제 

switch 사용

사용자에게 주민번호 뒷자리의 첫글자를 입력받아 1 혹은 3이면 남자

2혹은 4이면 여자, 나머지는 1~4사이로 입력하세요 라고 경고창에 반환하시오

 

      let dgg = prompt("주민번호 뒷자리를 입력하세요", "첫 글자만");
      switch (dgg) {
        case '1':
          alert("남자");
          break;
        case 3:
          alert("남자");
          break;
        case 2:
          alert("여자");
          break;
        case 4:
          alert("여자");
          break;
        default:
          alert("1~4사이로 입력하세요");
      }
      
      위코드에 남자2번 여자2번 다른 케이스여도 ture 일때 반환하는 값이 똑같다.
      이럴경우 단축하여 쓸 수 있다.
      같은 case들끼리 바로 뒤에 써주고 반환값은 그대로 두자
      
            let dgg = prompt("주민번호 뒷자리를 입력하세요", "첫 글자만");
      switch (dgg) {
        case '1':
        case 3:
          alert("남자");
          break;
        case 2:
        case 4:
          alert("여자");
          break;
        default:
          alert("1~4사이로 입력하세요");
      }

---

삼항연산자

삼항연산자란?

일항연산자는 피연산자가 1개인 것 이다.

ex) +1, -1

이항연산자는 피연산자가 2개인 것 이다.

ex) 1+1, 10>5

삼항연산자는 피연산자가 3개인 것 이다.

ex) 조건식?참표현식:거짓표현식

삼항연산자 구문

실습문제)

사용자에게 점수를 입력받아 80점이상이면 경고창에 "합격", 그렇지 않으면 "불합격"을 띄우세요

 

    let score = prompt("점수를 입력하세요","정수만 입력해주세요")

    score >= 80?alert("합격") : alert("불합격")
    
    단순히 true, false만 계산하는거라면 ?(삼항연산자) 를 사용하여 
    작성할 수 있다.

 

---

짧은 조건문

논리연산자를 사용해서 ( &, |, != 등등 ) true인 경우만 혹은 false인 경우에만 처리한다.

짧은 조건문 구문 조건식 논리연산자 표현식;

실습문제)

confirm함수에 "결제하시겠습니까?" 라고 띄우고, 취소버튼을 누르면 "취소되었습니다" 라는 경고창을 띄우세요

 

---

switch문

블리언값이 조건식이 오는게 아니라 블리언값을 제외한 결과값이 나오면 switch문
각각에 값에 맞춰 움직인다. 값에 따라 서로 다른 코드를 실행한다.
case의 값은 여러개가 올 수 있다.

오롯이 ==일 경우 조건문이 실행된다.

 

주의사항

• break를 사용하지않으면 break 를 만날때까지 엉뚱한 답을 반환한다.때에따라 사용하지않을떄도있음
• case의 값은 상수만 가능하기때문에 변수나 식은 사용이 불가하다.
• switch() 의 조건문엔 변수사용가능
• 변수를 넣었다면 선언한 변수의 값을 바꿔주면 바뀌는 값에따라 해당 case값을 반환

if문 대신 쓸 수 있는 문 어떨때 if문 대신 사용하는가?

switch문은 사용할 수 있는 제한된 점이 있다.

• 값이 하나로 떨어질떄만 사용할 수 있다.( or , and 식의 값은 안된다.)
• if문같은 경우엔 &&을 사용하여 범위 표현을 할 수 있다.
• switch문은 &&사용이 불가하다.

switch 작성방법


switch (변수명){
    case 값 :
      console.log("내용"); // ←이부분은 실행문을 적으면 된다.
      break; // ← break를 걸어주지않으면 break를 만날때까지 실행문을 실행한다.
    default:  // ←else와 비슷한 아이 위조건중 그 어떠한 값도 만족하지 않을때
      console.log("전부의 값이 아닐 때")

 

var a = "애플";
 var b;
      switch (a) {
        case "사과":
          b = 500;
          break;
        case "바나나":
          b = 200;
          break;
        case "체리":
          b = 300;
          break;

        default:
          document.write("팔지않습니다");
          b = 0;
      }

      document.write("사과는 " + b + "원입니다");

 

switch 를 사용하여 범위를 지정하려면 정확한 범위값을 넣어주어야한다.↓

switch (menu){
  case 1 :
  case 2 :
  case 3 :
    console.log("물건사기")
    break;    
}

해석)
if문처럼
1<menu && menu<3 가 안되기때문에
정확히 1,2,3을 찍어주어야 한다.

 

break를 사용하지않는 경우

실행문을 쓰지않은 case의 값이 break를 사용하기 직전의 실행문을 사용한 값과 동일해진다.

    <script>
      var a = prompt("요일을 입력하세요");
      switch (a) {
        case "월":
          document.write("월요일");
        case "화":
          document.write("화요일");
        case "수":
        case "목":
        case "금":
          document.write("정상영업");
          break;
        case "토":
          document.write("그날은");
        case "일":
          document.write("휴무입니다");
          break;
      }
    </script>
    
    월요일,화요일을 작성하면 //월요일화요일정상영업
    수,목,금을 입력하면 //정상영업
    토요일 입력하면 // 그날은 휴무입니다.
    일요일 입력하면 // 휴무입니다.

 

    <script>
      var a = prompt("어떤걸 드릴까요");
      switch (a) {
        case "espresso":
        case "에스프레소":
          document.write(2000 + " 원입니다");
          break;
        case "Americano":
        case "아메리카노":
          document.write(3000 + " 원입니다");
          break;
        default:
          document.write("두개만 팝니다");
      }
    </script>
    
  
  espresso, 에스프레소 입력시 2000원 입니다 반환
  Americano, 아메리카노 입력시 3000원 입니다 반환

---

 

삼항연산자

let 변수명 = 값 <값?"ture" : "false" 

 

• if와 else만 있는 경우 사용가능하다
• 조건이 많지않을때 사용
• 반환하고 싶은 값이 딱 하나만 코드에 있을때 사용 

let menu = 8

if(menu<=3 && menu>=0){
  console.log("범위안에 숫자입니다")
}else{
  console.log("범위 밖의 숫자입니다.")
}

위의 코드를 삼항연산식을 사용하면 단 한줄의 코드로 만들 수 있다.

let answer = menu <3?"ture" : "false" //라고 입력하면 된다.

예시)
let answer = menu <3?"범위안에 숫자입니다" : "범위 밖의 숫자입니다."
console.log(answer)

 

 

---

FIFO(First In First Out)

보통 컴퓨터언어는 FIFO(First In First Out) 으로 선입선출처리가 된다.

이 방식에서 벗어나 흐름을 바꾸는 것을 [제어문] 이라고 한다.

조건문이 맞지않으면 다음 조건을 실행하기 때문에 FIFO방식을 거스른다.

[제어문] 의 대표적인것이 조건문과 반복문이 있다.

if문은 그 조건문에서 대표적이 예시이다.

 

먼저쓴 코드가 먼저 출력되어지고 그 다음 코드가 출력된다,

 

if문 이란?

• 설정된 조건의 참,거짓 여부에 따라 값을 내는 구문이다.
• 여기서 조건이랑 불리언 데이터로 해석할 수 있는 표현식이다
• 결과값이 true 일때만 작동하고 아닐땐 작동하지 않는다. 따로 제어해주어야한다.
• 조건식이 여러개일떈 ({})로 묶고 명령을 나열한다.

ex)

게임 캐릭터의 hp가 0입니까? ->true일 경우 캐릭터 사망

지하철 요금을 낼 만큼의 돈이 있습니까? -> true일경우 탑승 가능

 

 

 

if표현식

입력방식

if문 사용 예시↓

let number = 3
if(number ===3) {
  console.log("it is true!")
}

코드해석)
let 을 사용한변수 number값이 3과 같다면 콘솔에 "it is true"를 출력하여라
이때, 3과 같지 않을 경우 아무 일도 일어나지 않음

 

---

if else문

A 혹은 B 둘 다 아니면 C

사용자는 else(또 다른)를 추가하여 조건이 거짓일 떄의 할일을 추가 할 수 있다.

else를 추가한 if문을 if-else문이라 부른다

else는 종속적인 구문이다. 반드시 if문 뒤에 붙여서 사용할 수 있다.

단 두가지의 선택지 밖에 없다 참인가 거짓인가.

let number = 3
if(number === 1) {
  console.log("it is true!") //true일 때 실행
}else{
  console.log("가짜입니다") //false일 때 실행
}

코드해석)
number라는 변수명을 가진 값이 1과 같을 경우 "it is true" 출력
number라는 변수명을 가진 값이 1과 같지않을 경우 "가짜입니다" 출력

---

if else if문 = 다중 if

앞선 조건을 통과지 못했을 경우 실행될 다음 조건을 지정할 때 마다 다음 

구문이 실행된다

여러개의 조건을 true, fales 단 두가지로 나눌 수 없고 

다양한 결과값으로 나누고 싶을 때 사용한다.

무한대로 다중 if을 이어쓸수 있다.

---

중첩 if문

if else 문과 다르다

if 중첩문은 순수한 if가 여러개 들아가 있는 것

조건식A가 맞을때 수를 두가지로 나누고 싶을떄 사용

 

 

실습문제)

사용자에게 값을 입력받아 3의 배수인지 아닌지 알림창을 띄우고

사용자가 취소버튼을 눌렀을땐 "취소를 눌렀습니다" 라는 값을 반환하여라

      let add = prompt("배수", "확인");

      if (add != null) { //조건식A
        if (add % 3 == 0) {   //조건식B
          alert("배수입니다"); //실행값a
        } else {
          alert("배수가 아닙니다"); /실행값b
        }
      } else {
        alert("취소를 눌렀습니다"); / 실행값c
      }
      
      
prompt에 입력 받은값이 취소(null) 조건식 1아닐떄 (!not 연산자를 썻기 때문에)
true일떈 실행값a를 false일땐 실행값b를 반환하고
prompt에 입력 받은값이 취소(null) 일떄는 실행값c를 반환하여라

---

 

실습 문제

 

1.

나는 대학교 교수다. 레포트 점수에따라 등급을 매기는 프로그램을 만드시오

90~100 : A
80~89 : B
70~79 : C
60~69 : D
less than 59 : F

 

let score =  90
let grade =''
if(90<=score && score<=100){
  grade = "A"
}else if(80<=score && score<=89){
  grade = "B"
}else if(70<=score && score<=79){
  grade ="C"
}else if(60<=score && score<=69){
  grade="D"
}else if(0<=score && score<=59){
  grade="F"
}else {
  console.log("잘못된 범위의 점수입니다")
}
console.log(grade)

해석
1. let 을 사용하여 score라는 변수를 지정 
2. let 을 사용하여 console.log에 호출할 변수를 지정 
score를 호출하면 숫자값이 나오기때문에 따로 새로운 변수를 지정해주어야한다.
이때 grade값이 빈 이유는 따로 값을 지정해주지않아도 상관없기때문이다.
3~4 if문 선언으로 90~100 사이에 값은 A로 호출되게 지정
5~12 else if를 사용하여 if문 중첩 시키기
13. else를 사용하여 ture가 아닐때 "잘못된 범위의 점수입니다." 호출하기

 

 

---

2.

한 지원자가 우리회사에 지원을했다. 지원자가 사용가능한 스킬은 배열에 제공이 된다
let skills = ["HTML","CSS","Javascript","React"]
Javascript와 React 둘다 할줄 안다면 “합격!” Javascript와 React 둘중 하나만 할줄 안다면 “예비”, 두 스킬이 없다면 “탈락” 을 보여주는 프로그램을 짜시오

let skills = ["HTML","CSS","Javascript","React"]


if(skills.includes("Javascript") && skills.includes("React")){
  console.log("합격!")
}else if(skills.includes("Javascript") || skills.includes("React")){
  console.log("예비")
}else {
  console.log("탈락!")
}

includes 를 사용하여 배열이 포함된 값인지 계산해줌

---

반복문을 사용하는 이유

반복문은 한 동작을 여러 번 반복합니다.

(사실 0회 반복하는 것도 가능합니다.)

다양한 반복문 메커니즘은 다양한 방법으로 반복문의 시작점과 끝나는 점을 정할 수 있습니다.

증감연산자 사용를 자주 사용한다. (++n, --n, n++, n--)

 

반복문의 종류

• for 문
• do...while 문
• while 문
• 레이블 문
• break 문
• continue 문
• for...in 문
• for...of 문

 

 

while문 문법

while문은 조건문이 거짓이 될 때 까지 반복하는 문

항상 참(true) 일경우 무한루프

만약 조건문이 거짓이 된다면, 그 반복문 안의 문장은 실행을 멈추고 반복문 바로 다음의 문장으로 넘어갑니다.

거짓이 나올때 까지 무한반복되기 떄문에 증감연한자를 사용한다.

// 다음과 같은 코드는 피하세요.
while (true) {
  console.log("Hello, world");
}

 

조건

반복이 시작되기 전에 조건문은 참,거짓을 판단받게 된다. 만약 조건문이 참이라면, while문 안의 문장들이 실행된다.

거짓이라면, 문장은 그냥 while 반복문 후로 넘어간다.

문장

조건문이 참일 때만 while문 속의 문장들이 실행된다. 반복문 속에 여러개의 문장을 사용하고 싶다면 중괄호 { } 를 통해 문장들을 하나로 묶어야 한다.

  <script>
    while(조건식){
      반복할 표현식
    }
  </script>

let num = 1;
while(num <= 10){
    alert(num);
    num++
};

증가 연산자를 사용해서 1씩 증가시킴

---

do while 문

조건이 true인 경우에도 일단 조건문을 "1번" 실행한다.

그 후 뒤에 있는 while문으로 가서 조건이 참이 나올때까지 do에 있는 실행문을

반복한다. 참이 나오지않을경우 무한루프

 

    <script>
      let i = 1;   //← 변수선언
      do {
        console.log(i); //← 반복할
        i++;            //← 실행문 작성
      } while (i <= 10); //← 종료값 작성
    </script>
    
    위 문의 경우 i가 10 이하일때 코드가 중단된다.

 

---

for문 문법

기본문법

변수선언,조건,증가식까지 한번에 작성할수 있어서 편리하다.

      for (var a = 10; a <= 35; a += 5) 
일경우 a의 값이 35일때 끝나는게 아니라 a의 값이 35가 될때 다시 증감식으로
돌아가서 40이 될때 flaes

 

for (초기식;조건식;증감식){
//반복할 표현식
}


작성코드

      for (let i = 1; i <= 10; i++) {
        alert(i);
      }
      
      
      i의 값이 10보다 작거나 같을때까지 반복한다

 

후위 연산자

 

---

중첩 for문 문법

중첩 for문끼리는 같은 변수명을 사용하면 안된다.

i , j , k ... 로 작성해주세요

 

 

새싹 DT 기업연계형 프론트엔드 실무 프로젝트  3주차 블로그 포스팅