为什么说 calcAverage 不是 function，而它是

Question

I created a simple function to calcluate the average of 3 numbers:

let calcAverage = (v1,v2,v3) =>{

calcAverage = v1+v2+v3 / 3;

return calcAverage
}

const d1 = calcAverage(44, 23,71)
const k1 = calcAverage(44, 23,71)
console.log(d1)

if you comment out: const k1 = calcAverage(44, 23,71) then you will notice that the const d1 = calcAverage(44, 23,71) works, but why does it say 'Uncaught TypeError: calcAverage is not a function for this line of code: const k1 = calcAverage(44, 23,71) ? this doesn't make any sense to me. how do I make both of them work? and why is it even saying that calcAverage is not a function i the first place?

Answer 1

Because you reassigned calcAverage in this line

calcAverage = v1+v2+v3 / 3;

which made calcAverage a number value instead of a function

why don't you just return this calculations immediately

return v1+v2+v3 / 3;

Answer 2

When calling calcAverage for the first time, it indeed is a function. However, you overwrite it within the function itself to be a number :

calcAverage = v1+v2+v3 / 3;

Simply change the variable name inside the function to make it work as you expect:

const calcAverage = (v1,v2,v3) =>{

    const result = v1+v2+v3 / 3; 

    return result;
}

const d1 = calcAverage(44, 23,71);
const k1 = calcAverage(44, 23,71);
console.log(d1);

---

Update:

To clearly see the issue, you can log out the type of calcAverage for each of the function calls:

 let calcAverage = (v1,v2,v3) =>{ calcAverage = v1+v2+v3 / 3; return calcAverage; } console.log("Type before first call: ", typeof calcAverage); const d1 = calcAverage(44, 23,71); console.log("Type before second call: ", typeof calcAverage); const k1 = calcAverage(44, 23,71);

This nicely shows the advantage of using const over using let for actual constants, by the way. If you would have declared calcAverage as a const , you wouldn't have run into this issue.

Answer 3

i found a variable inside the function with the same function name. so when you call calAverage second time it is not a function instead it is a resultof of some calculation. also i made function as a constant one

 const calcAverage = (v1, v2, v3) => { let calcAverageVal = v1 + v2 + v3 / 3 return calcAverageVal } const d1 = calcAverage(44, 23, 71) const k1 = calcAverage(44, 23, 71) console.log(d1)

Answer 4

Solution to this problem is use a different variable name to hold the calculated value inside the calcAverage arrow function.

let calcAverage = (v1,v2,v3) =>{

   let calcValue = (v1+v2+v3) / 3;
   // it is recommended you bracket your numerator so as not to confuse the calcuation
   // because leaving it as v1+v2+v3 / 3 will solve the maths as v1+v2+(v3/3)

   return calcValue;
}

const d1 = calcAverage(44, 23,71);
const k1 = calcAverage(44, 23,71);
console.log(d1)

As for me, i did suggest you use const when declaring an arrow function. It helps to make the function unmanipulatable

Answer 5

It is all about scope dependency

1. in a first time you define calcAverage as a function
2. then inside this function you redefine this elemenent as a number

=> on the first call: it is a function
=> on the second call: it is no more a function (it is a number)

is you want to avoid anytime this kind of problem, you have to always declare all of your variables

And also it is recommanded for begginners to make your code on strict mode ('use strict'; directive) wich is help you to avoid this kind of mistakes

sample code:

 'use strict'; // on first line, for all the code let calcAverage = (v1, v2, v3) => { let calcAverage = v1 + v2 + v3 / 3; // define a 'new' locale variable //╙╨╨─────────────────────────────────// within the scope of this function return calcAverage } const d1 = calcAverage(44, 23, 71) const k1 = calcAverage(40, 23, 71) console.log(d1) // 90.666... console.log(k1) // 86.666...