object 내부 인자값에서의 null, undefined 문제 대처하기

server에서 받아오는 Object값의 내부의 value 값들은 null 값이 올수도 있고 undefined가 올수도 있다. 이는 가끔씩 컴파일 에러를 일으킨다.
예를들어

const gotData = {
	pocketmon : {
    	bread: null, 
        sticker: {
        	mue: "rare" 
        }, 
}

이런 값이 왔을 때 gotData.pocketmon.bread은 null 값이 나오고 큰 문제는 없다.
문제는 mue 값을 가져오려고 gotData.pocketmon.sticker.mue로 가져오려고 헀는데

const gotData = {
	pocketmon : {
    	bread: null,
}

sticker object가 pocketmon내부에 없는 경우이다.
이려면 타입 에러가 뜨면서 undefined에서 property 값을 가져올 수 없다고 에러가 생긴다.
이 문제는 production레벨에서도 에러를 일으키는 크리티컬한 문제이다.

Typescript가 이 문제를 어느정도 해결해주긴 한다.
작업하다보면 미리 해당 object가 null 일수도 있다고 경고를 내준다.
그래서 우리는 그런 에러를 일반적으론

if(gotData.pocketmon.sticker){
	console.log(gotData.pocketmon.sticker.mue) 
}

요런 식으로 해결해주곤 한다. 깊이가 길어지면 꽤 성가시다. 가끔씩 typescript가 못잡는 경우도 있다. 그리고 default 값을 설정할 수가 없다.

또 다른 방식으로는 gotData?.pocketmon?.sticker?.mue 이런식으로 나타내곤 한다. 이건 중간에 하나라도 없으면 undefined 값을 내놓는다.
default값을 설정하고 싶으면 gotData?.pocketmon?.sticker?.mue || "rare"
이런 식으로 설정하곤 한다. 헌데 이또한 0이나 false값이 나왔을 때 "rare"가 나오므로 우리가 원하는 해결책은 아니다.

그래서 이 문제를 해결하기 위해서 getValue라는 util함수를 사용한다.

	getValue: (obj: any | undefined, key: string, defaultValue?: any | undefined): any => {
		if (!obj) {
			return defaultValue;
		}

		if (!key) {
			return defaultValue;
		}

		const keys = key.split('.');
		let value = obj;
		for (let i = 0, len = keys.length; i < len; i += 1) {
			const newValue = value[keys[i]];
			if (!newValue && typeof newValue !== 'number' && typeof newValue !== 'boolean') {
				return defaultValue;
			}
			value = newValue;
		}
		return value;
	},

이걸 활용하면 object내 undefined, null 문제에 대해 걱정할 필요가 없으며 default값도 반환할 수 있다.

대략 살펴보자면 object값이나 키값을 먼저 살펴보고 defaultValue를 내놓는다.
그리고 나서 key값을 "." 기준 array로 분리한다.
그 이후 이 key값 array로 for 문을 돌면서 값을 확인하며, 만약 중간에 하나라도 값이 없으면 default 값을 반환한다.

그래서 이를 이용하면 util.getValue(gotData, "pocketmon.sticker.mue" , "rare") 는 제대로된 정보를 주던가 아니면 "rare"를 준다. 절대로 type에러를 내는 일은 없다.

이 방식이 단점이 있다면, 앞에 함수가 붙어서 gotData?.pocketmon?.sticker?.mue 보다는 덜 직관적이다. 이를 제외하면 object내 undefined와 null로 인해 생기는 에러처리에는 상당히 도움이 되는 util 함수라고 볼수 있다.