본문으로 바로가기

void 언제 쓸까?

category software engineering/javascript 2023. 8. 27. 13:54
728x90

Pull Request 리뷰 중 void 를 사용한 코드가 발견되어 궁금해짐 🤔

JavaScript에서 void 연산자는 표현식을 평가하고 undefined를 반환하는 데 사용됩니다. 주로 주변 코드에 영향을 미치지 않도록 하거나 의도하지 않은 동작을 유발하지 않도록 하는 경우에 사용됩니다.
1. 네비게이션 방지: 클릭 시 JavaScript 함수 호출과 같은 작업을 수행하려면서 클릭이 새 페이지로 이동하거나 현재 페이지를 다시 로드하지 않도록 하려는 경우. void 연산자를 사용하여 브라우저가 페이지를 이동하지 않도록 할 수 있습니다:

<a href="#" onclick="void myFunction();">클릭하세요</a>

 
2. 의도하지 않은 반환 값 방지: 때로는 반환 값을 가진 함수가 있을 수 있지만 부작용만 실행하고 반환 값이 필요하지 않은 경우가 있습니다. void 연산자를 사용하여 반환 값을 의도적으로 무시하는 것을 명확하게 나타낼 수 있습니다

function logMessage(message) {
  console.log(message);
}

// void를 사용하지 않으면 반환 값도 로그에 기록됩니다
logMessage("안녕하세요"); // "안녕하세요"를 기록하고 undefined를 반환합니다

// 반환 값을 무시한다는 것을 나타내기 위해 void를 사용합니다
void logMessage("안녕하세요"); // "안녕하세요"만 기록됩니다

 
void 연산자를 사용하는 것은 현대적인 JavaScript 코드에서는 그리 흔하지 않습니다. 대부분의 경우에는 더 명확하고 유지 관리 가능한 다른 방법을 사용하여 동일한 결과를 얻을 수 있습니다. 예를 들어 함수 내에서 명시적으로 return undefined를 사용하여 함수가 의미 있는 값을 반환하지 않음을 나타낼 수 있습니다.
TL;DR, 표현식이 undefined를 반환하도록 보장하려면 void 연산자를 사용할 수 있으며, 주로 부작용을 다루거나 원치 않는 동작을 방지하는 경우에 사용됩니다. 그러나 많은 경우에 동일한 결과를 얻을 수 있는 더 명확하고 관용적인 방법이 있습니다.

다른 프로젝트를 진행하며 문득 vercel style eslint를 적용하다보니 가끔 사용하게 되네요😅 리턴타입이 존재하여 사실 반환 받아 에러처리를 한다거나 해야하지만 그렇지 않고 코드를 작성하려 했을 때 발생했습니다. (graphql mutation fn)