일단 아래 예제를 보자.
<script>
var fluit = {}
if(typeof fluit.banana.yellow != 'undefined') console.log('object ok')
</script>
위에서 보면, fluit라는 오브젝트만 정의 하고, fluit.banana.yellow 라는 오브젝트를 검사하려고 한다.
하지만 이럴경우,
Uncaught TypeError: Cannot read property 'yellow' of undefined
라는식으로 오류가 뜨게 되고, 검사고 뭐고 자바스크립트가 오류가 나버린다.
이럴때는 아래와 같이 해야 정상적으로 작동한다.
<script>
var fluit = {}
if(typeof fluit.banana != 'undefined' && typeof fluit.banana.yellow != 'undefined') console.log('object ok')
</script>
일단 윗레벨 오브젝트부터 검사한 뒤에 아래 레벨을 검사해야 하는 것이다.
이것은 자바스크립트만의 구조적인 문제라서...
다른 언어에서는 그냥 하면 되는건데, 자바스크립트에서는 일일이 나열 해야 검사가 가능하다.
그래서.. 열심히 구글링 해서 함수를 하나 찾고 나한테 맞게 변형해서 만들었다.
<script>
var obj1 = {
"a":{
"b":{
"c":"obj1_ok"
}
}
}
var obj2 = [{
"가":{
"나":[{
"다":"한글로도쓰자"
}]
}
}]
console.log( objChk(obj1, 'a.b.c') )
console.log( objChk(obj1, 'a.e.a') )
console.log( objChk(obj2, ['가','나','다']) )
console.log( objChk(obj2, [0, '가', '나', 0, '다']) )
//--- 간단한 오브젝트 및 오브젝트+배열도 체크 가능
function objChk(obj, keys) {
if(typeof keys == 'string') keys = keys.split(".")
return keys.reduce(function(o, x) {
return (typeof o == "undefined" || o === null) ? o : o[x];
}, obj);
}
</script>
obj1_ok
undefined
undefined
한글로도쓰자
reduce()함수를 이용하여, 순차적으로 오브젝트의 다음 레벨을 비교 하여 결과를 반환해주는 함수이다.