[자바스크립트 코딩 - Chap.4] 실습 이자 계산기/레시피 만들기 문제 풀어보

자바스크립트 예제 : 이자 계산기/레시피 만들기

두가지 간단한 예제를 통해 자료형에 대해서 복습해 보려합니다.

파이썬으로도 비슷한 예제들을 풀어보았습니다.

 

이자 계산기와 비슷한 파이썬 예제

[파이썬 #10] "응용" 예제를 풀면서 공부하기 - 미니의 우승 상금

레시피는 아래의 파이썬 예제

[파이썬 #3] 예제를 풀면서 공부하기 - 커피 레시피

 

문제[1] 이자 계산기

재테크를 시작하기로 마음먹은 규재는 오늘 은행에서 2년 만기 적금을 들었습니다.

이자율이 4.3%고 세금은 내지않는 혜택도 받았는데요.

큰 맘 먹고 시작한 재테크인 만큼 매월 80만원씩 저축하기로 했습니다.

 

그런데 막상 생각해보니 당분간 생활비가 빠듯할 것 같아서 60만원씩 저축할 껄 후회중인데요.

그래도 2년 뒤에 받게 될 금액으로 위안 삼으려고 적금 이자를 계산해주는 함수를 만들어보려고 합니다.

 

이자율(rate), 매월 납입 금액(payment), 납입 기간(term)을 파라미터로 전달하면, 만기 후 받게 될 이자를 출력하는 interestCalculator 함수를 완성해 보세요.

 

n = 납입 개월 수 r = 이자율 v = 월 납입금 일 때,

이자 금액은 다음과 같은 식으로 계산할 수 있다고 합니다.

 

interest = v * n * (n+1) / 2 * r / 12

코드를 잘 작성하셨다면, 다음과 같은 결과가 출력되어야 합니다.

 

출력 예시

860000
645000

 

힌트

1. 혹시 벌써 함수 작성하는 방법을 잊으신 건 아니겠죠?

함수는 다음과 같이 선언할 수 있습니다.

function 함수이름(파라미터, 파라미터, 파라미터) {
  동작부분
}

문제에 제시된 함수 이름과 파라미터 이름을 활용해서 함수를 선언하고,

동작 부분에서 이자 금액을 산출하는 식을 따라 코드를 작성해 보세요.

콘솔에 값을 출력해야 되니 console.log 함수도 필요하겠죠?

 

2. 이자 계산 식에 따라 함수를 잘 작성하셨다면,

아마 매월 60만원씩 납입할 경우에 약간의 계산 오류가 발생합니다.

자바스크립트뿐만 아니라 다른 프로그래밍 언어들이 소수계산을 할 때 조금씩 연산 오류가 발생한다고 배웠었는데요.

let x = 0.1;
let y = 0.2;

console.log(x + y);

0.30000000000000004

이 문제를 해결하기 위해선 toFixed 함수나, Math.round 함수를 통해 어림수를 만들어야 합니다.

let x = 0.1;
let y = 0.2;

console.log(+(x + y).toFixed(1));

0.3

혹은

let x = 0.1;
let y = 0.2;

console.log(Math.round((x + y) * 10) / 10);

 

모범 답안

// 여기에 코드를 작성해 주세요.
function interestCalculator(rate, payment, term) {
    let interest = +(payment * term * (term + 1) / 2 * rate / 12).toFixed();
    
    console.log(interest);
}


// 이율이 4.3%일 때 매월 80만원씩 24개월 납입할 경우
interestCalculator(0.043, 800000, 24);

// 이율이 4.3%일 때 매월 60만원씩 24개월 납입할 경우
interestCalculator(0.043, 600000, 24);

 

해설

1. 주어진 템플릿을 보면, 일단 파라미터 3개를 받는 interestCalculator라는 함수를 먼저 선언해야 할 것 같죠?

그럼 문제에 제시된 이름을 참고해서 함수를 먼저 선언해 봅시다.

function interestCalculator(rate, payment, term) {
    
}

함수를 잘 선언하셨다면, 이제 이자를 구하는 식을 그대로 대입해주면 되겠죠?

interest라는 변수를 하나 선언해서 이자 금액을 산출하는 식을 그대로 대입해 주면 되는데요.

이자 금액을 콘솔에 출력도 해야 하니깐, console.log 함수도 활용해서 이 변수를 출력해 줍시다.

function interestCalculator(rate, payment, term) {
    let interest = payment * term * (term + 1) / 2 * rate / 12;
    
    console.log(interest);
}

여기까지 작성하는 일은 크게 어렵지 않으셨죠?

그런데 이렇게 코드를 실행해보면, 매월 60만원씩 납입하는 경우인 두 번째 함수 호출의 결과가 조금 이상합니다.

860000
644999.9999999999

프로그래밍 언어들의 부정확한 계산 문제가 발생한 건데요.

이 문제를 해결하기 위해선 toFixed메소드나, Math.round메소드를 통해 어림수를 만들어야 합니다.

interest에 toFixed 값을 활용해서 어림수를 만들어 봅시다.

 

문제[2] 레시피 만들기

품사는 요즘 커피공부에 빠져있습니다.

에스프레소를 기본으로 하는 커피 메뉴의 레시피를 배웠는데요.

 

아메리카노는 에스프레소에 물을 더한 메뉴이고 카페라떼는 에스프레소에 우유를 더한 메뉴라고 배웠습니다.

그래서 이 레시피를 배열로 한번 정리해 보려고 아래와 같이 코드를 작성했습니다.

let espresso = ['espresso'];

let americano = espresso;
americano.push('water');

let caffeLatte = espresso;
caffeLatte.push('milk');

// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);

나름대로 효율적으로 코드를 작성했다고 생각했는데, 막상 코드를 실행해보니 이상한 결과가 나왔는데요.

[ 'espresso', 'water', 'milk' ]
[ 'espresso', 'water', 'milk' ]
[ 'espresso', 'water', 'milk' ]

품사가 겪은 문제를 해결하면서, 카페 모카(mocha) 와 바닐라 라떼(vanillaLatte) 레시피도 만들어 주세요.

 

모카는 에스프레소에 우유와 초코 시럽을,

바닐라 라떼는 에스프레소에, 우유와 바닐라 시럽을 더한 메뉴입니다.

코드를 잘 작성하셨다면 다음과 같은 결과가 출력되어야 합니다.

 

출력 예시

[ 'espresso' ]
[ 'espresso', 'water' ]
[ 'espresso', 'milk' ]
[ 'espresso', 'milk', 'chocolateSyrup' ]
[ 'espresso', 'milk', 'vanillaSyrup' ]

 

힌트

1. 객체와 배열은 변수에 할당할 때 해당 값이 직접 저장되는 것이 아니라, 주소 값이 저장이 되는 참조형(Reference Type)입니다.

 

그렇기 때문에 객체나 배열이 할당된 변수를, 다른 변수에 할당하게 되면 서로 같은 값을 바라보게 돼서 한쪽을 수정하면, 다른 한쪽도 수정되는 현상이 발생합니다.

let x = [1,2,3];
let y = x;

y.push(4);

console.log(x);
console.log(y);

[1, 2, 3, 4]
[1, 2, 3, 4]

2. 이러한 문제를 해결하기 위해서 참조형 값을 복사하려면, 배열의 경우에는 slice 메소드를 활용해서 간단하게 값을 복사할 수가 있습니다.

 

메소드 이름에서 느낄 수 있는 것처럼 slice 메소드는 시작index와, 종료 index를 파라미터로 갖고 있어서 호출할 때 값을 전달받으면 배열이나 문자열에서 해당 index에 맞게 구간을 잘라내는 역할을 하는 메소드 입니다.

let arr = [0, 1, 2, 3, 4];
console.log(arr.slice(1, 4);

let str = "01234";
console.log(str.slice(1, 4);

[ 1, 2, 3 ]
123

하지만 파라미터로 아무런 값도 전달하지 않을 경우에는 배열이나 문자열 전체를 그대로 리턴하는 메소드의 특징을 활용하는 겁니다.

let x = [1,2,3];
let y = x.slice();

y.push(4);

console.log(x);
console.log(y);

[ 1, 2, 3 ]
[ 1, 2, 3, 4 ]

 

모범 답안

let espresso = ['espresso'];

let americano = espresso.slice();
americano.push('water');

let caffeLatte = espresso.slice();
caffeLatte.push('milk');

// 여기에 caffeMocha와 vanillaLatte 레시피를 만들어 주세요.
let caffeMocha = caffeLatte.slice();
caffeMocha.push('chocolateSyrup');

let vanillaLatte = caffeLatte.slice();
vanillaLatte.push('vanillaSyrup');

// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);
console.log(caffeMocha);
console.log(vanillaLatte);

 

해설

객체와 배열은 변수에 할당할 때 해당 값이 직접 저장되는 것이 아니라, 주소 값이 저장이 되는 참조형(Reference Type)입니다.

 

그렇기 때문에 객체나 배열이 할당된 변수를, 다른 변수에 할당하게 되면 서로 같은 값을 바라보게되서 한쪽을 수정하면, 다른 한쪽도 수정되는 현상이 발생합니다.

 

그래서 재훈이가 코드를 효율적으로 작성한 것 같지만, 변수 espresso, americano, caffeLatte가 모두 같은 배열의 주소 값을 갖게 되면서 의도치 않은 결과가 출력된 것이죠.

 

배열의 경우 이런 상황을 해결하기 위해서는 slice 메소드로 간단하게 해결할 수 있는데요.

slice 메소드를 호출할 때 파라미터로 아무런 값도 전달하지 않을 경우에 배열 전체를 그대로 리턴하는 메소드의 특징을 활용하는 겁니다.

let espresso = ['espresso'];

let americano = espresso.slice();
americano.push('water');

let caffeLatte = espresso.slice();
caffeLatte.push('milk');

// 테스트 코드
console.log(espresso);
console.log(americano);
console.log(caffeLatte);

이렇게 espresso 값을 복사하려고 할 때 slice 메소드를 호출한 값을 할당해주면 됩니다.

[ 'espresso' ]
[ 'espresso', 'water' ]
[ 'espresso', 'milk' ]

코드를 실행시키면 이제는 우리가 원하는 결과가 잘 출력되는걸 확인할 수 있습니다.

그리고 여기서 카페모카와 바닐라 라떼 레시피를 더 만들어야 됩니다.

 

카페모카와 바닐라 라떼 모두 에스프레소와 우유가 들어가니깐, 카페라떼를 복사하면 될 것 같죠?

 

 

Related References

코딩이 처음이라면, 코드잇

JAVA 프로그래밍

요약 : sparta coding club, 스파르타 코딩, 코드잇, 노마드 코더, 프로그래밍, 직장인 코딩, 내일 배움 카드 코딩, 밀크티 코딩, 초등 코딩, 아이스크림 코딩, 코딩 소프트웨어, 자바 스크립트 국비 지원, 자바 스크립트 교육