Patter design and Map function in Javascript. What dosen't work?

Question

What is the difference between the fisrt code and the second? The fisrt work, but the second does not work, this return a array with number 4 and not a array object with corners = 4. The problem is in the map function.

Fist code

   const Strategy = {
            map : function(array){
                    const newArray = array.map((e) => { e.setCorners(4);  return e });
                    return newArray
                },
        }


    const objectCorners = function(corners){
    
        _corners = corners
    
    
    
        return ({
            corners : _corners
            getCorners : (() => { return corners}),
            setCorners : ((corners) => {_corners = corners}),
        })
    }
const array = [new objectCorners(3),new objectCorners(6),new objectCorners(7)]
const result = Strategy["map"](array)
console.log(result) // [{corners : 4},{corners : 4},{corners : 4}]

Second Code

 const Strategy = {
            map : function(array){
                    const newArray = array.map((e) => {return e.setCorners(4); });
                    return newArray
                },
        }


    const objectCorners = function(corners){
    
        _corners = corners
    
    
    
        return ({
            corners : _corners
            getCorners : (() => { return corners}),
            setCorners : ((corners) => {_corners = corners}),
        })
    }
const array = [new objectCorners(3),new objectCorners(6),new objectCorners(7)]
const result = Strategy["map"](array)
console.log(result) // [4,4,4]

Answer 1

What is the difference between the fisrt code and the second? ... The problem is in the map function.

well, the difference is the map function;-)

Specifically the return values.

In the case (e) => { e.setCorners(4); return e } (e) => { e.setCorners(4); return e } , e is explicitly returned

However, in the case (e) => {return e.setCorners(4); } (e) => {return e.setCorners(4); } the return value of e.setCorners(4) is returned. According to its definition

setCorners : ((corners) => {_corners = corners})

it is equivalent to

setCorners: function(corners) {
   _corners = corner
   // no return value, i.e. this function returns undefined
}

so undefined is returned

Notes to OP:

• please try your code before, as it is has syntax errors
• please put actual outputs.
  • In the first code you have objectCorner with values 3,6,7, but in the comments are values 4
  • In the second code, your commented output is [4,4,4] , while actually it was [undefined,undefined,undefined]

Answer 2

Building modules is a popular functional programming technique. And instead of mutating state using getters and setters, we simply construct a new object -

// Shape.js

const empty =
  { corners: 0 }

const create = (corners = 0) =>
  ({ corners })

const setCorners = (t = empty, corners = 0) =>
  ({ ...t, corners })

export { empty, create, setCorners }

Let's use our Shape module in a sample program -

// Main.js

import { create, setCorners } from './Shape'

const Strategy =
  { map: shapes => shapes.map(s => setCorners(s, 4))
  }

const arr =
  [ create(3), create(6), create(7) ]

const result =
  Strategy.map(arr)
  
console.log(result, arr)
// [ { corners: 4 }, { corners: 4 }, { corners: 4 } ]
// [ { corners: 3 }, { corners: 6 }, { corners: 7 } ]

NB, the input array arr is not modified to construct the result . Expand the snippet below to verify the results in your own browser

 // Shape.js const empty = { corners: 0 } const create = (corners = 0) => ({ corners }) const setCorners = (t = empty, corners = 0) => ({...t, corners }) // --- // Main.js const Strategy = { map: arr => arr.map(v => setCorners(v, 4)) } const arr = [ create(3), create(6), create(7) ] const result = Strategy.map(arr) console.log(result, arr) // [ { corners: 4 }, { corners: 4 }, { corners: 4 } ] // [ { corners: 3 }, { corners: 6 }, { corners: 7 } ]