자바스크립트 조건문과 삼항 연산식에 대해 알아보자

 

 안녕하세요. 진득코딩입니다.

 

 지난 시간에는 마지막 자료형인 객체에 대해 알아보았습니다.

 

 자료형은 요리할 때 재료를 준비하는 것과 비슷하다고 생각합니다.

 

 이번 시간에는 지난 포스팅까지 준비한 재료들로 본격적인 프로그램을 만들 수 있는 조건문과 삼항 연산식에 대해 알아보도록 하겠습니다.

 

 if문

 

조건문 중 하나인 if문은 조건에 의해 실행되도록 만들어주는 구문입니다.

 

 

 if문의 구조는 위와 같고 조건문이 true가 되는 경우에만 안에 있는 코드들이 실행되게 됩니다.

 

 

 위 if문은 강제로 true를 넣어두었기 때문에 안에 있는 문구가 그대로 출력되었습니다.

 

else문

 

 if문에 else문을 추가하여 선택지를 부여해 줄 수 있습니다.

 

 

 위와 같이 조건문을 작성하게 되면 if문의 조건이 true이면 if문이, false이면 else문이 실행되게 됩니다.

 

 

 위 if문에 강제로 false를 넣어주었기 때문에 else문이 실행되어 "거짓입니다."라는 문구가 출력된 것을 확인할 수 있습니다.

 

 

 위와 같이 강제적으로 true나 false를 넣지 않고 예제를 이용해서 if문을 살펴보도록 하겠습니다.

 

 age라는 변수에 21이라는 숫자를 넣고 연산자를 통해 true인지 false인지를 확인하여 조건문이 실행되도록 하였습니다.

 

 

 위 조건문에서 age가 20을 초과하는 것이 true이기 때문에 if문에 있는 "운전이 가능합니다."라는 문구가 출력되는 것을 확인할 수 있습니다.

 

else if문

 

 이때 조건이 두 가지 이상일 때는 else if문을 사용하여 조건을 추가해 주시면 됩니다.

 

 else if문은 메모리가 허용하는 한 계속해서 사용할 수 있기 때문에 사실상 무한으로 사용 가능합니다.

 

 위 if문에서 age가 20살을 초과하지는 아니지만 18살 이상이기 때문에 else if문에 있는 코드가 실행된 것을 확인할 수 있습니다.

 

 

 그렇다면 여러 조건이 있을 때 조건의 순서는 중요할지에 대해 살펴보도록 하겠습니다.

 

 else if문 처음 예시에서 조건문들의 순서만 바꿔서 예제를 바꾼 상태로 console에 출력되는 결과를 확인해 보겠습니다.

 

 

 위와 같이 나이가 21살인데도 불구하고 18살 이상인 if문에서 이미 코드가 실행되어 버렸기 때문에 "오토바이 운전이 가능합니다"라는 문구가 출력된 것을 확인할 수 있습니다.

 

논리연산자와 함께 사용하는 if문

 

 

 좀 더 복잡한 조건문들을 사용할 때는 논리연산자와 함께 조건문을 작성해 주시면 됩니다.

 

 &&는 AND연산자로 두 조건 모두 참일 때만 true를 출력합니다.

 

 ||는 OR연산자로 두 조건 모두 거짓일 때만 false를 출력합니다.

 

 따라서 논리연산자를 함께 사용하게 되면 순서가 이상한 조건문도 세부적으로 표현하여 잘 작동할 수 있게 해 줄 수 있습니다.

 

 다만 위 코드의 경우 순서를 지켰을 때가 훨씬 코드가 간결하고 가독성도 좋기 때문에 꼭 필요한 경우에만 사용하는 것을 추천합니다.

 

 

 AND연산자를 사용한 if문의 조건문은 두 조건이 모두 참이지 않기 때문에 false가 되어 else if문이 실행된 것을 확인할 수 있습니다.

 

 반면 OR연산자를 사용한 if문의 조건문은 두 조건 중 참인 조건이 존재하기 때문에 true가 되어 if문이 실행된 것을 확인할 수 있습니다.

 

중복 if문

 

 

 if문은 중복으로 사용하여 세부 조건을 줄 수도 있습니다.

 

 위 코드와 같이 20살 초과인지 확인한 후에 면허 여부를 확인하는 코드를 작성할 수 있습니다.

 

 

 위와 같이 나이는 20살 초과이지만 면허가 없는 경우에 속하여 "면허를 취득하세요!"라는 문구가 출력된 것을 확인할 수 있습니다.

 

if문 관련 문제

 

 위에서 살펴본 if문과 관련된 문제를 풀어보면서 if문에 대해 심도 있게 알아보도록 하겠습니다.

 

 

 

 첫 번째 문제는 숫자가 0, 양수, 음수 중 어떤 수가 나올지에 대해 판단하는 프로그램을 만드는 문제입니다.

 

 먼저 랜덤 함수를 통해 -1~1 사이의 범위의 숫자를 만들어줍니다.

 

 이때 Math.random() 함수는 실수를 발생시키기 때문에 실행했을 때 0이 거의 안 나옵니다.

 

 따라서 Math.floor() 함수를 이용하여 소수점 자리를 빼서 정수로 만들어준 num을 사용하였습니다.

 

 범위를 -1~1로 지정한 이유는 세 가지 경우의 수가 골고루 나올 수 있도록 하기 위해서입니다.

 

 만일 범위를 바꾸고 싶다면 원하는 범위만큼 곱해주고 해당 수를 더하거나 빼서 초점을 맞춰주시면 됩니다.

 

 

 출력을 하게 되면 세 가지 수가 모두 골고루 잘 출력되는 것을 확인할 수 있습니다.

 

 

 문제 2는 점수에 따라 등급을 매기는 프로그램을 만드는 문제입니다.

 

 score에 랜덤으로 점수를 지정해 주고 등급을 담는 grade, 세부 등급을 담는 opt 변수를 선언해 주었습니다.

 

 먼저 score에 따라 grade에 적절한 알파벳을 넣어주었습니다.

 

 세부 등급은 해당 점수에 대해 나머지연산을 통해 +, -, 0을 넣어주었습니다.

 

 F 등급에는 세부 등급이 들어가지 않기 때문에 if문으로 크게 싸서 조건문을 추가해 주었습니다.

 

 두 if문이 끝난 후에 grade와 opt를 함께 출력해 주었습니다.

 

 

 위와 같이 등급과 세부등급이 잘 출력되는 것을 확인할 수 있습니다.

 

 

 세 번째 문제는 지원자의 스킬의 보유 여부에 따라 합격, 예비, 탈락 여부를 보여주는 프로그램을 만드는 문제입니다.

 

 먼저 forEach를 사용하여 각각의 techs에 있는 아이템들이 skills 배열에 들어갈 수 있도록 하였습니다.

 

 이때 if문과 함께 Math.random() 함수를 사용하여 각 아이템을 50% 확률로 포함시키게 하여 각각의 스킬들이 있는 경우와 없는 경우를 모두 만들어주었습니다.

 

그래서 if문을 사용하여 "JavaScript"와 "React"가 배열에 있는지 확인하여 각각 있는 경우에 count 변수에 숫자를 1씩 증가시키도록 하였습니다.

 

 해당 count를 if문의 조건문으로 사용하여 합격여부를 확인하였고 === 연산자를 사용하여 자료형의 종류까지 확인하여 예외처리를 해주었습니다.

 

switch문

 

 switch문은 if문과 같이 조건문으로 조건에 의해 코드를 실행하는 구문입니다.

 

 if문과 역할은 거의 똑같기 때문에 switch문과 if문은 서로 변환이 가능합니다.

 

 

 위와 같이 메뉴판 같은 if문이 존재할 때 위 if문을 switch문으로 바꿀 수 있습니다.

 

 기능은 menu라는 변수에 들어간 숫자에 따라 각각의 다른 console 출력이 되는 함수입니다.

 

 

 현재 menu의 값이 3이기 때문에 menu == 3이라는 조건식에 부합하여 "히스토리 확인"이라는 문자열이 출력되었습니다.

 

 

 위 if문을 switch문으로 바꾸게 되면 위 코드처럼 표현할 수 있습니다.

 

 일단 조건식에 각 case에 들어갈 값을 적어주고 case별로 실행되길 바라는 코드를 작성해 줍니다.

 

 각 case에는 break;를 적어줘야 하는데 이는 해당 break;가 없으면 다음 case로 세기 때문입니다.

 

 이해가 잘 안 된다면 직접 코드를 적어서 break를 없애서 출력값을 확인하는 것이 가장 좋은 방법이라고 생각합니다.

 

 default는 어떤 case에도 부합하지 않는다면 실행되는 코드를 적어주면 되고 아래에 다른 코드들이 없기 때문에 break는 안 적어주셔도 좋습니다.

 

 

 위 switch문을 실행해 보면 if문의 출력값과 똑같은 값이 출력되는 것을 확인할 수 있습니다.

 

 

 그렇다면 if문과 switch문의 차이점에 대해 살펴보도록 하겠습니다.

 

 위에서 if문에 대해 살펴볼 때 조건식을 논리 연산자와 함께 사용하여 위와 같이 표현할 수도 있었습니다.

 

 

 위 코드에서는 menu가 2와 3일 때는 "잔고 확인"이라는 문자열이 출력됩니다.

 

 

 하지만 switch문은 if문처럼 논리연산자를 사용할 수 없고 값 하나로 딱 떨어지는 경우만 사용할 수 있습니다.

 

 따라서 위 if문을 switch문으로 표현하려면 case를 한 번에 사용해서 표현해야 합니다.

 

 

 출력값은 위 if문과 같은 값인 것을 확인할 수 있습니다.

 

 그래서 논리연산자를 사용하거나 조건식이 복잡하다면 if문을 사용하고 한눈에 조건들을 보거나 가독성을 생각한다면 switch문을 사용하는 것이 좋습니다.

 

삼항 연산식

 

 switch문과 반대로 if문에 비해 가독성이 조금 더 떨어지지만 굉장히 간단하게 조건식을 표현할 수 있습니다.

 

 이때 사용하는 조건식은 바로 삼항 연산식입니다.

 

 

 삼항 연산식과 비교하기 위해 if문을 삼항연산식으로 바꿔보도록 하겠습니다.

 

 삼항 연산식은 위와 같이 간단한 조건문에서 많이 사용됩니다.

 

 

 menu의 값이 2이기 때문에 "범위 안의 숫자입니다."라는 문자열이 출력되는 것을 확인할 수 있습니다.

 

 

 위 if문을 위 코드처럼 삼항 연산식으로 표현해 줄 수 있습니다.

 

 삼항 연산식을 사용할 때는 조건문을 적어주고 물음표(?)를 적은 후에 true일 때 실행할 코드와 false일 때 사용할 코드를 각각 써주고 콜론(:)으로 구분해 주시면 됩니다.

 

 또한 삼항연산식의 결과값을 사용하기 위해 변수에 담고 해당 변수를 출력해 주시면 됩니다.

 

 

 위와 같이 삼항연산식으로 표현해도 위 if문과 같은 출력값이 나오는 것을 확인할 수 있습니다.

 

---

 

 이번 시간에는 조건문에 대해 알아보았습니다.

 

 각각의 조건문이 특성이 있고 장/단점이 있기 때문에 상황에 맞는 조건식을 사용하면 좋을 것 같습니다.

 

 어떤 조건문이 좋을지 고민된다면 if문을 사용하는 것을 추천합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글에 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊