If you want to join multiple arrays together, you can use the concat() method. It does not alter the original arrays; instead, it creates a new array, populates it with the elements of all the specified arrays, and returns it to the caller. Let's depart from the automobile example and look at a family, as shown in this example:

var parents = ["John", "Jane" ];
var kids = [ "Jason", "Joe", "Jordan" ];
var pets = [ "Jackson", "Jimmy" ];
var family = parents.concat(kids, pets);

The first three lines of this code create three arrays, all representing portions of a family — the names of the parents, children, and pets. The final line of this code calls the concat() method on the parents array and passes the kids and pets arrays to the method. The newly created array, family, contains all the elements of the other arrays. This means family contains the names: John, Jane, Jason, Joe, Jordan, Jackson, and Jimmy.

The order in which the concat() method is called determines the order of the elements in the new array. In this example concat() is called on the parents array, so the elements in this array are the first elements in family. The kids array is the first argument passed to the method, so its elements can be found after John and Jane in family. The pets array is the last argument passed to concat(), so its elements appear at the end of family. Changing how concat() is called changes the order in which the provided arrays are joined together. For example, if the final line is var family = pets.concat(parents, kids), the elements of family would be in this order: Jackson, Jimmy, John, Jane, Jason, Joe, and Jordan.

Sometimes it's beneficial to convert an array to a string. In fact, it's more efficient to do this than to concatenate several strings together. Use the join() method to join the individual elements into a single string. It accepts one argument, specifying a separator to place between the element values. The following example uses the original family array from the previous section:

var familyString = family.join(", ");

This code passes a comma followed by a whitespace character to the join() method called on the family array. This results in familyString, containing the value "John, Jane, Jason, Joe, Jordan, Jackson, Jimmy". The separator passed to the method separates the element's values in the string.

As mentioned earlier, it's more efficient to use the join() method to concatenate array elements than it is to use the + operator to concatenate strings. For this reason you will see developers use something like the following code to generate strings:

var stringParts = [
    "John's family is: ",
    family.join(", ")
];

var familyString = stringParts.join("");

This code first creates an array called stringParts. Its first element is a string value, and its second element is the result of converting the family array. The final result of this code is the string "John's family is: John, Jane, Jason, Joe, Jordan, Jackon, Jimmy".

Like the concat() method, the join() method does not alter the original array.

Arrays are typically used for organizing similar pieces of data. Therefore, it might be desirable to sort that data in alphabetical order if the elements are string values or in numerical order if the data consists of numbers.

The sort() method makes sorting easy: It sorts the elements of the array in alphabetical order. The following example uses the family array yet again:

family.sort();

Unlike the other methods before it, the sort() method alters the original array The elements contained within family are now in the following order: Jackson, Jane, Jason, Jimmy, Joe, John, and Jordan.

The sort() method is case-sensitive: Words starting with an uppercase letter come before words starting with a lowercase letter. So Jackson comes before jackson as the result of a sort in JavaScript.

The sort() method sorts the elements in ascending order: There is not a method or a parameter to sort in descending order. However, there is a method, called reverse(), that can reverse the order of an ascending-ordered array.

The reverse() method alters the array by reversing the order of the array's elements. To get an idea of how this works, let's look at the kids array from an earlier section:

var kids = [ "Jason", "Joe", "Jordan" ];
kids.reverse();

The original kids array can be represented as in the following table:

This table shows each element in the array and its index position. Calling the reverse() method reorders the elements in the array in reverse order, and the elements receive new index positions. The following table shows the array after calling reverse():

By combining the use of sort() and reverse() methods, you can essentially sort an array in descending order, as in the following code:

family.sort().reverse();

Remember that many of the Array object methods return an array; sort() is one such method. Because of this, it's possible to chain method calls to perform multiple processes in a single statement. The call to sort() returns the sorted version of the family array, but instead of the result's being assigned to a variable, the return value is used to call the reverse() method. This is just one technique experienced developers use to write more efficient code.

String objects have two useful methods to search for substrings, or smaller strings that occur within a larger string. They are the indexOf() and lastIndexOf() methods. These methods are useful when you want to determine if a particular string contains a keyword or phrase. Both methods accept a substring as an argument, and JavaScript will search for that substring within the String object the method is called on. These methods are case-sensitive: They do not report a match unless an exact match is found.

The difference between the two methods is how they search for the substring. Look at the following example:

var welcomeString = "Hello, Jeremy! Wonderful day, isn't it, Jeremy?";

alert(welcomeString.indexOf("Jeremy")); // 7
alert(welcomeString.lastIndexOf("Jeremy")); // 40
alert(welcomeString.indexOf("JavaScript")); // −1

The indexOf() method begins searching at the beginning of the string for the specified substring. It then starts searching the string and doesn't stop until it either finds a match or reaches the end of the string. When it finds a match, it immediately returns the index of the match. In this code, indexOf("Jeremy") returns 7 because the substring was found starting at the seventh character position.

The lastIndexOf() method begins searching at the end of the string as opposed to the beginning, and it doesn't stop until it either finds a match or reaches the beginning of the string. When it finds a match of the specified substring, it, too, immediately returns the index position of the match. In this example, lastIndexOf() finds a match that starts at an index position of 40.

If indexOf() or lastIndexOf() does not find a match, it returns a value of −1.

There are times when extracting pieces of a string is beneficial, and JavaScript's String data type allows this with the substr() and substring() methods. Both of these methods provide the same end result, but they do so based on different parameter values.

The substr() method accepts two parameters. The first is required, and it's the index at which to start the extraction. The second parameter is optional. If specified, it determines how many characters after the starting index to extract, including the starting character. If the second parameter is omitted, the substr() method extracts all characters after the starting index. The following code uses the substr() method to extract a portion of a string:

var message = "JavaScript 24-Hour Trainer";
var subString = message.substr(11, 7); // 24-Hour

This code uses the substr() method to extract the 24-Hour portion of the string contained within the message variable. The 2 in 24-Hour is the twelfth character in the string — making the starting index 11 (again, remember that indexes start at 0) — and the phrase is 7 characters long. Passing these two values to the substr() method extracts the phrase 24-Hour and assigns it to the subString variable. The string contained within message is not altered.

The substring() method can provide the same results, but it does so with slightly different data. It still requires a starting index, and the substring() method behaves like substr() if the second parameter is omitted. But if it is specified, it is the index at which to stop the extraction. An important, and often forgotten, behavior of the substring() method is that the extraction includes the characters up to the ending index; it does not include the character at the ending index. The following code rewrites the previous example by using the substring() method:

var message = "JavaScript 24-Hour Trainer";
var substring = message.substring(11, 18); // 24-Hour

Use the method that makes the most sense to you. The substr() method is obviously the better choice if you know the exact length of the desired substring. The substring() method is the better choice when you don't know how long the desired substring is, and can be a powerful tool combined with the indexOf() and lastIndexOf() methods.

In many ways strings are closely related to arrays. In fact, many programming languages see a string as an array of characters. Unfortunately, JavaScript is not one of these languages. While String objects have a length property like array objects, you cannot use index notation to access individual characters as you can with elements in an array. Instead, String objects have a charAt() method. Pass an index to this method and you can retrieve, but not edit, an individual character at the specified index.

It is possible, however, to convert a string to an array by using the split() method: it splits a string into an array of substrings. The method knows where to split the string according to the argument passed to it. If you supply an empty string as an argument, this method creates an array in which each individual character is an element. The following code demonstrates this:

var message = "Hello, World!";
var messageArray = message.split(""); // converts to array

Once the string is in array form, you can access the individual characters using index notation. This method is also quite useful when you have a string containing a list of items delimited by a consistent delimiting character, such as a comma. Look at this code:

var fruitsString = "orange,apple,banana";
var fruitsArray = fruitsString.split(","); // creates array with 3 elements

This code creates an array by splitting the fruitsString string at each comma. The resulting array contains three elements: orange, apple, and banana.

The replace() method accepts two arguments: the string to replace, and the string to replace it with. This method searches the string starting at the beginning and looks for the first occurrence of the specified substring. It does not replace all occurrences of the specified substring — only the first, as shown in the following code:

var message = "Today is Monday. Yesterday was Monday.";
var newMessage = message.replace("Monday", "Tuesday");
alert(newMessage); // Today is Tuesday. Yesterday was Monday.

This code first creates a string value that contains an error. It says that today is Monday and yesterday was Monday. To fix this error, the second line of code uses the replace() method to change "Monday" to "Tuesday" and returns the new string to the newMessage variable. When the alert window displays the new message, it reads, "Today is Tuesday. Yesterday was Monday."

As with all the other String methods discussed in this lesson, the original string (message in this case) is not altered.