Question about returns statements and function parameters

Question

I'm new to software and there is this piece of code which is a solution to an array exercise but I don't understand why it works. First of all the first thing it does is to return the string you enter in the function as a parameter, shouldn't then the rest of the code be ignored and not executed? why does it execute?, I also don't understand why the arrow function inside the map() method has two parameters called "word" and "index" respectively,how does the javascript engine know that the parameter "word" refers to one of the words that's inside the array that's being worked on by the function? (same for the word index, how does it know that the parameter refers to the index of the array?).

Here is the code:

function camelize(str) {
  return str
    .split('-') // splits 'my-long-word' into array ['my', 'long', 'word']
    .map(
      // capitalizes first letters of all array items except the first one
      // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word']
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord'
}

The exercise in question: https://javascript.info/task/camelcase

I tried looking up on Google but get no relevant answers in the search results.

Answer 1

Let me break it down for you. In this case, the comments are reducing the readability of the code. Remove them. This is what you're doing:

function camelize(str) {
  return str.split('-').map((word, index) => index == 0 ? word : 
  word[0].toUpperCase() + word.slice(1)).join('');
}

The return keyword is returning a single value, which is being computed using something called "method chaining" in a single statement.

As the name suggests, method chaining "chains" multiple methods, using the dot operator to form a single statement. Starting from the left, multiple operations are performed in that single statement, with the returned value of each method calling the next method. In other words, each method works on the value returned by the previous method.

In this case, first, the .split() method is called and executed. Its return value, which is an array of strings calls the .map() method, which loops over the array. In each iteration, its callback function performs the specified operation on each element and adds the new computed value to a new array by returning it.

Since the callback function is an arrow function, and arrow functions implicitly return the result of a single expression without the use of the return keyword, the new values are being added to the new array by the callback function. Upon execution, the .map() method returns a new array containing the computed / modified values. Finally, that array calls the final .join() method, which joins the individual elements of a strings array with an optional separator (empty string, in this case).

By default, the .map() method's callback function can have three parameters: the first one is mandatory and represents the value of the element in the active iteration, the (optional) second one gives the index of the active element, and the (optional) third one references the original array.

That's just how the bult-in .map() method is implemented, and that's how it works.

So, the result of the method-chained statement is the "camelized" string, which the camelize function's return keyword returns.