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.
JavaScript for…in vs for
for-in and for loops are different.
for-in is exclusively used for looping through the properties of an object.
For instance, we can write:
for (const key in obj){
//...
}
key is the property name of an object.
A for loop can be used for anything.
For instance, we can write:
for (let i = 0; i < a.length; i++){
//...
}
We loop through an array a with the loop.
But we can do anything else with it.
Use of .apply() with the ‘new’ Operator
We can use apply with any function.
To use them together, we create a new constructor with the bind and apply method together.
For instance, we can write:
function newCall(Cls, ...args) {
return new (Function.prototype.bind.apply(Cls, args));
}
We created the newCall constructor get the class, we want to call apply with.
Then we get the args .
bind returns a new constructor function that calls apply with the Cls constructor function with the arguments args that we want.
Then we can use the constructor by writing:
const s = newCall(Foo, a, b, c);
We pass the Foo constructor into newCall with arguments a , b , and c .
Then we get a Foo instance created with those arguments.
Use of <script type = “text/template”> … </script>
A script tag with type text/template is used for some libraries as templates.
For instance, jQuery can get the template from this script tag.
If we have:
<script id="hello" type="text/template">
hello world
</script>
<script>
console.log($('#hello').html());
</script>
Then jQuery gets the script tag with ID hello and return the HTML content from it by calling html .
So we get 'hello world' logged in the console log.
Get All Properties Values of a JavaScript Object without Knowing the Keys
We can get all property values of a JavaScript object without knowing the keys in a few ways.
One way is to use the for-in loop:
for(var key in obj) {
const value = obj[key];
//...
}
We can also use the Object.key method to get an array of all the property keys.
So we can write:
const keys = Object.keys(obj);
for (const key of keys) {
const val = obj[key];
}
We use the for-of loop to loop through the array of keys returned from Object.keys .
Object.values returns all the values from an array.
So we can loop through the values without getting the keys:
const values = Object.values(obj);
for (const val of values) {
//...
}
Accessing Nested JavaScript Objects and Arrays by String Path
There are a few ways to get the value of a nested property in an object.
One way is to write a function from scratch:
const resolve(path, obj = {}, separator = '.') {
const properties = Array.isArray(path) ? path : path.split(separator);
return properties.reduce((prev, curr) => prev && prev[curr], obj)
}
We created the resolve method to get the property of each level.
The property path is split by the separator.
Then we go through all the properties to get to the nested property’s value with reduce .
Then we can call it by writing:
resolve("style.width", document.body)
to get an object’s properties.
If there’s an array, we write:
resolve("part.0.size", obj)
where 0 is an index of an array.
To make our lives easier, we can use the Lodash get method.
Then we can write:
_.get(object, 'a[0].b.c');
to get the property by the path.
Response to Preflight Request doesn’t Pass Access Control Check Error
This error means that the options request that’s made before the actual request failed.
To fix this issue, we can turn off CORS.
Also, we can use a proxy like Nginx to handle the options request.
We can also enable CORS properly by making sure the options request responds with a successful response.
Conclusion
The for-in loop is different from a for loop.
To make sure that cross-domain requests succeed, we should make sure that we should configure our server properly.
There are some ways to access the nested path of an object.
We can use bind and apply together.
