AJAX를 사용해 서버와 데이터를 주고받을 때 JavaScript 변수를 올바르게 전달하는 것은 매우 중요합니다. 특히 URL 파라미터에서 값을 가져올 때는 문자열이 아닌 숫자로 변환해야 하며, 값이 없는 경우 기본값을 지정해 주는 것이 안전합니다.
기존 방식의 문제점
일반적으로 다음과 같이 parseInt()를 사용해 URL 파라미터를 숫자로 변환하는 코드를 많이 작성합니다.
var page = parseInt(getUrlParameter('page'));하지만 이 방식은 파라미터가 존재하지 않거나 숫자로 변환할 수 없는 값일 때 NaN(Not a Number)을 반환할 수 있어, 이후 AJAX 요청에서 오류를 일으킬 위험이 있습니다.
개선된 방법
다음과 같이 단항 더하기 연산자(+)와 논리 OR(||)를 함께 사용하면 더 간결하고 안전하게 처리할 수 있습니다.
var page = +getUrlParameter("page") || 100;이 코드는 다음과 같이 동작합니다.
- 단항 더하기(+): 문자열을 숫자로 빠르게 변환합니다.
- 논리 OR(||): 변환 결과가 false, NaN, 0 등 거짓으로 평가되는 값이면 기본값인 100을 대신 사용합니다.
전체 예제 코드
아래 예제를 실행하면 변수가 AJAX 호출에 맞게 올바르게 전달되는지 확인할 수 있습니다.
<html>
<script>
function getUrlParameter(param) {
return param === "page" ? 500 : false;
}
// "Demo" 파라미터는 false를 반환하므로 기본값 100이 사용됨
var page = +getUrlParameter("Demo") || 100;
alert(page); // 결과: 100
// "page" 파라미터는 500을 반환
page = +getUrlParameter("page") || 100;
alert(page); // 결과: 500
</script>
<body>
</body>
</html>동작 원리 설명
1. 유효한 파라미터가 있는 경우
getUrlParameter("page")는 500을 반환하고, 단항 더하기 연산자로 숫자로 변환된 후 그대로 변수에 저장됩니다.
2. 유효하지 않은 파라미터가 있는 경우
getUrlParameter("Demo")는 false를 반환하므로, 논리 OR 연산자에 의해 기본값 100이 할당됩니다.
마무리
이처럼 단항 더하기 연산자와 기본값 처리를 조합하면, AJAX 호출 시 JavaScript 변수를 안정적으로 전달할 수 있습니다. URL 파라미터를 다룰 때는 항상 값의 존재 여부와 타입 변환을 함께 고려하는 습관을 들이면 런타임 오류를 크게 줄일 수 있습니다.