Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialZachary Reed
9,214 PointsI'm having trouble understanding how when you created the parameter 'data' in the .then() method
I'm having trouble understanding how when you created the parameter 'data' in the .then() method, the program knew that that referred to the JSON data. Why don't you have to declare like (var data=response.json ) for example before you can use the parameter data? Could you have named that parameter anything and it would still return the json data or is "data" like a keyword?
12 Answers
David Pierce
28,389 PointsI was having trouble understanding this as well so I hope this helps someone. From my understanding:
- fetch() returns a Promise.
- Promise resolves to a random dog breed image.
- The Promise has a "then" method(function of Object) by default.
- The then() method takes up to two arguments(resolve or reject).
- The then() method expects a callback function for the success, it is just how the method was created.
- The arrow functions are passed as arguments to the then() method. (helps to understand the difference between parameters and arguments)
- The then() method also returns a Promise Object just like fetch().
Jason Anders
Treehouse Moderator 145,860 PointsHi Zachary Reed
I feel you may be confusing variables
with parameters of a function
. Even with normal functions, you don't "declare" the parameter(s) of the function. For example:
function myFunction(parm1) {
return parm1;
}
Here, the parameter is named parm1
, but it wasn't declared anywhere. It's just the name for the parameter of the function.
Arrow functions are relatively new in JavaScript and do take some getting used to. I suggest some reading from the web. One place may be the MDN documentation on Arrow Functions.
Treehouse has a practice session and a workshop specifically focusing on Arrow Functions, as well as a couple courses dealing with all the new syntax in ECMAScript 2015 (ES6), which can be found here.
I hope this will help, but don't be discouraged. Arrow Functions are a bit of an acquired taste. :)
Keep Coding!
Paul Brubaker
14,290 Points'data' in this case represents the resolve value of the promise the then() method was called on, so does 'response'. The first argument passed to the then() method is a callback function whose parameter is this value.
Manoj Gurung
5,318 Pointsits the problem with teaching method; we have a simple question that has yet to be answered :(
Zachary Reed
9,214 PointsI just watched the intro to ES2015 and came back to this and I got it now. I couldn't figure out why the function didn't look more like this...
.then(data)=>{console.log(data)};
..And since I didn't know that information I could not figure out what the heck was going on!
But then I watched the part about arrow functions and it said arrow functions with one parameter don't need parentheses, and single line functions don't need brackets, which results in THIS!
.then(data=>console.log(data));
I've also been trying so hard the last couple of days to grasp callback functions and promises, so the idea of having a function be a parameter is weird to me. I still don't understand how the computer knows that you want to log the response to the fetch with literally ANY word that you put in place of data.
Zachary Reed
9,214 PointsI don't understand how 'data' hasn't been declared anywhere as avariable or as a function and yet it can still act as a function? Like in the code there isn't a var data=, let data=, const data=, or function data=... it just seems to come out of nowhere and somehow have meaning. I even changed data to a different name and it still worked
Dmitry Polyakov
4,989 PointsYou just have to remember the structure how to use it....
Zachary Reed
9,214 PointsAlright thank you man I think I just need to wrap my head around callbacks and promises more. It’s taking forever for me to grasp it I don’t know what I’m missing. I feel like I’m making it harder than it needs to be! 😂
Dmitry Polyakov
4,989 PointsUsually at first it seems hard, but after you have some practice you realize how easy it is...
Manoj Gurung
5,318 Pointshi Zacch, this is what i understood. We transformed the Fetch API return into a JSON data-- > then we worked on it by declaring that "whatever data was returned" into a name called "returnData", then we said- Hey just get me the message portion of this returned data by saying "returnData.message". Hope this is true and helps you understand it. Hopefully others can chime in if my supposition is not true.
Vaidehi S
5,731 PointsI am getting error when I enter .then(data)=>{console.log(data)};
What could be the issue?
Dmitry Polyakov
4,989 PointsVariables can have any names you like. Most common words are data, response....
Zachary Reed
9,214 Pointsyes, but don't variables have to be declared with either var, let, or const? In this video, it isn't...
Dmitry Polyakov
4,989 PointsReally, never thought of it.. in fetch you use them without var, let ot const.. fetch returns a promise.. and all these words represent data returned by the promise..
Dmitry Polyakov
4,989 PointsIt's not a variable. What's inside the parenthesis is a callback function. And all these words like data, response they are arguments in these callback functions.
jb38
7,012 Pointsjb38
7,012 PointsThank you very much David Pierce!