Javascript Map function chaining

Question

I just came across one thing and I cannot find an answer why is this happening so maybe someone can help.

This is the piece of code

function titleCase(str) {
  let arr = str.split(" ")
    .map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())
    console.log('arr1', arr)

let arr2 = str.split(" ")

  arr2.map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())
  console.log('arr2', arr2)
}

titleCase("I'm a little tea pot");

I am interested in why arr1 (when map is chained immediately after split is working as expected. It returns ["I'm", "A", "Little", "Tea", "Pot"], but arr2 is returning ["I'm", "a", "little", "tea", "pot"]

Should this type of writing (whether it is chained or not) return the same key? What am I missing?

.map returns a new array, it doesn't mutate the original. So arr2.map() just does something and throws away the result. — VLAZ
– VLAZ, Commented Jun 5, 2020 at 23:26
@VLAZ but arr 1 also returns a new array since it's using map. — utazabanje
– utazabanje, Commented Jun 5, 2020 at 23:29
It does return it and you retain that as arr. In the second case you don't retain the result of the .map. — VLAZ
– VLAZ, Commented Jun 5, 2020 at 23:30
@VLAZ ok I made a small demo and yes, works like you said. But can you tell me why is that happening? Shouldn't that be the same thing? — utazabanje
– utazabanje, Commented Jun 5, 2020 at 23:38
Again, .map returns a new array. If you don't save it, then you will not have it. It's similar as having str2 = "hello" + "world" and just "hello" + "world" by itself. A new string will be constructed but never saved. Same with .map - a new array is created and never saved. — VLAZ
– VLAZ, Commented Jun 5, 2020 at 23:40

chiragrtr · Accepted Answer · 2020-06-05 23:43:23Z

1

In the former, your variable is being assigning the result of operations split followed by map on your array. In the latter, your variable is being assigned only the result of split.

So, this:

let arr = str.split(" ")
   .map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())

is equivalent to:

let arr2 = str.split(" ")
arr2 = arr2.map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())

i.e. you forgot to do the assignment arr2 = in case of map

answered Jun 5, 2020 at 23:43

chiragrtr

9324 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bergur · Accepted Answer · 2020-06-05 23:46:07Z

Check out the documentation for map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

The map() method creates a new array populated with the results

That means it doesn't change the original array, but gives you a new one. So when you do

arr2.map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())
console.log('arr2', arr2)

Map is returning a new array, but you have no variable to store the new array that .map creates. So

const result = arr2.map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())
console.log('result', result)

Will work.

In contrast if we check out the documentation for sort: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

The sort() method sorts the elements of an array in place

So it is changing the same array and not giving you new one.

Sven.hig · Accepted Answer · 2020-06-06 00:02:08Z

0

it is because in this line

let arr2 = str.split(" ")<----- this is what you get from console.log()

    arr2.map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())
  console.log('arr2', arr2)
}

you are using console.log(arr2) which is assinged to be equal to str.split(" ")

for you second line to work you have to assign arr2.map a variable and then you will be able to print it in the console like this

const arr2=arr2.map(s => s.charAt(0).toUpperCase() + s.substring(1).toLowerCase())
      console.log('arr2', arr2)
    }

answered Jun 6, 2020 at 0:02

Sven.hig

4,5292 gold badges10 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript Map function chaining

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related