Don't understand piece of JavaScript code?

Question

let s = "12345"
console.log(s)

Output: 12345

I'm a beginner in JavaScript. Can someone explain how this code works step by step?

Answer 1

Firstly, s.slice(2) takes "12345" and returns "345" (take the string starting at index 2 until the end, since no end parameter is given).

What Array.from does is take an iterable object (like a string, which is an array of characters) and create an array from it. It takes an optional second (and also a third, but that doesn't apply here) argument, which is a function, to run over each item in that iterable object when creating the new array. Its first argument will be the item in the iterable at each step , and the second is the index . In this case, that function is defined with ES6 Arrow Function syntax . It can be written more verbosely as:

let s = "12345"
let m = Array.from(s.slice(2), function(_, i) {
  return s.slice(i, i + 3);
});

I'm unsure if this is a point of contention here, but _ is a convention in JavaScript programming for a variable or argument that is unneeded or is "discarded". In this case, you don't need the first argument, but you do need the second, hence the _ .

So, if we run Array.from on "345" , then here's what'll happen:

1. Iteration object #1, "3" , and index 0 : run the function s.slice(0, 0 + 3) (get three characters starting at 0 ). Return value: "123" .
2. Iteration object #2, "4" , and index 1 : run the function s.slice(1, 1 + 3) (get three characters starting at 1 ). Return value: "234" .
3. Iteration object #3, "5" , and index 2 : run the function s.slice(2, 2 + 3) (get three characters starting at 2 ). Return value: "345" .
4. An array is made from these three return values: [ "123", "234", "345" ] .

Answer 2

Array.from lets you get an array from another "collection of things".

The first argument is the substring starting at index 2, thus "345". Array.from will take this as a collection of chars, '3', '4', '5'.

The second argument is a function that will be applied to every object got from the first. And, that function took 2 arguments, its first one is the value produced by the first argument and the second is the index of the current iteration. So that values '3', '4, '5' are produced in turn: the '3' with index 0, '4' with index 1, '5' with index 2. See ? Couples ('3', 0), ('4', 1), ('5',2). But the given function just ignore its first argument, using _ to denote the fact that this will be ignored (what was produced from the first argument of from ) and basically call str.slice(i,i+3) for all values of i in 0, 1, 2. Finally 3 strings "123", "234" and "345" are produced.

Try with this:

 var str="12345" var m = Array.from(str.slice(2), (x,i)=>"Got ("+x+","+i+") and compute \\""+str+"\\".slice("+i+","+(i+3)+")") console.log(m)

Answer 3

The => part is called an Arrow function . Let's break down the full section that you've posted:

(_, i) => s.slice(i, i+3)

This can be broken into 3 sections:

(_, i)          /* The function parameters */
=>              /* The arrow */
s.slice(i, i+3) /* The function body */

In this example, the author is giving the parameters the names _ (probably because it will be ignored) and i (because it's the index of the array).

The arrow itself is just the arrow syntax.

The body is the main part. It takes a slice of the s string. Arrow functions automatically return the statement.

If this were written out in the full-form, it would look like this:

let s = "12345"
let m = Array.from(s.slice(2), function (ignore, i) {
    return s.slice(i, i + 3);
})
console.log(m)

The function itself will take a part of the s string starting at i and ending 3 places beyond that (so it takes 3 characters).

I hope that helps.