자바스크립트에서 null, undefined, 빈 변수 체크

2024-05-20

자바스크립트에서 null, undefined, 빈 변수 체크를 위한 표준 함수?

자바스크립트에는 다양한 유형의 변수 체크를 수행하는 표준 함수들이 존재하지만, 각 함수마다 특징과 활용 방법이 다릅니다. 따라서 상황에 맞는 적절한 함수를 선택하는 것이 중요합니다.

typeof 연산자:

  • 가장 기본적인 변수 타입 확인 방법입니다.
  • typeof variable 형태로 사용하며, 변수가 null, undefined, string, number, boolean, object 등 어떤 타입인지 문자열로 반환합니다.
  • 단순히 타입만 확인하고 싶을 때 유용하지만, null과 undefined를 구분하지 못한다는 단점이 있습니다.
const a = null;
const b = undefined;
const c = "";

console.log(typeof a); // "object" (typeof 연산자는 null을 객체로 간주합니다.)
console.log(typeof b); // "undefined"
console.log(typeof c); // "string"

=== 연산자:

  • 두 변수의 값과 자료형을 모두 엄격하게 비교합니다.
  • variable === null 또는 variable === undefined 형태로 사용하여 변수가 null 또는 undefined인지 확인할 수 있습니다.
  • 가장 정확하고 안전한 null 및 undefined 체크 방법이지만, 빈 문자열("") 체크에는 적합하지 않습니다.
const a = null;
const b = undefined;
const c = "";

console.log(a === null); // true
console.log(b === undefined); // true
console.log(c === null); // false
console.log(c === undefined); // false
  • 두 변수의 값만 비교하며, 자료형은 고려하지 않습니다.
  • === 연산자보다 느리고, 자료형에 따라 오류가 발생할 수 있기 때문에 주의해서 사용해야 합니다.
  • 빈 문자열("")도 null과 undefined와 같이 비교하기 때문에 유용하지만, 예상치 못한 결과를 초래할 수 있다는 단점이 있습니다.
const a = null;
const b = undefined;
const c = "";

console.log(a == null); // true
console.log(b == undefined); // true
console.log(c == null); // true
console.log(c == undefined); // true

|| (논리 OR 연산자):

  • null, undefined, 0, false 값을 모두 거짓으로 평가합니다.
  • variable || defaultValue 형태로 사용하여 변수가 null, undefined, 0, false인 경우 기본값을 할당할 수 있습니다.
  • 간단한 null 체크와 기본값 할당에 유용하지만, 복잡한 조건 처리에는 적합하지 않습니다.
const a = null;
const b = undefined;
const c = 0;
const d = false;

const defaultValue = "기본값";

console.log(a || defaultValue); // "기본값"
console.log(b || defaultValue); // "기본값"
console.log(c || defaultValue); // "기본값"
console.log(d || defaultValue); // "기본값"
console.log(true || defaultValue); // "true" (true는 기본값이 아님)

?? (nullish coalescing 연산자):

  • ES6에서 도입된 새로운 연산자입니다.
  • || 연산자와 비슷하지만, 빈 문자열("")은 기본값으로 처리하지 않는다는 장점이 있습니다.
const a = null;
const b = undefined;
const c = "";
const d = false



예제 코드: 자바스크립트에서 null, undefined, 빈 변수 체크

모든 예제에서 사용할 변수:

const a = null;
const b = undefined;
const c = "";
const d = 0;
const e = false;
const f = [];
const g = {};
console.log(typeof a); // "object"
console.log(typeof b); // "undefined"
console.log(typeof c); // "string"
console.log(typeof d); // "number"
console.log(typeof e); // "boolean"
console.log(typeof f); // "object" (배열은 객체로 간주됩니다.)
console.log(typeof g); // "object" (객체는 객체로 간주됩니다.)
console.log(a === null); // true
console.log(b === undefined); // true
console.log(c === null); // false
console.log(c === ""); // false
console.log(d === null); // false
console.log(d === 0); // true
console.log(e === false); // true
console.log(f === null); // false
console.log(g === null); // false
console.log(a == null); // true
console.log(b == undefined); // true
console.log(c == null); // false
console.log(c == ""); // true
console.log(d == null); // false
console.log(d == 0); // true
console.log(e == false); // true
console.log(f == null); // false
console.log(g == null); // false
const defaultValue = "기본값";

console.log(a || defaultValue); // "기본값"
console.log(b || defaultValue); // "기본값"
console.log(c || defaultValue); // "기본값" (빈 문자열도 기본값으로 처리됩니다.)
console.log(d || defaultValue); // "기본값"
console.log(e || defaultValue); // "기본값"
console.log(f || defaultValue); // "기본값" (빈 배열은 기본값으로 처리됩니다.)
console.log(g || defaultValue); // "기본값" (빈 객체는 기본값으로 처리됩니다.)
console.log(true || defaultValue); // "true" (true는 기본값이 아님)
const defaultValue = "기본값";

console.log(a ?? defaultValue); // "기본값"
console.log(b ?? defaultValue); // "기본값"
console.log(c ?? defaultValue); // "기본값" (빈 문자열은 기본값이 아님)
console.log(d ?? defaultValue); // "기본값"
console.log(e ?? defaultValue); // "기본값"
console.log(f ?? defaultValue); // "기본값" (빈 배열은 기본값으로 처리됩니다.)
console.log(g ?? defaultValue); // "기본값" (빈 객체는 기본값으로 처리됩니다.)
console.log(true ?? defaultValue); // "true" (true는 기본값이 아님)

주의 사항:

  • 위 코드는 각 연산자의 기본적인 사용법을 보여주는 예시이며, 실제 상황에 따라 다양하게 활용될 수 있습니다.
  • 특정 상황에 맞는 적절한 변수 체크 방법을 선택하는 것이 중요합니다.
  • ?? 연산자는 ES6에서 도입된 새로운 연산자이며, 빈 문자열("") 체크를 제외하고는 || 연산자와 동일한 기능을 제공합니다.




자바스크립트에서 null, undefined, 빈 변수 체크를 위한 대체 방법

const defaultValue = "기본값";
const result = variable ? variable : defaultValue;

.length 속성:

  • 문자열의 경우 .length 속성을 사용하여 길이가 0인지 확인할 수 있습니다.
const c = "";
const result = c.length === 0;

객체의 키 확인:

  • 객체의 경우 hasOwnProperty 메서드를 사용하여 특정 키가 존재하는지 확인할 수 있습니다.
const g = {};
const hasNameProperty = g.hasOwnProperty("name");

instanceof 연산자:

  • instanceof 연산자를 사용하여 변수가 특정 생성자 함수의 인스턴스인지 확인할 수 있습니다.
const f = [];
const isArray = f instanceof Array;

Array.isArray() 함수:

  • Array.isArray() 함수를 사용하여 변수가 배열인지 확인할 수 있습니다.
const f = [];
const isArray = Array.isArray(f);

custom 함수:

  • 더 복잡한 조건 처리가 필요한 경우, 직접 함수를 만들어 사용할 수 있습니다.
function isNullishOrBlank(variable) {
  return variable === null || variable === undefined || variable === "";
}

const a = null;
const b = undefined;
const c = "";

console.log(isNullishOrBlank(a)); // true
console.log(isNullishOrBlank(b)); // true
console.log(isNullishOrBlank(c)); // true
  • 복잡한 조건 처리를 위해 직접 함수를 만드는 경우, 코드 가독성과 유지 관리성을 고려해야 합니다.

결론

자바스크립트에서 null, undefined, 빈 변수 체크를 수행하는 다양한 방법들이 존재하며, 상황에 따라 적절한 방법을 선택하는 것이 중요합니다. 표준 함수 외에도 다양한 대체 방법들이 존재하므로, 코드 가독성, 유지 관리성, 성능 등을 고려하여 선택하는 것이 좋습니다.


javascript null comparison


팝업 차단 기능: 사용자 편의 vs 웹사이트 운영

다음은 자바스크립트를 사용하여 팝업 차단 기능을 감지하는 몇 가지 방법입니다.window. open() 함수 사용가장 간단한 방법은 window. open() 함수를 사용하는 것입니다. window. open() 함수는 새 창을 엽니다...


자바스크립트 함수 실행 시간 측정 방법

Date 객체 사용:console. time() 사용:performance. now() 사용:자바스크립트 프로파일링 도구 사용:Chrome DevTools와 같은 자바스크립트 프로파일링 도구를 사용하여 함수 실행 시간을 측정할 수 있습니다...


자바스크립트에서 특정 요소에 클래스를 추가하는 방법

다음은 자바스크립트에서 특정 요소에 클래스를 추가하는 몇 가지 방법입니다.classList 속성은 요소의 클래스 목록을 나타내는 DOMTokenList 객체를 제공합니다. classList 객체에는 다음 메서드가 있습니다...


JavaScript 및 jQuery에서 객체가 jQuery 객체인지 확인하는 방법

설명:instanceof 연산자는 객체가 특정 생성자 함수의 인스턴스인지 여부를 확인합니다.jQuery는 jQuery 객체를 생성하는 데 사용되는 생성자 함수입니다.따라서 instanceof jQuery는 객체가 jQuery 객체인지 여부를 확인합니다...


기본 방법: window.location.reload() 함수 사용하기

window. location. reload() 함수 사용하기:이 함수는 현재 페이지를 다시 로드하는 가장 간단한 방법입니다. F5 키를 누르는 것과 동일한 효과를 냅니다.location. href 속성을 사용하여 페이지 URL을 설정하면 현재 페이지가 해당 URL로 다시 로드됩니다...


javascript null comparison

JavaScript에서 빈 문자열/미정의/null 문자열 확인하는 방법

해결 방법:JavaScript에서 문자열이 비어 있는지, 정의되지 않았는지, null인지 확인하는 방법은 여러 가지가 있습니다.비교 연산자 사용:length 속성 사용:trim() 메서드 사용:Optional Chaining 사용 (ES2020 이상):