Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 문자열로 변환된 숫자·불리언 값을 원래 자료형으로 복원하는 방법

실무에서 API 응답이나 설정 파일을 다루다 보면, 원래는 숫자나 불리언이어야 할 값이 문자열로 저장되어 있는 경우를 종종 만나게 됩니다. 다음과 같은 JSON 객체를 살펴보겠습니다.

const obj = {
  "name": "sam",
  "age": "24",
  "isMarried": "false"
};

age는 원래 숫자(Number)였고, isMarried는 불리언(Boolean)이었지만, 어딘가의 처리 과정에서 실수로 모두 문자열(String)로 변환되어 버렸습니다. 이번 글에서는 이렇게 잘못 변환된 값들을 올바른 자료형으로 되돌려 주는 함수를 작성해 보겠습니다.

해결 전략

핵심 아이디어는 객체의 모든 키를 순회하면서 각 값을 검사하는 것입니다.

  • 값을 parseInt()로 변환했을 때 유효한 숫자가 나오고, 그 숫자를 다시 문자열로 바꿨을 때 원래 값과 동일하다면 → 숫자로 변환
  • 값이 정확히 'true' 또는 'false'라면 → 불리언으로 변환
  • 그 외의 경우(예: name) → 원래 값 그대로 유지

여기서 주의할 점이 하나 있습니다. JavaScript에서 Boolean('false')true를 반환합니다. 빈 문자열이 아닌 모든 문자열은 truthy 값이기 때문입니다. 따라서 Boolean(val) 대신 문자열 비교(val === 'true')로 직접 판별해야 의도한 대로 동작합니다.

예제 코드

const obj = {
  "name": "sam",
  "age": "24",
  "isMarried": "false"
};

const convertToOriginal = (obj = {}) => {
  const keys = Object.keys(obj);

  for (let i = 0; i < keys.length; i++) {
    const key = keys[i];
    const val = obj[key];

    // 숫자 여부 검사: 파싱 후 다시 문자열화했을 때 원래 값과 같은지 확인
    const num = parseInt(val, 10);
    if (!isNaN(num) && String(num) === val) {
      obj[key] = num;
    }
    // 불리언 여부 검사: 문자열 비교로 정확하게 판별
    else if (val === 'true' || val === 'false') {
      obj[key] = val === 'true';
    }
  }

  return obj;
};

convertToOriginal(obj);
console.log(obj);

코드 설명

  • Object.keys(obj)로 객체의 모든 키를 배열 형태로 가져와 순회합니다.
  • parseInt(val, 10)은 문자열을 10진수 정수로 변환하며, 변환에 실패하면 NaN을 반환합니다. 따라서 isNaN()으로 먼저 걸러 주는 것이 안전합니다.
  • String(num) === val 조건은 '24abc'처럼 숫자와 문자가 섞인 값이 숫자로 잘못 변환되는 것을 방지해 줍니다.
  • 불리언 판별 시에는 반드시 val === 'true'처럼 문자열을 직접 비교해야 합니다. Boolean('false')true가 되는 함정을 피할 수 있습니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

{ name: 'sam', age: 24, isMarried: false }

이제 age는 숫자 24로, isMarried는 불리언 false로 올바르게 복원된 것을 확인할 수 있습니다. 이처럼 간단한 검증 로직만 추가하면 문자열로 오염된 JSON 데이터를 안전하게 원래 자료형으로 되돌릴 수 있습니다.