생활코딩 WEB2 JavaScript를 수강 중입니다.
해당 글은 강의 내용을 개인적으로 정리한 것이기 때문에 보다 정확한 내용은 원 강의를 참고 부탁드립니다.
#1 매개변수와 인자 (Parameter & Argument)
left, right는 매개변수 (Parameter)
2, 3은 인자 (Argument) 라고 한다.
여기서 sum의 기능은,
1) 사용자가 입력하는 인자 (2, 3)을 받아서 숫자 값을 더하고 (left+right)
2) 개행하여 (<br>)
3) 결과를 보이는 화면에 출력한다. (document.write())
결과는 5
#2-1 함수 결과값 활용
- return을 쓰지 않고 document.write를 함수 안에 넣었을 때
sum함수로 두 개의 숫자를 합한 값이 나오는 것까지 ok.
이제 결과값을 활용하고 싶다.
빨간색을 입히기 위해 앞서 만들었던 sum 함수의 블록 { } 안에서 color 속성을 추가하여 새로운 함수인 sumColorRed를 만들었다.
그런데 결과는 23 이 나왔다?!
댓글을 보니 document.write 내용을 차례로 처리하면서 2와 3을 계산하지 않고 그냥 붙여버린듯 하다.
(left+right)처럼 괄호를 묶어줌으로써 해결이 가능하나 본질적인 문제해결은 아니다.
아니면 div 태그가 안의 내용을 문자로 처리해버리는건가? 아무튼..
#2-2 함수 결과값 활용
- return을 쓰고 document.write를 함수 밖으로 뺄 때
sum2함수에는 { } 안에 return만 넣었고 document.write()를 함수 밖으로 빼주었다.
이렇게 해서 우리는 사용하고자 하는 계산식을 sum2라는 함수에 적용시켰고,
결과값을 활용하는 과정(색깔을 입히는 것과 같은) 에서 해당 함수와 매개변수 값들을 넣어줌으로써 그 계산식을 사용할 수 있게 되었다!
결과는 5
#3 결론
- 왜 return을 사용해야 하지?
단순히 결과만 실행하는 것이 아니라 결과물을 가지고 더 다양하게 사용하고 싶다면 return을 통해 결과물을 돌려줘야 한다. 이렇게 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생기는 것이다.
함수를 실행한 후 그 결과값을 함수 밖으로 넘기는 것을 '함수값을 반환한다(return)'라고 한다.