자바스크립트에서의 Nullish Coalescing과 비디오 플레이어 연동 방법

29 Sep 2023

javascript

자바스크립트에서 Nullish Coalescing 연산자는 변수가 nullish (null 또는 undefined)인 경우 기본값을 할당하는 간편한 방법을 제공합니다. 이 연산자를 사용하면 if문이나 삼항 연산자를 사용하지 않고도 코드를 간결하게 작성할 수 있습니다.

사용법

Nullish Coalescing 연산자는 ?? 기호를 사용하여 표현합니다. 아래는 예제 코드입니다.

let name = null;
let greeting = name ?? 'Hello, Guest';

console.log(greeting); // Output: 'Hello, Guest'

위의 코드에서 name 변수가 null이기 때문에 nullish coalescing 연산자를 사용한 greeting 변수는 ‘Hello, Guest’로 할당됩니다. 이렇게 기본값이 할당되는 것은 name 변수가 null 혹은 undefined인 경우에만 발생하며, 다른 falsy 값 (예: 0, false, 빈 문자열)일 경우에는 기본값이 할당되지 않습니다.

Nullish Coalescing vs 비교 연산자

Nullish Coalescing 연산자는 평가 대상 변수가 nullish인 경우에만 기본값을 할당합니다. 반면에 비교 연산자 (||)는 평가 대상 변수가 falsy 값인 경우에도 기본값을 할당합니다. 이는 Nullish Coalescing 연산자가 더 엄격한 평가를 수행한다는 것을 의미합니다.

let value1 = 0;
let value2 = '';

let result1 = value1 || 'Default'; // Output: 'Default'
let result2 = value2 || 'Default'; // Output: 'Default'

let result3 = value1 ?? 'Default'; // Output: 0
let result4 = value2 ?? 'Default'; // Output: ''

위의 예제에서 value1은 0이라는 falsy 값이므로 result1 변수에는 ‘Default’가 할당됩니다. 하지만 Nullish Coalescing 연산자인 result3 변수에는 0이 그대로 할당됩니다. value2는 빈 문자열이므로 비교 연산자를 사용하든 Nullish Coalescing을 사용하든 모두 기본값인 ‘Default’가 할당됩니다.

비디오 플레이어와 자바스크립트의 연동 방법

비디오 플레이어를 자바스크립트와 연동하여 동적으로 제어하고 상호작용할 수 있습니다. 아래는 비디오 플레이어와 자바스크립트의 연동 방법을 설명한 예제 코드입니다.

HTML 구조

먼저 비디오 플레이어를 위한 HTML 구조를 작성해야 합니다. 아래는 간단한 비디오 플레이어의 예제입니다.

<video id="videoPlayer" controls>
  <source src="video.mp4" type="video/mp4">
</video>

JavaScript로 비디오 제어

자바스크립트를 사용하여 비디오 플레이어를 제어할 수 있습니다. 예를 들어, 비디오를 재생하거나 일시정지하는 등의 동작을 수행할 수 있습니다.

// 비디오 플레이어 엘리먼트 가져오기
const videoPlayer = document.getElementById('videoPlayer');

// 비디오 재생
function playVideo() {
  videoPlayer.play();
}

// 비디오 일시정지
function pauseVideo() {
  videoPlayer.pause();
}

위의 코드는 getElementById를 사용하여 비디오 플레이어 엘리먼트를 가져온 후, play() 함수와 pause() 함수를 사용하여 비디오를 제어하는 예제입니다. 이 외에도 볼륨 조절, 시간 설정, 이벤트 처리 등 다양한 기능을 추가할 수 있습니다.

이벤트 처리

비디오 플레이어에서 발생하는 이벤트를 자바스크립트로 처리할 수도 있습니다. 예를 들어, 비디오가 재생이 끝났을 때 특정 동작을 수행하거나, 특정 시간에 동작하는 등의 이벤트 처리가 가능합니다.

// 비디오 재생 종료 이벤트 처리
videoPlayer.addEventListener('ended', function() {
  console.log('Video ended');
  // 재생 종료 후 추가 동작 수행
});

위의 코드는 비디오 재생이 종료될 때마다 ‘Video ended’라는 메시지를 출력하는 예제입니다. addEventListener를 사용하여 특정 이벤트를 감지하고, 해당 이벤트가 발생했을 때 수행할 동작을 정의할 수 있습니다.

이와 같이 자바스크립트를 활용하여 비디오 플레이어를 제어하고 이벤트를 처리할 수 있습니다.

#hashtags: #JavaScript #VideoPlayer