diff options
Diffstat (limited to 'files/ko/web/javascript/reference/functions/arrow_functions/index.html')
| -rw-r--r-- | files/ko/web/javascript/reference/functions/arrow_functions/index.html | 44 |
1 files changed, 22 insertions, 22 deletions
diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html index cff8d043ae..2a12888f65 100644 --- a/files/ko/web/javascript/reference/functions/arrow_functions/index.html +++ b/files/ko/web/javascript/reference/functions/arrow_functions/index.html @@ -27,7 +27,7 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 <h3 id="기본_구문">기본 구문</h3> -<pre class="syntaxbox notranslate"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> +<pre class="syntaxbox "><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> // 다음과 동일함: => { return expression; } @@ -40,7 +40,7 @@ original_slug: Web/JavaScript/Reference/Functions/애로우_펑션 <h3 id="고급_구문">고급 구문</h3> -<pre class="syntaxbox notranslate">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음: +<pre class="syntaxbox ">// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음: <em>params</em> => ({<em>foo: bar</em>}) // <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a> 및 <a href="/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters">기본 매개변수</a>를 지원함 @@ -64,7 +64,7 @@ f(); // 6 <p>일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요:</p> -<pre class="notranslate">var elements = [ +<pre >var elements = [ 'Hydrogen', 'Helium', 'Lithium', @@ -114,7 +114,7 @@ elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" <p>이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.</p> -<pre class="brush: js notranslate">function Person() { +<pre class="brush: js ">function Person() { // Person() 생성자는 `this`를 자신의 인스턴스로 정의. this.age = 0; @@ -130,7 +130,7 @@ var p = new Person();</pre> <p>ECMAScript 3/5 에서는, 이 문제를 <code>this</code> 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했습니다.</p> -<pre class="brush: js notranslate">function Person() { +<pre class="brush: js ">function Person() { var that = this; that.age = 0; @@ -146,7 +146,7 @@ var p = new Person();</pre> <p>따라서 다음 코드에서 <code>setInterval</code>에 전달 된 함수 내부의 <code>this</code>는 <code>setInterval</code>을 포함한 function의 <code>this</code>와 동일한 값을 갖습니다.</p> -<pre class="brush: js notranslate">function Person(){ +<pre class="brush: js ">function Person(){ this.age = 0; setInterval(() => { @@ -160,7 +160,7 @@ var p = new Person();</pre> <p><code>this</code>가 렉시컬(lexical, 정적)임을 감안하면, <code>this</code>에 관한 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a> 규칙은 그냥 무시됩니다.</p> -<pre class="notranslate">var f = () => { 'use strict'; return this; }; +<pre >var f = () => { 'use strict'; return this; }; f() === window; // 혹은 전역객체</pre> <p>엄격 모드의 나머지 규칙은 평소대로 적용합니다.</p> @@ -173,7 +173,7 @@ f() === window; // 혹은 전역객체</pre> <p>This code sample using Chrome 81 demonstrates that arrow functions allow the creation of global variables in such situations (both for a concise body and for a normal function body):</p> -<pre class="notranslate">> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } +<pre >> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } > y @@ -230,7 +230,7 @@ VM51891:1 Uncaught ReferenceError: z1 is not defined <p>화살표 함수에서는 <code>this가 </code> 바인딩되지 않았기 때문에, <code>call()</code> 또는 <code>apply()</code> 메서드는 인자만 전달 할 수 있습니다. this는 무시됩니다.</p> -<pre class="brush: js notranslate">var adder = { +<pre class="brush: js ">var adder = { base : 1, add : function(a) { @@ -255,7 +255,7 @@ console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임</pr <p>화살표 함수는 <a href="/ko/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> 객체</a>를 바인드 하지 않습니다. 때문에, <code>arguments는</code> 그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.</p> -<pre class="brush: js notranslate"><code>var arguments = [1, 2, 3]; +<pre class="brush: js "><code>var arguments = [1, 2, 3]; var arr = () => arguments[0]; arr(); // 1 @@ -269,7 +269,7 @@ foo(1); // 2</code></pre> <p>화살표 함수는 자신의 <code>arguments</code> 객체가 없지만, 대부분의 경우에 <a href="/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters">나머지 매개변수</a>가 좋은 대안입니다:</p> -<pre class="brush: js notranslate">function foo(n) { +<pre class="brush: js ">function foo(n) { var f = (...args) => args[0] + n; return f(2); } @@ -280,7 +280,7 @@ foo(1); // 3</pre> <p>이야기 했듯이, 화살표 함수 표현은 메소드 함수가 아닌 형태로 사용 할 수 있습니다. 메소드로 사용하려고 한면 무슨일이 발생하는지 봅시다.</p> -<pre class="brush: js notranslate"><code>'use strict'; +<pre class="brush: js "><code>'use strict'; var obj = { // does not create a new scope i: 10, @@ -295,7 +295,7 @@ obj.c(); // prints 10, Object {...}</code> <p>화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.{{jsxref("Object.defineProperty()")}}</p> -<pre class="brush: js notranslate"><code>'use strict'; +<pre class="brush: js "><code>'use strict'; var obj = { a: 10 @@ -312,14 +312,14 @@ Object.defineProperty(obj, 'b', { <p>화살표 함수는 생성자로서 사용될 수 없으며 <code>new</code>와 함께 사용하면 오류가 발생합니다.</p> -<pre class="brush: js notranslate"><code>var Foo = () => {}; +<pre class="brush: js "><code>var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor</code></pre> <h3 id="prototype_속성_사용"><code>prototype</code> 속성 사용</h3> <p>화살표 함수는 <code>prototype</code> 속성이 없습니다.</p> -<pre class="brush: js notranslate"><code>var Foo = () => {}; +<pre class="brush: js "><code>var Foo = () => {}; console.log(Foo.prototype); // undefined</code></pre> <h3 id="yield_키워드_사용"><code>yield</code> 키워드 사용</h3> @@ -336,7 +336,7 @@ console.log(Foo.prototype); // undefined</code></pre> <p>block바디는 자동으로 값을 반환하지 않습니다. <code>return</code>을 사용해서 값을 반환해야 합니다.</p> -<pre class="brush: js notranslate">var func = x => x * x; // concise 바디, 생략된 "return" 여기서는 x * x +<pre class="brush: js ">var func = x => x * x; // concise 바디, 생략된 "return" 여기서는 x * x var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요 </pre> @@ -344,7 +344,7 @@ var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요 <p>간결한 구문 <code>params => {object:literal}</code>을 사용한 객체 리터럴 반환은 예상대로 작동하지 않음을 명심하세요:</p> -<pre class="brush: js notranslate">var func = () => { foo: 1 }; +<pre class="brush: js ">var func = () => { foo: 1 }; // func() 호출은 undefined를 반환! var func = () => { foo: function() {} }; @@ -354,19 +354,19 @@ var func = () => { foo: function() {} }; <p>객체 리터럴를 괄호로 감싸는 것을 기억하세요:</p> -<pre class="brush: js notranslate">var func = () => ({ foo: 1 });</pre> +<pre class="brush: js ">var func = () => ({ foo: 1 });</pre> <h3 id="줄바꿈">줄바꿈</h3> <p>화살표 함수는 파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.</p> -<pre class="brush: js notranslate"><code>var func = (a, b, c) +<pre class="brush: js "><code>var func = (a, b, c) => 1; // SyntaxError: expected expression, got '=>'</code></pre> <p>하지만, 보기 좋은 코드를 유지하고 싶다면, 아래에 보는 것처럼 괄호나 개행을 둠으로써 이를 수정할 수 있습니다.</p> -<pre class="notranslate">var func = (a, b, c) => +<pre >var func = (a, b, c) => 1; var func = (a, b, c) => ( @@ -389,7 +389,7 @@ var func = (a, b, c) => { <p>화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.</p> -<pre class="brush: js notranslate"><code>let callback; +<pre class="brush: js "><code>let callback; callback = callback || function() {}; // ok @@ -403,7 +403,7 @@ callback = callback || (() => {}); // ok</code> <h3 id="기본_사용법">기본 사용법</h3> -<pre class="brush: js notranslate"><code>// </code> empty 화살표 함수는 undefined를 반환 <code> +<pre class="brush: js "><code>// </code> empty 화살표 함수는 undefined를 반환 <code> let empty = () => {}; (() => 'foobar')(); |