[JS] 문자열을 자바스크립트 코드로 사용하는 방법 / 문자열과 변수를 조합하여 자바스크립트 코드 만들기 :: window.Function

 

 

 

 

얼마전에 문자열을 자바스크립트 코드로 사용하기 위해 eval 함수가 있다는 것을 정리했는데 

보안상의 문제로 MDN에서 절대 사용하지 말라고 하였었다. 그렇다면 그림의 떡이라는 말인데..

여기서 MDN이 다른 대안을 문서로 제공하고 있다. 바로 window.Function을 사용하는 것이다. 오늘은 이

window.Function에 대해 정리해보려고 한다.

 

 

window.Function함수를 사용하여 문자열을 자바스크립트 코드로 변환해보자.

 

오늘은 이 window.Function을 통해 문자열을 자바스크립트로 변환하는 것만 알아볼 것이기 때문에 자세한 내용은

MDN문서를 참조하도록 하자 - MDN문서 참조

 

 

샘플변수 선언

//샘플 변수 선언
const originVar_1 = 'this_is_originVar_1';
const originVar_2 = 'this_is_originVar_2';
const originVar_3 = 'this_is_originVar_3';

// value값인 'originVar_1'로 originVar_1 변수를 호출하기 위한 샘플 변수
var srh = 'originVar_1';
var srh3 = 'originVar_3';

function srhChangeJS(srh){
    return Function('"use strict";return (' + srh + ')')();
};

// 문자열 'originVar_1'를 가지고 있는 srh를 인자로하여 Function객체를 호출함
console.log(srhChangeJS(srh));
// 문자열 'originVar_3'를 가지고 있는 srh3를 인자로하여 Function객체를 호출함
console.log(srhChangeJS(srh3));

// 문자열 'originVar_'와 인덱스인 i를 조합한 인자로 Fcuntion객체를 호출함
for(var i=1;i<4;i++){
    console.log(srhChangeJS('originVar_'+i))  				
}

 

결과화면

 

 

자바스크립트 내장함수 및 웹 API도 적용가능하다.

 

물론 자바스크립트에서 제공하는 내장함수나, 웹 API도 적용 가능하다. 아래 코드를 보도록 하자.

// 자바스크립트 내장함수인 Date()를 웹API인 console.log()로 찍는 문자열 변수 testSrh 선언
const testSrh = 'var date = new Date(); return console.log(date);';

// testSrh를 인자로 받아 Function을 호출함             
function testFunc(testSrh){
    return Function(testSrh)();
}

// testFunc을 호출함
testFunc(testSrh);

 

 

결과화면

 

 

위의 코드를 보면 자바스크립트 내장함수와 웹API를 포함한 문자열을

자바스크립트 코드로 변환하여 실행하는 것을 볼 수 있다.

 

자바스크립트 내장함수 : new Date()

웹 API : console.log()

 

이렇게 문자열뿐만이 아니라, 자바스크립트 내장함수나 웹API 또한

자바스크립트로 변환할 수 있다는 것을 확인할 수 있었다.

 

다양하게 한번 테스트 해보도록 하자.