JavaScript/Tip

[JavaScript]변수가 정의되었는지 확인하는 방법

DevStory 2022. 7. 3.

변수의 상태

변수가 정의되었는지 확인하는 방법을 소개하기 전에 변수의 상태에 대해 알아봅시다. 변수는 "정의되거나 정의되지 않음" 또는 "값이 초기화되었거나 초기화되지 않음"이라는 상태를 가집니다.

다음은 변수의 정의와 초기화에 대해 설명합니다.


변수 정의

변수가 유효한 범위에서 선언된 경우 변수는 정의되었다고 말합니다.

다음 예제는 변수를 선언하는 일반적인 방법을 보여줍니다.

const str = 'hello';
let num = 100;

반대로 유효한 범위에서 선언되지 않은 변수를 사용하는 경우 변수가 정의되지 않았다고 말할 수 있습니다.

다음 예제는 선언되지 않은 변수를 사용하는 경우입니다.

str; // 에러 발생
num; // 에러 발생

if(false) {
  obj;
}

[에러 내용]

str과 num은 변수가 정의되지 않았다는 에러가 발생합니다. 반면에, if문 내부에 작성된 obj는 정의되지 않았음에도 if문의 조건이 false이기 때문에(즉, if문이 실행되지 않으므로) 에러가 발생하지 않습니다.


변수 초기화

선언된 변수에 값을 할당하면 변수가 초기화됩니다.

var str = 'hello';
let num = 100;

반면에, 변수는 선언되었으나 값이 초기화되지 않은 경우 변수의 값은 항상 undefined입니다.

var str;
let num;
console.log(str); // undefined
console.log(num); // undefined

typeof 연산자

typeof 연산자는 변수의 타입을 문자열로 반환합니다.

typeof 연산자의 반환 값
'boolean', 'number', 'string', 'symbol', 'object', 'function', 'undefined'

typeof 연산자에서 선언되지 않은 변수를 접근하는 경우 에러가 발생하지 않고 'undefined'가 반환됩니다.

typeof str; // 'undefined'

typeof 연산자는 선언되었으나 값이 초기화되지 않은 변수에 대해서도 'undefined'가 반환됩니다.

let str;
typeof str; // 'undefined'

따라서, 변수가 정의되었는지 혹은 변수가 초기화되었는지 확인하기 위해 typeof 연산자를 사용할 수 있습니다.


예외처리

JavaScript에서 선언되지 않은 변수를 사용하는 경우 변수가 정의되지 않았다는 에러가 발생하였습니다.

try ~ catch문을 사용하여 에러를 캐치할 수 있습니다.

다음 예제처럼 catch문이 실행되면 변수가 정의되지 않았음을 의미하므로 변수의 존재 여부를 확인할 수 있습니다.

try {
  num;
} catch(e) {
  console.log('num이라는 변수는 정의되지 않았습니다.')
}

[실행 결과]

num이라는 변수는 정의되지 않았습니다.

hasOwnProperty() 함수

마지막으로 전역 변수의 존재 여부를 확인하는 방법입니다.

전역 변수는 전역 객체의 프로퍼티로 저장되며, JavaScript의 전역 객체는 window입니다. 전역 변수가 전역 객체의 프로퍼티로 저장되었는지 확인하기 위해 hasOwnProperty() 함수를 사용할 수 있습니다.

다음 예제는 hasOwnProperty() 함수를 사용하여 변수가 선언되었는지 확인합니다.

window.hasOwnProperty('str'); // false

hasOwnProperty() 함수의 단점은 const, let, class 키워드로 선언된 변수는 전역 객체의 프로퍼티로 저장되지 않으므로 항상 false가 반환됩니다.

var num = 100;
const str = 'hello';
let val = 'hi';
class obj {};

console.log(window.hasOwnProperty('num')); // true
console.log(window.hasOwnProperty('str')); // false
console.log(window.hasOwnProperty('val')); // false
console.log(window.hasOwnProperty('obj')); // false

정리

  • typeof 연산자로 변수가 선언되었는지 혹은 변수가 초기화되었는지 확인할 수 있습니다.
  • 예외처리를 활용하여 변수가 선언되었는지 확인할 수 있습니다.
  • var 키워드로 선언된 전역 변수가 존재하는지 확인하는 방법으로 전역 객체인 window의 hasOwnProperty() 함수를 사용할 수 있습니다.
반응형

댓글