서문

자바스크립트에서 Nullish Coalescing은 좀 더 간결하게 값을 추출하거나 빈 값에 대한 기본값을 설정하는 방법을 제공합니다. 이번 글에서는 Nullish Coalescing을 이용하여 색상 값을 추출하는 방법을 알아보겠습니다.

Nullish Coalescing이란?

Nullish Coalescing은 두 개의 연산자 ??로 표현됩니다. 이 연산자는 왼쪽 피연산자의 값이 null 또는 undefined인 경우에만 오른쪽 피연산자의 값을 반환합니다. 그 외의 경우에는 왼쪽 피연산자의 값을 그대로 반환합니다.

색상 값 추출 처리 방법

보통 자바스크립트에서는 특정 요소의 스타일 값을 추출할 때 element.style을 사용합니다. 그러나 element.style은 인라인 스타일을 추출할 때만 동작하며, CSS 파일에서 정의된 스타일 값을 추출할 수 없습니다. 이런 경우에는 getComputedStyle() 함수를 사용해야 합니다.

하지만 getComputedStyle() 함수를 사용하면 반환되는 값이 문자열이기 때문에 원하는 값을 추출하기 위해 다음과 같은 과정을 거쳐야 합니다.

const style = getComputedStyle(element);
const color = style.getPropertyValue('color');

위의 코드를 Nullish Coalescing을 이용하여 간결하게 표현하면 다음과 같습니다.

const color = getComputedStyle(element).getPropertyValue('color') ?? 'default-color';

위의 코드에서 getComputedStyle(element).getPropertyValue('color')의 값이 null 또는 undefined인 경우, 'default-color'로 설정된 기본값이 반환됩니다.

요약

Nullish Coalescing을 이용하면 자바스크립트에서 색상 값을 추출하는 과정을 간결하게 표현할 수 있습니다. 이를 통해 코드 가독성을 높이고 프로그램의 유지보수성을 향상시킬 수 있습니다.

해시태그

#javascript #webdevelopment