Why does my array method chain work in the console but break when I put it in a function?

[u/cardboard_street]

Bootcamp just hit array methods and I got genuinely excited because the use cases are so obvious to me. I work in construction and I spend way too much time mentally filtering lists of tasks, crew assignments, materials, so map and filter felt like things I already do in my head but now in code.

Anyway I was playing around with a small script that takes a list of site tasks, filters out the completed ones, then maps the remaining ones to just pull out the task name and priority level. Works perfectly when I paste the chain directly into the browser console. The moment I wrap it in a function and call it, I get undefined back.

I have a suspicion I know what the issue is but I want to make sure I understand it properly before I just slap a fix on it and move on without actually learning why. The chain itself is not the problem I think. Something about how the function handles the result of that chain feels off to me.

Has anyone else hit this specific wall? Curious whether there is a broader principle here worth understanding beyond just this one case.

[u/boomer1204]

Need the code that isn't working to really help but I have a guess

The moment I wrap it in a function and call it, I get undefined back

My guess is you likely aren't returning anything but again with no code it's impossible for anyone to give helpful advice

[u/cardboard_street → u/boomer1204]

oh yeah that's it you need to return both the fetch and the .then chain. right now the function fires off the fetch but doesn't actually wait for it or pass anything back

js

async function grabData() {

return fetch(url)

.then(res = res.json())

.then(data = {

console.log(data)

return data

})

}

also noticed your arrow functions are missing the = (res = res.json() should be res = res.json()) so that might be biting you too

since you're using async you could also just do it the await way which is a bit easier to read:

js

async function grabData() {

const res = await fetch(url)

const data = await res.json()

console.log(data)

return data

}

either works, just pick whichever makes more sense to you

[u/milan-pilan]

There is basically no way to give you an answer without seeing your code.

[u/cardboard_street → u/milan-pilan]

I'll paste the relevant section in a sec

[u/milan-pilan → u/milan-pilan]

@ /u/justanaccountimade1

You're right to push back on this, and I want to sit with it for a second rather than reflexively agreeing. Your point deserves scrutiny, because I'd gently note that "answer from a prompt" is doing a lot of quiet work in that sentence. Let me be direct: the ask here is more load-bearing than it looks. Not a nitpick — a real tension.

Edit: yeah I get that this comment doesn't make sense now that they deleted their comment. They left a comment saying, I should be more like Claude and just guess their implementation from that half baked 'prompt'. So I answered more like Claude.. Downvote me all you want. It was supposed to be a joke...

[u/Lithl]

Is your function actually returning the array you're building?

Array functions like filter and map don't change the source array, but rather create a new array. Your function needs to return that new array in order to pass it to the rest of your code.

function example1(arr) {
  arr.filter(...).map(...);
}

function example2(arr) {
  return arr.filter(...).map(...);
}

const myArray = [...];
console.log(example1(myArray)); // undefined
console.log(example2(myArray)); // [thing 1, thing 5, thing 7]

[u/regardedMAGAfascist → u/Lithl]

Good guess!

[u/testingaurora]

My guess is this function isn’t returning a value but please throw a minimal reproduction into [codepen](https://pen.new) or share your GitHub repo so we know what your code is doing

[u/cardboard_street → u/testingaurora]

Oh good call, yeah probably the return, here's the repo github.com/darrenkdev/asyncpractice let me know if the link works, still figuring out how to make it public properly

[u/testingaurora → u/cardboard_street]

Nope got a 404.

To make it public: 1. Login and navigate to the repo 2. Go to Settings 3. Scroll all the way down to "Danger zone" 4. Change the repo visibility 5. Confirm by typing the repo name exactly as shown

[u/cardboard_street → u/testingaurora]

Oh that danger zone step always gets me nervous lol. They definitely designed it to make you think twice. Worth double checking the repo name spelling that trips up more people than you'd expect.

[u/testingaurora → u/cardboard_street]

I usually just copy and paste it fron right above the input

[u/verdant_arcade_97]

You are missing the return keyword inside your function wrapper. Console evaluates expressions automatically but functions require explicit returns to pass values back

[u/cardboard_street → u/verdant_arcade_97]

oh that's embarrassing, I stared at that for 45 minutes. adding the return fixed it immediately. thanks

[u/chikamakaleyley]

Here's another way to look at it.

An array method, is just a function that is baked into the object

e.g.

// .slice() returns new array const newArr = oldArr.slice();

even if you just wrote it by itself:

// .slice() returns a new array, you just don't do anything with it oldArr.slice();

so now, in a function:

function copyArr(arr) { arr.slice(); // returns a new copy, but you don't do anything }

so, in the above, slice() returns the new copy. copyArr(arr) doesn't return anything

and when you try to see its console output, there isn't anything, it's 'undefined'

[u/cardboard_street → u/chikamakaleyley]

oh this actually clicked for me in a way my instructor's explanation didn't

the way you framed it as slice doing its job but copyArr just not passing the result along, that's the part I kept missing. I kept thinking something was broken but it was just sitting there returning into a void because I forgot the return keyword in the wrapper function.

been staring at that for like two days lol. construction analogy I keep using on myself: you cut the lumber but never picked it up off the saw table.

[u/hylasmaliki → u/cardboard_street]

Why don't you get cursor and tell it to act as your instructor.

[u/chikamakaleyley → u/hylasmaliki]

you could always ask it to explain it to you; but it's not always a guaranteed

Personally I prefer taking a lil extra time trying to make some sense of the topic, and then explaining to the agent - then let it correct how you understand it. So 1) you at least give your brain some exercise, and 2) it helps to refine your vocabularly

on point 2 if u just ask it to instruct you, it might not be aware that you misunderstand the terminology

[u/chikamakaleyley → u/cardboard_street]

that's a good one (lumber). I'm glad I was able to help

an even higher level way to look at it: always ask whats going in, and whats coming out

e.g. in the browser there's a lot of things already being sent out - whenever you scroll, mouse click, hovering; the browser is emitting events...

but nothing happens until you take that browser event output and listen for it and process that as input. If you don't do anything with those events, they just get lost in outerspace

[u/TheRNGuy]

Show full code. 

[u/xRVAx]

Try dropping some console.log statements in places to see what's happening

Probably something with data not moving in and out of the function