단 5분 만에 JavaScript Void 0 설명

by

JavaScript는 프론트엔드와 백엔드 개발 모두에 사용할 수 있는 스크립팅 언어입니다. 이 프로그래밍 언어를 사용하면 동적으로 업데이트되고, 이미지에 애니메이션을 적용하고, 멀티미디어를 제어하는 ​​콘텐츠를 만들 수 있습니다.

JavaScript에는 수백 개의 프레임워크와 라이브러리가 있으며 가장 많이 사용되는 프로그래밍 언어이기도 합니다. 스태티스타에 따르면.

JavaScript에는 다양한 역할을 수행하기 위해 만들어진 다양한 연산자가 있습니다. 이 기사에서는 JavaScript Void (0)가 무엇인지, 그 중요성, 사용 사례 및 이점, 잠재적인 보안 위험 및 대안에 대해 설명합니다.

Void (0) 연산자란 무엇입니까?

우리 사전에서 void는 ‘유효하지 않음’ 또는 ‘완전히 비어 있음’을 의미합니다. Void(0)은 주어진 값을 확인하고 정의되지 않은 값을 반환하는 연산자입니다. 아무것도 반환하지 않으면 함수는 무효로 간주됩니다. void (0) 연산자는 다양한 영역에서 사용될 수 있습니다.

예를 들어 앵커 태그를 클릭하면 JavaScript가 정의되지 않은 상태로 반환되도록 할 수 있습니다. 그런 일이 발생하면 클릭하고 있는 페이지가 새로 고쳐지지 않고 해당 페이지에 아무 일도 일어나지 않는다는 의미입니다.

Void 연산자와 0을 피연산자로 사용하는 것의 중요성

모든 표현식에 void 연산자를 사용할 수 있습니다. 그러나 JavaScript에서는 피연산자로 0을 사용하는 경우가 대부분입니다. 다음은 Void (0) 연산자의 몇 가지 사용 사례입니다.

탐색 방지

일반적인 경우에는 링크를 클릭하면 새 페이지로 이동하게 됩니다. 프로젝트가 어떻게 작동하는지 보여주는 프로젝트를 만들 수 있습니다. 내 프로젝트에는 index.html과 nextPage.html이라는 두 개의 파일이 있습니다.

다음과 같이 이 코드를 다른 파일에 추가할 수 있습니다.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to the Home Page</h1>
    <a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/nextPage.html">Go to Next Page (No void operator)</a>
    <script src="script.js"></script>
</body>
</html>
nextPage.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Next Page</title>
</head>
<body>
    <h1>You are on the Next Page</h1>
    <a href="index.html">Go back to Home Page (No void operator)</a>
    <script src="script.js"></script>
</body>
</html>

이 영상을 확인해 보세요:

보시다시피 버튼을 클릭하면 ‘홈’에서 ‘다음 페이지’로 이동할 수 있습니다.

  AWS 데이터 분석 자격증(DAS-C01) 취득 방법

이제 탐색을 차단하는 void(0) 연산자를 소개할 수 있습니다. index.html에 다음 코드를 추가하세요.

<!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
  function doSomething() {
    alert("Button clicked, but no navigation!");
  }
</script><!-- With void operator -->
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="doSomething()">Click me</a>
<script>
  function doSomething() {
    alert("Button clicked, but no navigation!");
  }
</script>

“Click me” 버튼을 누르면 다음 영상을 확인하세요.

버튼을 클릭하면 “버튼을 클릭했지만 탐색할 수 없습니다!”라는 경고가 표시되는 것을 볼 수 있습니다. 나타나지만 다음 페이지로 이동하지 않습니다.

자체 실행 익명 함수

자체 실행 익명 함수 또는 IIFE(즉시 호출 함수 표현식)는 생성 후 정의되고 실행되는 함수입니다. 이러한 함수는 전역 범위를 오염시키지 않도록 변수에 대한 개인 범위를 생성하도록 설계되었습니다.

이 코드를 살펴보세요:

void function() {
    // Function to calculate the sum of numbers from 1 to n
    const calculateSum = () => {
        let sum = 0;
        for (let i = 1; i <= 10; i++) {
            sum += i;
        }
        return sum;
    };
    // Call the function and log the result to the console
    const result = calculateSum();
    console.log("The sum of numbers from 1 to 10 is:", result);
}();

이것은 1부터 10까지의 모든 숫자를 더하고 코드가 실행되면 결과를 표시하는 자체 실행 기능입니다.

코드를 실행하면 “1부터 10까지의 숫자의 합은 55입니다.”가 출력됩니다.

JavaScript와 Void 0을 결합하는 방법

void 연산자는 C 및 C++와 같은 다른 프로그래밍 언어에서 사용할 수 있으므로 JavaScript에만 국한되지 않습니다. 그러나 이 연산자의 사용법은 언어마다 다릅니다. 예를 들어, void는 C 및 C++ 프로그래밍 언어의 데이터 유형이지 연산자가 아닙니다.

JavaScript는 숫자 0과 함께 키워드 ‘void’를 사용합니다. void() 연산자를 사용하면 브라우저가 다음 URL로 이동하는 등의 기본 동작을 방지할 수 있습니다. 이는 JavaScript와 void() 연산자를 결합한 코드 블록의 완벽한 예입니다. 

<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction()">Click me</a>

void () 연산자를 사용하여 정의되지 않은 기본 값을 얻을 수도 있습니다. 이 코드 블록을 살펴보십시오.

const result = void(0);const result = void(0);

실행하면 undefine이 나옵니다.

무효(0) 혜택은 무엇인가요?

JavaScript에서는 “void” 또는 “정의되지 않은” 값을 생성하기 위해 void () 연산자를 사용합니다. 코드에서 이 연산자를 사용하면 다음과 같은 이점이 있습니다.

  • 탐색 방지: 링크나 버튼을 클릭할 때 브라우저가 새 페이지로 이동하는 것을 방지하려면 href 속성에 void(0) 연산자를 사용할 수 있습니다. 이 코드 블록은 작동 방식을 보여줍니다.
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(0);" onclick="myFunction();">Click me</a>
  • 함수에서 정의되지 않은 값 반환: 개발자는 애플리케이션에서 코드 일관성을 원할 때 void () 연산자를 사용하여 명시적으로 정의되지 않은 값을 반환할 수 있습니다. 이 코드 블록을 확인하세요.
function myFunction() {
    // do something
    return void(0);
}
  • ‘정의되지 않음’ 할당 방지: ‘정의되지 않음’이 ‘결과’와 동일하도록 void()를 사용할 수 있습니다. 스타일 선택으로 사용할 수도 있습니다. 이 코드 블록은 이를 달성하는 방법을 보여줍니다.
let result = void(0);
  • 코드 가독성 향상: 코드 가독성은 특히 대규모 애플리케이션을 다룰 때 무시해야 할 사항이 아닙니다. 반환 값을 명시적으로 삭제하고 함수가 아무것도 반환하지 않는다는 것을 다른 개발자에게 알리고 싶을 때 void()를 사용할 수 있습니다. 이 코드 블록은 이를 달성하는 방법을 보여줍니다.
function myFunction() {
  // Do something...
  return void(0);
}

무효의 잠재적 보안 위험 (0)

void(0)는 JavaScript의 다양한 경우에 유용하지만 올바르게 사용하지 않으면 위험할 수도 있습니다. 다음은 void (0)이 악의적으로 사용될 수 있는 몇 가지 인스턴스입니다.

  • 스크립트 주입 취약성: void() 연산자에 전달된 값이 정리 및 검증되지 않으면 스크립트 주입 공격의 잠재적인 위험이 있습니다. 좋은 예는 이 값이 사용자 입력을 기반으로 동적으로 생성되는 경우입니다. 
<a href="https://wilku.top/javascript-void-0-explained-in-just-5-minutes/javascript:void(alert("This could be malicious!'));">Click me</a>

이러한 코드 블록을 통해 사용자는 악성 코드를 주입할 수 있습니다.

  • 클릭재킹: 공격자는 무효 연산자를 사용하여 웹페이지 위에 투명/보이지 않는 레이어를 생성할 수 있습니다. 그런 다음 공격자는 이러한 레이어를 사용하여 사용자가 악성 링크와 버튼을 클릭하도록 속입니다.
  • CSP(콘텐츠 보안 정책)를 우회하는 데 사용할 수 있습니다. 대부분의 웹 사이트 소유자는 XSS(교차 사이트 스크립팅) 공격을 방지하기 위해 CSP를 사용합니다. CSP를 사용하여 웹 페이지가 로드해야 하는 스크립트 및 리소스의 특성을 제한할 수 있습니다. 그러나 void() 연산자를 사용하면 콘텐츠 보안 정책에서 허용하지 않는 스크립트도 로드하므로 이러한 조치와 충돌할 수 있습니다.
  iPhone 13에서 미모티콘을 만드는 방법

무효의 대안 (0)

기술은 계속 변하고 프로그래밍도 마찬가지입니다. 어떤 사람들은 void (0)을 오래된 연산자로 간주합니다. 현대 개발자가 사용하는 몇 가지 대안은 다음과 같습니다.

  • event.preventDefault() 사용: event.preventDefault()를 사용하여 이벤트 작업이 발생하지 않도록 할 수 있습니다. 이러한 문은 사용자가 양식을 제출하거나 다음 페이지로 이동하는 것을 방해할 수 있습니다.

다음 코드 조각은 event.preventDefault 사용 방법을 보여줍니다.

#html
<a href="#" onclick="event.preventDefault()">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => event.preventDefault());
  • #을 href 값으로 사용: 애플리케이션의 여러 페이지가 쉽게 탐색할 수 있도록 서로 연결됩니다. #을 href로 사용하면 사용자가 동일한 페이지에 유지됩니다. 이 접근 방식을 event.prevetDefault()와 함께 사용하면 웹페이지가 맨 위로 스크롤되는 것을 방지할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.
#html

<a href="#">My Link</a>
#JavaScript
document.querySelector('a').addEventListener('click', event => {
  event.preventDefault();
  window.scrollTo(0, 0);
});
  • Null 사용: 정의되지 않은 대신 Null 값을 반환할 수 있습니다. 이를 달성하는 방법은 다음과 같습니다.
let result = null;

자주 묻는 질문

자바스크립트란 무엇입니까?

JavaScript는 프론트엔드 개발에 주로 사용되는 프로그래밍 언어입니다. 하지만 이 언어는 Node.js와 같은 프레임워크를 사용한 백엔드 개발에 사용되고 있습니다. JavaScript는 주로 CSS 및 HTML과 같은 다른 프런트 엔드 기술과 함께 사용되어 웹 페이지에 상호 작용 기능을 추가합니다.

JavaScript Void 0이란 무엇입니까?

JavaScript Void 0은 기본 동작이 발생하지 않도록 하는 데 사용되는 연산자입니다. 예를 들어, void(0)를 사용하면 사용자가 링크나 버튼을 클릭할 때 탐색을 방지할 수 있습니다. void(0)가 있는 코드의 링크를 클릭하면 브라우저가 탐색을 시도하지만 결과는 정의되지 않음으로 평가됩니다.

void (0)에 대한 대안이 있습니까?

예. 대부분의 현대 개발자는 코드에서 void(0) 대신 이벤트 리스너를 사용합니다. 이 접근 방식을 사용하면 다양한 기능을 쉽게 처리하고 소스 코드의 기본 동작을 방지할 수 있습니다.

void (0)을 사용하는 것이 안전한가요?

void(0)를 사용하여 기본 동작을 방지하고 자체 실행 기능을 사용할 수 있습니다. 그러나 void (0)은 코드에서 의식적으로 사용하지 않으면 위험할 수 있습니다. 예를 들어, 이러한 연산자를 사용자 입력에 적용하면 악성 코드를 쉽게 주입할 수 있습니다.

  MS Office 2016 저장 위치에 Dropbox 및 Google 드라이브를 추가하는 방법

결론

JavaScript는 매우 광범위한 프로그래밍 언어이므로 대부분의 개념을 익히려면 시간이 걸릴 수 있습니다.

우리는 void (0) 연산자의 중요성, 사용 사례 및 대안이 무엇인지 가르쳤습니다. 또한 이제 JavaScript를 결합하는 방법과 이 연산자를 사용할 때 발생할 수 있는 잠재적인 위험을 void(0)하는 방법도 이해했습니다.
더 나은 코드 실행을 위해 최고의 JavaScript 런타임 환경을 탐색할 수도 있습니다.