[JavaScipt] Arrow function

Arrow function

---

함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법 화살표 함수(arrow function)를 알아보겠습니다.

 

 - function 키워드를 생략할 수 있음

 - 파라미터 정의 부분과 코드 블록 사이에 화살표(=>)가 온다

 - 코드 블록 안에 코드가 한줄이고, 그 코드가 return이면 return 키워드를 생략할 수 있고 중괄호를 삭제 할수있음.

 

<script>
  // 함수 선언식
  function hello(name) {
    return "Hello " + name;
  }

  console.log(Hello("Kim"));

  // 화살표 함수
  const arrowHello = (name) => "Hello " + name;

  console.log(arrowHello("Kim"));
</script>

 

연습

<script>
  let drinkList = [
    {
      name: "아이스아메리카노",
      price: 1000,
    },
    {
      name: "마라멜마끼야또",
      price: 1400,
    },
    {
      name: "커피",
      price: 700,
    },
    {
      name: "둥글래차",
      price: 1200,
    },
    {
      name: "사이다",
      price: 1000,
    },
  ];

  // function 표현식을 사용하여 filter 사용
  let availableProduct = [];
  const inputCoin = 1000;
  availableProduct = drinkList.filter(function (drink) {
    return drink.price <= inputCoin;
  });

  console.log(availableProduct);

  // arrow함수를 사용하여 filter 사용
  const availableDrinkList = drinkList.filter(
    (drink) => drink.price <= inputCoin
  );
  console.log(availableDrinkList);
</script>

 

참고자료

https://ko.javascript.info/arrow-functions-basics