Does anyone knows how this line of code works?

Question

Hi recently while training in code wars i stumbled upon this solution. The case that needs to solved is as follows: You probably know the "like" system from Facebook and other pages. People can "like" blog posts, pictures or other items. We want to create the text that should be displayed next to such an item. Implement a function likes :: [String] -> String, which must take in input array, containing the names of people who like an item. It must return the display text as shown in the examples: ///////////////////////////////////////////////////////////////////////////////// likes [] // must be "no one likes this" likes ["Peter"] // must be "Peter likes this" likes ["Jacob", "Alex"] // must be "Jacob and Alex like this" likes ["Max", "John", "Mark"] // must be "Max, John and Mark like this" likes ["Alex", "Jacob", "Mark", "Max"] // must be "Alex, Jacob and 2 others like this" ////////////////////////////////////////////////////////////////////////////////////////////

In return I found a code written like so:

 var names=["Erica", "Steven","Dono", "Erick"];

function likes (names) {
  var templates = [
    'no one likes this',
    '{name} likes this',
    '{name} and {name} like this',
    '{name}, {name} and {name} like this',
    '{name}, {name} and {n} others like this'
  ];
  var idx = Math.min(names.length, 4);

  return templates[idx].replace(/{name}|{n}/g, function (val) {// 
    return val === "{name}" ? names.shift() : names.length;// 
  });
}
var runlikes= likes(names);
console.log(runlikes);

For the solution I found a very good one described like shown there. I do get the code until it gets to the.replace function. I dont get how the code is able to get the name Erica,Steven, and Dono and the amount of numbers left to replace n with.How could n get it's number after the other two names has been used? How is ":" able to be used there, isn't it only for objects and how does it work ? What is the use of return val === "{name} " and how is this line of code knows when to switch to {n}. I know I've been asking very noob questions and I'm sorry for that I'm still in Highschool and just doing this as a prep for uni. Thank you for yout time

Look at what [shift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) does . — luk2302, Apr 09 '20 at 10:44

score 1 · Accepted Answer · answered Apr 09 '20 at 10:57

So judging from what you said, I'm assuming you realize that idx is calculated to pick the correct template, so I won't go over that in too much detail. The first thing is .replace itself. It takes two arguments, a regex to replace, and a replacement that is either a string or a function. The regex he used is /{name}|{n}/g, which I will break down.

/ signifies the start of a regex in javascript.
{name} represents the literal string {name}.
| means "or".
{n} represents the literal string {n}.
/ signifies the end of the regex.
g is a flag, which means that the regex should match all occurrences.

Essentially, the regex matches all occurrences of {name} or {n}. In this case, the replacement is a function, which takes the matched substring as an argument and returns the replacement. The body of the function uses a ternary operator for concision, which basically takes the form condition ? val_true : val_false. If condition is truthy, then the statement will be val_true, and otherwise it'll be val_false. So, if the value is {name}, then we use .shift in order to get the first element of the array and remove it from the array at the same time, so there's a fresh name at the start of the array. Otherwise, we know it has to be {n}, since the only values matched are {name} and {n}. In that case, we just return the length of the array to get the number of remaining people, since the previously used names have already been removed.

Thank you! You really explained it thoroughly i finally get it know. — Dwika Haryo Radithya, Apr 09 '20 at 11:14
One more question so the regex is like a loop ? So it gets one name than moves on to the other one could you explain that to me? Sorry im still new to stack so i didnt know which buttons to hit before — Dwika Haryo Radithya, Apr 09 '20 at 13:25
The regex runs the function on every match it finds, and since it matches all occurrences of `{name}` or `{n}` it will run the function for each `{name}` and `{n}`. — Aplet123, Apr 09 '20 at 13:27

score 0 · Answer 2 · answered Apr 09 '20 at 10:54

replace function has a callback attached to it, this callback will be called equal to the number of matched words one at a time. In your example 3 iteration are there,

the ternary operator checks if it is about the {name} or the {n} if {name} it will return the first name (shift function) appeared in the array and replace the array with the rest of the array element. In each iteration, it replaces the template {} with the value returned by return val === "{name}" ? names.shift() : names.length;// so when the itreation is done it will return the final output.

Does anyone knows how this line of code works?

2 Answers2