Category: JavaScript

Posted on

5 Useful JavaScript String Methods

JavaScript contains a lot of useful methods. Today, we shall look at 5 useful methods for working with strings.

concat()
The concat() method is used to concatenate two or more strings. 

const myString = "The quick brown fox";
const myOtherString = " jumped over the lazy dog.";

In this example, we have two string variables named myString and myOtherString respectively. Using the concatenate method, we can create a third string variable. Let’s name the new variable myNewString.

We assign the concatenated string to the new string variable by attaching the .concat() method to the end of the first string and inserting the second string as the only argument between the brackets.

const myNewString = myString.concat(myOtherString);

This results in the creation of a new string containing the combined text of the original two strings.

console.log(myNewString)
>> The quick brown fox jumped over the lazy dog.

In our example, we created a new string variable containing the results of the concatenation. We do not always have to create a new variable. The .concat() method can also work on its own. The only requirement is a variable to be attached to, and either another variable, text, or number inside the brackets. 

console.log(myString.concat(' is 5 years old.'))
// The quick brown fox is 5 years old.

Using .concat() in the manner above is really not ideal. That example was to illustrate that the method works in different ways. It is much easier to use a + sign to display the contents of myString with additional items.

console.log(myString + ' is 5 years old.')
// The quick brown fox is 5 years old.

substring()
The substring() method is used to extract a portion of a string.

The substring method accepts up to two parameters:

substring(start, ?end)

1. start
2. end (optional)

The numeric position of strings is zero-based, just like in arrays. This means that the first character is 0, the second is 1, etc. For some reason, this method does not include the character which exists at the end position. Think of the end position as more of an ‘up to.’ To include this character, set the end to one number higher. If the start number > end, JavaScript will reverse the order therefore substring(10,5) == substring(5,10).

const myString = "The quick brown fox";

In the following example, we will create a new string containing the word ‘quick’ from the myString variable which contains ‘The quick brown fox’. The first letter in ‘quick’ is at position 4 and the last at position 8. In order to include the character at position 8, select 9 as the end position.

const myNewString = myString.substring(4,9);
console.log myNewString
// quick

If we want to extract ‘brown fox’, we do not need to specify and end position since fox is the last word in the string. All we need to do is specify the start position which is the position of first letter in ‘brown’.

const myNewestString = myString.substring(10);
console.log myNewestString
// brown fox

toUpperCase()
The toUpperCase() method is self-explanatory. It is used to convert a string to all caps.

const myString = "The quick brown fox";
const myNewString = myString.toUpperCase();
console.log(myNewString);
// THE QUICK BROWN FOX

toLowerCase()
The toLowerCase() method is like the toUpperCase() methods except it converts a string to lowercase.

const myString = "The quick brown fox";
const myNewString = myString.toLowerCase();
console.log(myNewString);
// the quick brown fox

repeat()
The repeat() method repeats a string a specified number of times.

const myString = "The quick brown fox";
myString.repeat(2);
// The quick brown foxThe quick brown fox
Posted on

5 Useful JavaScript Array Methods

Residential condominium being built atop existing office building
© 2020 Charles Dunlevy

JavaScript contains a lot of useful methods. Methods are in fact functions which perform actions on the contents of an array, string, or object. To invoke a method, attach it to the end of the item after a decimal. Some methods require parameters entered within the brackets. These take on two forms:

array/string/object.method()

array/string/object.method(parameter)

Today, we shall look at 5 useful methods for working with arrays. The following perform a variety of actions on the contents of the array. Some mutate the array, others just return values.

join()

The join() method joins the elements of an array into a string. It does not mutate the original array.

const myArray = ["Toronto", "London", "Shanghai", "New York"];
myArray.join();
// "Toronto,London,Shanghai,New York"

By default, join() inserts a comma between each element as separators. You may specify different separators by entering characters, strings, etc. as the sole parameter. For example, you may insert a space between each element by entering a blank space between two single quotes within the parameter field. The is useful for creating a sentence out of a list of words/items.

myArray.join(' ');
// "Toronto London Shanghai New York"

myArray.join(' finance ');
// "Toronto finance London finance Shanghai finance New York finance"

You may also use join() to insert the values of one array into another. For example, join array1 with array2 to create a long string containing the contents of both arrays. This is performed by attaching the join() method to the end of array1 and passing array2 in as a parameter. The following example displays the result to the console. 

const array1 = [1, 2, 3, 4, 5];
const array2 = ['a', 'b', 'c'];
array1.join(array2);
// "1a,b,c2a,b,c3a,b,c4a,b,c5"

The next example is similar to the previous one except we create a new array with the results of joining arrays 1 and 2.

const array1 = [1, 2, 3, 4, 5];
const array2 = ['a', 'b', 'c'];
const array3 = array1.join(array2);
console.log(array3);
// "1a,b,c2a,b,c3a,b,c4a,b,c5"

includes()

The includes() method checks for the existence of a specified element returning a Boolean value true or false. If searching for a string, remember, like everything else in JavaScript, this is case sensitive.

const fruits = ['apple', 'banana', 'strawberry'];
fruits.includes('banana');
// true
fruits.includes('kiwi');
// false

pop()

The pop() method is used to remove or ‘pop’ the last element off an array. Compared to some of the other methods used to mutate an array, ‘pop’ by name is easier to make sense of.

const days = ['Monday', 'Tuesday', 'Wednesday'];
days.pop();
// Wednesday
days;
// ["Monday", "Tuesday"]

push()

The push() method may be used when you would like to to add or ‘push’ a new element onto the end of an array. This too has a name that makes sense. We will look at other array-mutating methods at another date. I chose the two with the best names for today’s article.

const fruits = ['apple', 'banana', 'strawberry'];
fruits.push('pear');
// ["apple", "banana", "strawberry", "pear"]

reverse()

The reverse() method reverses the order of the array. This method does not mutate the array. In the following example, the reversed array is output to the console. 

const someNumbers = [1, 2, 3, 4, 5];
someNumbers.reverse();
// [5, 4, 3, 2, 1]

The results may also be assigned to a new array by creating a new one with the original array containing the attached method.

const someNumbers = [1, 2, 3, 4, 5];
const reversedNumbers = someNumbers.reverse();
console.log(reversedNumbers);
// [5, 4, 3, 2, 1]

JavaScript array methods are very useful. There are several more to be discussed in future articles. New methods are being added from time to time when the ECMAScript standard updates (usually annually). Please visit http://www.ecma-international.org/ for more information.

JavaScript continues to grow and gain new features with each update. I am not sure if it is possible to know everything about JavaScript or any programming language for that matter. There is no need to learn every single thing. Just stick to what is needed for the task at hand.