1. trim(), includes() 등을 사용 할 때 오류 [TypeError: trim is not a function in JavaScript]

TypeError: trim is not a function in JavaScript

 

와 대체 이게 무슨말이냐.

 

오류 내용은 저렇지만 실상은 아니다.

 

trim() 을 사용했는데, 혹은 다른 함수를 사용했는데 저렇게 나온다면, 혹시 "타입" 이 무엇인지 의심해보아야한다.

 

원인

trim() 을 사용하는, Value 의 Type 이 String인지 판단이 서지 않고, 명시되어 있지 않은 경우

예시

        function BasicFormRefac() {

            const [error, setError] = useState(false);

            const inputTextResult = useInput((inputText) => inputText.trim() === "");
            const inputEmailResult = useInput((inputEmail) => inputEmail.includes("@"));

위는, 커스텀 훅을 사용할때, 인수로 필요한 Validation 로직을 넣어주고 있는 코드이다.

위의 inputText 가 String인지 아닌지 판단이 서지 않아, 자바스크립트는 저 inputText에

trim() 과 inlcudes() 를 사용할 수 없다고 판단내리고, 에러를 던졌다.

 

수정

      function BasicFormRefac() {

            const [error, setError] = useState(false);

            const inputTextResult = useInput((inputText) => String(inputText).trim() === "");
            const inputEmailResult = useInput((inputEmail) => !String(inputEmail).includes("@"));

String() 으로 감싸, 명시해 준 후, trim() 을 사용했더니 깔끔하게 해결되었다.