텍스트/변수 뒤에 value붙여서 변수명으로 인식하게 만들기

이걸 나도 뭐라 해야할지 모르겠어서 검색할때도 애먹었는데

var theme1 = "테마 1번입니다";
var theme2 = "테마 2번입니다";

var num = prompt('원하는 테마 번호는?');

예를들어 prompt에 2를 입력하면

theme2에 대한 내용이 출력되도록 하는걸 하고싶었는데,

console.log(`theme${num}`);
console.log(theme+num);
console.log('theme'+num);

이런식으로 하면 변수로 인식하지 못하고 텍스트로 인식해버려서 어떻게 하나 싶었는데 방법은

 

1. eval 사용하기 (그런데 비추인것 같음)

// var theme1 = "테마 1번입니다";
// var theme2 = "테마 2번입니다";
// var num = prompt('원하는 테마 번호는?');

var theme = eval('theme'+num);

console.log(theme)

이렇게 eval을 쓰면 변수화 시켜줘서 잘 쓸 수 있음.

근데 예전에도 언뜻 봤는데 eval사용하면 해킹이 어쩌구 속도가 어쩌구해서

어쩌지하다가 갑자기 생각난게 텍스트로 인식해버린다면 객체로 쓰면 될것같아서 아래같이 바꿈.

 

 

2. object화 하기

// var theme1 = "테마 1번입니다";
// var theme2 = "테마 2번입니다";
// var num = prompt('원하는 테마 번호는?');

var themeObj = {'theme1': theme1, 'theme2': theme2};
var result = 'theme'+num;

console.log(themeObj[result]); 
// 만약 1을 입력했다면, result가 themeObj['theme1']라고 인식할테니 theme1에 대한 값이 잘 나옴.

MDN에서 봤는데 속성접근자로 쓰면 더 안전하고 속도도 빠르다고 함.

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

eval() - JavaScript | MDN

 

 

3. new Function 사용하기

var theme1 = ['#FFF', '#333'];
var theme2 = ['#F00', '#999'];

// 위에 변수를 활용해서 이렇게 만드려고 함 {'theme1': theme1, 'theme2': theme2}

var themeObj = {};

for(var i = 1; i<3; i++) {
    // eval 사용 
    themeObj[`theme${i}`] = eval(`theme${i}`)
    
    // new Function 사용
    themeObj[`theme${i}`] = new Function(`return theme${i}`)();
    
    // new Function 사용2 (함수로 따로 뺄 경우)
    function inner() {return `theme${i}`};
    themeObj[`theme${i}`] = new Function('return ' + inner())();
    
}

중요한 것은 마지막에 "함수 따로 뺄 경우"에서 new Function('return(띄어쓰기)'~~ 이렇게 써줘야함.

 

※ 뭔가 안된다면 변수를 아예 바깥으로 빼보면 잘된다.

a라는 함수에 위에 코드를 넣고, 버튼을 누르면 a라는 함수가 실행되도록 했는데

자꾸 에러가 떠서 이곳저곳 찾아보다가 함수 내에서 쓴 재료가 될 변수(theme1, theme2)를

아예 a함수 바깥으로 빼봤는데 되더라. 이유는 모르겠지만...