Javascript map method on array of string elements

Question

I am trying to understand how to implement the map method (rather than using a for loop) to check a string for palindromes and return boolean values for whether the mapped array elements reversed are the same as the original array elements. I cannot seem to understand the syntax of the map method. How do I get the map to function on each element in the original array? What is the value? Here is my working code, which is only logging a value of undefined:

function palindromeChecker(string) {
    var myString = string.toLowerCase();
    var myArray = myString.split(" ");
    var newArray = myArray.map(function (item) {
        item.split("").reverse().join("");
        return newArray === myArray;
    });
}

console.log(palindromeChecker("What pop did dad Drink today"));

Here is a link to the fiddle: https://jsfiddle.net/minditorrey/3s6uqxrh/1/

There is one related question here:

Javascript array map method callback parameters

but it doesn't answer my confusion about the syntax of the map method when using it to perform a function on an array of strings.

Answer 1

The map method will literally 'map' a function call onto each element in the array, take this as a simple example of increasing the value of each integer in an array by 1:

var items = [1,2,3];
items.map(function(item) { 
  return item + 1;
});

// returns [2,3,4]

In your case, you are trying to use map to accept or reject a string if it's a palindrome, so a simple implementation might be:

var items = ['mum', 'dad', 'brother'];
items.map(function(item) {
  return item.split('').reverse().join('') === item;
});

// returns [true, true, false]

I'm not 100% sure of your reasons for using map, because if you were trying to just filter the array and remove the strings that aren't palindromes, you should probably use the filter method instead, which works in the same way, but would remove any that return false:

var items = ['mum', 'dad', 'brother'];
items.filter(function(item) {
  return item.split('').reverse().join('') === item;
});

// returns ['mum', dad']

In your case you are splitting a string first to get your array of characters; you may also want to make that string lower case and remove punctuation, so an implementation might be:

var string = 'I live at home with my Mum, my Dad and my Brother!';
var items = string.toLowerCase().replace(/[^a-z0-9-\s]+/, '').split(' ');
items.filter(function(item) {
  return item.split('').reverse().join('') === item;
});

// returns ['i', 'mum', dad']

As mentioned in one of the comments on your question, you need to ensure you return a value from your function if you are using a separate function to perform the check, so this is how your function should look:

function checkPalindromes(string) {
  var items = string.toLowerCase().replace(/[^a-z0-9-\s]+/, '').split(' ');
  items.filter(function(item) {
    return item.split('').reverse().join('') === item;
  });

  return items;
}

And you would call it using:

checkPalindromes('I live at home with my Mum, my Dad and my Brother!'); // ['i', 'mum', 'dad']

Answer 2

try something like this:

let str = 'hello';
let tab = [...str];

tab.map((x)=> {
    console.log("|"+x+"|");
    return x;
})

Answer 3

newArray should include reversed version of theall items in myArray. After that, newArray should be reversed and joined with space in order to get the reversed version of the input string.

Here is the code:

function palindromeChecker(string) {
  var myString = string.toLowerCase();
  var myArray = myString.split(" ");
  var newArray = myArray.map(function (item) {
        return item.split("").reverse().join("");
    });
  console.log(newArray);
  return newArray.reverse().join(" ") === string;
}

console.log(palindromeChecker("dad did what"));

Answer 4

Javascript map method on array of string elements by using split() function.

let str = 'hello';
      
    str.split('').map((x)=> {
        console.log("|"+x+"|");
        return x;
    })

Answer 5

Map is a higher-order function available in ES5. I think your newArraywill contain an array of boolean values.

In essence, map will iterate over every value in your array and apply the function. The return value will be the new value in the array. You can also use map and save the information you need somewhere else, and ignore the result of course.

var arr = [1,2,3,4];
var newArray = arr.map(function(i) {
  return i * 2;
});
//newArray = [2,4,6,8]

Answer 6

The map function in javascript (and pretty much in any language) is a great little function that allows you to call a function on each of the items on a list, and thus changing the list itself. The (anonymous) function you're passing as an argument accepts an argument itself, which is filled by an item of the list it is working on, each time it is called.

So for a list [1,2,3,4], the function function(item) { return item + 1 }, would give you a list of [2,3,4,5] for a result. The function you passed to $.map() is run over each element of the list, and thus changing the list.

So for your code: in the function you're passing as an argument to $.map(), you're returning whether the old and new array are equal (which is false btw). So since you're returning a boolean value, the list you'll end up with is a list of bools. What I think you want to do, is extract the newArray == myArray from the function you're passing to $.map(), and putting it after your $.map() call. Then inside the function you're passing to $.map(), return the item you're splitting and whatnot, so your newArray will be an array of strings like myArray.

Answer 7

Apart from a few minor mistakes in your code, such as scope issues (you're referencing the "newArray" and "myArray" outside of the function in which they where defined, and therefore, getting "undefined")..

The main issue you had is that you addressed the ENTIRE array inside the map function, while the whole concept is breaking things down to single elements (and then the function collects everything back to an array for you).

I've used the "filter" function in my example, because it works in a similar manner and I felt that it does what you wanted, but you can change the "filter" to a "map" and see what happends.

Cheers :)

HTML:

<body>

<p id="bla">
BLA
</p>

<p id="bla2">
BLA2
</p>

</body>

Javascript:

function palindromeChecker(string) {
  var myString = string.toLowerCase();
  var myArray = myString.split(" ");
  var newArray = myArray.filter(function (item) {
    var reversedItem = item.split('').reverse().join('');
    return  item == reversedItem;
});

document.getElementById("bla").innerHTML = myArray;
document.getElementById("bla2").innerHTML = newArray;

}

palindromeChecker("What pop did dad Drink today");

Answer 8

Thanks for your input, all. This is the code I ended up with. I fixed the scope issues in the original post. My main problem was understanding the syntax of the map method. In particular, I could not understand from other online resources how to determine the value in the callback function. So, with much help from above I have placed the map method inside the palindromeChecker, and done all of the work on the array inside the map function.

var palindromeChecker = function(string) {
var newString = string.toLowerCase().split(' ');
newString.map(function(item) {
  console.log(item.split('').reverse().join('') === item);
  });
}; 

palindromeChecker("What pop did dad drink today");

//Returns false, true, true, true, false, false