Coding

Avoiding JavaScript Type Conversion Issues – How Type Coercion Works

  • 00:00:00 hi everyone welcome to this video
  • 00:00:02 javascript has its weird parts I already
  • 00:00:05 do have a video about that I do have an
  • 00:00:07 entire course about that but in this
  • 00:00:09 video we're going to have a look at some
  • 00:00:11 weird aspects when it comes to working
  • 00:00:13 with values for example this sometimes
  • 00:00:18 values in JavaScript and working with
  • 00:00:21 those values can be strange why is an
  • 00:00:25 empty array equal to 0 in JavaScript
  • 00:00:28 when at the same time an if statement
  • 00:00:32 does execute its code if we check just
  • 00:00:36 an empty array for being true when also
  • 00:00:39 at the same time this code does not
  • 00:00:42 execute if we check 0 as a condition a
  • 00:00:45 if statement if an array is the same as
  • 00:00:47 0 and the code runs for an array being
  • 00:00:50 checked why does it not run if we check
  • 00:00:52 0 now that's one of the strange things
  • 00:00:56 in JavaScript when it comes to working
  • 00:00:58 with values and in this video we're
  • 00:01:01 going to explore what's up with values
  • 00:01:03 we're going to explore what's up with
  • 00:01:04 this use case and if you want to learn
  • 00:01:07 even more about all kinds of scenarios
  • 00:01:09 with values and type coercion as its
  • 00:01:12 called and all the other strange parts
  • 00:01:14 of JavaScript I also got a full course
  • 00:01:16 about that which is linked below the
  • 00:01:18 video
  • 00:01:25 so back to start what's up with values
  • 00:01:29 in JavaScript of course in JavaScript we
  • 00:01:32 have general values like numbers strings
  • 00:01:36 boolean x' also special kind of values
  • 00:01:40 like null or undefined and we do have
  • 00:01:44 objects and arrays as values though I
  • 00:01:47 will say arrays are just objects in
  • 00:01:50 JavaScript and that's maybe already the
  • 00:01:52 first important note to take something
  • 00:01:54 some developers are not aware of arrays
  • 00:01:57 are objects in Java scripts now there's
  • 00:01:59 one key difference between objects and
  • 00:02:02 numbers strings boolean and so on
  • 00:02:05 objects are reference type values in
  • 00:02:07 JavaScript numbers and strings and
  • 00:02:10 boolean are primitive values and I got a
  • 00:02:13 separate video where I explored this in
  • 00:02:15 greater detail
  • 00:02:16 I'll not focus on that here instead of
  • 00:02:19 days but you will have a look at how we
  • 00:02:21 work with values and value types and how
  • 00:02:24 JavaScript does something which is
  • 00:02:26 called type coercion to convert types
  • 00:02:30 behind the scenes as needed one example
  • 00:02:33 is a simple addition if I add one plus
  • 00:02:36 one where the second one is a string the
  • 00:02:41 result that we get is actually 11 but
  • 00:02:44 not as a number but as a string as you
  • 00:02:46 can tell by the quotes here now that
  • 00:02:48 actually is a case that can be confusing
  • 00:02:50 to a couple of newcomers and it's not
  • 00:02:52 that unrealistic for example if you had
  • 00:02:55 an input field here in your DOM and you
  • 00:02:58 would fetch the input you entered by a
  • 00:03:00 user even if the user typed in a number
  • 00:03:02 that value would always be fetched as a
  • 00:03:05 string that's just how JavaScript works
  • 00:03:07 if you get data from an input element on
  • 00:03:10 the page you get it as a string and if
  • 00:03:13 you then use that input even though you
  • 00:03:15 expect it to be a number
  • 00:03:17 technically in such a calculation you
  • 00:03:20 would get such an unexpected result 11
  • 00:03:22 as a string instead of 2 as a number now
  • 00:03:26 what's happening here behind the scenes
  • 00:03:28 is something called type coercion or
  • 00:03:30 value coercion and that's simply a fancy
  • 00:03:33 term of saying JavaScript converts one
  • 00:03:36 of the two values here to a
  • 00:03:38 different value and it has a couple of
  • 00:03:40 rules that it follows for that now I do
  • 00:03:43 cover all those rules in greater detail
  • 00:03:45 in my course which is link below the
  • 00:03:47 video the rule in this case is that if
  • 00:03:49 you add something to a string
  • 00:03:51 it always converts the ever non string
  • 00:03:54 value to a string why because that's the
  • 00:03:57 safer thing to do if it would try to
  • 00:04:01 convert the string to a number instead
  • 00:04:03 that would work in the case of 1 but it
  • 00:04:07 would not work in the case of hello
  • 00:04:10 now since javascript doesn't look into
  • 00:04:12 your string in advance it takes the safe
  • 00:04:15 route and knows I can always concatenate
  • 00:04:17 strings I can always combine two strings
  • 00:04:20 to a longer string but I cannot always
  • 00:04:22 convert a string to a number and use it
  • 00:04:25 in a mathematical calculation one plus
  • 00:04:28 hello if it tried to convert hello to a
  • 00:04:30 number would give us not a number as a
  • 00:04:33 result because hello can't be converted
  • 00:04:36 to a number you can of course easily
  • 00:04:38 check that if you try to convert hello
  • 00:04:41 to a number with the number function
  • 00:04:43 that gives you not a number and one plus
  • 00:04:45 not a number would yield not a number in
  • 00:04:48 return
  • 00:04:48 that's why javascript in this scenario
  • 00:04:51 when you use the addition operator with
  • 00:04:53 a string and a number converts the
  • 00:04:55 number to a string and not the string to
  • 00:04:57 a number and that's already one of the
  • 00:04:59 tricky details you need to know because
  • 00:05:02 that actually is a common gotcha as I
  • 00:05:05 explained with those input fields now if
  • 00:05:08 you for example add a boolean to a
  • 00:05:10 number it's different there the boolean
  • 00:05:13 is converted to a number why because
  • 00:05:16 there only are two possible boolean
  • 00:05:18 values in JavaScript true and false and
  • 00:05:21 there simply is a hard rule true can be
  • 00:05:24 converted to a one false to a zero so if
  • 00:05:27 you combine a boolean with a number
  • 00:05:28 javascript knows it's safe to convert to
  • 00:05:31 boolean to a number because I got clear
  • 00:05:33 rules on how to convert it so if I add
  • 00:05:36 true I convert it to one if I add false
  • 00:05:39 I convert that to zero so 1 plus false
  • 00:05:41 logically is 1 that's another thing to
  • 00:05:44 know
  • 00:05:45 now also interesting is of course that
  • 00:05:47 if you have 1 times 1 like this you do
  • 00:05:51 get one as a now
  • 00:05:52 though and one times two also gives you
  • 00:05:56 a number now why is that when I just
  • 00:05:58 explained that for addition JavaScript
  • 00:06:01 would take the safe route and convert
  • 00:06:03 the number to a string and not the
  • 00:06:05 string to a number here it seems to do
  • 00:06:07 the opposite and I can't tell you it's
  • 00:06:09 the same for the division operator and
  • 00:06:11 so on why is that the case well because
  • 00:06:14 the addition operator the plus is a
  • 00:06:16 special kind of operator it works on
  • 00:06:19 numbers in a mathematical way but also
  • 00:06:22 on strings to build a longer string now
  • 00:06:25 the multiplication and division
  • 00:06:27 operators as well as the modulus
  • 00:06:29 operator ends on also the minus operator
  • 00:06:32 those really only work on numbers you
  • 00:06:35 can't use minus on a string you can't
  • 00:06:38 for example do hello – hello and get H
  • 00:06:44 this does not work this might work in
  • 00:06:47 other programming languages but not in
  • 00:06:48 JavaScript this gives you not a number
  • 00:06:50 why because the multiplication division
  • 00:06:53 – and modulus operators those operators
  • 00:06:56 only work on numbers therefore
  • 00:06:58 JavaScript in that case does not look
  • 00:07:01 for a safe route but it always converts
  • 00:07:04 all included values to numbers it forces
  • 00:07:07 a conversion and if that conversion
  • 00:07:09 doesn't work like here it simply
  • 00:07:11 converts hello to not a number and ello
  • 00:07:13 to not a number and not a number – not a
  • 00:07:16 number gives you another number if it
  • 00:07:18 works however like in these cases here
  • 00:07:21 well it converts – to a number and makes
  • 00:07:24 the calculation with a number another
  • 00:07:26 important rule when it comes to these
  • 00:07:28 operators the plus operator really is a
  • 00:07:31 special kind of operator in that regard
  • 00:07:34 so these are some of the basic rules and
  • 00:07:37 these are some of the most important
  • 00:07:39 rules already that's what's up with
  • 00:07:41 JavaScript values and this
  • 00:07:43 behind-the-scenes value conversion now
  • 00:07:46 if the value conversion does unexpected
  • 00:07:48 things you can always do an explicit
  • 00:07:50 conversion by for example using the
  • 00:07:52 number function or the parse int or
  • 00:07:55 parsefloat functions or you use string
  • 00:07:58 to convert a number to a string of
  • 00:08:00 course that all the works so you can
  • 00:08:02 always do such explicit conversions if
  • 00:08:04 you're not sure what
  • 00:08:06 the implicit rule would be or if you
  • 00:08:09 know that the implicit conversion
  • 00:08:11 JavaScript is about to do is not the
  • 00:08:13 result you want to happen
  • 00:08:15 so these are some crucial basics now
  • 00:08:18 let's come back to that strange case
  • 00:08:20 from the beginning where an empty array
  • 00:08:22 is equal to 0 for example why is that
  • 00:08:25 the case an empty object on the other
  • 00:08:27 hand is not equal to 0 as you can tell
  • 00:08:31 so why does that work when I said that
  • 00:08:34 arrays are objects and even if that
  • 00:08:37 would not be the case why is it empty
  • 00:08:39 array the same as 0 well keep in mind
  • 00:08:41 what I said
  • 00:08:42 objects are primitive types and arrays
  • 00:08:46 are objects even though we have this
  • 00:08:48 difference here I'll come back to that
  • 00:08:49 as well so arrays are objects and
  • 00:08:52 objects are reference types reference
  • 00:08:54 values what does this mean it means that
  • 00:08:58 they're not primitive values now the
  • 00:08:59 thing is that the plus and the minus and
  • 00:09:03 the division operators only work on
  • 00:09:05 primitive values now here of course
  • 00:09:07 we're not using plus minus or division
  • 00:09:10 here we're using the Equality operator
  • 00:09:12 now to understand what happens here
  • 00:09:14 however let's go back to that primitive
  • 00:09:16 value case let's say we have an empty
  • 00:09:19 array and we add 1 to it this gives us 1
  • 00:09:22 but as a string now that's especially
  • 00:09:24 strange if we keep in mind that an empty
  • 00:09:26 array seems to be the same as 0 maybe we
  • 00:09:29 would have expected 1 as a number then
  • 00:09:31 not as a string well let's go back to
  • 00:09:35 the plus case here I said that plus and
  • 00:09:38 minus ends on only work with primitive
  • 00:09:41 values now the array is an object and
  • 00:09:43 therefore is not a primitive value
  • 00:09:45 JavaScript could fail it could do that
  • 00:09:48 but it actually doesn't now why does it
  • 00:09:52 not fail because it has a fallback
  • 00:09:55 mechanism for the case that you are
  • 00:09:58 going to use an object in a place where
  • 00:10:01 a primitive value is needed you can't
  • 00:10:03 imagine that every object in JavaScript
  • 00:10:05 has kind of a built-in two primitive
  • 00:10:08 method now you can't call that method
  • 00:10:11 it's internal but you can't imagine that
  • 00:10:13 something like this exists and this
  • 00:10:15 method is called automatically by the
  • 00:10:17 JavaScript engine when
  • 00:10:19 a primitive value is needed and you have
  • 00:10:22 a reference value so in object instead
  • 00:10:25 and that would be the case here
  • 00:10:27 now what does to primitive do it
  • 00:10:30 basically figures out which kind of
  • 00:10:32 primitive value it wants to convert this
  • 00:10:34 and typically as a general rule of thumb
  • 00:10:36 with some exceptions but typically an
  • 00:10:39 object is converted to a string so what
  • 00:10:43 happens the end is that the built into
  • 00:10:45 string method is called and an array
  • 00:10:47 where you call to string on is simply an
  • 00:10:50 empty array if you by the way had an
  • 00:10:52 array with values inside of it and you
  • 00:10:56 would call to string on that you would
  • 00:10:58 get such a string simply the values
  • 00:11:01 inside of the array combined with commas
  • 00:11:03 but since it's an empty array here we
  • 00:11:06 get an empty string well and that's the
  • 00:11:08 reason why plus one gives us a string
  • 00:11:10 one as a result this year this empty
  • 00:11:13 array is converted to a primitive this
  • 00:11:15 in turn calls to string so we got a
  • 00:11:17 string here so this year MTR a plus one
  • 00:11:21 could also be written as empty string
  • 00:11:23 plus one and you learned that with the
  • 00:11:25 plus operator if you have a string and a
  • 00:11:27 number the number is going to be
  • 00:11:29 converted to a string and hence we get
  • 00:11:31 one as a string as a result here now if
  • 00:11:35 you had an object plus one you get one
  • 00:11:39 as a number though now why is that on
  • 00:11:43 the other hand if I have an object plus
  • 00:11:45 hello I get not a number what why is
  • 00:11:49 that happening why is an object
  • 00:11:51 converted to a number now and not to a
  • 00:11:54 string now here we have to be aware of
  • 00:11:56 the console here in chrome that's by the
  • 00:12:00 way all the way I got an error with this
  • 00:12:02 syntax typically we create an object
  • 00:12:05 like this in JavaScript but this also
  • 00:12:08 creates a block statement now the chrome
  • 00:12:11 console here has a couple of
  • 00:12:12 simplifications we can for example write
  • 00:12:14 a number and output it immediately now
  • 00:12:16 if we would write just a number in a
  • 00:12:19 JavaScript file though and this file
  • 00:12:21 would be executed this would not be a
  • 00:12:23 valid JavaScript statement so thus far I
  • 00:12:26 used this shortcut here in the console
  • 00:12:28 to immediately log the result of
  • 00:12:31 calculations and so on but this is
  • 00:12:32 actually not
  • 00:12:33 that we could have written in a
  • 00:12:34 JavaScript file there of course you
  • 00:12:37 store values and results in constants
  • 00:12:39 and variables and if we do the same here
  • 00:12:41 if I store my object in a constant here
  • 00:12:44 and hence it's not confused for that
  • 00:12:46 block statement syntax which also exists
  • 00:12:49 in JavaScript with curly braces now if I
  • 00:12:51 use that object plus 1 we get a
  • 00:12:53 different result and now we can always
  • 00:12:56 use the comparison operator so that's
  • 00:12:58 important to realize about the chrome
  • 00:13:00 console which I'm using as a playground
  • 00:13:02 here now with that in mind we see that
  • 00:13:05 an object an empty object plus 1 gives
  • 00:13:08 us object object 1 now it's the same
  • 00:13:10 logic as with the array the object is
  • 00:13:13 converted to a primitive and it's
  • 00:13:14 converted to a string indeed and in
  • 00:13:16 chrome an object just happens to be
  • 00:13:19 represented by this kind of string
  • 00:13:21 simply object object and then we
  • 00:13:23 concatenate one with the plus operator
  • 00:13:26 so same logic as for an array in the end
  • 00:13:29 now with that in mind let's have a look
  • 00:13:31 at the comparison operator now actually
  • 00:13:34 the comparison operator can be quite
  • 00:13:36 tricky and again I dive into all the
  • 00:13:38 tricky parts and niche cases in that
  • 00:13:41 course which I mentioned a couple of
  • 00:13:43 times already here I want to focus on
  • 00:13:45 some of the most striking cases let's
  • 00:13:48 start simple and let's compare one cube
  • 00:13:51 one like this with two equal signs this
  • 00:13:53 gives us true and you also have two
  • 00:13:55 triple equals an operator where this
  • 00:13:57 would give false the reason is that with
  • 00:13:59 the double equal sign operator you do
  • 00:14:02 allow for type coercion so you do allow
  • 00:14:04 JavaScript to convert one of the two
  • 00:14:06 values and then simply compare the
  • 00:14:09 converted value with the triple equal
  • 00:14:12 sign operator you are saying I don't
  • 00:14:14 just care about the value I also care
  • 00:14:17 about the exact type so please
  • 00:14:19 JavaScript don't convert any types and
  • 00:14:22 therefore JavaScript with the triple
  • 00:14:24 equals an operator compares the
  • 00:14:26 unconverted number to the unconverted
  • 00:14:28 string and that can only be false
  • 00:14:31 because how could it be equal if we have
  • 00:14:33 different types here on the double
  • 00:14:35 equals an operator though one of the two
  • 00:14:37 values is converted and therefore we get
  • 00:14:40 true now we can find out which of the
  • 00:14:43 two values was converted if we compare 0
  • 00:14:46 an empty string this also gives us true
  • 00:14:48 but if I convert zero to a string we see
  • 00:14:51 that would be zero as a string so we can
  • 00:14:54 tell that the string was converted to a
  • 00:14:56 number here because if the number would
  • 00:14:58 be converted to a string implicitly then
  • 00:15:01 this would not yield true here this
  • 00:15:03 comparison because zero converted to a
  • 00:15:06 string is zero as text not an empty
  • 00:15:09 string so that's how the double equals
  • 00:15:11 an operator works and it has a couple of
  • 00:15:13 neat cases at exceptions but generally
  • 00:15:16 that's the idea behind it double equals
  • 00:15:18 an operator means one of the two values
  • 00:15:20 needs to be converted now let's go back
  • 00:15:24 to that case here an empty array is
  • 00:15:26 equal to zero why does this yield true
  • 00:15:30 well because of that conversion thing as
  • 00:15:33 I said one of the two values needs to be
  • 00:15:35 converted now which of the two values
  • 00:15:37 will be converted here Cyrille can't
  • 00:15:40 really be converted to an object but we
  • 00:15:43 learned that objects can be converted to
  • 00:15:45 primitive values so that's what's
  • 00:15:47 happening here this array is converted
  • 00:15:49 to a primitive value now we learned that
  • 00:15:52 by default two string is called and
  • 00:15:54 therefore the empty array is converted
  • 00:15:56 to an empty string that's what we saw
  • 00:15:58 before and you can simply imagine that
  • 00:16:01 then and now our conversion happens and
  • 00:16:04 that string is converted to a number and
  • 00:16:06 an empty string is converted to zero in
  • 00:16:10 such a comparison we can see that an
  • 00:16:11 empty string is also equal to zero so
  • 00:16:14 because that array is converted to an
  • 00:16:16 empty string and then effectively to
  • 00:16:18 zero this yells true because of this cue
  • 00:16:22 primitive conversion that's built-in now
  • 00:16:25 on the other hand if I take my empty
  • 00:16:27 object and convert this to zero we get
  • 00:16:29 false why well we learned why because
  • 00:16:32 object to primitive also calls to string
  • 00:16:35 in the end but the string representation
  • 00:16:38 of an object is not an empty string but
  • 00:16:40 this strange kind of string well and if
  • 00:16:42 we have this string object object
  • 00:16:48 and I compared this to zero it's logical
  • 00:16:50 that we get false right so that's why
  • 00:16:53 this gives us false this comparison
  • 00:16:56 whilst this comparison gives us true
  • 00:16:58 it's really all about that Q primitive
  • 00:17:01 conversion and that implicit type
  • 00:17:04 conversion which is triggered by
  • 00:17:05 JavaScript on various operators like
  • 00:17:08 plus minus or also the Equality operator
  • 00:17:11 now with that in mind there's one
  • 00:17:14 remaining thing I want to dive in why
  • 00:17:17 can I write an if statement and pass in
  • 00:17:19 an empty array for example and that's
  • 00:17:23 not an unrealistic use case by the way
  • 00:17:25 you could have code where you are
  • 00:17:27 working with some data which either is
  • 00:17:29 null or undefined or holds an array of
  • 00:17:31 data and you want to check if you got an
  • 00:17:34 array of data or null or undefined so
  • 00:17:36 here we check if we have an array of
  • 00:17:38 data of course typically that would be
  • 00:17:40 stored in some variable or constant but
  • 00:17:42 here we're doing it on the fly and we
  • 00:17:44 want to execute the code in here only if
  • 00:17:46 we have an array this works now you
  • 00:17:50 might expect that if I execute this this
  • 00:17:53 code does not run because this is an
  • 00:17:55 empty array maybe or because it's
  • 00:17:58 implicitly converted to zero and if zero
  • 00:18:01 indeed would not execute that code well
  • 00:18:03 I'll dive into these things in a second
  • 00:18:06 let's execute it for now and we see the
  • 00:18:08 code in the if statement does run why
  • 00:18:11 now this does not directly have
  • 00:18:13 something to do with that value
  • 00:18:15 conversion I talked about instead here
  • 00:18:18 we have to talk about a different
  • 00:18:19 concept in JavaScript truthy and falsy
  • 00:18:23 values truthy and falsy these are really
  • 00:18:27 JavaScript specific turns generally in
  • 00:18:31 places like a if statement but all's in
  • 00:18:33 a while loop for example you have a
  • 00:18:35 condition and this wants true or false
  • 00:18:38 that's how it generally works and if we
  • 00:18:41 had false here of course this code would
  • 00:18:46 whoops this code would not run we don't
  • 00:18:49 see this works here but JavaScript is
  • 00:18:51 flexible besides true and false it also
  • 00:18:54 expects basically all other kinds of
  • 00:18:56 values and it has certain rules on which
  • 00:18:59 value is treated as fall
  • 00:19:02 or falsey therefore since it's not
  • 00:19:04 really false and which value is treated
  • 00:19:07 as true or true the– since it's not
  • 00:19:10 really true and the rule is pretty
  • 00:19:12 simple
  • 00:19:12 generally all values are treated as true
  • 00:19:16 as true the– with some exceptions and
  • 00:19:19 these exceptions are of course mentioned
  • 00:19:21 in my course but you also find them for
  • 00:19:23 example on MDM falls of course is false
  • 00:19:26 but also 0-0 this is a big int type then
  • 00:19:32 an empty string null undefined and not a
  • 00:19:34 number so these values fed into a if
  • 00:19:37 statement will not trigger the code in
  • 00:19:40 the if statement all our values will
  • 00:19:43 execute it and as you see that's a
  • 00:19:45 pretty short list and objects no matter
  • 00:19:48 if they're empty or not the same for
  • 00:19:50 arrays are not included here we only
  • 00:19:52 have some primitive values here and only
  • 00:19:55 some primitive values like empty strings
  • 00:19:57 0 null or undefined now that's the
  • 00:20:00 reason why if 0 for example does not
  • 00:20:04 execute that code this works does now
  • 00:20:09 not run because 0 is on that list of
  • 00:20:12 false he values and that's really
  • 00:20:15 important with the if statement there is
  • 00:20:17 no value conversion this array is not
  • 00:20:20 converted to an empty string which would
  • 00:20:22 be false here but instead it's kept as
  • 00:20:24 an array because there is this simple
  • 00:20:26 rule everything including objects and
  • 00:20:29 arrays everything is truth E and there
  • 00:20:31 really are some exceptions which are not
  • 00:20:33 truth E but JavaScript will not try to
  • 00:20:36 convert objects to those exceptions
  • 00:20:39 instead it just takes objects no matter
  • 00:20:42 if they're empty or not as truth e it's
  • 00:20:45 as simple as that so that's important to
  • 00:20:47 keep in mind here we got no implicit
  • 00:20:50 value conversion here JavaScript really
  • 00:20:53 takes the value as this and that's the
  • 00:20:55 case for if for awhile and forever
  • 00:20:57 similar places and that's it for this
  • 00:21:00 video now you could dive into more
  • 00:21:02 detail you could have a look at the end
  • 00:21:04 and or operators more exceptions like
  • 00:21:08 the date object which works a bit
  • 00:21:10 differently but I do that in the course
  • 00:21:12 if you're interested but this video
  • 00:21:14 hopefully helped you
  • 00:21:15 understand why values and value types
  • 00:21:18 can be tricky in JavaScript and which