Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some tips we should follow to write JavaScript code faster and better.
Get the Last Occurrence of a Substring in a String
The lastIndexOf method returns the index of the last occurrence of a substring in a string.
For instance, we can write:
'jane, joe, and joe'.lastIndexOf('joe')
Then we get 15.
It returns -1 if the substring isn’t found.
Get the First Occurrence of a Substring in a String
The indexOf method returns the index of the first occurrence of a substring in a string.
For instance, we can write:
'jane, joe, and joe'.indexOf('joe')
Then we get 6.
It returns -1 if the substring isn’t found.
Check if a Substring is in a String
We can check if a substring is in a string with the includes method.
For instance, we can write:
'jane, joe, and alex'.includes('joe')
Then it returns true .
Otherwise, if we have:
'jane, joe, and alex'.includes('foo')
then it returns false .
It also takes a second argument to indicate which index we want to start the search.
For example, we can write:
'jane, joe, and alex'.includes('joe', 10)
then it returns false .
Check if a String Ends with a Substring
The endsWith method lets us check if a string ends with a substring.
For example, we can write:
'jane, joe, and alex'.`endsWith`('alex')
then it returns true .
We can also pass in an integer to search for a substring with the given length of the string.
For example, we can write:
'jane, joe, and alex'.`endsWith`('alex', 5)
Then it returns false since 'alex' isn’t in the first 5 characters of the string.
Combining 2 or More Strings
The concat method lets us combine 2 or more strings.
For instance, we can write:
'jane'.concat(' ', 'smith');
to get 'jane smith' .
Also, we can write:
'jane'.concat(' ').concat('smith');
to get the same thing.
Get the Unicode Character Code of a Character
The charCodeAt method lets us get the character code of a character./
For instance, if we have:
'a'`.charCodeAt(0)`
Then we get 97 .
We can also use the codePouintAt method:
'a'`.codePointAt(0)`
to get the same result.
Get a Character from a String by Index
The charAt method lets us get the character by its index.
For example, we can write:
'jane'.charAt(0)
to return 'j' .
Find the Location of a Substring that Matches a Given Pattern
The search method lets us search for a substring with the given pattern.
For instance, we can write:
'jane, joe, and alex'.`search`('jane')
Then we get 0.
We can also search with a regex.
For example, we can write:
'jane, joe, and alex'.search(/\b\[a-z\]{3}\b/)
Then we get 6.
If no match is found, then -1 is returned.
Replace a String with the Given Pattern with Another String
The replace method lets us replace a substring with the given pattern with the given substring.
For instance, we can write:
'jane, joe, and alex'.replace(/\b\[a-z]{3}\b/, 'may')
Then we get “jane, may, and alex” .
List All Methods of an Object
We can get all the methods of an object with Object.keys and the typeof operator.
For example, we can write:
const getMethods = (obj) => Object.keys(obj).filter(key => typeof obj\[key\] === 'function')
Object.keys only get noninherited string properties of an object.
So if we have:
const person = {
name: 'james',
eat() {},
drink() {}
}
Then we can call getMethods by writing:
`getMethods(`person)
And get [“eat”, “drink”] .
Style a DOM Element
We can style an element in various ways.
We can add or remove classes from an element.
Also, we can add inline styles to it.
Given that we have the following element:
const element = document.querySelector('#foo')
We can use the classList property of the element to add and remove classes:
element.classList.add('fancy')
element.classList.remove('fancy')
Also, we can access the style property as follows.
We can write:
element.style.color = 'green';
Adding and removing classes are preferred because it’s faster than changing styles on the fly.
Conclusion
We can add styles to an object by using the styles property.
The classList property lets us add or remove classes from an element.
There are string methods to get the info we need from a string.
Also, we can replace and search for substrings.
