자바스크립트> 함수의 return 문법 & 소수 다루기

함수 function 문법은

- 긴 코드 짧게 축약해서 쓸 수 있고 

- 파라미터로 기능업그레이드도 가능하다고 했습니다.

- 오늘 배울 return을 쓰면 함수를 쓰고나서 원하는 값을 그 자리에 퉤 뱉을 수도 있습니다. 

 

 

함수안에서 쓸 수 있는 return 문법

 

함수 안에서 return이라는 문법을 사용할 수 있습니다.

return 오른쪽에 아무거나 적으면 

함수가 실행되고난 자리에 return 오른쪽에 있던 값이 뾰로롱 남습니다. 

 

설명하다

 

function 함수(){
  return 123
}

console.log(함수());

그래서 진짜인지 확인하기 위해 함수() 실행하고나서 123을 남기라고 적었습니다.

출력해보니 진짜 123 잘 출력되는군요. 

이렇게 함수() 실행하고 나서 그 자리에 뭔가 결과를 남기고 싶으면 return 문법 쓰면 되겠습니다.

 

 

 

 

 

설명하다

 

function 함수(){
  console.log('안녕');
  return 123
  console.log('반가워');
}

함수();

그리고 return 문법은 함수종료의 뜻도 가지고 있습니다.

함수안에 코드가 길면 위에서부터 한줄한줄 실행해주는데

return을 만나면 함수가 바로 종료됩니다.

그래서 위 코드에선 console.log('반가워'); 이거 실행안됨

 

 

 

 

 

 

그래서 이걸 어디에 쓰는데

 

문법 배웠으면 이걸 어디에 쓸지 생각해보아야

혼자서도 코드짤 때 활용을 할 수 있습니다.

실은 프로그래밍의 함수문법은 수학의 함수문법과 용도가 똑같습니다.

 

 

 

▲ 수학에서의 함수는 

숫자를 집어넣으면 규칙에 따라 다른 숫자가 나오는 변환기역할을 합니다. 

무슨 이차함수 공식외우고 그게 중요한게 아니라 함수는 그냥 x 집어넣으면 x + 2 나오는 변환기역할을 하는 수식입니다.

프로그래밍에서의 함수도 마찬가지로 

자료를 집어넣으면 규칙에 따라 다른 자료가 나오는 변환기 역할을 할 수 있습니다.

변환기 만들 때 return 문법이 유용하게 사용됩니다.

 

 

 

 

 

 

예시 : 부가세 계산기 만들기

 

쇼핑몰을 만들고 있습니다. 

상품가격의 부가세같은걸 자주 구할 일이 있다고 칩시다.

예를 들어 6만원, 5만원, 8만원짜리 상품 3개의 부가세를 구해서 콘솔창에 출력하려면 

 

console.log(60000 * 0.1);
console.log(50000 * 0.1);
console.log(80000 * 0.1);

이렇게 필요할 때 마다 0.1을 곱해줘도 되겠지만 

1. 부가세 가격 구하는게 자주 필요하거나 2. 수식이 복잡하면 함수를 만들어쓰는 것도 좋습니다. 

함수가 뭐랬습니까 숫자 넣으면 다른 숫자 나오는 변환기 역할을 한다고 했죠?

 

 

 

설명하다

 

function vat(a){
  return a * 0.1
}

console.log(vat(60000));
console.log(vat(50000));
console.log(vat(80000));

1. vat 라는 함수를 만들었습니다.

그 함수는 x를 집어넣으면 x * 0.1 이 그 자리에 남습니다. (부가세구하는 역할임)

2. 그래서 부가세 구하고 싶을 때 마다 vat()를 사용하는겁니다.

그럼 인생이 편리해지지않을까요 

 

 

지금은 수식이 쉬워서 별로 쓸데없어보이지만 수식이 복잡하면 쓸모있을듯요 

- 그거 말고도 숫자를 넣으면 3의 배수 여부를 true/false로 뱉는 함수

- 문자를 넣으면 a가 몇개 들어있는지 뱉는 함수 

이런거 만들어서 쓰면 유용할 것 같지 않습니까

그런 식의 변환기 만들어쓰고 싶으면 return 문법 쓰면 됩니다. 

 

 

 

 

 

 

자바스크립트에서 소수 연산시 주의점

 

console.log(1.1 + 0.3)

이거 실행하면 1.4가 나올 것 같지만

1.40000000001 이게 출력됩니다.

자바스크립트가 이상한게 아니라 원래 컴퓨터가 이상한 것일 뿐인데

 

 

 

 

컴퓨터는 2진법으로 설계되어있습니다.

그래서 숫자도 2진법으로 바꾼 숫자만 알아들을 수 있습니다. 

컴퓨터에게 10 + 20 연산하라고 하면

전부 2진법으로 바꿔서 1010 + 10100 으로 연산하고 다시 10진법으로 바꿔서 보여줍니다. 

 

근데 2진법의 문제가 있는데 

1.1 이런 숫자는 2진법으로 바꾸면

1.00011001100110011001100 ...

이런 패턴이 무한히 반복됩니다.

 

이 세상엔 무한한 숫자를 저장할 수 있는 저장장치는 없기 때문에

컴퓨터는 적절히 끊고 반올림해서 저장합니다.

1.00011001100110011001101

이런 식입니다. 그래서 소수들 끼리의 연산은 아주 작은 오차가 발생할 수 밖에 없는 것임

 

 

해결하고 싶으면

1. 덧셈하기 전에 10 곱해서 덧셈하고 10으로 나누든가 

2. 외부라이브러리 쓰든가 

3. 오차는 무시할 정도로 작으니 그냥 반올림하든가 

하면 됩니다. 아주 정확한 계산이 필요한게 아니면 대부분 그냥 반올림하면 됩니다.

 

 

 

 

 

소수점 반올림하는 법

 

console.log( (1.1 + 0.3).toFixed(1) );

숫자.toFixed(몇자리) 이거 쓰면 됩니다 모든 숫자 뒤에 붙일 수 있습니다. 

근데 주의점은 이렇게 하고 나면 '문자'로 변환해줍니다.

'123'과 123은 다른 타입이라 주의해서 써야합니다. 

 

 

 

 

 

 

'숫자'를 숫자로 변환하고 싶으면 

 

parseFloat('123')
parseInt('123') 

이런거 쓰면 123을 그 자리에 남겨줍니다.

문자처럼생긴 숫자를 숫자로 변경해주는 유용한함수입니다.

parseInt()는 정수로, parseFloat()는 실수로 변환해줍니다. 

 

왜 이런걸 쓰냐면 자바스크립트는 덧셈기호가 좀 특이한 역할을 해서 그런데

1 + 1 은 2지만 

1 + '1' 은 '11' 입니다.

+ 기호 사용시 둘 중 적어도 하나가 문자가 있으면 문자덧셈을 해줘서 그렇습니다.

문자덧셈은 그냥 문자두개 이어붙여줌