JavaScript/JavaScript에서 in 연산자

시작하면서

운영환경에서 접속하면 "https://int-web", 개발환경에서 접속하면 "https://dev-web" 접속하도록 만드는 게 필요했다.
이를 위해서 JSP에 자바 스크립트 코드를 다음과 같이 작성하였는데, 운영환경에서도 "https://dev-web" 접속하더라;;

@Controller
public class MyController {
    @GetMapping("/my-page")
    public String myPage(Model model) {
        model.addAttribute("environment", getEnvironment());
        return "my-page";
    }
}

  var url = "";
  var environment = "${environment}";

  if (environment in ['int', 'ext']) {
    url = "https://int-web";
  } else {
    url = "https://dev-web";
  }

  window.open(url);

운영환경에서 제대로 동작하지 않는다는 연락을 받고 다시 확인해보니, 'int' in ['int', 'ext']는 false를 반환했다. 왜 JavaScript는 의도한대로 동작하지 않았을까? 배열을 사용하려면 어떻게 수정할 수 있을까를 고민했고, 그 내용을 정리하고자 한다.

JavaScript에서 in 연산자

JavaScript에서 in 연산자는 객체의 속성을 확인하는 데 사용됩니다. 배열은 객체의 특수한 유형이며, 배열의 요소는 인덱스로 접근할 수 있는 속성으로 취급됩니다. in 연산자는 배열의 인덱스가 아닌 속성을 확인하는 데 사용되므로, 배열에서 in을 사용하여 요소의 존재를 확인하는 것은 일반적으로 의도한 동작이 아닙니다.

CHAT GPT에서는 위와 같은 답변을 얻을 수 있었다.
이해해보자면 ['int', 'ext']는 {0:'int', 1:'ext'}와 동일하며, 'int'는 키인 0과 1 안에 존재하지 않지 때문에 'int' in ['int', 'ext']는 false를 반환한다.
따라서 JavaScript에서 배열의 요소와 값의 비교를 수행하려면 다음과 같이 작성해야 한다.

  var url = "";
  var environment = "${environment}";

  if (['int', 'ext'].includes(environment) {
    url = "https://int-web";
  } else {
    url = "https://dev-web";
  }

  window.open(url);

• 테스트

• 형변환

추가로, '0' in ['int', 'ext'] 도 true를 반환한다. in도 자동형변환을 지원하는가보다. '0'도 0과 동일한 인덱스를 가리키게 되어 arr의 요소로 인정된다.

const arr = ['apple', 'banana', 'orange'];

console.log(0 in arr);  // true 출력
console.log('0' in arr);  // true 출력
console.log(3 in arr);  // false 출력

마무리하면서

JavaScript에 익숙하지 않은 상태로, 그렇겠거니 추측하여 사용하고 있어서 위와 같은 실수들이 생긴다. 더 꼼꼼히 테스트 하고, 기초적인 개념부터 틈틈이 공부해두어야겠다.

개발중인 기능이나 위 경우와 같이 환경에 따라 다른 동작을 하도록 하는 것이 꽤 자주 요구된다. 그래서 다음번 포스팅에서는 개발환경과 운영환경을 구분하는 방법을 다루어야 겠다.