undefined와 null의 자동 형 변환 처리와 관련된 자바스크립트 이슈

08 Nov 2023

javascript

자바스크립트는 동적 타입 언어이기 때문에 변수를 선언할 때 데이터 타입을 명시적으로 지정하지 않습니다. 이로 인해 자바스크립트에서는 값이 자동으로 형 변환이 이루어지는 경우가 많습니다. undefined와 null은 자바스크립트에서 특별한 값을 나타내는 두 가지 타입입니다.

undefined와 null의 의미

undefined는 변수가 선언되었지만 아무런 값을 갖지 않는 상태를 나타냅니다. 즉, 값을 할당하지 않은 변수의 초기값은 undefined입니다. null은 변수가 의도적으로 비어있는 상태를 나타내며, 변수에 null 값을 할당하여 명시적으로 비워두었다는 의미를 전달합니다.

자동 형 변환 처리

자바스크립트에서는 변수의 형식에 따라 자동으로 형 변환이 이루어집니다. undefined와 null의 자동 형 변환 처리에 대해서 알아보겠습니다.

undefined와 null 간의 자동 형 변환

let undefinedVariable = undefined;
let nullVariable = null;

console.log(undefinedVariable == nullVariable);   // true
console.log(undefinedVariable === nullVariable);  // false

위의 코드에서 undefinedVariable과 nullVariable을 비교하면 == 연산자를 사용하여 값만 비교합니다. 이 때, undefined와 null은 값이 없는 상태로 간주되기 때문에 값이 동일하다고 간주되어 결과는 true가 됩니다. 하지만 === 연산자를 사용하여 일치 연산을 하면 값 뿐만 아니라 자료형까지 비교하게 되는데, 이 경우 undefined와 null은 자료형이 다르기 때문에 false가 됩니다.

다른 자료형과 undefined, null의 자동 형 변환

let numberVariable = 10;
let stringVariable = "10";

console.log(numberVariable == undefined);   // false
console.log(numberVariable === undefined);  // false
console.log(stringVariable == null);        // false
console.log(stringVariable === null);       // false

위의 코드에서는 numberVariable과 stringVariable을 각각 undefined와 null과 비교하였습니다. 이 경우 역시 == 연산자를 사용하여 값만 비교하게 되는데, undefined와 null은 값이 없는 상태이므로 두 변수와는 동일하지 않습니다. 따라서 결과는 모두 false가 됩니다.

결론

자바스크립트에서 undefined와 null은 값이 없는 상태를 나타내는 특별한 타입입니다. 자동 형 변환 처리에 있어서는 주의가 필요하며, == 연산자를 사용할 때는 값을 비교할 수 있지만 === 연산자를 사용할 때는 값과 자료형까지 동일해야지만 일치한 것으로 간주됩니다.

이를 유의하고 적절히 활용하여 자바스크립트 코드를 작성하면 더욱 안전하고 예상치 못한 결과를 방지할 수 있습니다.

참고 자료: