1. 개요
javascript 로직에서 동적변수를 바인딩하는 방법에 대해 찾아보았다.
이 방법을 통해 여러 줄의 자바스크립트 로직을 한줄로 축소할 수 있고, 동적 바인딩 변수와 문자열을 적절하게 혼합 사용하여 파라미터 구성 등 원하는 형태로 적재적소 활용가능하다는 점에서 기억할 만한 내용이다.
2. 자바스크립트에서의 동적변수 바인딩
일단 기본적으로 자바스크립트에서 동적변수를 바인딩하는 가장 효과적인 방법은 백틱(``)이다.
백틱은 시작점부터 종료지점까지 개행구분없이 인식한다는 점, 백틱을 사용하여 구성한 동적변수를 적절하게 사용하여 문자열화하여 사용할 수 있다는 점이 그 이유이다.
예를 들어 아래의 구조체가 있다고 하자.
var a = {
a1 : {
a1target : "a1target",
a1source : "a1source"
},
a2 : {
a2target : "a2target",
a2source : "a2source"
}
}이때,
- a는 배열, 문자열도 아닌 Object로 인식된다(instanceof)
- a.a1 -> 가능
- a[a1] -> a는 배열이 아니므로 불가
- a[
a1] -> (백틱, 중괄호이지만 백틱으로 접근할 경우 a Object 내부로 접근 가능)
이때 중요한 점은 a[a1]으로 a 오브젝트에 접근이 가능하다는 것이다.
따라서,
1) 첫번째 방안 : ${global.CHN}/chn/do
내부에 global.CHN이 동적변수로 바인딩되어있는 경우
2) 두번째 방안 : a[동적변수]
a 구조체가 별도 설정되어있을 경우(전역변수 등으로), 백틱과 대괄호를 통하여 접근한다.
특히 두번째 방안의 경우 자바스크립트에서만 가능하다. 자바에서는 동작 불가능하고, enum도 Key-Value로 이루어진 구조체이지만 정적 형태를 준수한 상태에서 구성해야 동작한다.
3. 그 외
위에서 했던 바인딩 방법이 가장 효율적일 것이고, 나머지는 따옴표(싱글쿼터/더블쿼터)를 이용한 전통적인 방법이라 할 수 있겠다.
자바에서는 싱글쿼터를 통해 동적변수를 바인딩하고, 자바스크립트에서는 백틱을 통해 바인딩한다는 정도만 기억해서 활용하면 좋을 것 같다.
4. 참고자료
백틱 사용 정리 - https://velog.io/@jeju_daun/%EB%B0%B1%ED%8B%B1-%EC%82%AC%EC%9A%A9-%EB%8D%94%EC%9D%B4%EC%83%81-%ED%97%B7%EA%B0%88%EB%A6%AC%EC%A7%80-%EB%A7%90%EC%9E%90
백틱/싱글쿼터 - https://velog.io/@sunaaank/js-backtick
(참고) 자바에서의 템플릿 리터럴 - https://warpgate3.tistory.com/entry/Message-Format#google_vignette
