문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======JavaScript Arrow Function======
<WRAP left notice 80%>
  * description : JavaScript Arrow Function
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-26
</WRAP>
<WRAP clear></WRAP>
\\
===The source of this article===
[[https://www.w3schools.com/js/js_arrow_function.asp|JavaScript Arror Function]]
\\
화살표 함수(Arrow functions)은 %%ES6%%에 도입되었습니다.\\
\\
화살표 함수를 사용하면 더 짧은 함수 구문을 작성할 수 있습니다.\\

====Before====
<code javascript>
let hello;

hello = function () {
  return "Hello World!";
}

document.getElementById("demo").innerHTML = hello();
</code>

====With Arrow Function====
<code javascript>
let hello;

hello = () => {
  return "Hello World!";
}
    
document.getElementById("demo").innerHTML = hello();
</code>
\\
화살표 함수(Arrow Function)를 사용하면 코드는 더 짧아집니다!\\
함수에 스테이트먼트가 하나만 있고 그 스테이트먼트가 값을 반환하는 경우, 소괄호와 ''%%return%%'' 키워드를 제거할 수 있습니다.\\

=====Arrow Functions Return Value by Default=====
<code javascript>
let hello;

hello = () => "Hello World!";

document.getElementById("demo").innerHTML = hello();
</code> 
\\
**Note:**  이것은 함수가 스테이트먼트 하나 만을 가졌을 때 적용됩니다.\\

=====Arrow Function With Parameters:=====
<code javascript>
let hello;

hello = (val) => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");  // Hello Universe!
</code>
\\
실제로, 오직 하나의 매개변수(parameter)만을 가지고 있는 경우, 마찬가지로 괄호를 사용하지 않을 수 있습니다.\\

=====Arrow Function Without Parentheses=====
<code javascript>
let hello;

hello = val => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");  // Hello Universe!
</code>

=====What About ''this''?=====
''this''를 다루는 것은 처리는 일반 함수와 비교하여 화살표 함수에서도 다릅니다.\\
\\
요컨대, 화살표 함수를 사용하면 ''this''에 대한 바인딩이 없습니다.\\
\\
일반 함수에서, ''this'' 키워드는 함수를 호출한 오브젝트를 나타내며, 창, 문서, 버튼 등이 될 수 있습니다.\\
\\
화살표 함수에서 ''this'' 키워드는 항상 화살표 함수를 정의한 오브젝트를 나타냅니다.\\
\\
차이점을 이해하기 위해, 두 가지 예를 살펴 보겠습니다.\\
\\
두 예제는 메서드를 두 번 호출합니다. 첫 전째는  페이지가 로딩될 때, 사용자가 버튼을 클릭 할 때 다시 한 번 메서드를 호출합니다.\\
\\
첫 번째 예제는 일반 함수(regular function)를 사용하고, 두 번째 예제는 화살표 함수(arrow function)를 사용합니다.\\
\\
window 오브젝트가 함수의 "소유자"이기 때문에, 첫 번째 예제는 두 개의 다른 오브젝트 (window와 버튼)를 반환하고,\\ 
두 번째 예제는 window 오브젝트를 두 번 반환한다는 결과를 보여줍니다.\\
\\
일반 함수를 사용하면, ''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>
함수로 작업할 때 이러한 차이점을 기억하십시오.\\ 
때로는 일반 함수의 동작이 원하는 것이지만, 그렇지 않은 경우 화살표 함수를 사용합니다.\\




{{tag>오션 Javascript Arrow Function}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
