스크립트를 구현하다 보면 전체값에 대한 퍼센트 값이 필요할 때가 있습니다. 일반적으로 UI개발을 하시는 분이라면 그래프와 관련된 작업을 진행할 때 퍼센트 계산값이 필요할거라 생각합니다.
그리고 개발을 반드시 하지 않더라도 퍼센트 공식을 알아두면 우리 일상생활속에서도 유용하게 사용될 수 있습니다. 내가 사용한 카드금액 중 음식, 레저등이 각 몇 %인지도 계산으로 가능하고 쇼핑을 가서 할인율이 되는 금액이 얼마인지도 쉽게 계산되죠.
수치값 계산을 어려워 하시는 분들이 있어서 그 부분에 대한 개념을 정리하고자 합니다. 이번에 한번 이해해 두시면 잊어버리지 않으실거에요.
1.퍼센트(%) 계산
이해하기 쉽게 예로 설명을 들을께요.
우리에게 100개가 물건이 있다고 가정합시다. 그 중 내가 10개의 물건을 팔았다면 나는 전체의 몇%를 판매한 것일까요? 라는 질문에 대한 대답을 물어보면 10%라는 값이 쉽게 나올거에요.
전체 합이 100이므로 물건 1개당 1%로 계산하여 전체를100%로 대입하면 숫자가 딱 떨어지기 때문입니다.
그럼 질문을 한번 바꿔볼께요. 전제 질문은 방금전과 동일하고 숫자만 바꿔보겠습니다.
전체 77개의 물건에서 내가 3개의 물건을 팔았다면 나는 전체의 몇%를 판매한 것일까요?
이 질문에는 처음 질문처럼 쉽게 답이 나오시는가요? 아마 대부분 그렇지 않을거에요.
핵심은 간단합니다. 우리가 구하려고 하는 값(%)을 전체의 값으로 나누고 난 후 다시 곱하기 100을 하면 됩니다.
위의 질문에 해당 공식을 대입해 볼게요.
내가 팔은 물건 / 전체 물건 * 100의 공식을 대입하면 우리가 원하는 결과를 얻을 수 있어요.
즉 ' 3 / 77 * 100 = 3.896103896103896 ' 와 같이 대입하면 됩니다.
2.자바 스크립트 소수점 쉽게 찍기
방금 우리는 퍼센트 계산 하는 방법을 배워봤어요. 그런데 방금 처럼 값을 구하면 값이 정확히 딱 나누어 떨어지지 않는 경우가 발생합니다. 경우에 따라서는 소수점의 값이 굉장히 길어지는 경우도 존재하게 되는데요.
이 때 유용하게 사용할 수 있는 것이 'toFixed' 메소드 입니다. 해당 메소드를 활용하면 자신이 원하는 소수점 자리값까지 값을 출력할 수 있습니다. 방법도 굉장히 간단하고 숫자로 자신이 출력하고 싶은 소수점 자리수 선택하면 됩니다.
const result = 3 / 77 * 100; //3.896103896103896
document.write(result.toFixed(2)); //3.90 : 반올림이 적용
'IT > JavsScript' 카테고리의 다른 글
tabindex 사용하여 focus처리 (0) | 2021.03.11 |
---|---|
모바일 스크롤 페이징 (infinite scrolling pagination) 구현하기 (0) | 2021.03.10 |
배열 메서드(Method) 선언하기 (0) | 2021.03.10 |
객체(object) 활용하기 (feat.JSON) (0) | 2021.03.10 |
공백문자 쉽게 제거하기 (0) | 2021.03.10 |
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)