개발자 첫걸음/The WEb Developer BootCamp 2022

Section 16: JavaScript 판단 내리기

프로아마추어 2022. 4. 20. 17:43

 

1. 코딩으로 의사 결정을 한다고?

로그인의 경우를 생각해보자.

특정 사이트에 로그인 하지 않으면 글쓰기 등의 동작을 할 수 없다.
로그인 했다면 해당 계정의 마이페이지 확인 및 글쓰기 등이 가능하다.

 

위와 같이 어떤 조건에 대한 결과를 참과 거짓으로 구분하는 방법을 학습해보자.

 

2. 비교 연산자

/*
    > 보다 큰
    < 보다 작은
    >= 보다 크거나 같은
    <= 보다 작거나 같은
    == 같은
    != 같지 않은
    === 타입과 값 모두 같은
    !== 타입이나 값이 같지 않은
*/

// 비교 연산자는 boolean 값만을 반환한다.
1 > 3 // false
1 < 3 // true

// 문자는 유니코드의 값에 기반하여 비교한다.
'A' -> 41
'a' -> 61

// 대문자가 소문자보다 값이 작다.
'a' < 'b' // true
'A' > 'a' // false

 

3. 등식 삼중 등호 vs 이중등호

// == double equals 
// 타입을 구분하지 않는다. 같은 타입으로 변환한 후 값을 비교한다.

0 == '' // true
0 == false // true
'1' == 1 // true
null == undefined // true


// === triple equals 
// 타입을 구분하고 값을 비교한다.
1 === '1' // false
1 !== '1' // true

 

 

4. Console, Alert, Prompt 코드

// console.log()
// -> 다른 언어에서는 print와 같은 기능
// 뭔가를 출력하기 위해 사용 -> 크롬 > 개발자 도구 > console 탭에서 확인 가능

console.log('안녕'); // 안녕
console.log(1+4, '안녕', true); // 5 '안녕' true

// alert
// 경고창을 띄워준다.
alert('경고 메시지 발생!');

// prompt
// 사용자로부터 입력을 받는 창을 띄운다
let userInput = prompt('숫자를 입력해주세요');
userInput; // '100' '사용자 입력 값' typeof string
userInput + 1; // '1001'

parseInt(userInput+1); // 101 typeof number

// 문자열을 정수로 타입 변경한다
parseInt('string');

 

5. JavaScript 실행하기!

/*
    크롬 개발자도구 console탭의 코드는 전부 휘발되기 된다.
    따라서 JavaScript파일을 실행할 수 있는 편집기인 VS Code를 사용한다.

    JS파일의 확장자는 js로 한다.

    JS파일에 console.log() 작성
*/

// main.js 파일에 다음 코드 작성
console.log('반가웡 우리 처음 만나지? ㅎㅎ');
<!-- html파일의 head 태그 안에 script태그로 JS파일의 경로를 넣어준다-->
<head>
    <script src="./main.js"></script>
</head>

 

개발자도구 - console 탭 확인 결과

 

6~8. if구문, Else-if구문, Else 구문

/*
    if - 조건이 참인지 거짓인지 판단하여 코드 블럭 실행
    else if - 상위 조건이 거짓일 때 판단하는 조건문
    else - if, else if 모두 거짓일 때 실행
*/

let age = Math.floor(Math.random() * 100) + 1;

console.log(`당신의 나이는 ${age}세이고, `);

if(age < 19) {
    // 조건이 참이면 실행
    console.log('미성년자입니다.');
} else if(age < 40) {
    // 최상위 조건이 거짓이고 else if가 참이면 실행 
    console.log('청년입니다.');
} else {
    // 상위의 모든 조건이 거짓이면 else 블럭 실행
    console.log('중장년입니다.');
}

 

9. 조건부 네스팅

  • 조건문 안에 조건문을 넣는 것
const password = prompt('비밀번호를 입력해주세요.');

// 비밀번호는 6자리 이상이어야만 한다.
if (password.length >= 6) {
  console.log('사용가능한 비밀번호입니다.');
} else {
  console.log('비밀번호가 너무 짧습니다. 6자리 이상의 비밀번호를 입력해주세요.');
}

// 비밀번호에는 공백이 올 수 없다.
if (password.indexOf(' ') === -1) {
  console.log('좋아요! 공백이 없군요!');
} else {
  console.log('불가능한 비밀번호에요! 공백이 있습니다!');
}

// 위의 두 조건문을 합치면 아래의 코드와 같다.
// 비밀번호는 6자리 이상이어야만 한다.
if (password.length >= 6) {
  // 비밀번호에는 공백이 올 수 없다.
  if (password.indexOf(' ') === -1) {
    console.log('사용가능한 비밀번호입니다.');
  } else {
    console.log('불가능한 비밀번호에요! 공백이 있습니다!');
  }
} else {
  console.log('비밀번호가 너무 짧습니다. 6자리 이상의 비밀번호를 입력해주세요.');
}
 
 

10. Truthy 값과 Falsy 값

Truthy value:

  • Falsy 값을 제외한 모든 값

 

Falsy value:

  • false
  • 0
  • '' (empty string)
  • null
  • undefined
  • NaN
const userInput = prompt('값을 입력하세요.');

// 사용자 입력값이 참인지 거짓인지 판별
if (userInput) {
  console.log('TRUTHY');
} else {
  console.log('FALSY');
}

 

11. 논리 함수 AND

  • &&로 표시한다.
  • 한쪽이 false이면 false를 return 한다.
/*
    true && true // true
    true && false // false
    false && true // false
    false && false // false
*/

const password = prompt('비밀번호를 입력해주세요.');

if (password.length >= 6 && password.index(' ' !== -1)) {
  console.log('사용가능한 비밀번호입니다.');
} else {
  console.log('6자리 이상, 공백이 없는 비밀번호를 입력해주세요.');
}

 

12. 논리 함수 OR

  • ||로 표시한다.
  • 한쪽이 true이면 true를 return 한다.
/*
    true || true -> true
    true || false -> true
    false || true -> true
    false || false -> false
*/

const age = prompt('나이를 입력해주세요.');
// 0~5세이고 65세 이상이면 무료
// 11~64세 2000원
// 6~10 1000원

// AND가 OR보다 우선 순위에 앞선다.
if ((age >= 0 && age < 5) || age >= 65) {
  console.log('무료');
} else if (age >= 5 && age <= 10) {
  console.log('1000원');
} else if (age > 10 && age < 65) {
  console.log('2000원');
} else {
  console.log('나이를 잘못 입력하셨습니다.');
}

 

13. 논리 함수 NOT

  • !로 표기하고 불리언 값의 반대값을 반환한다.
  • null // null
  • !null // true
  • !(1 === 1) // false
let name = prompt('이름을 입력해주세요.');

// name값이 비었을 때
if(!name) {
	prompt('이름을 입력하세요!!!!');
}

 

14. Switch 조건문

const day = prompt('0~6 사이의 숫자를 입력하세요.');

switch (day) {
  // case 조건: 조건에 해당하는 코드가 실행된다.
  // case 0: -> if(day === 0)
  case 0:
    console.log('일요일');
    // break를 명시하지 않으면 아래의 코드도 실행된다.
    break;
  case 1:
    console.log('월요일');
    break;
  case 2:
    console.log('화요일');
    break;
  case 3:
    console.log('수요일');
    break;
  case 4:
    console.log('목요일');
    break;
  case 5:
    console.log('금요일');
    break;
  case 6:
    console.log('토요일');
    break;
  // case에 명시된 값 이외의 입력이 들어올 경우 default 문장 실행
  default:
    console.log('0 ~ 6까지의 숫자만 입력하세요');
}

 

저작자표시 비영리 변경금지 (새창열림)

'개발자 첫걸음 > The WEb Developer BootCamp 2022' 카테고리의 다른 글

Section 19: 루프의 구조  (0) 2022.04.24
Section 18: JavaScript 객체 리터럴(Literals)  (0) 2022.04.23
Section 17: JavaScript 배열  (0) 2022.04.22
Section 15: JavaScript 문자열  (0) 2022.04.20
Section 14: JavaScript 기초  (0) 2022.04.20

'개발자 첫걸음/The WEb Developer BootCamp 2022'의 다른글

  • 현재글Section 16: JavaScript 판단 내리기

관련글

댓글

티스토리툴바