Part 10. 함수의 기본 개념 2

화살표 함수(Arrow Function)

ES6에 추가된 새로운 함수 식으로 화살표 함수(arrow function)가 있습니다.
화살표 함수는 함수 식으로 표현될 때 사용될 수 있으며 기존 함수와 몇 가지 차이점이 존재합니다. (응용 편에서 자세히 다루겠습니다.)

기본형식은 다음과 같습니다. 

 

arrow function의 기본적인 식입니다 :

 

인수를 괄호 안에 적어주고 => 를 적어줍니다.
뒤에는 함수 블록처럼 작동할 식을 적으면 됩니다.

 

arrow function에서 인수를 생략한 식입니다 :

 

인수가 하나일 때 괄호를 생략할 수 있습니다 :

 

인수가 다수일 땐 괄호를 생략할 수 없습니다 :

 

명시적 return값을 이용한 식입니다 :

 

if문을 이용해 값을 비교한 후 return값을 구할 수도 있습니다. 

 

 

---

 

 

콜백 함수

함수를 값으로 취급하기 때문에 함수는 인자로도 반환 값으로도 전달될 수 있습니다.
이를 이용해 다양한 응용을 만들 수 있습니다.

함수를 인자로 다른 함수에게 넘기고 불려진 함수 안에서 인자로 받은 함수를 호출하는 것을 콜백 함수라 부릅니다.
함수의 호출을 호출자가 하는 것이 아니라 다른 함수에게 위임하는 것입니다.

 

함수 호출 위임은 다양한 상황에서 사용되어 기본 형태를 많이 연습해야 응용할 수 있습니다.

 

함수 호출을 위임하는 경우

-  계산의 결과가 너무 오래 걸려 기다리는 것이 비효율적일 때

-  어떤 코드가 언제 실행되어야 할지 코드 상으로 특정할 수 없을 때

-  호출할 함수를 특정할 수 없을 때

 

 

함수 호출을 위임한 경우를 나타냈습니다 :

 

계산이 오래 걸리는 함수를 setimeout을 이용해 2초 뒤에 결괏값이 나올 수 있도록 만들었습니다.
이를 통해 첫 번째, 두 번째 결괏값이 계산을 기다리지 않고 결과를 나타낼 수 있습니다.

 

 

데이터 기반으로 호출할 수 있는 예제를 만들어 보겠습니다.

 

데이터 기반으로 호출할 수 있는 식입니다 :

 

우선 setcurrentweapon이라는 함수를 만들고 type, bullet의 인수를 만듭니다.
이후 만들어 낼 currentweapon의 객체의 type과 함수의 type의 값이 같다고 지정해 둡니다.
bullet도 똑같이 지정합니다. 이후 지금 가진 무기의 정보를 적어줍니다.
바꿀 권총에 대한 정보를 객체로 적어주고 setcurrentweapon 함수에 인수를 각각 지정합니다.

 

데이터 기반으로 호출할 수 있는 식입니다 :

 

변수에 바꿀 무기의 이름을 담아주고 if문을 통해서 변수의 무기가 있는지 확인합니다.
만약 있다면 currentweapon을 통해 type와 bullet의 값을 빼옵니다.
없다면 '등록된 무기가 없습니다.'라는 문장이 결괏값으로 나타날 것입니다.

 

 

---

 

 

반환 값으로의 함수

함수가 값으로 반환될 수 있습니다. 
반환된 함수는 함수이기 때문에 호출될 수 있습니다.

함수를 인자로 취하거나 함수를 반환하는 함수를 고차 함수(higer-order function)라 합니다.

 

 

함수를 값으로 반환한 예시입니다 :

 

person의 함수가 값으로 반환되었습니다.

 

 

커링(currying) 

: 인자를 여러 개 받는 함수를 분리하여, 인자를 하나씩만 받는 함수의 체인으로 만드는 방법이다.

 

커링을 이용한 식을 나타내었습니다 :

 

커링 전의 함수를 나타내면 
function salePrice(discountRate, price){
        return price - (price *(discountRate *0.01));
  }

console.log('여름 세일 - ' + discountPrice(30,56000));
console.log('겨울 세일 - ' + discountPrice(20,45000)); - 결과 값

 

 

이 식을 커링을 통해서 나타내면 순차적으로 나타낼 수 있습니다.

discountRate를 인수로 받는 함수 안에 price를 인수로 받는 함수를 넣어줍니다.

이후 return값을 적고 결과 값에 discountPrice(할인비율)(값)을 적어내면 됩니다.

 

이 식에서 공통되는 것이 discountPrice이므로 이를 변수로 넣어줍니다.

summerPrice = discountPrice(30), winterPirce = discountPirce(20)을 

결괏값에 대입해주면 좀 더 깔끔한 식으로 나타낼 수 있습니다.

 

 

참고자료 : http://woowabros-play-javascript.herokuapp.com/grammar/function

{ Code } Playground