instagram 클론 코딩을 진행하다가 새롭게 나의 문제점을 발견했다
return의 차이를 정확히 모르겠다 🙀
그냥 함수를 선언할때 무조건 return으로 모든걸 끝내야되는 줄 알았다. 약간 문장의 . 같은 느낌으로 이해하고 있었는데, 피드백을 받다가 “여기선 return을 안써도 되요!”라고 하는 말을 정확히 이해하지 못했다. 함수는 모두 return값을 가져야한다고 알았는데... 한번 제대로 정리해야되겠다 필요성을 느꼈다.

공식문서 살펴보기 👉🏻 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/return

return이란?

• 함수 안에서만 사용할 수 있다.
• 함수 호출 시 데이터 반환하기 ⇒함수를 호출한 부분으로 데이터를 전달해주기 위해서 사용한다. ( return 문 )
• 함수 종료하기 ⇒ 함수는 return을 만나는 즉시 데이터를 반환하고 함수를 종료해서 그 후에 작성된 코드는 실행되지 않는다.

함수 호출 시 데이터 반환하기

function sum(num1, num2) {
	document.write(num1+num2+'<br>');
}

sum(2,3)
sum(3,4)

구현해야되는 기능이 확실하면 이건 나쁜 코드가 아니다.
그러나 만약 계산식이 매우 복잡하면서 그렇게 더해진 결과를 다양한 방법으로 사용해야한다면 어떨까?
예를 들어 색상을 바꿔야하는 일이 생긴다면 상황이 달라진다.

function sum(num1, num2) {
	document.write(num1+num2+'<br>');
}

function sumColorRed(num1, num2) {
	document.write(`<div style="color:red">` + (num1 + num2) +'</div> <br>');
}

sum(2,3) // 5
sumColorRed(2,3) // 5

더한 값인 5는 같은 결과인데 색상을 바꾸는 함수를 출력하고 싶어서 함수를 두번 선언해야되는 상황이 생긴다. 이러면 상당히 많은 함수를 만들어야한다. 이럴때 return이 필요하다.

function sum(num1, num2) {
	return num1 + num2;
}

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

계산이라는 기능만을 구현하는 sum을 구현해서 다양하게 활용할 수 있는 자유도가 생긴다.

따라서 계산이라는 기능만을 출력해서 다양한 용도의 함수로 실행할 수 있도록 해주는게 return 이다.

return을 사용하지 않는다면?

함수는 선언된 함수를 호출하면 함수의 {} 영역에서 작성된 코드가 다 실행하면 그대로 함수의 실행이 끝난다. 따라서 호출된 sum()함수는 아무런 값도 전달받을 수 없다. 여기서 sum(10,20)을 호출했기 때문에 함수가 실행되면서 console.log(10+20)은 출력됐지만 결과적으로 sum(10,20)은 아무런 데이터 값을 전달받지 못하고있다.

return을 사용한다면?

위의 코드에서 return을 사용하면 호출된 sum() 함수가 값을 전달받는다.

값을 전달받은 데이터는 함수를 호출하는 부분에서 변수에 저장하여 JavaScript 코드에서 활용할 수 있다. 이걸 함수 표현식이라고 한다.

함수 종료하기

return을 만나는 즉시 데이터를 반환하고 함수를 종료한다.

return을 만나자마자 실행이 종료돼서 “return 후”는 실행되지 않는 걸 볼 수 있다.

---

✍🏻 최종 정리

return

• 반환받은 데이터를 변수에 담아서 자유롭게 활용하고 싶을 경우에 사용한다.
• 함수를 종료하고 싶을 경우에 사용한다.