2025 / 01 / 10
오늘은 조건연산자의 단축평가에 대해 배웠습니다. 실습을 할 때 if문 같은 조건문이나 for, while문과 같은 반복문은 사용하지 않고 오로지 조건연산자와 단축평가를 응용해서 문제를 해결할 수 있도록 하였습니다.
💌단축 평가
논리 연산자 &&( AND )와 ||( OR )를 사용할 때, 필요 이상으로 코드를 평가하지 않고 결과를 바로 반환하는 방식입니다. (조건문을 간결하게 작성 가능)
1. && ( AND ) 연산자
- 첫 번째 값이 false로 평가되면 전체 결과가 false로 확정되기 때문에, 두 번째 값은 평가하지 않습니다.
- 반환값 - 첫 번째 값이 false면 그 값을 반환, 그렇지 않으면 두 번째 값을 반환.
// 예시
console.log(false && "Hello"); // false
console.log(true && "Hello"); // "Hello"- 조건이 true일 때만 실행
const isLoggedIn = true;
isLoggedIn && console.log("유저가 로그인했습니다.");
// isLoggedIn이 true라면 메시지가 출력됩니다.2. || ( OR ) 연산자
- 첫 번째 값이 true로 평가되면 전체 결과가 true로 확정되기 때문에, 두 번째 값은 평가 X
- 반환값 - 첫 번째 값이 true면 그 값을 반환, 그렇지 않으면 두 번째 값을 반환.
// 예시
console.log(true || "Hello"); // true
console.log(false || "Hello"); // "Hello"- 활용 예 - 기본값 설정
const userName = null;
const displayName = userName || "Guest";
// userName이 null이므로 displayName은 "Guest"가 됩니다.
console.log(displayName); // "Guest"3. &&와 || 함께 사용(응용)
- 둘을 조합하면 조건문을 더 간단히 표현할 수 있습니다.
const isAdmin = true;
const name = "John";
// isAdmin이 true면 이름 출력, 아니면 "Access Denied" 출력
console.log(isAdmin && name || "Access Denied");
// 결과: "John"💌정리
- && - 첫 번째 값이 false면 그 값을 반환하고 종료.
- || - 첫 번째 값이 true면 그 값을 반환하고 종료.
- 불필요한 조건문을 줄이고 간결한 코드 작성에 유용!
💌실습 예제
- 사용자에게 키와 몸무게를 작성받습니다.
- 사용자의 키와 몸무게로 BMI를 계산합니다.
- 간단한 테스트를 이용해 사용자의 건강상태를 측정합니다. (질문 5개)
- 질문의 답은 매우강함(5) / 강함(4) / 보통(3) / 적음(2) / 매우적음(1)으로 받습니다.
- 각 항목의 답을 합산하여 총 합계를 출력합니다.
- 테스트를 통해 도출된 값을 화면에 출력합니다.
- 21점 이상 25점 이하 - 건강검진 및 상담필수
- 16점 이상 20점 이하 - 건강 관리 필요
- 11점 이상 15점 이하 - 경미한 개선
- 0점 이하 - 건강 상태 양호
1. 키 / 몸무게 작성 받기
- 사용자에게 키와 몸무게를 작성받습니다.
let cm = Number(prompt("키를 입력해주세요!")); let kg = Number(prompt("몸무게를 입력해주세요!"));
2. BMI 계산
- 사용자의 키와 몸무게로 BMI를 계산합니다.
let bmi = parseInt(kg / (( cm / 100 ) * ( cm / 100 )));
3. 건강상태 측정
- 간단한 테스트를 이용해 사용자의 건강상태를 측정합니다. (질문 5개)
- 질문의 답은 매우강함(5) / 강함(4) / 보통(3) / 적음(2) / 매우적음(1)으로 받습니다.
- 각 항목의 답을 합산하여 총 합계를 출력합니다.
- 테스트를 통해 도출된 값을 화면에 출력합니다.
- 21점 이상 25점 이하 - 건강검진 및 상담필수
- 16점 이상 20점 이하 - 건강 관리 필요
- 11점 이상 15점 이하 - 경미한 개선
- 0점 이하 - 건강 상태 양호
alert("간단한 테스트 후 결과를 알려드리겠습니다."); let test1 = Number(prompt("평소에 자주 느끼는 불편함이 있나요? \n 매우강함(5) / 강함(4) / 보통(3) / 적음(2) / 매우적음(1))")); let test2 = Number(prompt("평소에 입맛이 없거나 과식을 자주 하시나요? \n 매우강함(5) / 강함(4) / 보통(3) / 적음(2) / 매우적음(1))")); let test3 = Number(prompt("일주일에 대략 며칠 배달음식 먹나요? \n 4일 이상(5) / 3일(4) / 2일(3) / 1일(2) / 안함(1))")); let test4 = Number(prompt("얼마나 자주 술을 마시나요? \n 매우 자주(5) / 자주(4) / 가끔(3) / 매우 가끔(2) / 안마심(1))")); let test5 = Number(prompt("신경이 예민해지거나 스트레스를 자주 받나요? \n 매우 자주(5) / 자주(4) / 가끔(3) / 매우 가끔(2) / 없음(1))")); let sum = test1 + test2 + test3 + test4 + test5; let result1 = (sum < 0 && "재검사 필요") || (sum > 25 && "재검사 필요") || (sum >= 21 && "건강검진 및 상담필수") || (sum >= 16 && "건강 관리 필요") || (sum >= 11 && "경미한 개선") || (sum <= 10 && "건강 상태 양호");
- prompt는 받은 값을 모두 문자열로 인식하기 때문에 Number( )을 사용해서 숫자로 변환해줘야 합니다.
- if를 사용하지 않고 앞서 배운 조건연산자의 단축평가를 활용해 문제를 풀어줍니다.
- 여기서 중요한 점은 자바스크립트에서는 25 >= result1 >= 21 이런 식의 양방향 수식은 사용할 수 없습니다.
4. 출력하기
- 저는 자바스크립트에서 document.write( )를 사용하지 않고 document.getElementById( )를 활용해 html 문서에서 꾸며준 후 값을 받아와 출력하였습니다.
- 값을 불러오고 싶은 곳에 Div 등의 박스를 만들고 해당 박스에 id나 class 이름을 준 뒤 document.getElementById를 활용해 값을 넣어줍니다.
document.getElementById('cm').innerHTML = cm; document.getElementById('kg').innerHTML = kg; document.getElementById('BMI').innerHTML = bmi; document.getElementById('sum').innerHTML = sum; document.getElementById('result1').innerHTML = result1;
💌 전체 코드
- 위에 코드를 합쳐놓은 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI 검사</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid black;
margin: 0 auto;
width: 400px;
height: 310px;
margin-top: 20px;
}
h3{
text-align: center;
background-color: rgb(218, 241, 250);
height: 50px;
line-height: 50px;
}
p{
padding : 20px;
padding-bottom: 0;
}
.result{
margin-bottom: 10px;
}
.color{
background-color: rgb(255, 238, 254);
}
.mb10{
margin-bottom: 10px;
}
#BMI, #sum, #result1, #cm, #kg{
font-weight: 900;
}
</style>
</head>
<body>
<div class="box">
<h3>건강 지수</h3>
<div class="result">
<p>
현재 <span class="color">BMI</span>는 <span id="BMI"> </span>입니다.
</p>
<p>
검사 결과 <span class="color">총합계</span>는 <span id="sum"> </span>입니다.
</p>
<p>
현재 <span class="color">상태</span>는 <span id="result1"> </span>입니다.
</p>
</div>
<br>
<hr>
<div class="cm/kg">
<p>
현재 <span class="color">키</span>는 <span id="cm"> </span>입니다.
</p>
<p class="mb10">
현재 <span class="color">몸무게</span>는 <span id="kg"> </span>입니다.
</p>
<br>
</div>
<script>
let cm = Number(prompt("키를 입력해주세요!"));
let kg = Number(prompt("몸무게를 입력해주세요!"));
let bmi = parseInt(kg / (( cm / 100 ) * ( cm / 100 )));
alert("간단한 테스트 후 결과를 알려드리겠습니다.");
let test1 = Number(prompt("평소에 자주 느끼는 불편함이 있나요? \n 매우강함(5) / 강함(4) / 보통(3) / 적음(2) / 매우적음(1))"));
let test2 = Number(prompt("평소에 입맛이 없거나 과식을 자주 하시나요? \n 매우강함(5) / 강함(4) / 보통(3) / 적음(2) / 매우적음(1))"));
let test3 = Number(prompt("일주일에 대략 며칠 배달음식 먹나요? \n 4일 이상(5) / 3일(4) / 2일(3) / 1일(2) / 안함(1))"));
let test4 = Number(prompt("얼마나 자주 술을 마시나요? \n 매우 자주(5) / 자주(4) / 가끔(3) / 매우 가끔(2) / 안마심(1))"));
let test5 = Number(prompt("신경이 예민해지거나 스트레스를 자주 받나요? \n 매우 자주(5) / 자주(4) / 가끔(3) / 매우 가끔(2) / 없음(1))"));
let sum = test1 + test2 + test3 + test4 + test5;
let result1 =
(sum < 0 && "재검사 필요") ||
(sum > 25 && "재검사 필요") ||
(sum >= 21 && "건강검진 및 상담필수") ||
(sum >= 16 && "건강 관리 필요") ||
(sum >= 11 && "경미한 개선") ||
(sum <= 10 && "건강 상태 양호");
document.getElementById('cm').innerHTML = cm;
document.getElementById('kg').innerHTML = kg;
document.getElementById('BMI').innerHTML = bmi;
document.getElementById('sum').innerHTML = sum;
document.getElementById('result1').innerHTML = result1;
</script>
</body>
</html>💌 출력 결과
7일차 후기
- 항상 어떤 문제를 해결할 때 조건문으로 바로 생각하는 경향이 있어서 조건문의 사용 없이 조건연산자의 단축평가로만 문제를 해결하기가 어려웠다.
- 시간도 많이 걸리고 단축평가라는 개념 자체가 처음 들어보는 것이라 신기했다.
- 처음 들어보는 단어였는데 역시 정확한 명칭만 모를 뿐 자연스럽게 사용하던 것이었다.
- 오늘 실습 예제에서 테스트 질문을 작성할 때 결과 값을 신경쓰지 않고 해서 점수는 높은데 상태 양호가 나오는 등의 헤프닝이 있었다.
- 다음에는 이런 실수 하지 않도록 결과까지 꼭! 꼭!! 꼭!!! 확인해야겠다. ￠(･ω･`)
૮꒰ ྀི〃´꒳`〃꒱ა