understanding the complexity of the code from freecodecamp

Viewed 234

this question is not meant to find a solution for the task but to understand as the title says. I could not categorize the question. Without further ado. I began practicing Javascript on the website freecodecamp.org last month. My main concern is the set up of the function:

var someObj = {
  propName: "John"
};

function propPrefix(str) {
  var s = "prop";
  return s + str;
}
var someProp = propPrefix("Name"); // someProp now holds the value 'propName'
console.log(someObj[someProp]); // "John"

What I do not understand is the 'function'-part. What does it return? The return statement returns 's' with its value "prop" and 'str'. But what value does 'str' hold? Is it the whole content of the function propPrefix? Idont seem to be able to wrap my head around that.

4 Answers

'Name' is a paramter and is handed over by the calling of the function.

var someObj = {
    propName: "John"
}; //                +-------+
//                   v       |
function propPrefix(str) {// | 
    var s = "prop"; //       |
    return s + str; //       |
} //                         |
//                           ^
var someProp = propPrefix("Name"); // hand over 'Name' to the function. it became `str`
console.log(someObj[someProp]);

function propPrefix take a single argument str. propPrefix always returns 'prop' + str;

function propPrefix(str) { // function propPrefix take a single argument 
  var s = "prop";
  return s + str;
}

now we call function propPrefix with argument "name", so str takes value of "Name"

var someProp = propPrefix("Name"); 

this function call can be visualized as

function propPrefix("Name") { // function propPrefix take a single argument 
  var s = "prop";
  return s + "Name"; // that will "propName"
}

another example

var someProp = propPrefix("AnotherProperty"); 

means that str now take value of "AnotherProperty", so you can imagine the function like this

function propPrefix("AnotherProperty") { // function propPrefix take a single argument 
  var s = "prop";
  return s + "AnotherProperty"; // that will "propAnotherProperty"
}

You can pass some values (referred as parameters) to your functions. In this case function propPrefix(str) has a perimeter named str. At the time of calling this function you will have a value (referred as argument) to this function. In this case propPrefix("Name") you are sending "Name" as an argument. You can read more about JavaScript functions from this article

In your code

var someObj = {
  propName: "John"
};
function propPrefix(str) {
  var s = "prop";
  return s + str;
}
var someProp = propPrefix("Name"); // someProp now holds the value 'propName'
console.log(someObj[someProp]); // "John"
  • var someProp = propPrefix("Name"); // we are initializing someProp to value returned from functioncall - propPrefix("Name")
  • propPrefix("Name") // here we are making function call with parameter "Name" so it will be passed
  • function propPrefix(str) { //here function is receiving the parameter value "Name" and its assigned to str i.e str value will be "Name"
  • var s = "prop"; // here we are initializing the variable s to "prop"
  • return s + str;//here we are concatinating s variable with str variable so s's value is "prop" and str value is "Name" concatination gives "propName" and its returning this value;

  • var someProp = propPrefix("Name");// propPrefix returned "propName" so it will be assigned to someProp variable so someProp value is "propName"

  • We can access the value of a property using [ ] notation object["propertynamehere"] // no need for quotes

  • let obj={propName:"Bro";}

  • someObj[propName] will return "Bro"

  • console.log(someObj[someProp]); equivalent to console.log("bro");

Related