목차

JavaScript 화살표 함수 정리

  • description : JavaScript 화살표 함수 정리
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2022-12-22 Thu


JavaScript 화살표 함수 정리

Syntax

param => expression
 
(param) => expression
 
(param1, paramN) => expression
 
param => {
    statements
}
 
(param1, paramN) => {
    statements
}


매개변수 내부에서 Rest parameters, default parameter, 그리고 destructuring을 사용하는 것이 지원되며, 항상 소괄호가 필요합니다.

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({a, b} = { a: 10, b: 20 }) => expression


화살표 함수 변환 과정

<!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>

Arrow function expressions
JavaScript Array filter()
Array.prototype.filter()
jQuery - Traversal - Filter
[JavaScript]배열에서 특정 값의 개수