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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== JavaScript 화살표 함수 정리 ======
<WRAP left notice 70%>
  * description : JavaScript 화살표 함수 정리
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2022-12-22 Thu
</WRAP>
<WRAP clear></WRAP>
\\

====== JavaScript 화살표 함수 정리 ======

==== Syntax ====
<code javascript>
param => expression

(param) => expression

(param1, paramN) => expression

param => {
    statements
}

(param1, paramN) => {
    statements
}
</code>
\\
매개변수 내부에서 Rest parameters, default parameter, 그리고 destructuring을 사용하는 것이 지원되며, 항상 소괄호가 필요합니다.\\
<code javascript>
(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({a, b} = { a: 10, b: 20 }) => expression
</code>
\\
화살표 함수 변환 과정\\
<code javascript>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The filter() Method</title>
</head>
<body>
    
    <h1>JavaScript Arrays</h1>
    <h2>The filter() Method</h2>

    <p>Get every element in the array that has a value of 18 or more:</p>

    <p id="demo"></p>

    <script>
        const ages = [32, 33, 16, 40];

        const filtered = ages.filter(function(age){return age >= 18;});
        console.log(filtered);

        const filtered2 = ages.filter((age) => {return age >=18;});
        console.log(filtered2);

        const filtered3 = ages.filter((age) => age >= 18);
        console.log(filtered3);

        const filtered4 = ages.filter(age => age >= 18);
        console.log(filtered4);
        
        // 출력 결과 모두 동일
        // (3) [32, 33, 40]
        //  0: 32
        //  1: 33
        //  2: 40
        // length: 3
        // [[Prototype]]: Array(0)

    </script>
</body>
</html>
</code>












===== Ref Link ====
[[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions|Arrow function expressions]]\\
[[https://www.w3schools.com/jsref/jsref_filter.asp|JavaScript Array filter()]]\\
[[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter|Array.prototype.filter()]]\\
[[https://frhyme.github.io/jquery/jQuery11_Traversal_Filter/|jQuery - Traversal - Filter]]\\
[[https://developer-talk.tistory.com/114|[JavaScript]배열에서 특정 값의 개수]]\\



{{tag>오션 Javascript 화살표_함수_정리}}

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

사용자 도구

사이트 도구

문서 도구