TIL ⎮ JavaScript_기초5_조건문(Conditional statements) if와 연산자

Chris-Yang·2021년 8월 4일
WeCodeif문 기초if문 논리연산자if문 비교연산자if문 예시코드동전분류기야 고생했어위코드조건문 기초조건문 논리연산자조건문 비교연산자조건문 연산자조건문 예시코드조건문과 함수

JavaScript

목록 보기
5/8
post-thumbnail

> 조건문이란

조건문은 간단하게 boolean 데이터 타입인
참(true)과 거짓(false) 두개로 주어진 식을 평가하여 동작하는 원리다.


상상해보자.
동전 분류기가 있는데 그곳에 동전을 넣으면
만약(if) 금액별로 동전 갯수가 카운팅 되는 상자가 있다면,
수많은 인터넷 게시물 사이에서 만약(if) 좋아하는 연예인들의
게시물들만 가져와 분류해서 내 홈페이지에 모을 수 있는 상자가 있다면..

조건문은 이런 것을 가능하게 하는 코드로 된 상자다.
내가 원하는 여러가지 조건들 중 해당하는 조건을 찾아 실행하게 하는 상자다.




> 조건문 만들기와 동작


▶︎ 조건문 만들기는

가장 단순한 형태의 조건문은 다음과 같다.

if (조건) {
  // 조건이 맞으면 이곳의 코드가 실행되고
  ...
  } else {
    // 그렇지 않으면 이곳의 코드가 실행.
    ...
}
  1. 처음에 if를 써서 조건문인 것을 컴퓨터가 알아보게 만들고
  2. () 안에 연산자를 조합해서 true나 false로 결과값이 나오는 조건이 되는 코드를 넣고
  3. {} 안에 실행하고 싶은 코드를 넣는다.

❗️조건문의 맨 처음은 무조건 if () {...}로 시작하고 이후 추가되는 조건들은 } else if () {...}의 형태로 추가시킬 수 있다.
(🤗 조건문이 길어질 수록 {}(중괄호)의 갯수가 헷갈릴 수 있으니 주의하자.)



▶︎ 조건문의 동작은

  1. 조건의 결과가 참(true)일 경우 해당 코드를 실행하고
  2. 조건의 결과가 거짓(false)일 경우 다음 조건} else if () {...}의 코드를,
  3. 조건이 모두 거짓(false)일 경우 마지막 } else {...} 코드를 실행한다.
// 1은 1과 같다는 두 번째 조건이 true가 되면서 코드를 실행시키고 조건문은 종료된다.
if (1 == 2) {
  console.log("나는 false, 다음 조건으로~");
  } else if (1 == 1) {
    console.log("나는 true, 이 코드를 실행!, if문은 여기서 끝!!");
  } else {
    console.log("위에 true가 나와서 나는 실행되지 않음"); 
}

❗️ 조건문의 처음이나 중간에 있는 조건의 값이 true일 경우 조건문은 즉시 해당 코드를 연산/반환하고 그 아래의 조건들은 실행되지 않는다. (🤗 같은 논리로 하나의 조건문 안에 true가 되는 조건이 많아도 그들 중 가장 윗쪽의 코드들은 무시된다.)
❗️ 마지막에 꼭 else가 들어가야 하는 것은 아니다.(이 경우 조건이 모두 false인 경우 반환값은 두구두구~!! 없다.)

if (1 == 2) {
  console.log("else가 없는데");
  } else if ("모두 false일 경우" == "어떻게 될까?!!") {
    console.log("궁금한건 오늘도 못참지!!");
} // 무소식이 희소식... 아무 값도 반환되지 않는다!



> 조건문과 연산자(operator)

조건문은 아래와 같은 몇 가지 기호들을 이용해 동작하며
이것들은 연산을 돕기 때문에 연산자(operator)라고 부른다.

연산자는 true와 false값을 반환하기 때문에 조건문의 조건을 써 넣는 ()부분에서 사용된다.

연산자의 종류는 매우 많지만
조건문에서는 비교연산자와 논리연산자를 주로 사용한다.

🤗 연산자(operator)의 종류와 사용방법: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

하나씩 조건문과 연결지어가며 배워보자.



▶︎ 비교연산자(comparison operator)와 반복문

각각의 피연산자를 비교해서 값이나 데이터 타입이 서로 같은지,
어느 한쪽이 작거나 큰지 등을 비교해 주는 연산자.

==과 ===:

  • ==는 동등연산자(equality operator)라고 부른다.
  • 왼쪽 값과 오른쪽 값을 비교하여 같으면 true, 다르면false를 반환한다.
  • ===은 일치연산자(strict equality operator)라고 부르며==보다 엄격한 비교를 한다.
// ""(빈 문자열), 0과 음수(-0, -1...) 등의 초기값은 false다.(falsy한 값)
console.log(false == ""); // true
console.log(false === ""); // false

console.log(0 == false); // true
console.log(0 === false); // false

console.log("" == 0); // true
console.log("" === 0); // false
  • ==는 자료형을 스스로 임의변경하여 비교하는 반면 ===는 입력된 데이터들 그대로의 자료형까지 일치하는지 비교한다.
  • 참같은 값(truthy)와 거짓같은 값(falsy):
    조금 더 정확히 말하자면 ==는 특정 값(truthy, falsy)들을 자료형이 다른 데이터끼리 비교하는 경우 해당 데이터들을 자바스크립트에서 각각 지정한 boolean형 데이터 타입으로 바꾸고 비교해버린다.
    (🤗 truthy 데이터: https://developer.mozilla.org/ko/docs/Glossary/Truthy,
    falsy 데이터: https://developer.mozilla.org/ko/docs/Glossary/Falsy)

동전분류기 조건문을 예시로 들어보겠다.(이번 예시에서 계속 쓸거다.)

// 비어있는 변수를 만들고 차후 다른 값을 재할당하는 방식.
let 짤랑;

// 🪙동전 넣는 곳🪙
짤랑 = 100;


// 짤랑 변수와 비교하고 일치하는 곳에서 코드를 실행한다.
if (짤랑 === 10) {
  console.log("10원짜리 상자로!")
  } else if (짤랑 === 50) {
    console.log("50원짜리 상자로!");
  } else if (짤랑 === 100) {
    console.log("100원짜리 상자로!");
  } else if (짤랑 === 500) {
    console.log("500원짜리 상자로!");
  } else {
    console.log("외국 동전인가..?");
} // "100원짜리 상자로!"

코드를 복사하여 두번째 짤랑 변수에 다른 값을 대입해보자.

❗️변수의 값은 언제든 그 변수명을 통해서 값을 재할당 할 수 있다는 것도 함께 배워보자.(🤗 "변(하는)수" 라고 외워보자)
- 처음 변수 let 짤랑에 값이 이미 들어있었다 해도 결과는 같다.

양쪽의 값을 비교하여 일치하는 조건이 있는 곳의 코드만을 실행하고
위 아래 나머지 코드들은 무시된다는 것을 알 수 있다.



>과 >=:

  • 그냥 비교연산자라고 부른다.
  • >는 왼쪽 값이 오른쪽 값보다 큰 값이면 true, 작으면 false를 반환한다.
  • >=는 왼쪽 값이 오른쪽 값보다 같거나 큰 값이면 true, 작으면 false를 반환한다.
console.log(1 > 2); // false
console.log(1 < 2); // true

console.log(1 >= 1); // true
console.log(2 <= 2); // true

<와 <=는 정확히 반대로 동작한다.


또 동전분류기 조건문을 예시로 들어보겠다.

// 비어있는 변수를 만들고 차후 다른 값을 재할당하는 방식.
let 짤랑;

// 🪙동전 넣는 곳🪙
짤랑 = 100;


// 짤랑 변수와 비교하고 일치하는 곳에서 코드를 실행한다.
if (짤랑 < 10) {
  consoel.log("1원짜리는 안받아유!");
  } else if (짤랑 <= 10) {
  console.log("10원짜리 상자로!");
  } else if (짤랑 <= 50) {
    console.log("50원짜리 상자로!");
  } else if (짤랑 <= 100) {
    console.log("100원짜리 상자로!");
  } else if (짤랑 <= 500) {
    console.log("500원짜리 상자로!");
  } else {
    console.log("외국 동전인가..?");
} // "100원짜리 상자로!"

분류기에 있는대로 동전을 넣으면 제대로 걸러지지만,
300원을 넣으면 500원짜리 통으로 가버리는
고장난 동전분류기가 되었다.

> >= < <= 들 만으로 더 세세하게 코드를 적으면
좀 더 분류가 되겠지만 완벽하지는 않다.
또한 코드는 짧으면서 가독성이 좋은게 좋은 코드라고 한다.

// 좀더 세분화 해봤지만 한계가 있다.
if (짤랑 < 10) {
  consoel.log("1원짜리는 안받아유!");
  } else if (짤랑 <= 10) {
  console.log("10원짜리 상자로!")
  } else if (짤랑 < 50) {
    console.log("10원짜리 상자로!");
  } else if (짤랑 <= 50) {
    console.log("50원짜리 상자로!");
  } else if (짤랑 <= 100) {
    console.log("100원짜리 상자로!");
  } else if (짤랑 > 100) {
    console.log("500원짜리 상자로!");
  } else if (짤랑 <= 500) {
    console.log("500원짜리 상자로!");
  } else if (짤랑 > 500) {
    console.log("내 500원이 되라.");
  } else if {
    console.log("외국 동전인가..?");
}

아래에서 배울 논리연산자와 비교연산자 조합으로
해당 코드를 간결하고 정확하게 구현할 수 있다.


❗️!(NOT) 연산자
==(혹은 ===)와 !가 만나 !==가 되면 일치하는가?에서 일치하지 않는가?로 코드의 의도가 180도 바뀌게 된다.
그래서 양쪽의 데이터가 일치하지 않아야 true가 되고 일치하면 false가 된다.
또한 !true는 false가 되고 !false는 true가 된다.(truthy, falsy형 데이터도 마찬가지)

// 비어있는 변수를 만들고 차후 다른 값을 재할당하는 방식.
let 짤랑;

// 🪙동전 넣는 곳🪙
짤랑 = "난 동전이 아니지롱";


if (짤랑 === 10) {
  console.log("10원짜리 상자로!")
  } else if (짤랑 === 50) {
    console.log("50원짜리 상자로!");
  } else if (짤랑 === 100) {
    console.log("100원짜리 상자로!");
  } else if (짤랑 === 500) {
    console.log("500원짜리 상자로!");
  // 짤랑 변수에 숫자가 아닌 데이터 타입을 넣을 경우 출력.
  } else if (짤랑 !== Number) {
    console.log("동전만 넣을 수 있습니다🙅‍♀️ 퉷!!");
  } else {
    console.log("외국 동전인가..?");
} // "동전만 넣을 수 있습니다🙅‍♀️ 퉷!!"

NOT연산자 !를 사용하여 동전이 아닌 경우 뱉어내는 코드를 추가했다.
(🤗 정확히는 숫자가 아닌 경우에 발동하는 조건을 만들었다.)
!연산자가 아니었다면 타입별로 조건을 만들던가
논리연산자 여러개를 사용해서 코드가 길어지고 가독성이 나빠졌을 것이다.




▶︎ 논리연산자(logical operator)와 반복문

논리연산자는 왼쪽과 오른쪽 값이
전부 true일 때, 혹은 전부 false일 때,
그리고 둘 다 섞여있을 때 세가지 경우가 판단 기준이 된다.

또한 논리연산자는 연달아 사용할 수 있다.

&&:

  • AND 연산자(AND operator) 라고 부른다.(🤗 키보드 숫자 7에 있다.)
  • 여러개의 &&연산자를 연달아 사용할 수 있다.
  • ✔️ 피연산자(연산할 대상) 전부(and) true일 때만 true를 반환.
  • 피연산자 전부 false일 때 false를 반환.
  • false와 true가 섞였을 때 false를 반환.
// 비교값이 모두 true인 경우
console.log(1 == 1 && 2 == 2) // true
console.log(1 == 1 && 2 == 2 && 10 > 9) // true

// 비교값 중 하나가 false인 경우
console.log(1 + 2 == 3 && 1 > 2) // false
console.log(1 + 2 == 3 && 1 > 2 && 2 >= 2) // false

// 전부 false일 때 
console.log(5 <= 4 && true === !true); // false

지겹겠지만 최대한 비슷한 조건에서 핵심만 바꿔야
덜 헷갈릴 것 같아서 이번에도 동전분류기 조건문을 예시로 들어보겠다.

// 비어있는 변수를 만들고 차후 다른 값을 재할당하는 방식.
let 짤랑;

// 🪙동전 넣는 곳🪙
짤랑 = 70;


// 짤랑 변수와 비교하고 일치하는 곳에서 코드를 실행한다.
if (짤랑 < 10) {
  console.log("1원짜리는 안받아유!");
  // &&연산자를 통해 조건 모두가 true인 경우 코드가 실행된다.
  } else if (짤랑 > 9 && 짤랑 < 50) {
    console.log("10원짜리 상자로!");
  } else if (짤랑 === 50) {
    console.log("50원짜리 상자로!");
  } else if (짤랑 > 49 && 짤랑 < 100) {
    console.log("10원짜리랑 50원짜리 상자로!");
  } else if (짤랑 !== Number) {
    console.log("동전만 넣을 수 있습니다🙅‍♀️ 퉷!!");
  } else {
    console.log("힘들어서 10원 단위만 받습니다.");
} // "10원짜리랑 50원짜리 상자로!"

반복되는 내용이라 10원단위 까지만 분류하도록 만들었다.
지금까지보다 가장 발전된 형태의 동전분류기가 되었다.

&&연산자 덕분에 조건 단락 하나에 여러가지 추가 조건들을 붙여
여러 줄로 만들지 않고 간결하고 짧은 코드로 표현할 수 있게 되었다.

1원단위까지 판단해서 분류하려면 슬슬 지금 배우려는 본질에서
벗어나기 때문에 디테일은 이정도로 마무리 하겠다.
(🤗 정규표현식 등으로 쉽게(?) 1~9까지의 숫자가 포함되어 있는 경우를
처리하는 조건을 추가할 수 있겠지만 나도 당장 자유롭게 쓸 수준도
아니고 일단 조건문에 집중하자)



||:

  • OR연산자(OR operator) 라고 부른다.(🤗 키보드 enter 위에 있다.)
  • 여러개의 ||연산자를 연달아 사용할 수 있다.
  • 피연산자 전부 true이거나(or) 하나만 true일 때 모두 true를 반환.
  • ✔️ 피연산자 전부 false일 때만 false를 반환.
// 비교값이 모두 true인 경우 -> && 연산자와 같음.
console.log(1 == 1 || 2 == 2) // true
console.log(1 == 1 || 2 == 2 || 10 > 9) // true

// 비교값 중 하나만 true인 경우
console.log(1 + 2 == 3 || 1 > 2) // true
console.log(1 + 2 == 3 || 1 > 2 || 2 >= 2) // true

// 전부 false일 때 
console.log(5 <= 4 || true === !true); // false

조건문을 배우며 성능이 벌크업된 동전분류기가
마지막 업그레이드를 위해 대기중이다.

// 비어있는 변수를 만들고 차후 다른 값을 재할당하는 방식.
let 짤랑;

// 🪙동전 넣는 곳🪙
짤랑 = 비트코인;


// 짤랑 변수와 비교하고 일치하는 곳에서 코드를 실행한다.
if (짤랑 < 10) {
  console.log("1원짜리는 안받아유!");
  } else if (짤랑 > 9 && 짤랑 < 50) {
    console.log("10원짜리 상자로!");
  } else if (짤랑 === 50) {
    console.log("50원짜리 상자로!");
  } else if (짤랑 > 49 && 짤랑 < 100) {
    console.log("10원짜리랑 50원짜리 상자로!");
  // ||연산자를 통해 한줄로 만든 여러개의 조건 중 하나만 true가 걸리면 코드가 실행된다. 
  } else if (짤랑 >= 1000000 || 짤랑 === "비트코인" || 짤랑 === "집문서") {
    console.log("동전분류기가 당신에게 감사를 표시하며 튀었습니다!🙋");
  } else if (짤랑 !== Number) {
    console.log("동전만 넣을 수 있습니다🙅‍♀️ 퉷!!");
  } else {
    console.log("힘들어서 10원 단위만 받습니다.");
} // "동전분류기가 당신에게 감사를 표시하며 튀었습니다!🙋"

자, 이제 우리의 동전분류기는 약간의 자아와 당신의 비트코인을 얻고 떠났다.
비트코인과 바꾼 배움이니 더욱 소듕히 갈고닦도록 하자!


🤗 &&연산자와 ||연산자는 동시에 사용할 수 있으며,
자동으로 &&연산자가 먼저 연산한 후 ||연산자가 이어서 연산한다.
따라서
1 + 2 == 3 && 9 > 8 || !false === true && 9*9 === 81
라고 쓰면
(1 + 2 == 3 && 9 > 8) || (!false === true && 9*9 === 81)
라고 자바스크립트가 알아서 판단해 연산한다.




▶︎ 함수에 빠진 조건문

지난 함수편에서 함수는 어떠한 기능을 할 수 있다고 배웠다.
조건문은 함수와 조합해서 사용할 수도 있다.
둘을 조합한 간단한 함수를 만들어 보겠다.

(🤗 사실 그림이 예뻐서 관련된 코드를 만들어 보고 싶었다.)


아래 코드를 모두 복사한 후 F12키를 눌러 개발자도구를 열고 최상단에 console메뉴를 누른 후 붙여넣기 해 보자.

//----------절취선

function 몽상가판독기 (대답) {
  // 값이 비어있는 변수를 만들어서 대답에 따라 변하는 결과를 return.
  let 결과;
  
  // confirm창(pop-up)에 대한 대답이 확인(true)일 경우.
  if (대답 === true) {
    결과 = alert("당신은 아름다운 꿈을 꾸는 몽상가입니다. 코드를 통해 또다른 아름다운 세상을 만들어보아요❤️");
  // confirm창(pop-up)에 대한 대답이 취소(false)일 경우.
  } else if (대답 === false) {
	결과 = alert("몽상가는 아니시군요. 상상력도 코딩에서 중요한 요소라고 해요!👻");
  // 그냥 교육용으로 넣은 부분.(함수 호출시 인수에 다른 데이터형을 쓰면 easter egg처럼 나온다!)
  } else {
	결과 = alert("confirm은 true와 false만을 반환하므로 나는 안나온다!🥲");
  }
  return 결과;
}

몽상가판독기(confirm("이 그림은 달을 매우 사랑하는 소녀의 예쁜 마음을 표현했다.\n👉 예: 확인 \n👉 아니오: 취소"));

//----------절취선



🌈 작은 회고 🤔

함수에 빠진 조건문 부분은 순간 떠올라서 만든 부분이다.
간단한 코드라고 생각하고 대강 머릿속으로 구상하며 코딩을 해봤는데
막상 줄줄줄 한방에 "옜따!! 코드받아라!" 하면서 딱 쳐지지는 않아서 좀 시무룩 했었지만..!
결국 상상을 코드로 구했고 이 기쁨은 스스로 코드를 만들어본 사람은
누구나 알거다.(const 내코드가_잘될때_마음 = 🕺🤸‍👯😭💃🏄‍;)

대부분 코웃음칠 코드지만 "코린이가 코딱지같은 코드에도 기뻐하는구나~" 하고 넓은 마음으로 지켜봐주셨으면 하는 마음이다.

몇 분이나 보시기는 하는지, 누군가에게 도움이 되고있기는 하는지
알 수는 없지만 오늘도 일단 열심히 벨로그 달려봤드아ㅏㅏ!!

그럼 또 내일을 위해 이만 찡긋!

profile
Chris-Yang
sharing all the world
이전 포스트

TIL ⎮JavaScript_기초4_함수(Function)

다음 포스트

TIL ⎮ JavaScript_기초6_배열(Array)과 메소드(method)

0개의 댓글