You might also get a question regarding equality or comparison inside JavaScript.
And as you can see here, we have a question designed this low comparison function.
And for this, you must know the difference of JavaScript comparison, which is native seller comparison
and deep comparison.
So in, say, JavaScript, we can simply write one equals two.
We're getting false.
One equals one is true.
This is working because we're comparing primitives.
But if we will compare here, a equals one.
And here is an object.
A equals one.
But getting false.
Why is that?
Because we can't compare objects like this in JavaScript because they're referencing different objects
inside the memory.
And you have exactly the same problem with real empty array does not equal empty, right?
And yes, we can understand why it is working like this, but it is not comfortable because normally
developers want to compare arrays and objects by values and not like reference to the object and the
memory.
This is why we have shallow comparison and dip comparison functions.
So the idea is that shallow comparison is faster than deep comparison, but it will fix problems with
comparing objects or race.
It will fix only not nested arrays or objects, which actually means if we will be a comparison, compare
a.
And here we have an object with view one and here be one.
We will still get an answer, even with seller comparison function.
And this is completely normal because in this case, we want to compare every single value nested.
And then we must use this comparison and dip comparison is extremely slow because we are checking every
single value, but it will for also give you a true answer.
So in this video, we must write a shallow comparison function, which means we want to fix comparison
of race and objects, but we must not compare nested arrays and objects.
This is how shallow comparison is working.
And actually, here I have an additional function type off, which will help us tremendously in building
celo comparison.
And as you can see in browser, we can simply just type off on different type of data.
For example, for no, we're getting string number four string of this to get in the stream.
And here we can write an object and then we get an object, which actually means it is really nice to
get the type of variable as a string.
And for us, the most interesting part is this object prototype to strain called input.
And as you can see in input, we are writing, for example, one and we get an object number.
And actually, this regular expression here will simply remove object and we will get this.
But with no, this is how this function is working.
So here I want to create our shallow compare function and we must provide here to arguments.
So we have source and target.
And these are two things that we want to compare, for example, two variables.
And first of all, we want to compare a data type because if we have a different data type, then we
should not do anything and it means that they're not equal.
This is where we can write Eve type of source does not equal type of, but then here we can simply return
false.
This is why it is super performant.
We don't compare anything with simpler, get a type, compare them and wear out.
After this, we must write logic for our primitives.
And here we can simply use plain native JavaScript comparison.
So I am right in here.
If source equals with three equals Typekit, then here we are just returning, which actually means
this single line will compare all primitives and now we just need to build cases for our objects and
the race.
First of all, let's cover our arrays.
And here we want to check type of our source equals array and then we want to apply this logic.
And you might ask, OK, but why?
Why just chicken sauce and not a turtle?
Because actually, here on the top already knows that both source and target are of the same type.
In other case, we're already out of the function.
So here we know that source and target are both arrays, and now we want to compare them.
But actually, we can make some performance improvement.
So here we can compare just a length of two arrays.
And if they are different, then we should not compare anything because they're not equal.
So here I can write Eve source length does not equal our Typekit length.
Then we're old.
So here simply return false.
Now we want to compare this to arrays, and the easiest way to do it is to use every software, check
in every single element inside an array and compare it.
So here I want to write return source every.
So we're checking every single element of the source.
And here we have access to element and index.
And what we can right here is our element equals Typekit index.
In this case, we are comparing every single element of our source with every single element of the
strategy.
But as you can see here, we're using native JavaScript comparison, which means it will work for primitives,
but it won't work, for example, for objects or race.
How does it look like?
Let's reload the page and right here, our function, sell or compare, and we can provide now Ray with
primitives.
So here we have one and one and we are getting through, which actually means our function is working
correctly because a native JavaScript, you can't compare one and one, it will be false.
And our function is working correctly.
Now we must try the similar code for our object.
This is why here we can write eve type of source equals object.
Then we want to apply our logic.
And again, I want to improve performance.
This is why here, first of all, we can check, for example, object keys and compare the length of
the keys.
If the length is different than this, objects are for sure different.
So here we can write object dot keys.
Here we have sirs and we are comparing the length.
So here length does not equal our object keys.
And here we have our target dot length.
In this case, we can simply return false and we should not do any comparison.
And actually, here now we need to compare objects.
So for this, I will also use every.
So here I want to return objects to keys and them getting in the way of strings of keys of our object.
And here we are providing our source.
After this, we can use every and here, as in every single element, we getting our key.
And now we can compare source key.
So we're getting the value and we compare here Typekit key.
In this case, we are comparing every single value of our object.
But as you can see with plain JavaScript comparison, which means it will work for primitives, but
it won't work for deep nested elements.
Let's check this out.
I will rely on the page.
Here is our shallow compare.
But in this case, we want to compare object a one and object to one.
And as you can see here, I have some typos, so here is not source.
Let's change this.
Now, as you can see, it is working and we can compare our objects.
And actually, now I want one more comparison for dates.
And this is extremely easy to do.
So here we can try a type of source equal state.
Then we want to compare just two numbers because actually, we can compare every date to milliseconds
and compare numbers is extremely efficient.
This is why here we can write returns.
Source Don't get time.
This will get milliseconds equals Typekit dot.
Get time.
And in this case, we're simply comparing to numbers, and this is totally fine.
So this is how we're building a comparison function.
And actually, this is how I want to see a comparison by default in JavaScript.
But unfortunately, we don't have it.
This is why we must build this function on our own or use it from some library like RAM de la Dash or
just npm package.
And if you're answering such a question about Trello comparison, you must say that it is super performant
in comparison to deep comparison, but it can't compare nested elements, which is totally fine.
And you just need to know for what case you're using it.