BMI 계산기
구조 잡기
BMI 계산기를 만들기 위해 참고했던 사이트 : http://www.foodsafetykorea.go.kr/portal/healthyfoodlife/bmiCalcurator.do?menu_no=3071&menu_grp=MENU_NEW03
-
대부분의 구조는 이 사이트와 비슷하게 만들었다.
flex 구조를 활용하여 칸을 나누고, 계산에 필요한 입력 칸들을 넣었다. -
BMI 지수 : 몸무게 (kg) / 신장 (m2)
Javascript
const bmiFunction = () => {
const height = Number(document.getElementById('labelHeight').value)
const weight = Number(document.getElementById('labelWeight').value)
BMI 계산에 필요한 값은 height 와 weight만 있으면 되기 때문에
키의 값 (document.getElementById('labelHeight').value)과
몸무게의 값 (document.getElementById('labelWeight').value)을 가져온 후
정수( Number() )로 바꿔준다.
let bmi = weight / (height / 100) ** 2 //bmi 계산법
bmi = Math.round(bmi * 100) / 100 //bmi 수치 반올림
let bmiClass = ''키의 값을 100으로 나눠 미터(m) 값으로 변환하고 BMI의 수치를 구한다.
이렇게 나온 BMI 수치는 소수점이 무수히 나오기에,
2의 자리까지만 나오도록 설정한다.
Math.round: function returns the value of a number rounded to the nearest integer. (MDN)
round를 사용하게 되면 가장 가까운 정수가 반환된다.
그렇기 때문에 소수점 2의 자리까지 나타내기 위해서
나온 소수에 100을 곱해 xxxx . yyy... 를 만들고
round 를 사용해 소수를 제거하고 100을 곱하면 xx . xx 의 형태가 된다.
if (bmi > 0 && bmi < 18.5) {
bmiClass = '저체중'
} else if (bmi >= 18.5 && bmi < 22.9) {
bmiClass = '정상'
} else if (bmi >= 23 && bmi < 24.9) {
bmiClass = '과체중'
} else if (bmi >= 25 && bmi < 30) {
bmiClass = '1단계비만'
} else if (bmi >= 30 && bmi < 35) {
bmiClass = '2단계비만'
} else if (bmi >= 35) {
bmiClass = '고도비만'
} else {
bmiclass = '정확한 수치를 입력해주세요.'
}
document.getElementById('LabelResult').value = bmi
document.getElementById('LabelClass').value = bmiClass
}
그렇게 구한 BMI 수치를 BMI 기준에 따라 bmiClass에 담길 수 있도록 if 문을 사용하였다.
그 후, 나온 bmi와 bmiClass를 html 에 나타나도록 각각 LabelResult 와 LabelClass 에 담는다.
Review
BMI 계산기는 값에 따라 결과를 분류하는 단순한 함수를 사용하기에 큰 어려움없이 만들 수 있었다. 코드를 다 짜고 결과물까지 보았을 때 나름 만족감도 높고, 부족한 부분이 없다고 생각하였지만, 지금 이렇게 게시물을 작성하다보니 부족했던 점이 한 두 부분 발견되었다.
-
이름을 더 명확하게 지을 것.
BMI 수치를 그저
bmi라고 적으면 다른 변수에 이름을 설정할 때 중복되는 단어가 많아져 가독성을 낮출 수도 있기 때문에bmiValue라던가 '값'이라는 느낌을 더 줄 수 있는 이름을 설정하면 좋을 것 같다.마찬가지로
bmiClass또한 class라는 단어를 사용하면 현실에서는 값을 나누는 기준으로 해석될 수 있지만 프로그래밍 상 클래스와 겹쳐 오해가 생길 수도 있기 때문에weightStatus처럼 '몸무게 상태' 라고 짓는 것이 현명한 방법인 것 같다. -
함수를 쪼갤 것
현재 내 BMI 계산기의 로직은 하나의 크고 긴 함수로만 이루어져 있다. 지금은 작은 프로젝트이기 때문에 별 문제가 없지만, 나중에 여러 함수와 복잡한 로직이 생긴다면 길고 큰 함수는 에러 찾기도 힘들고 보는 사람 입장에서 이해하기 어려울 수도 있다. 그렇기 때문에 지금부터서라도 작은 함수를 여러개 만들어 쉽고 간단하게 코드를 짤 수 있도록 노력해야겠다.
