알찬정보 툰코 개발 트렌드 이슈 코딩

JavaScript는 느슨한 타입의 프로그래밍 언어라서 변수 타입이 명확하지 않을 수 있습니다.

예를 들어, 다음과 같이 변수의 값이 문자열이었다가 숫자형으로 변경되거나 함수로 변경될 수 있습니다.

// 문자열(string)
let sum = 'sum';

// 숫자(number)
sum = 100;

// 함수(function)
sum = function(x, y) {
  return x + y;
}

따라서, sum이라는 변수가 처음에는 함수였다가 나중에 문자열 또는 숫자로 변경돼서 함수처럼 호출한 경우 다음과 같이 TypeError가 발생합니다.

let sum = function(x, y) {
  return x + y;
}

sum = 100;

// Uncaught TypeError: sum is not a function
let result = sum(10, 20);

TypeError를 방지하기 위해 함수를 호출하기 전에 함수가 존재하는지 확인해야 하는 상황이 발생할 수 있습니다.

이번 포스팅은 JavaScript에서 함수를 호출하기 전에 함수가 존재하는지 확인할 수 있는 몇 가지 방법을 소개합니다.

---

방법 1. window 객체

JavaScript에서 생성된 변수 또는 함수는 window 객체의 프로퍼티에 추가됩니다.

var numValue = 100;

function sum(a, b) {
  return a + b;
}

console.log(window.numValue);
console.log(window.sum);

[실행 결과]

변수 생성 방식(const, let, var) 또는 함수 생성 방식에 따라 window 객체에 추가되지 않을 수 있지만, window 객체의 프로퍼티를 통해 함수가 존재하는지 확인할 수 있습니다.

function sum(a, b) {
  return a + b;
}

if(window.sum) {
  console.log('sum() 함수는 존재합니다.');
} else {
  console.log('sum() 함수는 존재하지 않습니다.');
}

if(window.minus) {
  console.log('minus() 함수는 존재합니다.');
} else {
  console.log('minus() 함수는 존재하지 않습니다.');
}

[실행 결과]

sum() 함수는 존재합니다.
minus() 함수는 존재하지 않습니다.

window 객체를 사용하는 방법도 나쁘지 않지만, 이 방법은 한 가지 단점이 존재합니다. sum이라는 함수가 도중에 문자열 또는 숫자로 변경될 수 있기 때문입니다.

---

방법 2. typeof 연산자

함수인지 문자열인지 숫자인지 정확한 데이터 타입을 확인하기 위해 typeof 연산자를 사용할 수 있습니다. typeof 연산자의 반환 결과가 function인 경우 함수가 존재한다는 것을 확인할 수 있습니다.

function sum(a, b) {
  return a + b;
}

if(typeof sum === 'function') {
  console.log('sum() 함수는 존재합니다.');
} else {
  console.log('sum() 함수는 존재하지 않습니다.');
}

if(typeof minus === 'function') {
  console.log('minus() 함수는 존재합니다.');
} else {
  console.log('minus() 함수는 존재하지 않습니다.');
}

[실행 결과]

sum() 함수는 존재합니다.
minus() 함수는 존재하지 않습니다.