[HTTP] 요청 시 파라미터에 빈 객체를 넣었더니 사라진다?

개발하면서 selectBox 2가지 중 한 가지의 특정 값에 따라 나머지 한 가지의 값을 HTTP 요청 시 파라미터에 넣거나 없애거나 보내야 했었다

예시

fetch API로 예를 들어보자

// const select1 = {value: 1, list: [1, 2, 3, 4, 5]} // selectbox
let params =  {}

if (select1.value === 3) {
	params.selectedValue = select1.value
}
fetch(url, {
	method: 'get',
    params: params
}

위의 예시는 select1.value 값이 3일 때만 파라미터에 값이 들어가고 아닌 경우에는 빈 객체 가 파라미터에 할당된다.

결과

그러나, 결과는 쿼리 스트링에 붙지 않는다.

• 파라미터로 변환하면 아무런 키-값 쌍이 없기 때문에 쿼리 스트링 생성이 되지 않는다.

HTTP method가 POST인 경우 파라미터가 본문 으로 들어가면 빈 객체가 붙어서 전달이 된다.

GPT 답변

GET 요청에서는 빈 객체를 쿼리 파라미터로 전송할 때 URL에 반영되지 않습니다.
POST 요청에서는 빈 객체를 본문으로 전송할 때 서버가 해당 본문을 무시하거나 비어 있다고 간주할 수 있습니다.

번외

null이나 undefined는 GET, POST 요청에서 파라미터에 넣어도 실제로 본문에 아무 데이터도 보내지 않는다.

빈 객체나, 빈 배열은 POST 요청에서 본문에 JSON 형식으로 전송이 된다.

번외 2

보통 변수를 초기화하거나 값 설정 시에는 undefined 대신 null을 권장하고 사용하는 것이 맞다고 한다.

왜 그럴까?

1. null은 의도적으로 값이 없음을 나타낸다.
   반면에 undefined는 객체의 속성이 존재하지 않거나 변수가 선언되었지만 초기화 되지 않은 상태 등으로 표현한다.
   즉, 의도에 맞지 않는 방법이다
   2.undefined의 경우 자바스크립트에서 다양한 상황에서 쓰기 때문에 명시적으로 null을 쓰는게 맞다.

GPT 예시

function getUser() {
  // 사용자 정보를 반환하지 않음
}
let user = getUser();
console.log(user); // undefined

이외에도 의도하지 않은 프로퍼티 삭제 방지 등 몇 가지 이유는 있으나 아래와 같이 정리해보면

정리
null : 명시적이고 의도적으로 값이 없음을 나타낸다.
undefined : 암묵적으로 정의되지 않음 을 나타낸다.