wiki:javascript:javascript_note:js_arrow_function

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:javascript:javascript_note:js_arrow_function [2021/04/26 14:37]
emblim98 만듦
+++ wiki:javascript:javascript_note:js_arrow_function [2023/01/13 18:44] (현재)
@@ 줄 53: / 줄 53: @@
 =====Arrow Function With Parameters:=====
 <code javascript>
+let hello;
+hello = (val) => "Hello " + val;
+document.getElementById("demo").innerHTML = hello("Universe!");  // Hello Universe!
 </code>
 \\
@@ 줄 60: / 줄 64: @@
 =====Arrow Function Without Parentheses=====
 <code javascript>
+let hello;
+hello = val => "Hello " + val;
+document.getElementById("demo").innerHTML = hello("Universe!");  // Hello Universe!
 </code>
@@ 줄 83: / 줄 91: @@
 일반 함수를 사용하면, ''this''는 함수를 호출하는 오브젝트를 나타냅니다.\\
 <code javascript>
+    let hello;
+    hello = function () {
+      document.getElementById("demo").innerHTML += this;
+    }
+    // The window object calls the function:
+    window.addEventListener("load", hello);
+    // A button objects calls the function:
+    document.getElementById("btn").addEventListener("click", hello);
+    // [object Window][object HTMLButtonElement]
 </code>
 \\
 화살표 함수를 사용하면, ''this''는 해당 함수의 소유자를 나타냅니다.\\
 \\
+<code javascript>
+    let hello;
+    hello = () => {
+      document.getElementById("demo").innerHTML += this;
+    }
+    // The window object calls the function:
+    window.addEventListener("load", hello);
+    // A button objects calls the function:
+    document.getElementById("btn").addEventListener("click", hello);
+    // [object Window][object Window]
+</code>
 함수로 작업할 때 이러한 차이점을 기억하십시오.\\
 때로는 일반 함수의 동작이 원하는 것이지만, 그렇지 않은 경우 화살표 함수를 사용합니다.\\

/var/services/web/dokuwiki/data/attic/wiki/javascript/javascript_note/js_arrow_function.1619415471.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)