A Smarter Way to Learning JavaScript: Chapter 23 - Strings: Finding Segments

Question

I am working through the chapters and exercises for A Smarter Way to Learning JavaScript, Chapter 23 covers Strings: Finding Segments using indexOf and lastIndexOf methods.

In the example a second variable firstChar is assigned the value of a variable text which contains a string "World War II". The objective is to replace the string "World War II" with a new string "the Second World War". The following code accomplishes the task, however I don't understand how line 3 works. I understand that indexOf will return the value of the first occurrence of the segment in this case 0, but I don't know how it's removing "World War II". My question is how is line 3 working?

0 var text = "World War II";
1 var firstChar = text.indexOf("World War II");
2 if (firstChar !== -1) {
3 text = text.slice(0, firstChar) + "the Second World War" + text.slice(firstChar + 12);
4 { 

Answer 1

slice(start, end) is used to take a substring from the specified starting index to the ending index.

So, text.slice(0, firstChar) will return a substring from start=0 to end=0 because the value of firstChar is 0.(this returns empty string)

Now, the string the "Second World War" will be added to null making the value of text = the Second World War

slice(start) with a single parameter return the string starting from "start" uptil the end of the string.

For this example we get the same result even without writing text.slice(firstChar + 12) because firstChar + 12 = 0 + 12 = 12, but the total length of original string "World War II" is 12 and hence we will get an empty string.

But suppose the initial value of "text" would have been text = "World War II was deadly" i.e. if there is some text after the string we want to replace viz. "World War II" then the line text.slice(firstChar + 12) appends the remaining portion of the string which in this case is "was deadly" and the value of text becomes,

text = second World War was deadly

Answer 2

line 3 says: take the string of characters starting from index 0 to index firstChar, append "the Second World War" to it and then finally append the string of characters starting from index (firstChar + 12) to end of original string.

To break it down:

// This returns an empty string since firstChar = 0 here
text.slice(0, firstChar)

// This also returns an empty string since firstChar + 12 is equal to
// the length of "World War II"
text.slice(firstChar + 12)

Take a look at String.slice

Answer 3

text.slice(0, firstChar) is the part of the string from the beginning of text until the location that "World War II" begins. It appends "the Second World War" to that section of the string and then appends the rest of the original text variable, but skips the 12 characters of "World War II"

This means if var text = "This is not World War II and that is good!"

line 3 would essentially be "This is not " + "the Second World War" + " and that is good!";

Answer 4

if (firstChar !== -1)

ok this is your secound line of code what does it means in javascript indexOf() method returns -1 if the value you entered is not occurs so,

In indexof() the syntax is

str.indexof(searchvalue, start);

text = text.slice(0, firstChar) + "the Second World War" + text.slice(firstChar + 12);

so this line tells that

text= "World War II";
text.slice(0,firstChar)

//its means that to slice the from 0 to firstChar and we have in firstChar this string "World War II".

so this result is empty becuase slice method not found the firstChar thats why it gives empty.

and after empty there will be the text "the Second World War".

text.slice(firstChar + 12);

and this means that slices the starting point is not matching and when the starting point is not matching the methods gives empty.

so the the result is the new text var string is this

"the Second World War".