자바스크립트에서 return문을 생략해도 되는 경우와 활용 방법

 

앞 포스팅에서는 map() 함수를 할때 return문의 유무에 대해서 알아보았습니다.

 

 

중괄호를 사용하면서 return 키워드를 생략하는 경우,

함수는 값을 반환하지 않고 기본적으로 undefined를 반환한다고 했습니다.

이 경우는 해당 함수에서 값을 반환하는 것이 중요하지 않을 때 유용합니다.

 

 

예를들어 다음과 같은 상황에서는 return문을 생략하고 기본적으로 undefined를 반환하는 것이 적절합니다.

//예제1

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setCount(count + 1); 
    }, 1000);
  }, []);

  return (
    <div>
      {count}
    </div>
  );
}

위의 예제에서 useEffect 훅을 사용하여 1초마다 setInterval 함수를 실행하고 있습니다.

setInterval 함수를 호출하면서 상태 값을 변경하는 코드가 있지만, setInterval 함수 자체가 값을 반환하지 않습니다.

따라서 useEffect 에서 반환되는 값이 필요하지 않으므로,

return 문을 생략하고 기본적으로 undefined를 반환하는 것이 적절합니다.

 

 

또 다른 예로는 다음과 같이 함수의 실행 결과가 다른 함수에서 사용되지 않을때도 reutrn 문을 생략하고 

기본적으로 undefined를 반환하는 것이 적절합니다.

// 예제2 (fetchData 함수에서 return 문을 생략하는 경우)

function fetchData(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
}

fetchData('https://test.com/posts/1');

위의 예제에서 fetchData 함수는 fetch 함수를 호출하고, 데이터를 출력하는 코드가 있습니다.

위 코드에서는 데이터를 출력하는 것이 목적이므로, console.log 함수를 호출하는 것으로 충분합니다.

따라서 return 문을 사용하여 결과를 반환할 필요는 없습니다.

 

 

하지만, 만약 fetchData 함수를 다른 곳에서 재사용하거나, fetchData 함수에서 비동기 처리를 수행하지 않고

동기 처리를 수행해야 하는 경우, return 문을 추가하여 값을 반환할 수 있습니다.

 

////다른 곳에서 사용하기위해 값을 반환해야하는 경우

function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .then(data => data);
}

fetchData('https://test.com/posts/1')
  .then(data => console.log(data));
  
  
 ////동기적으로 실행해야하는 경우
 
  async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}