정보실

웹학교

정보실

javascript 현대 JavaScript에서 void를 사용하는 경우?

본문

여기서 흥미로운 점이 있습니다. 나는 그들이 이륙하지 않을 것이지만 나는 예제를 좋아합니다.


https://gist.github.com/slikts/dee3702357765dda3d484d8888d3029e 


void 연산자는 역사적으로 몇 가지 사용 사례를 가졌습니다.

  • 동적 버튼을 구현하기 위해 <a href="javascript:void(0)">와 함께 사용되지만 이는 좋지 않은 날짜 지정 방식입니다.
  • undefined 식별자를 덮어 쓸 수 있었을 때 ES5 이전의 나쁜 옛날에는 기본 undefined에 액세스하는 데 사용됩니다.
  • 몇 개의 문자를 저장하고 undefined를 void 0으로 단축하는 데 사용됩니다. 이것은 여전히 ​​minifiers에 의해 사용됩니다

ES6에서 화살표 기능이 도입 된 새 사례를 제외하고 이러한 사용 사례 중 특히 최신 JavaScript와 관련이 있는 것은 없습니다.


void를 사용하여 값을 반환하지 않는 (void) 화살표 함수 설명 


ES6 화살표 함수 표현식을 사용하면 함수 본문에서 중괄호를 생략하여 코드를 더 간결하게 만들 수 있지만, 함수가 부작용을 위한 것일 수 있기 때문에 반환 값이 사용되거나 사용되지 않을 때에 대한 모호성을 만듭니다.


// omitting braces
const id = x => x;

// function called just for side effects
const log = x => console.log(x);


콘솔 API는 매우 친숙하므로 이 특정 예제는 모호하지 않지만 원리를 보여줍니다.


중괄호를 추가하여 의도적 인 공백 화살표 기능을 명시 적으로 만들 수 있지만 덜 간결합니다.


const log = x => {
  console.log(x);
}


이 함수는 여전히 한 줄로 서식을 지정할 수 있지만 Prettier와 같은 자동 서식 도구는 일반적으로 줄 바꿈을 추가하며 값을 반환하지 않으려는 의도는 void 연산자를 사용할 때와 같이 명확하지 않습니다.


const log = x => void console.log(x);


이와 같이 void를 사용하면 가장 눈에 띄는 이점은 줄 수를 줄이는 것입니다. 특히 무효 콜백에 의존하는 CPS와 같은 프로그래밍 스타일에서 특히 그렇습니다.


타입 시스템 및 void 타입


TypeScript를 포함한 많은 타입 시스템은 void 타입의 개념을 가지고 있으며, 이는 값을 반환하지 않는 함수를 위해 void 연산자를 보완적이고 더 인식하기 쉽게 합니다.


React useEffect hook 


void의 일반적인 실제 사용 사례는 React의 useEffect 후크를 사용하는 것입니다.


useEffect(() => void (document.title = 'example'));


useEffect 후크가 콜백의 반환 값을 사용하여 효과를 정리할 수 있으므로 실수로 함수를 반환하면 런타임 버그가 될 수 있으므로 특히 두드러진 예입니다.


비동기 IIFES와 함께 void 사용 


IIFES (비동기 즉시 호출 된 함수 표현식)를 사용하는 void 연산자에 대해서는 중요하지만 덜 중요한 사용 사례가 있습니다. JS에는 블록 범위 또는 실제 모듈이 없기 때문에 전통적으로 IIFES는 모듈 식 범위를 구현하는 데 사용되었지만 현대 JS는 둘 다 있으므로 IIFES는 한 가지 경우를 제외하고는 크게 관련이 없습니다. 모듈 레벨 :


void (async () => {
  await fetch(something);
})();


이것은 3 단계 제안이 존재하는 인기 있는 충분한 유스 케이스입니다. 우선 순위 규칙으로 인해 함수 표현식 주위에 괄호가 여전히 필요하지만 void를 사용하면 선행 괄호가 ASI에서 작동하지 않는 문제가 해결됩니다 (보다 구체적으로 명시적인 세미콜론 줄 종결자가 없는 경우).


Style guides and no-void 


에어 비앤비 및 표준 JS와 같은 인기 있는 스타일 가이드는 공허 없음 ESLint 규칙을 사용하여 무효 연산자 사용을 금지하지만, 이는 명백한 감독이며 사용자가 이를 무시해야 합니다.




페이지 정보

조회 43회 ]  작성일20-01-26 22:05

웹학교