>westudy | Week 3 - 조건문

  이번주는 사전스터디 3주차다. 자기소개 페이지에 자바스크립트 코드를 적용하여 업데이트하고, 구현한 기술 내용을 블로그에 적어 제출하라는 과제가 있지만... 백엔드로 마음을 굳히다 보니 더이상 자기소개페이지 마진이니 패딩이니, 가운데니 왼쪽이니 손대기싫었다. 그래서 내가 스스로 내린 "과제 패스"라는 결정!  ㅋㅋㅋㅋ 안해!!

  스터디 첫번째주에는 자기소개 페이지 만들기라는 뚜렷한 주제가 있었는데, 2주차 3주차부터는 과제가 없다보니 약간 스터디의 주제가 붕 떠버렸다. 그래서 이번주는 팀원 모두가 자바스크립트의 문법에 대해 하나씩 맡아 발표를 진행하기로 했고 나는 조건문을 맡았다. 

---

<< 조건문이란? >>

- 특정한 조건일 때 해당 코드를 실행하도록 제어하는 구문이다.

- ex)

쇼핑몰의 회원인가 ?  그렇다 -> 적립금 적립   /    아니다 -> 적립금 적립 없음

사이트의 회원인가? 그렇다 -> 댓글 작성 가능  /  아니다 -> 댓글 작성 불가능

- if-else, else-if, switch문이 있다.

 

if-else 

if (조건) {
	참일 경우에'만' 실행할 코드
} else {
	위의 조건이 거짓일 경우에'만' 실행할 코드
}

- 괄호안의 조건은 true 또는 false의 boolean값을 리턴한다. 

- 거짓 같은 값(Falsy, falsey로 쓰이기도 함) 값은 불리언 문맥에서 false로 평가되는 값입니다. 다음은 8가지 거짓 같은 값들입니다:

false	키워드 false
0	숫자 zero
-0	음수 zero
0n	BigInt. 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. 0n은 거짓 같은 값.
""	빈 string
null	null - 아무런 값도 없음
undefined	undefined - 원시값
NaN (en-US)	NaN - 숫자가 아님

 

- 조건이 true일 때만 if 중괄호안의 코드가 실행된다.

- 조건이 false라면 else 중괄호안의 코드가 실행된다.

- else구문이 없다면 아무 일도 일어나지 않는다.

const myGender = '여자';

if (myGender === '남자') {
  console.log('저는 남자입니다.');
} 

console.log('저는 사람입니다.');

 

else-if 

if (조건) {
	조건이 참일 경우 실행할 코드
} else if (조건1) {
	조건1이 참일 경우 실행할 코드
} else if (조건2) {
	조건2이 참일 경우 실행할 코드
} else {
	위의 조건들이 모두 거짓일 경우 실행할 코드
}

- 더 많은 조건을 추가하고 싶을 때 else if문을 사용한다.

- ex) 위코드 등록

얼리버드로 39기 등록을 했다 -> 39기 14만원 할인 혜택
38기 등록을 했다 -> 38기 정가지만 39기보다 1달 더 빨리 시작해
등록을 안했다 -> 조금 더 생각해..

const answer = prompt('위코드 등록 여부는? : 1.39기 , 2.38기, 3.아직안했다')

if (answer === '1') {
  console.log('39기 14만원 얼리버드 혜택 적용!');
} else if (answer === '2') {
  console.log('39기보다 1달 빨리 개강하는 38기 등록! ');
} else if (answer === '3') {
  console.log('가격이 있으니 조금 더 생각해보자..');
} else {
  console.log('선택지 중에서 입력하세요.');
}

 

삼항 조건 연산자

조건문? 참일 때 실행할 식 : 거짓일 때 실행할 식

- 간단한 if else 조건문은 삼항 조건 연산자를 이용하여 코드를 한 줄로 표현할 수 있다.

- 세개의 항으로 연산을 처리하며 조건문1개와 선택문 2개로 작성한다.

const n = Number(prompt('판별하고 싶은 숫자 입력 : '));

const result = n % 2 === 0 ? '짝수' : '홀수';
console.log(result);

- 입력한 숫자가 0일 수도 있다. 0일때의 조건을 삼항 조건 연산자에 추가해보면 아래와 같다.

const n = Number(prompt('판별하고 싶은 숫자 입력 : '));

const result = n === 0 ? '0'  : n % 2 === 0 ? '짝수' : '홀수';
console.log(result);

 

 

switch

switch (조건) {
    case 값1 :
        코드1;
    case 값2 :
        코드2;
    case 값3 : 
        코드3;
        break;
    default :
        코드4;
}

- 조건이 case의 값과 일치하면 해당 케이스와 연결된 명령문과 뒤에 오는 케이스의 명령문을 실행한다.

- if문과 다르게 break가 없으면 아래의 case에 해당하는 코드들이 모두 실행된다.

- 모든 case에 해당되지 않는 값이 들어오면 default로 이동해 default내부의 코드4를 실행한다.

const answer = prompt('어떤 언어를 배우고 싶나요? : 자바스크립트/파이썬/자바/C')

switch(answer) {
  case '자바스크립트' :
    console.log('미래에 당신은 자바스크립트 개발자!!');
    break;
  case '파이썬' :
    console.log('미래에 당신은 파이썬 개발자!!');
    break;
  case '자바' :
    console.log('미래에 당신은 자바 개발자!!');
    break;
  case 'C' :
    console.log('미래에 당신은 C언어 개발자!!');
    break;
  default :
    console.log('선택지 중에 입력해주세요.');
}

- 위의 switch문을 if-else문으로도 작성할 수 있다.

- ※주의※ swith 조건문의 case안에는 상수값만 올 수 있다. => 비교식이나 변수 사용 불가!!

- 비교, 조건없이 딱 떨어지는 경우에는 swith문 사용하고, 조건(크기 비교 등)을 두고 답을 내려야할 때는 if문을 사용한다.

- ex ) 점수 같은 경우 90점 이상은 A, 80~ 89점은 B, 70 ~ 79점은 C.. 등과 같이 비교가 필요한 경우는 if-else문 사용!

const answer = prompt('어떤 언어를 배우고 싶나요? : 자바스크립트/파이썬/자바/C')

if (answer === '자바스크립트') {
  console.log('미래에 당신은 자바스크립트 개발자!!')
} else if (answer === '파이썬') {
  console.log('미래에 당신은 파이썬 개발자!!')
} else if (answer === '자바') {
  console.log('미래에 당신은 자바 개발자!!')
} else if (answer === 'C') {
  console.log('미래에 당신은 C언어 개발자!!')
} else {
  console.log('선택지 중에 입력하세요.')
}

- 여러개의 값에 해당하는 값이 일치하는 경우 case를 연달아 사용할 수도 있다.

const fruit = prompt('구매할 과일을 입력하세요 : ')

switch (fruit) {
  case '포도':
  case '사과':
  case '수박':
    console.log('1000원 입니다.');
    break;
  case '딸기':
  case '오렌지':
    console.log('800원 입니다.');
    break;
  default : 
    console.log('없는 과일입니다.');
}