[ javascript ] trim()

trim()

trim()메서드는 문자열의 양쪽 끝에서 공백을 제거하고 원래 문자열을 수정하지 않고 새 문자열을 반환 한다.
아래의 mdn 예제를 살펴 보면 Hello world의 좌우 공백이 모두 제거가 되어 있고, 문자인 Hello world는 그대로 유지되어 있는 것을 확인할 수 있다.

const greeting = '   Hello world!   ';

console.log(greeting);
// Expected output: "   Hello world!   ";

console.log(greeting.trim());
// Expected output: "Hello world!";

trim()언제 사용하면 좋을까?

form 태그 안의 input 태그에 담긴 내용을 submit한다고 가정을 해보면 아무런 설정을 해주지 않으면 input창에 아무것도 입력하지 않아도 submit이 되는 것을 확인해 볼 수 있다.
따라서 이 것을 해결하기 위해 input의 text의 length가 0이면 submit이 되지 않도록 할 수 도 있지만 이렇게 하면 아무것도 입력하지 않고 스페이스 바 만 눌렀을 때 length 0이 아니라고 인식 되어 submit이 되어 버릴 수 있다. 따라서 아래와 같이 trim을 활용하여 양쪽 여백을 모두 줄인 length가 0이면 submit이 되지 않도록 해주면 된다.

  const handleSubmit = (e) => {
	e.preventDefault();
    // input에 아무것도 입력하지 않아도 추가되는 문제가 있어서 조건을 걸어 준 것, 단순히 text.length가 0이면 추가가 안되게 하면 아무것도 입력하지 않고 스페이스 바를 눌렀을 때 text.length가 0이 아니어서 여전히 문제가 발생 하여 아래와 같이 작성
    // trim은 앞 뒤 여백을 제거해 주는 역할을 함
    if (text.trim().length === 0) {
      return;
    } 
    handleAdd({ id: uuidv4(), text, status: 'active' });
  };