{SFB} Javascript day 11 - 함수(return문)

● return 문

 

함수는 입력과 출력의 두 가지로 이뤄져 있다.

입력은 매개변수와 인자라는 것이며 

출력은 return 과 관련이 있다.

 

return을 배우기 전에 표현식(expression)이 무엇인지 알아야한다.

1+1 은 2 이다. 여기서 1+1 이 2의 표현식이다.

2-1 은 1이다. 여기서 2-1 이 1의 표현식이다.

1 === 1 은 true 이다. 여기서 1 === 1 은 true 의 표현식이다.

 

함수도 마찬가지이다.

위 코드에서 sum(2, 3) 이라는 함수를 실행하면 document.write(left+right+'<br>'); 이 실행되겠지만,

이번에는 sum(2, 3)을 실행했을 때 2+3의 계산결과인 5를 받도록 표현식을 만들고 싶을 때

바로 return 을 알아야한다.

 

다시 코드로 돌아와서 자세히 보면 sum() 함수를 호출하면 함수 안에서 document.write() 까지 알아서 실행해준다.

즉, 먼저 좌항과 우항을 더하고 다음으로 <br> 태그를 뒤에 추가해서 줄바꿈하고, 마지막으로 화면에 그 값을 출력한다.

물론 이 코드는 좋은 코드이다. 매우 편리하고 우리가 원하는 인자만 입력하면 값이 출력이 되기 때문이다.

 

하지만, 무엇인가를 더하는 과정이 매우 복잡하거나 힘들고 그렇게 더해진 결과를 다양한 방법으로 사용해야 한다면, 예를 들어 sum() 을 실행한 결과의 색깔을 바꿔야 한다면 다음과 같이 코드를 작성할 수도 있다.

물론 이 코드는 현재 우리가 원하는 일이 복잡하지 않기 때문에 이렇게 작성하고 끝낼 수도 있겠지만, 만약 더 복잡해지고 어려워진다면 이것은 필요에 따라 상당히 많은 함수를 만들어야 한다.

 

※ 물론 이러한 방법도 안되더라.... 그래서 return 을 써야 하는 것을 어느정도 깨달았다.

내가 생각한 방법은 {} 안에 여러 document.write() 를 넣으면 어떻게 될까였다. 당연하게도 5 가 아닌

5 와 25 가 출력되는 것을 볼 수 있다. 당연한 결과이다. 따로따로 출력하는 것이니... css 처럼 여러 속성을 적용시키는 것으로 착각하지 말자.

 

따라서 이럴 때 return 함수를 이용해서 문제를 해결할 수 있다.

 

우선 sum2() 함수를 새로 만들고 매개변수를 left, right 로 지정한 뒤 

만약 sum2(2, 3)을 숫자 5에 대한 표현식으로 만들고 싶고, 또한 그 결과를 출력한 뒤 줄바꿈을 한다거나

( document.write(sum2(2, 3)+'<br>'); ), 혹은

 

결과의 글자색을 빨간색으로 표현하고 ( document.write('<div style="color:red">'+sum2(2, 3)+'<br>'); )

혹은 폰트 크기를 다르게 하고 싶다면 ( document.write('<div style="font-size:3rem>'+sum2(2, 3)+'<br>'); )

 

sum2(2, 3) 를 실행한 결과가 앞서 기본 함수 문법 처럼 {} 안의 document.write(left + right) 와 같은 무엇인가를 알아서 실행하는 것이 아니라

 

sum2(2, 3) 을 실행한 결과값을 return 하면 되는 것이다. 따라서 return 문을 사용하는 것이다.

sum2(2, 3) 의 2 와 3을 더한 값을 원한다면 function sum2(left, right) { } 안에 return left + right  을 적어주면 된다.

그 결과는 바로 왼쪽 홈페이지로 나온다.

즉, 위 코드를 살펴보면 sum2 라는 것이 function 이라는 것을 알려주고 있고, left right 라는 매개변수를 통해서 들어간 값(left + right) 을 return을 통해서 출력함으로써 

다양한 용도로 함수

 

( document.write(sum2(2, 3)+'<br>'); )

( document.write('<div style="color:red">'+sum2(2, 3)+'<br>'); )

( document.write('<div style="font-size:3rem>'+sum2(2, 3)+'<br>'); )

 

를 활용할 수 있게 된다 라는 매우 중요한 기능을 전달하고 있다.

 

 

참조 : 생활코딩 유튜브 (www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA)