From 4289bf1fbb823f410775b4c7d0533b7abd8e5f5f Mon Sep 17 00:00:00 2001 From: 3indblown Leaf <69508345+kraccoon-dev@users.noreply.github.com> Date: Tue, 1 Feb 2022 19:42:11 +0900 Subject: remove class 1 (#3922) --- .../reference/global_objects/eval/index.html | 32 +++++++++++----------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'files/ko/web/javascript/reference/global_objects/eval/index.html') diff --git a/files/ko/web/javascript/reference/global_objects/eval/index.html b/files/ko/web/javascript/reference/global_objects/eval/index.html index d599cadbe9..d7bcfeb182 100644 --- a/files/ko/web/javascript/reference/global_objects/eval/index.html +++ b/files/ko/web/javascript/reference/global_objects/eval/index.html @@ -72,7 +72,7 @@ eval(expression.toString());            // 4를 반환

eval을 사용하는 나쁜 코드:

-
function looseJsonParse(obj){
+
function looseJsonParse(obj){
     return eval(obj);
 }
 console.log(looseJsonParse(
@@ -82,7 +82,7 @@ console.log(looseJsonParse(
 
 
eval이 없는 코드:

 
-
function looseJsonParse(obj){
+
function looseJsonParse(obj){
     return Function('"use strict";return (' + obj + ')')();
 }
 console.log(looseJsonParse(
@@ -92,7 +92,7 @@ console.log(looseJsonParse(
 
 
위의 두 코드는 얼핏 보면 같은 방식으로 실행되는 것처럼 보이지만, eval이 있는 코드가 훨씬 느립니다. 평가되는 객체의 c: new Date()를 주목하세요. eval이 없는 함수의 경우 이 객체는 전역 범위에서 평가되기 때문에 브라우저에서는 Date를 같은 이름의 지역 변수가 아니라 window.Date로 취급할 수 있습니다. 그러나 eval()을 사용하는 코드에서는 아래와 같은 경우도 존재할 수 있기 때문에 Date를 이렇게 취급할 수 없습니다.

 
-
function Date(n){
+
function Date(n){
     return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
 }
 function looseJsonParse(obj){
@@ -107,7 +107,7 @@ console.log(looseJsonParse(
 
 
만약 위의 상황에서 실제로 새로 선언한 Date 함수를 Function()에서 실행해야 하는 상황을 생각해 봅시다. 이렇게 되면 eval()로 돌아가야 할까요? 물론 아닙니다. 아래의 접근을 시도해 보세요.

 
-
function Date(n){
+
function Date(n){
     return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0];
 }
 function runCodeWithDateFunction(obj){
@@ -132,7 +132,7 @@ console.log(runCodeWithDateFunction(
 
 
마지막으로 코드 최소화의 측면에서 살펴보면, 위와 같이 Function()을 사용했을 때는 아래의 최소화된 코드와 같이 함수의 인자 이름 역시 짧게 줄일 수 있으므로 runCodeWithDateFunction에 전달하는 코드 문자열을 더욱 효율적으로 줄일 수 있습니다.

 
-
console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
+
console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){
 return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));

 
 
자주 쓰이는 용례에 대해서는 eval()이나 Function()보다 안전하고 빠른 대안도 존재합니다.

@@ -141,7 +141,7 @@ return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7|
 
 
속성명으로 속성을 찾는 데 eval()을 사용해서는 안 됩니다. 다음 예제와 같이 코드를 실행하기 전까지는 접근할 속성을 알 수 없는 상황을 생각해 봅시다. 이 상황은 eval로 처리할 수 있습니다.

 
-
var obj = { a: 20, b: 30 };
+
var obj = { a: 20, b: 30 };
 var propname = getPropName();  // "a" 또는 "b"를 반환
 
 eval( "var result = obj." + propname );
@@ -149,21 +149,21 @@ eval( "var result = obj." + propname );
 
 
그러나 여기에서 eval()을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 속성 접근자를 사용하여야 합니다.

 
-
var obj = { a: 20, b: 30 };
+
var obj = { a: 20, b: 30 };
 var propname = getPropName();  // "a" 또는 "b"를 반환
 var result = obj[ propname ];  //  obj[ "a" ]는 obj.a와 동일함
 

 
 
이 방법으로 더 깊은 속성에도 접근할 수 있습니다. eval()을 사용한다면 다음과 같을 것입니다.

 
-
var obj = {a: {b: {c: 0}}};
+
var obj = {a: {b: {c: 0}}};
 var propPath = getPropPath();  // "a.b.c"를 반환한다고 가정
 
 eval( 'var result = obj.' + propPath );

 
 
여기서 eval()의 사용을 피하려면 속성 경로를 split한 다음 순서대로 접근할 수도 있습니다.

 
-
function getDescendantProp(obj, desc) {
+
function getDescendantProp(obj, desc) {
   var arr = desc.split('.');
   while (arr.length) {
     obj = obj[arr.shift()];
@@ -177,7 +177,7 @@ var result = getDescendantProp(obj, propPath);

 
 
속성에 값을 대입하는 것도 비슷하게 할 수 있습니다.

 
-
function setDescendantProp(obj, desc, value) {
+
function setDescendantProp(obj, desc, value) {
   var arr = desc.split('.');
   while (arr.length > 1) {
     obj = obj[arr.shift()];
@@ -194,7 +194,7 @@ var result = setDescendantProp(obj, propPath, 1);  // test.a.b.c의 값은 1로
 
 
JavaScript의 함수는 1급 객체이므로 다른 API에 함수를 인자로 전달할 수도 있고, 변수나 객체의 속성으로 대입할 수도 있습니다. 다수의 DOM API는 이 점을 염두에 두고 설계되므로, 다음과 같이 코드를 짜야 합니다.

 
-
// setTimeout(" ... ", 1000) 대신에
+
// setTimeout(" ... ", 1000) 대신에
 setTimeout(function() { ... }, 1000);
 
 // elt.setAttribute("onclick", "...") 대신에
@@ -222,7 +222,7 @@ elt.addEventListener("click", function() { ... } , false); 

 
 
아래 코드에서 eval()를 포함하는 문장은 모두 42를 반환합니다. 전자는 문자열 "x + y + 1"을, 후자는 문자열 "42"를 평가합니다.

 
-
var x = 2;
+
var x = 2;
 var y = 39;
 var z = "42";
 eval("x + y + 1"); // 42를 반환
@@ -233,14 +233,14 @@ eval(z);           // 42를 반환
 
 
다음 예제에서는 eval()을 사용하여 str 문자열을 평가합니다. 이 문자열은 x가 5이면 로그를 출력한 다음 z에 42를 할당하고, 그렇지 않으면 z에 0 을 할당하는 JavaScript 코드입니다. 두 번째 문장이 실행되면, eval()은 이 문장의 집합을 수행하고, z에 할당된 값을 반환합니다.

 
-
var x = 5;
+
var x = 5;
 var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; ";
 
 console.log("z is ", eval(str));

 
 
여러 값을 정의할 경우 마지막 값을 반환합니다.

 
-
var x = 5;
+
var x = 5;
 var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";
 
 console.log('x is ', eval(str)); // z는 42, x는 420

@@ -249,7 +249,7 @@ console.log('x is ', eval(str)); // z는 42, x는 420

 
 
eval() 은 마지막 표현식의 평가값을 반환합니다.

 
-
var str = "if ( a ) { 1+1; } else { 1+2; }";
+
var str = "if ( a ) { 1+1; } else { 1+2; }";
 var a = true;
 var b = eval(str);  // 2를 반환
 
@@ -262,7 +262,7 @@ console.log("b is : " + b);

 
 
함수 정의 문자열로서의 eval 은 앞뒤를 "("와 ")"로 감싸야 한다

 
-
var fctStr1 = "function a() {}"
+
var fctStr1 = "function a() {}"
 var fctStr2 = "(function a() {})"
 var fct1 = eval(fctStr1)  // undefined를 반환
 var fct2 = eval(fctStr2)  // 함수를 반환
-- 
cgit v1.2.3-54-g00ecf