JavaScript - void 키워드: 초보자 가이드

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript의 void 키워드 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 적어본 적이 없다면 걱정하지 마세요 - 나는 당신의 친절한 안내자가 되어 이 주제를 단계별로 탐구할 것입니다. 그럼 가상의魔杖(즉, 키보드)를 손에 들고, 함께 들어보겠습니다!

void 키워드는 무엇인가요?

자, 구체적인 내용에 들어가기 전에 void에 대해 이해해 보겠습니다. JavaScript에서 void는 표현식을 평가한 후 undefined를 반환하는 연산자입니다. 이제 "이게 뭐하는 짓이냐?"라고 생각할 수도 있습니다. 그러나 내 호기심 많은 친구들, 이 키워드는 그만한 사용처가 있습니다. 지금 그것을 발견해 보겠습니다!

문법

void 키워드의 문법은 매우 간단합니다:

void 표현식

여기서 표현식은 유효한 JavaScript 표현식이 될 수 있습니다. void 연산자는 이 표현식을 평가하지만 항상 undefined를 반환합니다.

간단한 예를 보겠습니다:

console.log(void 0); // 출력: undefined
console.log(void(0)); // 출력: undefined
console.log(void "Hello"); // 출력: undefined
console.log(void (2 + 3)); // 출력: undefined

이와 같이 void 뒤에 어떤 표현식을 넣어도 항상 undefined를 반환합니다. 마술사가 모든 것을 토끼로 만드는 것처럼, 우리의 마술사는 모든 것을 undefined로 만듭니다!

void 키워드의 우선순위 중요성

이제 좀 더 고급 내용으로 넘어가겠습니다 - void 키워드의 우선순위에 대해 이야기하겠습니다. JavaScript에서 연산자는 다른 연산자에 비해 다른 우선순위를 가지며, 이는 평가 순서를 결정합니다.

void 연산자는 매우 높은 우선순위를 가집니다. 이는 다른 대부분의 연산자보다 먼저 평가된다는 뜻입니다. 예를 보겠습니다:

let x = 1;
console.log(void x === undefined); // 출력: true
console.log(void (x = 5)); // 출력: undefined
console.log(x); // 출력: 5

이 예제에서 void x === undefined는 (void x) === undefined로 평가되지 않고 void (x === undefined)로 평가됩니다. 즉, void 연산자는 먼저 x에 적용되어 undefined를 반환하고, 그后再 undefined와 비교됩니다.

두 번째 줄에서는 x에 5를 할당하지만, void 연산자는 여전히 undefined를 반환합니다. 그러나 할당은 이루어지며, 세 번째 줄에서 확인할 수 있습니다.

javascript:void(0)는 무엇인가요?

HTML에서 특히 앵커 태그의 href 속성에서 javascript:void(0)를 본 적이 있을 수 있습니다. 이를 풀어보겠습니다!

<a href="javascript:void(0);" onclick="console.log('Clicked!')">Click me</a>

이 예제에서 javascript:void(0)는 링크의 기본 동작(새로운 페이지로 이동)을 방지하는 데 사용됩니다. onclick 이벤트는 여전히 발생하지만, 링크는 다른 작업을 수행하지 않습니다.

이는 개구리가 공을 던지기 전에 "기다리게" 하고 던지는 것과 같습니다 - 개구리는 동작을 볼 수 있지만 움직이지 않습니다!

함수와 void 키워드

void 키워드는 함수와도 사용할 수 있습니다. 예제를 보겠습니다:

function greet() {
console.log("Hello, world!");
}

console.log(greet()); // 출력: Hello, world! undefined
console.log(void greet()); // 출력: Hello, world! undefined

두 경우 모두 "Hello, world!"가 콘솔에 출력됩니다. 그러나 greet()은 묵시적으로 undefined를 반환합니다(JavaScript의 함수는 반환 문이 명시되지 않으면 undefined를 반환합니다), 반면 void greet()은 명시적으로 undefined를 반환합니다.

즉시 호출 함수 표현식(IIFE)과 void 키워드

마지막으로, 즉시 호출 함수 표현식(IIFE)과 void를 어떻게 사용할 수 있는지 살펴보겠습니다. IIFE는 정의되자마자 실행되는 함수입니다.

void function() {
console.log("I'm an IIFE!");
}();

// 출력: I'm an IIFE!

이 경우 void는 함수 표현식이 표현식으로 처리되도록 하여, 선언으로 처리되지 않도록 합니다. 마치 파티에 잠입하기 전에 가면을 쓰는 것처럼, 함수는 실행되지만 그 후에 남아있지 않습니다!

void 키워드 사용 방법 요약

다음은 void 키워드의 다양한 사용 방법을 요약한 표입니다:

방법	예제	설명
기본 사용	void 0	undefined 반환
표현식과 함께	void (2 + 3)	표현식 평가 후 undefined 반환
HTML에서	<a href="javascript:void(0);">	기본 링크 동작 방지
함수와 함께	void greet()	함수 호출 후 undefined 반환
IIFE와 함께	void function() {}();	IIFE 실행 후 undefined 반환

이제 여러분은 void 키워드의 땅을 거쳐 여정을 마친 것입니다. 기본 문법에서 고급 사용 방법까지, void 키워드에 대해 배웠습니다. void 키워드는 매일 사용하는 것은 아니지만, 이를 이해하면 더 완벽한 JavaScript 개발자가 될 수 있습니다.

계속 연습하고, 호기심을 유지하면, 곧 JavaScript 마법을 쓰는 달인이 될 것입니다! 다음 번에 다시 뵙겠습니다. 즐겁게 코딩하세요!

Credits: Image by storyset