{return} vs {var+console.log}


#1

For #9 Functions with two parameters, what I don't understand is why is this first code is acceptable and not the second:

// Write your function starting on line 3

var perimeterBox = function(length, width) {
return length + length + width + width;
};
perimeterBox(5,4);


// Write your function starting on line 3

var perimeterBox = function(length, width) {
var perimeter = length + length + width + width;
console.log(perimeter);
};
perimeterBox(5,4);

The first input gives you the correct output of 18, and the OK to move on to the next lesson.
The second input gives you the correct output of 18, but also gives you the number 4 right under the 18, and this error message: "Oops, try again. It looks like your perimeterBox function doesn't return the correct perimeter (4) for a width of 1 and a length of 1."

I would think either input should be acceptable and should produce the same thing.

Can anybody tell me why the second input doesn't work? Why does it return a second output line of 4?


Difference in output
#2

Return, is the correct keyword, which essentially further prepares your data for processing.


#3

@mdmas89,

+++ function talk

the FUNCTION talk

var myFunc = function( param1, param2) {
       //Begin of  anonymous FUNCTION-BODY
       //VARIABLE -myFunc- has an -anonymous function- assigned
       //this -anonymous function- has 2 PARAMETERS param1 and param2
       //param1 and param2 PARAMETERS are used 
       //as -local- VARIABLES throughout the FUNCTION-BODY

      console.log( param1 + " and " + param2 ) ;

      //End of anonymous FUNCTION-BODY
};

If you want to call/execute the anonymous function
you will have to add a pair of parentheses to the variable myFunc
like
myFunc();
As the anonymous function was defined
as having 2 parameters
you have to provide 2 arguments
in our case 2 string VALUES "Alena" and "Lauren"
like
myFunc("Alena","Lauren");

some quotes from the outer-world:

**argument is the value/variable/reference being passed in,
parameter is the receiving variable used within the function/block**

OR

**"parameters" are called "formal parameters",
while "arguments" are called "actual parameters".**


#4

I deleted the duplicate of this post, one post per question should be sufficient.

About the question. The easy answer would be that the SCT (test function) requires the use of return and not of console.log.

"Oops, try again. It looks like your perimeterBox function doesn't return the correct perimeter (4) for a width of 1 and a length of 1."

For the longer answer:
console.log is an output to the screen. Whereas return is a keyword used in function to serve the purpose of a) return to the calling scope and b) to return an output to the calling scope (if there is one).

So for example in the first version the value of

perimeterBox(5,4);

would be 18. Whereas in the second version 18 is printed to the screen by console.log but the value of

perimeterBox(5,4);

in this case would be undefined because this function does not return a value.

So the reason you see 18 in the first version is only partially done by return it is rather a feature of the console that echoes the last value in your code which in this case happens to be the returned value of 18. If you'd a pointless new last line to your code this value on the screen would be gone. Also you can see that it is a different output when you use a string as last value as the echo also echoes the ' ' whereas console.log won't do this.

So what probably happens in the test function is that there is a case run something like this:

if ( perimeterBox(1,1) ===4)

as said in the first version perimeterBox(1,1) would now have the value of 4 and so you can pass whereas console.log would show you the result but the value is undefined and so you fail. Also as return is not an output to the screen you don't even see that test case whereas for the console.log you see every run of your function even those that were not done by yourself.


#5

@mdmas89,

function with 1 parameter using return-statement

var myFunction = function( param1 ) {
       //Begin of FUNCTION-BODY
       //myFunction =function= has 1 PARAMETER param1
       //this param1 PARAMETER is used as a -local- VARIABLE
       //throughout the FUNCTION-BODY

      return param1;

      //End of FUNCTION-BODY
      };

you have defined a myFunction function
which takes 1 parameter param1
this param1 parameter is used
as a variable throughout the FUNCTION-BODY.

If you want to call/execute this myFunction function
and this myFunction function was defined
as having 1 parameter param1
you will have to provide 1 argument
in our case a "number VALUE" 4
myFunction( 4 );

some quotes from the outer-world:

**argument is the value/variable/reference being passed in,
parameter is the receiving variable used within the function/block**

OR

**"parameters" are called "formal parameters",
while "arguments" are called "actual parameters".**

============================================

As you are using the return-statement in your myFunction function
you will only get a return-value no-display.
You can however capture this return-value in a variable
and then use the console.log()-method to do a display.

var theResult = myFunction( 4 );
console.log( theResult );

OR directly

console.log( myFunction( 4 ) );

Why return is better than console.log
#7

Ok thank you very much. Your reply was very helpful. I appreciate it.

The only thing I'm still a little confused about is the use of console.log in lessons #2 and 5.

This is number 2:
// This is what a function looks like:

var divideByThree = function (number) {
var val = number / 3;
console.log(val);
};
divideByThree(27);

That's number 5:
// Nicely written function:
var calculate = function (number) {
var val = number * 10;
console.log(val);
};

It seems to me that the only difference between the code in these functions and the code in the second input of my original post is that these functions are only dealing with one parameter, as opposed to two. That's the obvious difference. The other is what you talked about that #9 SCT requires the use of return and not console.log. I do understand how console.log is an output to the screen whereas return is not an output to the screen and is a feature of the console that echoes the last value in you code.

Btw my first post was a reply to a different topic. This is my first time using the forum. So after posting the reply I realized shortly after that it may be better to create an entirely new topic.


#8

Hey @mdmas89 In Lesson 2 you really didnt have to use console.log() to log the value you could have simply just used the return statement like this:

var divideByThree = function (number) {
    var val = number / 3;
    return val
};

And for lesson #5 same thing you could have just used the return statement like this:

var calculate = function (number) {
    var val = number * 10;
    return val;
};

Hope this helped.


#9

Btw my first post was a reply to a different topic. This is my first time using the forum. So after posting the reply I realized shortly after that it may be better to create an entirely new topic.

Yes, a new topic for new question is better. But when you do so just delete the old question.

On the question it self: Well as said what is correct or wrong is determined by the SCT (submission correctness test) but usually the instructions give hints on what to use:

print, log, console.log aso -> console.log
return -> return

This has absolutely nothing to do with the number of parameters. Really nothing. The only thing that changes with more than one parameters is that now the order of arguments and parameters matters:

var name = function(para1,para2,para3,..) { para = parameters
    code 
};
name(arg1,arg2,arg3,...); // arg = arguments

and here they are assigned like this:

para1 = arg1
para2 = arg2
para3 = arg3

whereas here:

name(arg3,arg1,arg2,...);

it would be:

    para1 = arg3
    para2 = arg1
    para3 = arg2

Also if you keep one of them blank e.g. name(arg3,arg1); This would result in the last of them being undefined:

    para1 = arg3
    para2 = arg1
    para3 = undefined

So if you want an optional parameter it should be the last and not one in the middle. Anyway these are important things to know about multiple parameters but it has nothing and I repeat nothing to do with how you output something.

The output is more or less determined on what you want to achieve with it. If the expected result is to show something, display a text or something like this, then you probably use functions that communicate to a display in this case console.log on the other hand if you want to have a helper function that computes stuff that can be used in the program later e.g.

var square = function(x){
    return x*x;
}

you could also display this to the console but you can also use this in your code as well.

As said above the functions with return have a value that you can use whereas the function with console.log have not.

maybe run a few tests about this one labs.codecademy.com or elsewhere where you can test code.
For example what is the value of a function call

console.log(functioncall());
console.log(console.log("test"));

value after return

"test"
undefined

or two function calls (what is shown on the display)

functioncall()
functioncall()

2 function calls but only one output due to the console echo

functioncall()
functioncall()
var name = "test"

No output at all

as said just play a bit with this features to get a feeling on how they can be useful.
The problem in the exercise is that they are so short that the function is mostly the only thing you build so the target is mostly to output things so return comes a bit short I guess. An example for a function using return would be Math.random(), ok you cannot see the source code of it but what you see is the effect you get a value returned and it is in no way meant to be an output but more like a helper function that returns something to you program instead of to the screen.

Ok, guess that is enough information for one post. If you have specific questions about one of the topics feel free to ask!

PS: The blurred stuff are Spoilers just wanted to see if this new feature works. :slightly_smiling:


#10