CODEWITHSUNDEEP
javascriptswitch-statement
frootloops
frootloops

Reputation: 291

Why does this code return an array of undefined values along with the other values?

I am mapping an array and using a switch statement to console.log some strings. It logs all of the strings but also an array: [undefined, undefined, undefined]. I'm not sure why it logs the array of undefined values. Is it because map returns a new array of values and in this case I am removing the values from the existing array and transforming them to strings?

const arr = ['joe', 'paul', 'chris']

const statements = arr.map((name) => {
  console.log(name + ' console!')
  switch (name) {
    case 'joe':
      console.log(name + ' is cool!');
      break;
    case 'paul':
      console.log(name + ' smells!');
      break
    case 'chris':
      console.log(name + ' is cheap!')
      break;
  }
})

console.log(statements);

Upvotes: 0

Views: 54

Answers (4)

Dinsdale Trelawney
Dinsdale Trelawney

Reputation: 43

You're not returning anything from the function, so the last line logs an array of undefined elements constructed by the map function's callback.

Upvotes: 1

Eddie
Eddie

Reputation: 26844

You are logging the string instead of returning the values. map() expects a return value like:

const arr = ['joe', 'paul', 'chris']

const statements = arr.map((name) => {
  switch (name) {
    case 'joe':
      return name + ' is cool!';
    case 'paul':
      return name + ' smells!';
    case 'chris':
      return name + ' is cheap!';
  }
})

console.log(statements);

Upvotes: 0

Maheer Ali
Maheer Ali

Reputation: 36584

This is because you are not returning anything from the callback passed to map(). If you want to return array with is cool,... values return it in the end of function.

const arr = ['joe', 'paul', 'chris']

const statements = arr.map((name) => {
  let res;
  switch (name) {
    case 'joe':
      res = name + ' is cool!';
      break;
    case 'paul':
      res = name + ' smells!'
      break;
    case 'chris':
      res = name + ' is cheap!';
      break;
  }
  console.log(res);
  return res;
})

console.log(statements);

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370989

.map takes in an array and returns a new array, composed of calling the callback function on each item of the original array. Your callback function is not returning anything, so the statements array evaluates to [undefined, undefined, undefined].

.map is not appropriate here, because you don't need a mapped array. Use forEach instead, and omit the statements variable:

const arr = ['joe', 'paul', 'chris']

arr.forEach((name) => {
  console.log(name + ' console!')
  switch (name) {
    case 'joe':
      console.log(name + ' is cool!');
      break;
    case 'paul':
      console.log(name + ' smells!');
      break
    case 'chris':
      console.log(name + ' is cheap!')
      break;
  }
})

You could also consider avoiding switch entirely, since it's unnecessarily verbose and can be error-prone - use an object instead:

const arr = ['joe', 'paul', 'chris']

const nameStrs = {
  joe: 'is cool',
  paul: 'smells',
  chris: 'is cheap'
};
arr.forEach((name) => {
  console.log(`${name} ${nameStrs[name]}`);
})

If you did want to construct an array of responses for each item in the array, then use .map and return the value at the end of the callback, in addition to logging the value:

const arr = ['joe', 'paul', 'chris'];

const nameStrs = {
  joe: 'is cool',
  paul: 'smells',
  chris: 'is cheap'
};
const statements = arr.map((name) => {
  const statement = `${name} ${nameStrs[name]}`;
  console.log(statement);
  return statement;
});
console.log(statements);

Upvotes: 3

Related Questions