[JavaScript] 동적으로 변하는 문자로 함수 호출하기

상황에 따라서 호출하는 함수가 있다.

상황에 따라 동적으로 호출하는 함수가 굉장히 다양하고 많다면 if문이나 case문보다는 ‘문자열’을 통해서 호출하는 방법이 있지 않을까? 하다가 찾았던 것인데, 공유 해본다.

언제 사용하는가?

언제 사용하는가 ? 말 그대로 String 문자 그대로 함수를 호출할 때 사용했었다.

동적인 텍스트로 함수를 호출 하는 때가 언제였냐면, Select Option 태그를 이용해서, 선택한 것에 대한 속성 값에 내가 함수를 두었다고 가정하자.

<select onchange="onChange(this)">
  <option value="1">서울</option>
  <option value="2">경기도</option>
  <option value="3">인천</option>
</select>

위에 선택된 값에 따라서 호출해야하는 함수가 다르다.

서울 선택 시 Seoul()
경기 선택 시 Gyeonggi()
인천 선택 시 Incheon()

이렇게 말이다. 그러면 onChange 이벤트를 태워 각각 value 값에 따라서 함수를 다 다르게 할 것인가?

이렇게?

const onChange = (target) => {
  const value = target.value

  if(value === 1) {
    seoul();
  } else if(value === 2) {
    gyeonggi()
  } else if(value === 3) {
    incheon()
  } ...
}

물론, 값이 3개일 경우에는 위가 가독성이 더 좋을 수 있다. 하지만, 나는 여기서 각 option에 속성값을 주고 그 텍스트로 각각의 함수를 호출하게 하였다.

const onChange = (target) => {
  target.value() // 함수 호출! 이렇게 하면 안된다 ! 이건 하나의 예시일뿐, 
}

각각의 함수를 호출하게끔 하면 저렇게 한줄만으로 끝이 난다. 😀

---

그럼 이제 만들어보자!

함수 만들기

임시로 테스트할 함수를 만든다.

function test() { 
  console.log('test');
}

arrowTest = () => {
  console.log('ArrowTest');
}

만든 함수를 텍스트로 실행하기

위에 만든 함수를 실행하는 것은 다음과 같다.

엄청 간단하다.

this['test']()
this['arrowTest']()

주의할 것은 this에 대한 개념을 잘 알고 있어야 사용 시 문제가 되지 않을 것이다.

this를 상속 받는지 안받는지에 따라서 달라질테니 말이다.