리팩토링 사례 화살표 함수(arrow function)를 사용한 익명 함수

화살표 함수(arrow functions)를 사용하는 이유는 주로 다음과 같은 이점이 있기 때문입니다:

간결한 문법: 화살표 함수는 함수를 간결하게 정의할 수 있어 코드의 길이를 줄이고 가독성을 향상시킵니다. 특히 단일 표현식의 함수인 경우 중괄호({})나 return 키워드를 생략할 수 있습니다.
가독성 향상: 화살표 함수는 함수의 목적을 더 명확하게 전달할 수 있습니다. 짧고 간결한 함수를 정의함으로써 코드를 이해하기 쉽게 만듭니다.
this 바인딩: 화살표 함수는 자체적인 this를 가지지 않고, 주변 스코프의 this를 상속받습니다. 이로써 this의 동작을 예측하기 쉽게 합니다. 일반 함수에서는 this의 동작이 보다 복잡하고 혼란스러울 수 있습니다.
간편한 매개변수 사용: 화살표 함수를 사용하면 매개변수를 괄호로 둘러싸지 않아도 되는 경우가 있어 함수 호출을 간결하게 만듭니다.
화살표 함수는 주로 간단한 작업을 수행하는 익명 함수나 콜백 함수를 정의할 때 특히 유용합니다. 그러나 모든 상황에서 사용하기에는 적합하지 않을 수 있으므로 상황에 따라 일반 함수와 함께 사용하는 것이 좋습니다.

 

 

내 코드 

 

const bills = [1,2,3,10,50,90,100,55,77,7];

function calculateTip (amount) {

  if(amount >= 30){

    return (amount * 0.15).toFixed(2);

  } else{

    return (amount * 0.20).toFixed(2);

  }

}

const tips = bills.map(calculateTip);

console.log(tips);

 

 

리팩토링 (화살표함수, 삼항연산자) by 상원님. 

 

const bills = [1,2,3,10,50,90,100,55,77,7];

function calculateTip (cost) {

return cost >= 30 ? cost * 0.15 : cost * 0.2;

}

const tips = bills.map((a) => calculateTip (a));

console.log(tips);

 

이렇게 map 함수 내에서 화살표 함수를 사용하는 것은 배열의 각 요소에 대해 특정 작업을 수행하는 일반적인 패턴입니다.

 

네, 맞습니다. (a) => calculateTip(a)와 같은 화살표 함수를 map 함수 내에서 사용할 때, (a)는 map 함수가 배열의 각 요소를 반복하면서 현재 요소를 가리키는 매개변수로 사용됩니다. 이렇게 사용하는 이유는 map 함수 내에서 각 요소를 변환하거나 처리하기 위해서입니다.

(a)는 map 함수의 내부에서 현재 처리 중인 bills 배열의 요소를 나타냅니다. 화살표 함수 내에서 이렇게 매개변수를 사용하면 각 항목을 calculateTip(a)와 같이 calculateTip 함수에 전달하면서 계산할 수 있습니다.