Challenge 20 - Map Function Help


#1

As we near the end of the challenge I am really trying to push my learning and am attempting to use the .map() suggestion as I was unable to get the filter/map working in the past.

Any suggestions with the following? Please note I copied my howDangerous() to accept a value rather than a cell reference (i.e A2) to help reduce the complexity of my goal. That way when called I can simply pass the value rather than having to convert to a cell reference for each value prior to checking its contents.

var rockSymbol = "^";
var currentSymbol = "~";
var shipSymbol = "v";

function howDangerousValue(value){
  if (value === rockSymbol){
    return 100;
  } else if (value === currentSymbol){
    return 50;
  } else {
    return 0; 
  }
}

function safetyReport(){
var safetyGrid = GRID.map(row => {
  GRID[row].map(column => howDangerousValue(column));
})
return safetyGrid;
}

I was basing my safetyReport() on https://stackoverflow.com/questions/45583925/using-map-function-for-two-dimensional-array-react?rq=1

Current Error: Your code could not run: “Cannot read property ‘map’ of undefined”

Any help or suggestions would be greatly appreciated!! Thanks!


#2

in your map’s callback function, you need to return howDangerousValue().

If I recall correctly, if you don’t do any return in the map’s callback function, it won’t have anything.


#3

Hey there are a couple issues with your code. The first is that row in GRID.map(row is the entire row array. You are then using that as an index for the GRID like GRID[row] which looks like GRID[["","","",...]] which equals undefined. Then you’re calling map on undefined which is where your error is from


#4

@kpalos I thought I read somewhere that arrow functions allow for the functions to return without having to actually type in the return statement. I’ll see if I can find a reference to what I was reading, most likely I am using or misinterpreting this idea. When I try to insert return the error changes to Unexpected Token.
(EDIT: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions section titled “Shorter Functions”-- am I misinterpreting this?)

@MrCurvyCurves I have tried my best to correct with your suggestions and now get the following when I log the result:
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

function safetyReport(){
var safetyGrid = GRID.map(row => {
  row.map(column => howDangerousValue(column));
})
return safetyGrid;
}

I am trying to get the map function to work on the first object in the GRID array (similar to the double mapping seen here Silly Challenge 13 Error ).

With the above I believe I am passing the first element of our array (which we interpret as a row, GRID[0]) forward to the second mapping function to then run the howDangerousValue() on the contents of the row (which would contain GRID[0][0] to GRID[0][9]). I would expect this to then run through all of the rows in the primary array to return an array of a similar structure as GRID (but with the contents replaced with the integer equivalent and stored into the array safetyGrid).

I had an iterative loop structure working this morning, but I fell back to this type of approach during challenge 13 and I was really hoping to make sense of the mapping approach to then allow for me to understand the filter method (which I am still struggling to understand! lol)

Thanks for the tips so far, any other suggestions?


Silly Challenge 13 Error
#5

The howDangerous function expects a cell ie ‘A1’ you currently are passing it the actual value ie ‘’ , ‘~’, ‘^’, ‘V’.


#6

@ntmk You are correct, which is why I created a second function called howDangerousValue() [see first post] to allow for the direct comparison of both value and defined symbol without having to worry about coordinate conversions at this time. My focus currently is simply to understand the mapping function.

My original howDangerous() does accept a coordinate as an argument as requested by the previous challenge.


Challenge 20: Not Producing Correct Result
#7

I took a read of this and since you’re using a block body in one of your maps, it might not be returning the value.


#8

yeah i double checked your code, you need to add return in the first level of map

return row.map(column => howDangerousValue(column));

#9

Also a shortcut is to return the GRID.map(...) instead of storing in safetyGrid and returning safetyGrid.


#10

Below is your code with fixed error. If you are using brackets in your map() function you have to use return, otherwise it will be undefined. Plus you have to apply second map function on your argument in the first callback.

var rockSymbol = “^”;
var currentSymbol = “~”;
var shipSymbol = “v”;

function howDangerousValue(value){
if (value === rockSymbol){
return 100;
} else if (value === currentSymbol){
return 50;
} else {
return 0;
}
}

function safetyReport(){
var safetyGrid = GRID.map(row => {
return row.map(column => howDangerousValue(column));
})
return safetyGrid;
}

In case of this solution you don’t have to use return. But it might be harder to read.

function safetyReport() {
return GRID.map(row => row.map(cell => (cell === “^”) ? 100 : ((cell === “~”) ? 50 : 0)));
}


Challenge 20: Not Producing Correct Result
#11

Thanks everyone for the help to figure this out, super grateful. Happy to be part of this community :slight_smile: Learning lots!


#12

Where are you getting the variables row and column in this example?


#13

zhaverzky,

Those are not variables.

Lets break it down on a simpler example and let’s use an older syntax.

array.map(function (element) {
return element*element
});

It will return a new array where each item was squared.

You can change “element” to whatever you want and it will work. It is just something you’re using to refer to an item inside the array you’re mapping.

Using newer syntax

array.map(element => element*element);

you can nest them inside one another btw, thats how you achieve the solution to problem 20.

array.map(element => element.map(insideElement => do something));


#14

Thank you so much! I was having trouble understanding the syntax of the map method and you explained it beautifully. And thanks to you I learned about ternary operators. :smile:


#15

I am glad it helped you. Reading official documentation on map() can be confusing as hell. If you are interested in expanding your knowledge on functional programming and in Javascript in general, I strongly recommend browsing this course (it’s free) - https://www.learnenough.com/javascript-tutorial/javascript/functional_programming/map

I am a beginner myself and I was just blown away by the author’s ability to deliver new information in a form that is actually easy to understand.

Anyway, good luck on your journey:)


#16

I was trying this way, but it wasn’t working, you know why we need to assign directly?

let gridSafety = […GRID];

gridSafety.map(row => {return row.map(cell => howDangerousValue(cell))});

return gridSafety;
}

Also, why we need the {return…} inside GRID.map? I thought just using => would work. I’m just curious, thanks!


#17

Hey! In this case your function doesn’t work because map() doesn’t mutate the array. What this means is that when you return “gridSafety” it returns the initial array - “let gridSafety = […GRID]”.

In order for it to work you need to either return “gridSafety.map()…” directly like this

let gridSafety = […GRID];

return gridSafety.map(row => {return row.map(cell => howDangerousValue(cell))});
}

or assign “gridSafety.map()…” to something and then return its value

let gridSafety = […GRID];
let result = [];
result = gridSafety.map(row => {return row.map(cell => howDangerousValue(cell))});
return result;
}

Hope it answers your question.

Regarding the “return” inside the map(). Since there are so many ways to write down a map() function, all you need to remember is that if you use curly brackets “{}” inside your map() - you have to write return inside. If you don’t have curly brackets you don’t have to use return.

Example 1 - no brackets

gridSafety.map(row => row.map(cell => howDangerous(cell)));

Example 2 - with brackets

gridSafety.map(function (row){
return row.map(function (cell) {
return howDangerous(cell)
}
})

or this

gridSafety.map(row => {
return row.map(cell => {
return howDangerousValue(cell)}));

Pls double check my code, I didn’t have time to test it when I was writing it. But it should give you an idea. If you still have any questions do not hesitate to ask them :handshake: good luck!