Javascript - 스크립트 코드를 실행시키는 eval() 사용 방법을 알아보자

자바스크립트의 eval() 함수는 문자열로 이루어진 스크립트 코드를 실행하는 함수입니다. 그렇기 때문에 eval()을 잘 활용하면 동적으로 Javascript 실행문을 만들어서 실행할 수도 있지만, 보안에 취약하다는 문제점도 있는데요. 오늘은 eval()의 사용방법을 통해 어떤 점이 좋고 나쁜지 알아보도록 하겠습니다.

문자를 실행시키는 eval()

console.log('2 + 2');
// output: '2 + 2'

 일반적으로 함수의 매개변수로 문자 값을 사용하면 문자 리터럴로 인식되고 있는 리터럴로 사용됩니다. 위의 예제처럼 말이죠. 하지만 eval()을 사용하면 재미있는 결과를 만들어 낼 수 있습니다.

console.log(eval('2 + 2'));
// output: 4

 eval()은 매개변수로 받은 문자 값을 값으로 사용하는 게 아니라 실행문으로 변환해 실행시키기 때문에 문자를 출력하는 게 아니라 문자의 실행 결과를 반환합니다. 더 재미있는 부분은 정의되어 있는 함수의 실행도 가능하다는 점입니다.

eval('alert("hello")');

 alert()처럼 정의되어 있고 사용이 가능한 함수라면 eval()을 통해 사용이 가능합니다. 언제나 말이죠. 그렇다면 함수까지만 접근할 수 있을까요?

var count = 1;
var sum = eval('10 + count');

console.log(sum);
// output: 11

 기본적으로 eval()은 전역 범위(Scope)에서 동작하기 때문에 함수뿐만 아니라 변수도 접근이 가능합니다. 이처럼 eval()은 자유도가 높고 실시간(동적)으로 코드를 만들어 사용하기 편합니다. 하지만 과연 좋은 점만 있는 걸까요?

eval is evil - eval()을 사용하지 말자!

앞서 살펴본 eval()은 꽤나 재미있고 쓰임새가 무궁무진해 보입니다. 그런데 eval()은 모던한 자바스크립트 프로그래밍에서는 보기가 어렵습니다. 그 이유는 여러 가지가 있지만 가장 큰 이유는 보안에 있습니다. 만약 아래와 같이 특정 웹 사이트로 이동하는 코드를 문자 값을 사용하면 어떻게 될까요? 정상적인 환경에서는 동작할 수 없는 코드이지만 실행할 수 있는 환경이라고 가정한다면 이는 큰 문제가 됩니다.

eval('location.href = "http://www.sniffing.com";')

 즉 eval()을 불순한 목적으로 사용한다면 어떤 문제를 야기할지 예상할 수 없습니다. ECMAScript5의 strict 모드에서도 eval()의 사용을 엄격히 제한합니다. eval()은 보안 외에도 유지 보수 측면에서도 좋지 않은 코드를 생산하도록 유도하는 방법 중 하나입니다.

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

 재미도 있지만 문제가 많아 보이는 eval()을 사용했던 이유는 이전의 자바스크립트가 지원하는 기능이 많지 않았기 때문입니다. 예를 들어 이전의 자바스크립트는 JSON.parse()처럼 문자 값을 JSON 객체(혹은 객체)로 만드는 방법이 없었습니다. 하지만 eval()를 사용하면 손쉽게 JSON 객체를 만들었습니다. 하지만 지금의 자바스크립트는 많은 발전을 했기 때문에 eval()을 사용해야 하는 경우가 거의 없습니다. 그렇기 때문에 학습을 목적으로 eval()을 사용하는 것은 괜찮지만 실무에서 사용하는 것은 좋지 않고 권장하지 않습니다.