Function 생성자 사용하여, 문자열로된 표현식 실행하기

DEV/JS

Function 생성자 사용하여, 문자열로된 표현식 실행하기

RATSENO 2021. 5. 20. 16:45

angular와 vue와 같은 프런트엔드 프레임워크에서 자주 보이는 디렉티브가 있습니다.

<p v-if="seen">이제 나를 볼 수 있어요</p>

저렇게 문자열로 되어있는 조건문을 그냥 js, jQuery를 이용해서 비슷하게 써보고 싶었습니다.

찾아보니 new Function() 생성자를 이용하여 구현할 수 있을 것 같아 사용해보았습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <!-- jquery를 사용하기 위해 jquery cdn 사용 -->
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
</head>
<body>
  <div>
    <!-- <h1 id="test"></h1> -->
  </div>
  <div id="testDiv">
    <ul>
      <li data-expression="'테스트1'==='테스트1'">테스트1</li>
      <li data-expression="'테스트2'==='테스트1'">테스트2</li>
    </ul>
  </div>
<script type="text/javascript">

</script>
</body>
</html>

<li data-expression="'테스트1'==='테스트1'">테스트1</li>

<li data-expression="'테스트2'==='테스트1'">테스트2</li>

data-expression="'테스트2'==='테스트1'" data속성으로 expression을 생성하고 값으로 조건식인

'테스트1'==='테스트1' 문자열을 적어주었습니다.

저 조건식이 실행하여 true일 때 false일 때 style을 변경해 보도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <!-- 작성한 test.js  -->
  <script src='./test.js'></script>

  <!-- jquery를 사용하기 위해 jquery cdn 사용 -->
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
</head>
<body>
  <div>
    <!-- <h1 id="test"></h1> -->
  </div>
  <div id="testDiv">
    <ul>
      <li data-expression="'테스트1'==='테스트1'">테스트1</li>
      <li data-expression="'테스트2'==='테스트1'">테스트2</li>
    </ul>
  </div>
<script type="text/javascript">
$(function(){
  
  var $div = $("#testDiv");
  var $lis = $div.find("li");
  
  $lis.each(function(idx, el){
    var $el = $(el);
    //조건식
    var exp = $el.data("expression");
    //Function 생성자를 이용하여 Function 생성
    var expFn = new Function('return'+' '+exp);
    // 조건문 함수 실행
    if(expFn()){
      $el.attr('style' ,'color : red;');
    }else{
      $el.attr('style' ,'color : blue;');
    }
  })
});
</script>
</body>
</html>

정상적으로 조건문이 실행되었습니다. 하지만 보안상 문제가 생길 수도 있기 때문에, 되도록이면 지양하는 것이 좋을 것 같습니다.

공식 문서에는 eval()보다는 덜 위험하다고 합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function

Function - JavaScript | MDN

Function 생성자는 새 Function 객체를 만듭니다.

developer.mozilla.org