[JavaScript] eval() 사용법과 동적으로 변수 추가하기

eavl() : 문자로 표현된 JavaScript 코드를 실행하는 함수

사용법은 간단하다.

eval(String);

문자열을 eval()로 감싸서 실행하면 된다.

설명을 간단한 코드로 만들어본다면 아래와 같이 사용할 수 있다.

	eval("alert('test')"); // alert("test"); 실행

	eval("console.log(1+1)");  // 콘솔에 2가 찍힘

"" 안에 들어있는 문자열들이 JavaScript 코드로 인식되어,

alert도 띄우고 console.log도 찍을 수 있게 된다.

그래서 가끔은 동적으로 변수를 추가할 경우에도 eval()을 사용한다.

object에 새로운 변수들을 추가하는 경우.

실행 #1

	var obj = {};

	for(var i = 0; i < 5; i++){
    	eval("obj.test" + i + "=" + i);
	}

	console.log(obj);

결과 #1

1. {test0: 0, test1: 1, test2: 2, test3: 3, test4: 4}
   1. test0: 0
   2. test1: 1
   3. test2: 2
   4. test3: 3
   5. test4: 4
   6. proto: Object

obj에는 미리 선언된 키값이 없었다.

하지만 eval을 통해서 실행 중에 동적으로 추가를 한다.

obj에 test0, test1 ... test4로 들어간다.

이렇게 문자열을 조합한다음 그것을 코드로 인식하게 만들어서 작동시킬 수 있다.

위의 코드에서 eval()을 사용해서 만들었지만,

다른 방법으로도 같은 결과를 만들 수 있다.

실행 #2

	var obj = {};

	for(var i = 0; i < 5; i++){
   		obj['test' + i] = i;
	}

	console.log(obj);

결과 #2

1. {test0: 0, test1: 1, test2: 2, test3: 3, test4: 4}
   1. test0: 0
   2. test1: 1
   3. test2: 2
   4. test3: 3
   5. test4: 4
   6. proto: Object

2가지 방법으로 동적으로 변수를 추가해봤는데,

eval()을 안 써도 되는 상황에서는 굳이 eval()을 사용하지 않는 게 좋다고 한다.

 

좀 더 자세한 설명은 아래 페이지에서 확인 할 수 있다.

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

eval()