자바스크립트에는 코드를 실행하거나 값을 다루는 여러 가지 방법이 있습니다. 그중 void 키워드, eval() 함수, Function 생성자는 각각 서로 다른 목적으로 사용되며, 동작 방식과 특징도 확연히 다릅니다. 이 글에서는 세 가지의 개념과 사용 예제를 통해 차이점을 자세히 살펴보겠습니다.
1. void 키워드
void는 자바스크립트에서 중요한 역할을 하는 키워드로, 단일 피연산자 앞에 위치하는 단항 연산자(unary operator)로 사용됩니다. 피연산자는 어떤 타입이든 될 수 있으며, void는 해당 표현식을 평가하기만 하고 항상 undefined를 반환합니다. 즉, 표현식을 실행하되 그 결과값이 필요 없을 때 유용하게 활용됩니다.
void의 문법은 아래 두 가지 형태 중 하나로 작성할 수 있습니다.
<head> <script> <!-- void func() javascript:void func() 또는: void(func()) javascript:void(func()) //--> </script> </head>
대표적인 활용 예로, HTML 링크에서 <a href="javascript:void(0)">처럼 사용하면 클릭해도 페이지가 이동하지 않는 링크를 만들 수 있습니다.
2. eval() 함수
eval() 함수는 문자열로 전달된 인수를 자바스크립트 코드로 해석하여 실행하는 함수입니다. 하지만 eval()을 사용하면 코드 실행 속도가 느려지며, 별도의 실행 범위(scope)를 가지기 때문에 보안상 취약점이 발생할 수 있다는 점을 반드시 유의해야 합니다. 따라서 실무에서는 eval() 사용을 최소화하는 것이 권장됩니다.
사용 예제
다음은 eval() 함수를 구현하는 방법입니다.
<html>
<body>
<script>
var a = 30;
var b = 12;
var res1 = eval("a * b") + "<br>";
var res2 = eval("5 + 10") + "<br>";
document.write(res1);
document.write(res2);
</script>
</body>
</html>실행 결과
360 15
위 예제에서 eval()은 문자열 "a * b"와 "5 + 10"을 실제 자바스크립트 표현식으로 평가하여 각각 360과 15라는 결과를 반환합니다.
3. Function 생성자
Function 생성자는 자바스크립트에서 새로운 함수 객체를 동적으로 생성할 때 사용됩니다. 이 방식으로 만들어진 함수 객체는 함수가 생성되는 시점에 파싱(parsing)됩니다. 매개변수 목록과 함수 본문을 문자열 형태로 전달한다는 점이 일반적인 함수 선언 방식과 다릅니다.
사용 예제
다음 코드를 실행하면 Function 생성자의 동작 방식을 확인할 수 있습니다.
<html>
<body>
<script>
var num = new Function('p', 'q', 'r', 'return p * q * r');
document.write("곱셈 결과: " + num(5, 2, 9));
</script>
</body>
</html>실행 결과
곱셈 결과: 90
위 예제에서는 세 개의 매개변수 p, q, r을 받아 곱한 값을 반환하는 함수를 Function 생성자로 만들고, num(5, 2, 9)를 호출하여 90이라는 결과를 얻었습니다.
정리: 세 가지의 핵심 차이점
- void: 단항 연산자로, 표현식을 평가하지만 항상 undefined를 반환합니다. 주로 결과값이 필요 없는 경우에 사용됩니다.
- eval(): 문자열을 코드로 실행하는 함수입니다. 실행 속도가 느리고 보안 위험이 있어 사용이 권장되지 않습니다.
- Function 생성자: 문자열 기반으로 새로운 함수 객체를 동적으로 생성합니다. 함수 생성 시점에 코드가 파싱됩니다.