[javascript] '==', '===' 차이 ( 나의 삽질.. )

프로젝트를 진행하는 값이 없는 경우 ( falsy ) 를 체크하기 위한 함수를 생성하였습니다. 

나를 닮았다고 한다....

 

 

 

서버에서 받은 파라미터가 falsy인지 체크하는 함수를 만들었습니다. 

function isNull(value) {
    return value == null || value == undefined || value == '';
}

이제 서버에서 받은 파라미터를 위에서 생성한 메서드에 넣고 null 체크를 하고 jquery show(), hide() 처리를 하려고 했습니다.

 

const response = data.data;

const $detailElement = $("[name=detailName]");

// value = 0 값이 내려왔습니다.
if (isNull(response.value) ) {
    $detailElement.hide();
} else {
    $detailElement.show();
}

당연히 value값은 falsy가 아니므로 show()가 되겠구나하고 돌렸습니다. 

그런데 hide가 되고 있었습니다. "뭐지...???"

한참을 보다가 debug모드로 디버그하니 그제서야 보였습니다.

value == ''

이중 등호를 사용했기에 value 값이 0인데도 불구하고 true가 return되고 있었습니다.

이중 등호는 loose equality로 느슨하게 두 값을 비교합니다.

javascript는 아~~~주 관대한 언어입니다. 알아서 형변환을 해주는 언어입니다.

• "8" * 1 = 8
• 8 + "" = "8"
• 0 = "" => true  // 0이 ''으로 변환됩니다. 

그래서 strick quality로 엄격하게 두값을 비교하도록 변경하였습니다

function isNull(value) {
    return value === null || value === undefined || value === '';
}

형변환은 해주지않습니다! 있는 그대로 비교하기 떄문에 제가 원하는 결과가 출력되는 함수가 완성되었습니다.

 

결론

내가 만든 버그는 내 눈에 보이지 않는다. 단, 다른사람이 보면 1초만에 보인다..