TypeError: Cannot read properties of undefined (reading 'vin')-CodePudding

For some reason I have variables outside of my function and I'm updating that variable in my function but when I call that variable in another function I get a undefined typeError

let bikeShare = []
let stations = []

function startRide(vin) {
  bikeShare = bikeShare.map((bike) => {
    bike.vin === vin ? { ...bike, checkOut: true } : bike 
  })
  return {}
}

function endRide(vin) {
  console.log(bikeShare)
  bikeShare = bikeShare.map((bike) => {
    bike.vin === vin && bike.checkOut 
      ? { ...bike, checkOut: false, totalRides: bike.totalRides   1  } 
      : bike 
  })
  return {}
}

function createBike(color = 'red') {
  const vin = bikeShare.length   Date.now();
  const payload = { vin, color, checkOut: false, totalRides: 0 }

  bikeShare.push(payload);

  return payload
}

const bike_1 = createBike('red')
const bike_2 = createBike('blue')
const bike_7 = createBike('green')

startRide(bike_1.vin) // in the startRide function I get an array [undefined, undefined, undefined] 
endRide(bike_1.vin)

CodePudding user response：

You are in the startRide() function not returning the result of each assignment in the .map method, so it returns undefined which why you see the array of undefined values.

This should fix it:

let bikeShare = []
let stations = []

function startRide(vin) {
  bikeShare = bikeShare.map((bike) => {
    return bike.vin === vin ? { ...bike, checkOut: true } : bike 
  })
  return {}
}

function endRide(vin) {
  console.log(bikeShare)
  bikeShare = bikeShare.map((bike) => {
    bike.vin === vin && bike.checkOut 
      ? { ...bike, checkOut: false, totalRides: bike.totalRides   1  } 
      : bike 
  })
  return {}
}

function createBike(color = 'red') {
  const vin = bikeShare.length   Date.now();
  const payload = { vin, color, checkOut: false, totalRides: 0 }

  bikeShare.push(payload);

  return payload
}

const bike_1 = createBike('red')
const bike_2 = createBike('blue');
const bike_7 = createBike('green');

startRide(bike_1.vin) // in the startRide function I get an array [undefined, undefined, undefined] 
endRide(bike_1.vin)

CodePudding user response：

To lift this out of comment, the body of the map argument function in startRide is enclosed in curly braces. You could remove the braces or put return bike inside the braces to stop it returning undefined.

However, setting bike.vin to a bike "payload" object with checkout set to true, leaving bike.checkout set to false, is a bug. One solution might be to use find instead of map:

let bikeShare = []
let stations = []

function startRide(vin, start = true) {
  const bike = bikeShare.find(bike=>bike.vin === vin);
  if( bike) {
    bike.checkOut = start;
  }
  return bike; // for debugging
}

function endRide(vin) {
  return startRide( vin, false);
}

function createBike(color = 'red') {
  const vin = bikeShare.length   Date.now();
  const payload = { vin, color, checkOut: false, totalRides: 0 }
  bikeShare.push(payload);
  return payload
}

const bike_1 = createBike('red')
const bike_2 = createBike('blue')
const bike_7 = createBike('green')

console.log( startRide(bike_1.vin));
console.log( endRide(bike_1.vin));