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.
Reset a File Input
We can reset a file input by setting the value property of the input to an empty string.
For instance, we can write:
document.getElementById("file-input").value = "";
Comparing Date Part Only without Comparing Time in JavaScript
We can compare the dates without comparing the time if we set their hours to be the same.
To do that, we can set both to the same hours:
const date1 = new Date();
const date2 = new Date(2011,8,20);
date1.setHours(0, 0, 0, 0);
date2.setHours(0, 0, 0, 0);
We set both date1 to date2 to midnight.
Now we can compare both only by their dates.
Trigger an onchange Event Manually
We can trigger change events by using the Event constructor.
For instance, we can write:
const event = new Event('change');
element.dispatchEvent(event);
We create the event with the Event constructor.
Then we call dispatchEvent on the element with the event object as the argument.
Get String in YYYYMMDD Format from a JavaScript Date Object
To get a date as a string in YYYYMMDD format, we can use the built-in date methods to do it.
For instance, we can write:
const mm = date.getMonth() + 1;
const dd = date.getDate();
const yyyymmdd = [date.getFullYear(), `${mm > 9 ? '' : '0'}mm`,
`${dd > 9 ? '' : '0'}dd`].join('');
We cal getFullYear to get the 4 digit year.
getMonth gets the month. We’ve to add 1 because the month is zero-based in a JavaScript date.
getDate returns the day.
Then we just put them all in the array and call join to combine them together.
Dot Notation vs. Brackets for JavaScript Property Access
We can use the dot or brackets notation for accessing JavaScript properties.
For instance, we can write:
const foo = form["foo"];
or:
const foo = form.foo;
They are the same for string keys.
Dot notation is faster and easier to read.
But square bracket notation lets us access properties with special characters or use variables to access properties.
Object Spread vs. Object.assign
We can use the spread syntax or Object.assign to copy or combine objects.
The spread syntax is shorter but is not dynamic.
For instance, we can write:
const obj = {...a, ...b};
We spread the entries of objects a and b into a new object and assigned it to obj .
It’s also available in ES2018 or later only.
If we need something more dynamic, we can use Object.assign .
It’s also available in older versions of JavaScript.
For instance, we can write:
const obj = Object.assign({}, a, b);
to do the same thing as before.
However, it’s longer than using the spread syntax.
We can also combine a dynamic number of objects if they’re in an array by using the spread operator:
const obj = Object.assign({}, ...objs);
where objs is an array of objects.
Differences between JSON and JSONP
The difference between JSON and JSONP is that we can use JSONP despite the same-origin policy.
The JSON is passed into a callback with JSONP.
But this is not the case with JSON.
For instance, a JSON response is:
{ "name": "james", "id": 5 }
But JSONP is passed into a callback which we specify with the callback query parameter.
For instance, if we have:
?callback=func
in the query string of the URL, then we write:
function func(json){
console.log(json.name);
}
to get the JSONP response.
json is also:
{ "name": "james", "id": 5 }
Difference between Object.create() and new Constructor()
Object.create lets us create an object that inherits directly from another object.
If we use a constructor to create an object, then we create an object that inherits from the constructor’s prototype.
For instance, if we have:
const foo = Object.create(bar);
Then foo inherits properties from bar .
But if we write:
const foo = new Foo();
then foo inherits from Foo ‘s prototype.
Conclusion
We can reset a file input by setting its valuye property to an empty string.
Spread and Object.assign can do similar things.
Object.create and constructors are also different.
We can also call date methods to get parts of a date.
