diff options
author | 3indblown Leaf <69508345+kraccoon-dev@users.noreply.github.com> | 2022-02-01 19:42:11 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-01 19:42:11 +0900 |
commit | 4289bf1fbb823f410775b4c7d0533b7abd8e5f5f (patch) | |
tree | 624a9bf236fff00b97fc8c61a76b672333303427 /files/ko/web/javascript/reference/global_objects/eval/index.html | |
parent | 41bbbf1ce8a34763e6ecc099675af29fb5bef62e (diff) | |
download | translated-content-4289bf1fbb823f410775b4c7d0533b7abd8e5f5f.tar.gz translated-content-4289bf1fbb823f410775b4c7d0533b7abd8e5f5f.tar.bz2 translated-content-4289bf1fbb823f410775b4c7d0533b7abd8e5f5f.zip |
remove class 1 (#3922)
Diffstat (limited to 'files/ko/web/javascript/reference/global_objects/eval/index.html')
-rw-r--r-- | files/ko/web/javascript/reference/global_objects/eval/index.html | 32 |
1 files changed, 16 insertions, 16 deletions
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를 반환 <p><code>eval</code>을 사용하는 나쁜 코드:</p> -<pre class="brush:js notranslate">function looseJsonParse(obj){ +<pre class="brush:js ">function looseJsonParse(obj){ return eval(obj); } console.log(looseJsonParse( @@ -82,7 +82,7 @@ console.log(looseJsonParse( <p><code>eval</code>이 없는 코드:</p> -<pre class="brush:js notranslate">function looseJsonParse(obj){ +<pre class="brush:js ">function looseJsonParse(obj){ return Function('"use strict";return (' + obj + ')')(); } console.log(looseJsonParse( @@ -92,7 +92,7 @@ console.log(looseJsonParse( <p>위의 두 코드는 얼핏 보면 같은 방식으로 실행되는 것처럼 보이지만, <code>eval</code>이 있는 코드가 훨씬 느립니다. 평가되는 객체의 <code>c: new Date()</code>를 주목하세요. <code>eval</code>이 없는 함수의 경우 이 객체는 전역 범위에서 평가되기 때문에 브라우저에서는 <code>Date</code>를 같은 이름의 지역 변수가 아니라 <code>window.Date</code>로 취급할 수 있습니다. 그러나 <code>eval()</code>을 사용하는 코드에서는 아래와 같은 경우도 존재할 수 있기 때문에 <code>Date</code>를 이렇게 취급할 수 없습니다.</p> -<pre class="brush:js notranslate">function Date(n){ +<pre class="brush:js ">function Date(n){ return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; } function looseJsonParse(obj){ @@ -107,7 +107,7 @@ console.log(looseJsonParse( <p>만약 위의 상황에서 실제로 새로 선언한 <code>Date</code> 함수를 <code>Function()</code>에서 실행해야 하는 상황을 생각해 봅시다. 이렇게 되면 <code>eval()</code>로 돌아가야 할까요? 물론 아닙니다. 아래의 접근을 시도해 보세요.</p> -<pre class="brush:js notranslate">function Date(n){ +<pre class="brush:js ">function Date(n){ return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; } function runCodeWithDateFunction(obj){ @@ -132,7 +132,7 @@ console.log(runCodeWithDateFunction( <p>마지막으로 코드 최소화의 측면에서 살펴보면, 위와 같이 <code>Function()</code>을 사용했을 때는 아래의 최소화된 코드와 같이 함수의 인자 이름 역시 짧게 줄일 수 있으므로 runCodeWithDateFunction에 전달하는 코드 문자열을 더욱 효율적으로 줄일 수 있습니다.</p> -<pre class="brush:js notranslate">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ +<pre class="brush:js ">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]}));</pre> <p>자주 쓰이는 용례에 대해서는 <code>eval()</code>이나 <code>Function()</code>보다 안전하고 빠른 대안도 존재합니다.</p> @@ -141,7 +141,7 @@ return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7| <p>속성명으로 속성을 찾는 데 <code>eval()</code>을 사용해서는 안 됩니다. 다음 예제와 같이 코드를 실행하기 전까지는 접근할 속성을 알 수 없는 상황을 생각해 봅시다. 이 상황은 <code>eval</code>로 처리할 수 있습니다.</p> -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +<pre class="brush:js ">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 ); <p>그러나 여기에서 <code>eval()</code>을 쓸 필요가 없고, 지양되어야 합니다. 그 대신 훨씬 빠르고 안전한 <a href="/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors">속성 접근자</a>를 사용하여야 합니다.</p> -<pre class="brush:js notranslate">var obj = { a: 20, b: 30 }; +<pre class="brush:js ">var obj = { a: 20, b: 30 }; var propname = getPropName(); // "a" 또는 "b"를 반환 var result = obj[ propname ]; // obj[ "a" ]는 obj.a와 동일함 </pre> <p>이 방법으로 더 깊은 속성에도 접근할 수 있습니다. <code>eval()</code>을 사용한다면 다음과 같을 것입니다.</p> -<pre class="notranslate"><code>var obj = {a: {b: {c: 0}}}; +<pre ><code>var obj = {a: {b: {c: 0}}}; var propPath = getPropPath(); // "a.b.c"를 반환한다고 가정 eval( 'var result = obj.' + propPath );</code></pre> <p>여기서 <code>eval()</code>의 사용을 피하려면 속성 경로를 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split">split</a></code>한 다음 순서대로 접근할 수도 있습니다.</p> -<pre class="notranslate"><code>function getDescendantProp(obj, desc) { +<pre ><code>function getDescendantProp(obj, desc) { var arr = desc.split('.'); while (arr.length) { obj = obj[arr.shift()]; @@ -177,7 +177,7 @@ var result = getDescendantProp(obj, propPath);</code></pre> <p>속성에 값을 대입하는 것도 비슷하게 할 수 있습니다.</p> -<pre class="notranslate"><code>function setDescendantProp(obj, desc, value) { +<pre ><code>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로 <p>JavaScript의 <a href="http://en.wikipedia.org/wiki/First-class_function">함수는 1급 객체</a>이므로 다른 API에 함수를 인자로 전달할 수도 있고, 변수나 객체의 속성으로 대입할 수도 있습니다. 다수의 DOM API는 이 점을 염두에 두고 설계되므로, 다음과 같이 코드를 짜야 합니다.</p> -<pre class="brush: js notranslate">// setTimeout(" ... ", 1000) 대신에 +<pre class="brush: js ">// setTimeout(" ... ", 1000) 대신에 setTimeout(function() { ... }, 1000); // elt.setAttribute("onclick", "...") 대신에 @@ -222,7 +222,7 @@ elt.addEventListener("click", function() { ... } , false); </pre> <p>아래 코드에서 <code>eval()</code>를 포함하는 문장은 모두 42를 반환합니다. 전자는 문자열 "<code>x + y + 1</code>"을, 후자는 문자열 "<code>42</code>"를 평가합니다.</p> -<pre class="brush:js notranslate">var x = 2; +<pre class="brush:js ">var x = 2; var y = 39; var z = "42"; eval("x + y + 1"); // 42를 반환 @@ -233,14 +233,14 @@ eval(z); // 42를 반환 <p>다음 예제에서는 <code>eval()</code>을 사용하여 <code>str</code> 문자열을 평가합니다. 이 문자열은 <code>x</code>가 5이면 로그를 출력한 다음 <code>z</code>에 42를 할당하고, 그렇지 않으면 <code>z</code>에 0 을 할당하는 JavaScript 코드입니다. 두 번째 문장이 실행되면, <code>eval()</code>은 이 문장의 집합을 수행하고, <code>z</code>에 할당된 값을 반환합니다.</p> -<pre class="brush:js notranslate">var x = 5; +<pre class="brush:js ">var x = 5; var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0; "; console.log("z is ", eval(str));</pre> <p>여러 값을 정의할 경우 마지막 값을 반환합니다.</p> -<pre class="notranslate"><code>var x = 5; +<pre ><code>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</code></pre> @@ -249,7 +249,7 @@ console.log('x is ', eval(str)); // z는 42, x는 420</code></pre> <p><code>eval()</code> 은 마지막 표현식의 평가값을 반환합니다.</p> -<pre class="brush:js notranslate">var str = "if ( a ) { 1+1; } else { 1+2; }"; +<pre class="brush:js ">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);</pre> <h3 id="함수_정의_문자열로서의_eval_은_앞뒤를_와_로_감싸야_한다">함수 정의 문자열로서의 <code>eval</code> 은 앞뒤를 "("와 ")"로 감싸야 한다</h3> -<pre class="brush:js notranslate">var fctStr1 = "function a() {}" +<pre class="brush:js ">var fctStr1 = "function a() {}" var fctStr2 = "(function a() {})" var fct1 = eval(fctStr1) // undefined를 반환 var fct2 = eval(fctStr2) // 함수를 반환 |