투케이2K

562. (javaScript) 자바스크립트 new Function 사용해 문자열로 작성 된 소스 코드 동적 런타임 함수 생성 및 실행 수행 본문

JavaScript

562. (javaScript) 자바스크립트 new Function 사용해 문자열로 작성 된 소스 코드 동적 런타임 함수 생성 및 실행 수행

투케이2K 2026. 6. 26. 19:32
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript / Function / String


- 사전) 👉 자바스크립트 new Function() 간략 설명 : 

  >> new Function() 은 문자열로 작성된 코드를 런타임에 함수로 생성하는 JavaScript 기능입니다.

    - 쉽게 말하면 eval() 과 비슷하게 문자열을 실행할 수 있지만, 실행 결과가 함수 객체라는 점이 다릅니다.

  >> new Function() 정리 :

    - 문자열을 함수로 컴파일합니다.

    - eval()과 유사하지만 함수 객체를 반환합니다.

    - 현재 스코프를 캡처하지 않고 전역 스코프에서 실행됩니다.

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      }

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module">    


      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {
          
          // ------------------------------------------------
          // 🟦 동적 함수 실행할 코드 정의
          // ------------------------------------------------  
          const code = `

            const array = ["hello", "towk", "2k"];
            
            const idx = Math.floor(Math.random() * array.length - 1) + 0; // 0 ~ array 범위 랜덤

            // ---------------------------
            // [리턴 반환 코드 중요]
            // ---------------------------
            // return idx; // 동적 idx 만 반환
            // return array[idx]; // 동적 array 데이터 반환

            return Math.floor(Math.random() * 10) + 1; // 1 부터 10 범위 랜덤 정수 값 반환
          `;

          //const fn = new Function("a", "b", code); // 함수에 파라미터 전달 시
          //console.log(fn(10, 20)); 

          const fn = new Function(code); // 함수에 파라미터가 없는 경우
          console.log(fn()); 
          
        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };


    </script>


</head>


<body>

</body>

</html>

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

▶️ 520. (javaScript) [간단 소스] 자바스크립트 동적 스크립트 작성 및 window.open 시 window.opener.postMessage 부모에서 자식 데이터 전송

https://kkh0977.tistory.com/8733

https://blog.naver.com/kkh0977/224237361564?trackingCode=blog_bloghome_searchlist


▶️ 514. (javaScript) [간단 소스] 자바스크립트 string 문자열 형식 동적 자바 스크립트 코드 작성 및 import 모듈 로딩 , 소스 코드 실행

https://kkh0977.tistory.com/8708

https://blog.naver.com/kkh0977/224222595694?trackingCode=blog_bloghome_searchlist


▶️ 499. (javaScript) 자바스크립트 동적 html 코드 작성 및 Script 스크립트 코드 작성 후 window open 동작 테스트

https://kkh0977.tistory.com/8660

https://blog.naver.com/kkh0977/224200029328?trackingCode=blog_bloghome_searchlist


▶️ 87. (javascript/자바스크립트) 동적으로 form 폼 생성해 get, post 데이터 전송 실시

https://kkh0977.tistory.com/938

https://blog.naver.com/kkh0977/222420762770?trackingCode=blog_bloghome_searchlist


▶️ 561. (javaScript) 자바스크립트 setInterval 사용해 주기적 JSON 특정 Key 의 Value 값 동적 업데이트 수행

https://kkh0977.tistory.com/8939

https://blog.naver.com/kkh0977/224327264210?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

564. (javaScript) 자바스크립트 new Function 사용해 동적 string 문자열 소스 코드 작성 후 함수 실행 - 파라미터 첨부  (0) 2026.06.29
563. (javaScript) 자바스크립트 string 문자열 JSON Path 경로 체크 , 값 확인 및 갱신 - Path Check , Get Value , Set Value  (0) 2026.06.26
561. (javaScript) 자바스크립트 setInterval 사용해 주기적 JSON 특정 Key 의 Value 값 동적 업데이트 수행  (0) 2026.06.25
560. (javaScript) 자바스크립트 RegExp 정규식 사용해 올바르지 않은 JSON 데이터 Key , Value 보정 수행 - 올바르지않은 따옴표 , 따옴표 누락  (0) 2026.06.25
559. (javaScript) 자바스크립트 정규식 test() 사용해 올바르지 않은 JSON 특수 문자 따옴표 포함 여부 체크 및 replace 치환 수행  (0) 2026.06.24
'JavaScript' Related Articles more
Comments