Like any kind of apps, there are difficult issues to solve when we write JavaScript apps.
In this article, we’ll look at some solutions to common JavaScript problems.
Meaning of the “at” (@) Prefix on NPM Packages
The @ prefix means that the package is a scoped package.
That means the work with the @ prefix is the namespace of the package.
For instance, @angular/http is has angular as the namespace.
Scoped packages don’t show up in public search.
Many of them are created as private packages.
Write an Inline if Statement in JavaScript
We can write an inline if statement by using the ? in Javascript.
For instance, we can write:
(a < b) ? 'bigger' : 'smaller'
a < b is the boolean expression.
If it’s true , then we return 'bigger' .
Otherwise, we return 'smaller' .
Interface Type Check with Typescript
We can check if an object matches an interface with the in operator.
For instance, we can write:
interface A {
name: string;
}
Then we can create the following function:
function instanceOfA(object: any): object is A {
return 'name' in object;
}
We make the return type of instanceOfA object is A . This way, we return whether the object matches an interface.
Then we can call the function as follows:
if (instanceOfA(obj)) {
//...
}
Handle Newlines in JSON
If we have newline characters in our JavaScript object, then we need to escape them in the JSON string.
Otherwise, we would get an unterminated string literal error.
For instance, instead of writing:
const data = '{ "count" : 1, "foo" : "text\n\n" }';
We write:
const data = '{ "count" : 1, "foo" : "text\n\n" }';
Create an Element with ID
We can create an element with an ID by using the setAttribute method after the createElement method.
For instance, we can write:
const div = document.createElement('div');
div.setAttribute("id", "foo");
Hide or Show Elements with JavaScript
To hide an element we can set the style.display property of an element to 'none' to hide an element.
For instance, we can write:
document.getElementById('foo').style.display = 'none';
to hide the element with ID 'foo' .
If we want to show an element, we can set style.display to 'block' .
So we can write:
document.getElementById('foo').style.display = 'block';
instanceof Return false for Some Literals
If we use instanceof to check the type of primitive literals, we’ll get false for all of them.
For instance, if we have:
"foo" instanceof String
then that will return fale .
Likewise, false instanceof Boolean also returns false .
To check primitive literals for their types, we should use the typeof operator.
For instance, we can write:
typeof str === 'string'
to check if str is a primitive string.
We can do the same for other primitive types like numbers and booleans.
Push Multiple Elements to Array
We cab push multiple items to an array with push .
For instance, we can write:
const arr = [];
arr.push(1, 2, 3);
We call push with 3 numbers and they’ll all be added.
Also, if we have an array, we can use the apply method.
For instance, we can write:
arr.push.apply(arr, [1, 2, 3]);
or:
Array.prototype.push.apply(arr, [1, 2, 3])
To do the same thing.
Also, we can use the spread operator:
arr.push.apply(...[1, 2, 3]);
They all pass in the array entries as arguments.
Make an HTML Back Link
To make an HTML link that goes to the previous URL, we can write:
<a href="javascript:history.back()">Go Back</a>
We call history.back() when the link is clicked to go to the previous page.
Also, we can write:
<a href="#" onclick="history.go(-1)">Go Back</a>
to do the same thing.
Difference Between the currentTarget Property and the target Property
There’s a difference between the currentTarget and the target property because of event bubbling.
target is the element that triggered the event.
currentTarget is the element that the event listener is attached to.
Conclusion
We can make namespaced packages with the @ prefix.
Also, we can call push with more than one argument.
instanceof can’t be used to check primitive values.
Showing and hiding items can be done with JavaScript.
