Introduction

Mutable means addressed by reference whereas immutable means addressed by value. In JavaScript an object is mutable whereas a String is immutable.
The following is a road map to learn object oriented JavaScript:

Object is Mutable

An object is mutable. That means it is addressed by reference, not by value. To understand it we create an example. We create an object Book that has two properties one is Name and the other is Author as in the following code snippet.
  1. var Book = {
  2. Name: "Object Oriented JavaScript",
  3. Author : "John Raw"
  4. }
Now we create another object that is a replica of the preceding object as in following code snippet.
  1. var NewBook = {
  2. Name: "Object Oriented JavaScript",
  3. Author: "John Raw"
  4. }
As in the preceding code snippet the NewBook object has the same properties and its properties have the same value as assigned to the previous Book object. Now we compare both objects.
  1. <script type="text/javascript">
  3. var Book = {
  4. Name: "Object Oriented JavaScript",
  5. Author: "John Raw"
  6. }
  8. var NewBook = {
  9. Name: "Object Oriented JavaScript",
  10. Author: "John Raw"
  11. }
  13. if(Book == NewBook)
  14. {
  15. console.log("Both objects are same");
  16. }
  17. else {
  18. console.log("Both objects are different");
  19. }
  21. </script>
The preceding code output will be “Both objects are different” because both objects have different addresses and are compared by reference, not by value, so both objects are different copies.
When we assign an object to another object then it won't create a copy of the object. Now we again assign an object book to another object newBook and compare both as in the following code snippet.
  1. <script type="text/javascript">
  3. var book = {
  4. Name: "Object Oriented JavaScript",
  5. Author: "John Raw"
  6. }
  8. var newBook = book;
  10. if(book == newBook)
  11. {
  12. console.log("Both objects are same");
  13. }
  14. else {
  15. console.log("Both objects are different");
  16. }
  18. </script>
This time the preceding code output will be “Both objects are same” because the object newBook is not a copy of book. It is book. Both book and newBook point to the same object. Any changes to newBook will also change book, because book and newBook are the same object. Let's see another example where we first assign a book object to an object of newBook then change the Name property value of the newBook object.
  1. <script type="text/javascript">
  3. var book = {
  4. Name: "Object Oriented JavaScript",
  5. Author: "John Raw"
  6. }
  8. var newBook = book;
  10. newBook.Name = "JavaScript Progamming";
  12. console.log(newBook);
  13. console.log(book);
  15. </script>
Now when we run the preceding example it shows the result as Figure 1.1.
Result shows the Objects are mutable
Figure 1.1: Result shows the Objects are mutable
As in Figure 1.1 the objects are mutable, we change an object's property value and that change also reflects another object, in other words both objects have the same address and the objects are mutable.

String is Immutable

Immutable means that once we instantiate the object, we can't change its properties. If we manipulate a String then that means we create a new string so we can't change a string once it has been created. To understand it we create an example. We create a string variable and assign a value to it and thereafter we manipulate it using predefined string methods as in the following code snippet.
  1. <script type="text/javascript">
  3. var name = "Object Oriented JavaScript Programming";
  5. var newName = name.slice(-22, 26);
  6. console.log(newName);
  8. var newSecondName = name.substring(16, 26);
  9. console.log(newSecondName);
  11. var newThirdName = name.substr(-22, 10);
  12. console.log(newThirdName);
  13. </script>
The preceding code uses three-string methods that are slice, substring, and substr described later in this article. When we call a method on a string, it returns a new string and it won't modify the existing string. As in the preceding code sample, all three string methods return a new string so we cannot change a string once it is created.
Result of string operations
Figure 1.2: Result of string operations.

Slice() Method

The Slice() method has two parameters. The first parameter is the start index and the second is the end index for the obtained string. In the slice method we can use a negative index as in the following code snippet.
  1. <script type="text/javascript">
  3. var name = "JavaScript";
  4. var newName = name.slice(1, 5);
  5. console.log(newName);
  7. var secondName = name.slice(-9, -4);
  8. console.log(secondName);
  9. </script>
When we use a positive index then the index counts from the left side whereas when we use a negative index it counts from the opposite side, in other words from the right side. The following image shows the result of the preceding code sample.
Slice method result
Figure1.3: Slice method result
When we don't use the second argument the obtained string will be the rest of the original string that starts from the index given as the first argument.

Substring() Method

The Substring () method has two parameters. The first parameter is the start index and the second is the end index for the obtained string. In the Substring method we can use a negative index as in the following code snippet.
  1. <script type="text/javascript">
  3. var name = "JavaScript";
  4. var newName = name.substring(1, 5);
  5. console.log(newName);
  7. var secondName = name.substring(-4, 4);
  8. console.log(secondName);
  10. var thirdName = name.substring(3);
  11. console.log(thirdName);
  13. var fourthName = name.substring(3,-1);
  14. console.log(fourthName);
  15. </script>
When we use a positive index as an argument then it counts from the left side but when we use a negative index then the initial start index will be zero. We use only a single argument, in other words, it's an initial index for the obtained string but when we use the second argument as a negative index then the arguments are reversed, in other words the first will be the second and the second will be the first. The preceding code shows the result as in the following image.
Substring method result
Figure1.4: Substring method result

Substr() Method

The Substr() method has two parameters. The first parameter is the start index and the second is the length of the obtained string. We can use a single argument and can use a negative index as in the following code snippet.
  1. <script type="text/javascript">
  3. var name = "JavaScript";
  4. var newName = name.substr(1, 5);
  5. console.log(newName);
  7. var secondName = name.substr(-4, 4);
  8. console.log(secondName);
  10. var thirdName = name.substr(3);
  11. console.log(thirdName);
  13. </script>
When we use a negative index as the first argument then the count starts from the right side for the obtained string whereas when we use only a single argument then the start index is for the obtained string. The second argument is always the length of the obtained string. The following image shows the result of the preceding code sample.
method result
Figure1.5: Substr() method result