Why does “return” not return a value?

Question

cell(numX, numY) { this.cells.map((cell) => { if (numX == cell.opts.numX && numY == cell.opts.numY) { console.log(cell); return cell; } }); }

The code above definitely finds the necessary Cell (since console.log () prints what is needed). But return does not return this value. For me it remains unclear why the code below works as it should, but this code does not want to work. Please explain .

 cell(numX, numY) { let xcell; this.cells.map((cell) => { if (numX == cell.opts.numX && numY == cell.opts.numY) { console.log(cell); xcell = cell; return; } return; }); return xcell; }

By the way, I would like to add. It is necessary for me that when the necessary element is found, it would immediately return without forcing the cycle to go to the end (it is known that only one element can be found). Here the fact is that the search will be performed on a fairly large number of elements, and there is no need for extra checks here. Therefore, as soon as an item is found, you need to return it immediately. And Debug-Console in Chrome shows me that even after the element was found and the return worked, the cycle continues to run in search of other elements, which is fundamentally wrong, because return must not only return a value, but also stop the execution of the block in which he is (as far as I know).

Accepted Answer · 2017-03-05T18:06:48

You use the map method, which returns a new array , where each element is the result of a function call that you pass as a parameter

On a simple example

 const nums = [1, 2, 3, 4] const doubleNums = nums.map( n => n * 2 ) // doubleNums= [2, 4, 6, 8]

What happens in this code: we pass the map function n => n * 2 , which means that we will cycle through our array, multiply each element of the array by 2 and create a new array from the results, which will be written to the doubleNums variable

Therefore, your code does not work as you expect, it will not return the desired cell to you, but will simply call a function for each element of your array.

 cell(numX, numY) { this.cells.map((cell) => { if (numX == cell.opts.numX && numY == cell.opts.numY) { console.log(cell); return cell; } }); }

In your case, it is better to use the filter method, which also calls a function for each element, but in the new array there will be only those elements in which the function that we passed as an argument to filter returns true

On a simple example

 const nums = [1, 2, 3, 4, 5]; const numsLessThan3 = nums.filter( n => n < 3 ); // numsLessThan3 = [1, 2];

In your example

 cell(numX, numY) { return this.cells.filter((cell) => numX == cell.opts.numX && numY == cell.opts.numY )[0]; // [0], так как нам нужен только первый элемент, // подразумевается что он всегда будет один }

UPDATE

If you want to optimize the code, then use the cycle

 cell(numX, numY) { let neededCell = null const {length} = this.cells for(let i = 0; i < length; i++) { const cell = this.cells[i] if (numX == cell.opts.numX && numY == cell.opts.numY) { neededCell = cell break // выйдет из цикла // либо можно сразу return cell // без break и neededCell = cell } } return neededCell }

I know that the result will be only one element, and the filter, as I understand it, will go through all the elements even after the necessary one is found.
Therefore, the filter does not quite fit me, if I correctly understand its essence.
But, since the question was “to explain why,” then you absolutely deserve a “solution”.
But if you also offer a better filter option, I will be very grateful.
@smellyshovel, if you need to find one item, you can use find
@Grundy is suitable, thank you :) Can you explain why this is standard in ES2015, and what is written in ES2017 is a draft?
@smellyshovel, because the ES2015 standard is already ready, and the ES2017 standard is only being developed.

Why does “return” not return a value?

1 answer 1

More articles: