Why 0.1 + 0.2 === 0.30000000000000004: Implementing IEEE 754 in JS

Floating point math is tricky. In this video, we'll learn how these numbers work in computers, and build a software implementation from scratch in JavaScript.
=[ 🔗 Links 🔗 ]=
- ⭐️ Patreon: / lowleveljavascript
- 💌 Updates to your inbox: tinyletter.com/lowleveljavasc...
- Floating Point Arithmetic: en.wikipedia.org/wiki/Floatin...
- 16 Bit Floats: en.wikipedia.org/wiki/Half-pr...
- IEEE 754 Spec: ieeexplore.ieee.org/document/...
- Fabien Sanglard's awesome blog on the subject: fabiensanglard.net/floating_po...
- Denormalised Numbers: en.wikipedia.org/wiki/Denorma...
- Github Repo: github.com/LowLevelJavaScript...

Пікірлер: 110

  • @KemalPiro
    @KemalPiro4 жыл бұрын

    I've recently discovered this channel and you're doing a really great job. There is a lack of low-level staff like that on YT because everyone want's to create "Yet another React tutorial". Keep it up :)

  • @g3n3ricnam35
    @g3n3ricnam352 жыл бұрын

    The idea that 754 is a compression algo is a really profound way of looking at the world of computation. It brings a new level of thinking to the implementations of the world and helped me better think critically of these systems. Thanks!

  • @eflat__major
    @eflat__major4 жыл бұрын

    Fantastic, I love it! Keep it up man. This channel has great potential.

  • @pj1986
    @pj19864 жыл бұрын

    Wow, amazing job and presentation, this is an incredible amount of info. Hats off to you sir

  • @sadraquesantos9766
    @sadraquesantos97664 жыл бұрын

    Holy shit, this channel is pure gold, I didn't even know your channel. Keep up with this awesome job.

  • @Lucky10279
    @Lucky102793 жыл бұрын

    Thank you so much for this! I learned floating point before but completely forgot how it worked but it just came up in another class where my professor's explanation didn't make any sense. Now I'm actually understanding it from your video. :)

  • @LowByteProductions

    @LowByteProductions

    3 жыл бұрын

    Glad it helped!

  • Жыл бұрын

    always knew IEEE754 could store floating numbers, but today i learned that it also allows to store -0, NaN, and infinity in a specific format. ty!

  • @dibaliba
    @dibaliba4 жыл бұрын

    this channel is just on fire 🔥🔥🔥🔥

  • @kungg7392
    @kungg73924 жыл бұрын

    I like this video. I think I understand the implementing of the float-numbers today. Thank you very much.

  • @rakshiths.n9680
    @rakshiths.n96804 жыл бұрын

    Just love you, ur a new tech monster. What content are you planning next..

  • @kenjimiwa3739
    @kenjimiwa37394 жыл бұрын

    Thanks for making the very detailed video. I wish I could follow all of it :(

  • @isfland
    @isfland4 жыл бұрын

    Great explanation and information density. It's first time I thought to slow down video speed instead of increasing it 😂

  • @qazitalha8384

    @qazitalha8384

    Жыл бұрын

    Unorthodox display of hubris but very well

  • @muratcan__22
    @muratcan__223 жыл бұрын

    oh man this was very intuitive

  • @ryoyatamura1887
    @ryoyatamura18874 жыл бұрын

    awesome job!

  • @computerscience1152
    @computerscience11523 жыл бұрын

    Awesome tutorial

  • @ktsnowy
    @ktsnowy Жыл бұрын

    Awesome, great video! Is there still plans to make a follow up video with the operations? I've been looking for a video explaining how the operations work on IEEE 754 numbers but couldn't find much.

  • @user-en5er8oe4r
    @user-en5er8oe4r7 ай бұрын

    Thank you for your explanation😭😭

  • @knutringheim7956
    @knutringheim79564 жыл бұрын

    Great video!

  • @pikuma
    @pikuma4 жыл бұрын

    10:46 I died. :)

  • @aijingli4881
    @aijingli48812 жыл бұрын

    magic thank u

  • @codewithyazeed8177
    @codewithyazeed81774 жыл бұрын

    Great content and very clear voice. May I ask, what is your mic setup? How close are you to it while talking?

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    Thanks! At the moment I'm just using a little lav mic attached to my shirt.

  • @Kitulous

    @Kitulous

    3 жыл бұрын

    Yazeed, I assure you this is definitely not how the "big" microphone sounds like. The desk mic would be even clearer and crisper, imagine radio recordings on KZread without music or anything, just voice. That's how it's going to be with a decently priced mic.

  • @TheRoboticLlama
    @TheRoboticLlama Жыл бұрын

    0:44 pause it and shake your screen it makes for a pretty cool optical illusion

  • @MrBigBalls
    @MrBigBalls4 жыл бұрын

    i still love js

  • @rickvian
    @rickvian2 жыл бұрын

    6:42 does this mean if the bigger the number, the precission will lose more?

  • @LowByteProductions

    @LowByteProductions

    2 жыл бұрын

    Yes exactly - and it's a deliberate trade off taken by the designers.

  • @joshua-goldstein
    @joshua-goldstein5 ай бұрын

    Appreciate the very detailed and hands on tutorial! One question, doesn't the mantissa also need a (10-bit) bitmask in your encode function? I.e., function encode(n) { ... const mantissa = 1025 * percentage; mantissa = mantissa & 0b1111111111; ... } That way, in case of an overprecise mantissa, we don't clobber the sign and exponent bits in the return value.

  • @EdLewis
    @EdLewis4 жыл бұрын

    This is a great explanation and I understand the why of the title, but you never demonstrate it specifically.

  • @rauschma
    @rauschma4 жыл бұрын

    Isn’t the key point that JS numbers are encoded with base 2 and that base 2 can’t represent 1/10 and 2/10 precisely (similar to how decimal numbers can’t precisely represent 1/3, even with lots of finite storage)? If JS numbers were encoded with base 10, then 0.1 and 0.2 could be represented precisely.

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    You're completely right. Though I like to think there are many key points that come with IEEE 754 system. There is also a ton of nuance in how the operations work, and how rounding is handled. And many interesting things that happen when you start dealing with denormalised numbers - which is almost like a secondary system embedded in the specification. The main understanding I wanted people to come away with from this video was how the representation, encoding, and precision parts work, and the non-representability of 0.1 was left as more of an implication. I hope to come back to this topic in the future and dive deeper. In particular I'm interested in exploring the famous "Carmack" fast inverse square root hack. Also I'm a big fan of your blog. Thanks for watching!

  • @Permille
    @Permille3 жыл бұрын

    Thank you so much for the detailed walkthrough of the specification. Though, one thing that's still bugging me is the fact that neither 0.3, nor 0.30000000000000004 can be represented in binary without recurring digits. 0.3 would actually be stored as 0.299999999999999988897769753748... , and 0.30...04 would be stored as 0.300000000000000044408920985006... . I understand that the discrepancy is caused by the fact that 0.1 and 0.2 also can't be represented accurately. So, my point is, why does Javascript show the first digit where the imprecision takes effect, instead of leaving it out entirely, or showing more, maybe even all decimal digits? Is it to prevent possible errors where the check for 0.1 + 0.2 === 0.3 would fail? Was the number of digits chosen as to be able to uniquely identify any number with the least amount of digits? Thanks in advance :)

  • @ferociousfeind8538

    @ferociousfeind8538

    2 жыл бұрын

    I think it is a case of a standard amount of precision letting the little error sneak in- if that standard number of significant sigits had been one less, then 0.1 + 0.2 would for all intents and purposes equal 0.30000000000000000 or 0.3, and it just so happens that in this case we grab 18 significant digits, instead of 17.

  • @reddyharishkannapu1850
    @reddyharishkannapu18503 жыл бұрын

    Thanks very much. This was one of the best videos I found on this subject. Does this mean the following : In a 16 bit floating point representation, I can represent a maximum of 1024 unique values in each range of numbers. (0-2), (2-4), (4-8), (8-16) And if yes, it implicates that we have a better representation in the smaller exponent ranges, as we get more number of unique values for a significantly smaller range .? Pl clarify. Thank you very much for the informatory video.

  • @LowByteProductions

    @LowByteProductions

    3 жыл бұрын

    Yes that's exactly right - in floating point, the closer you are to zero, the better the approximation can be, and the further you travel from zero, the worse the approximation gets.

  • @reddyharishkannapu1850

    @reddyharishkannapu1850

    3 жыл бұрын

    @@LowByteProductions Thanks for the quick response too. Can you pl shed some light on this too.. I read that the max positive number that can be represented through IEEE 754 32 bit floating point is 3.403E38. But as I understand, there's only 2^32 values that can be uniquely represented using 32 bit binary. In this case, how do we even reach a number as huge as 3.403E38.. I have difficulty inferring this, can you please help in the decoding this for me...?

  • @Kitulous

    @Kitulous

    3 жыл бұрын

    @@reddyharishkannapu1850 if you're still interested, the longer you travel through the number line, the more of the floating point numbers get skipped. For example: the next possible value after 32.768 might be 32.770 (example), but for 2837.768 the next possible value will be 2837.794 already. And the bigger the number gets, the bigger the gap.

  • @electrolyteorb
    @electrolyteorb6 ай бұрын

    Sometime in future if you have time: make a video explaining how Arm processors do division... Its strange to say the very least

  • @lohphat
    @lohphat3 жыл бұрын

    Why use mul or div with 1024 and not use bit shifts instead? I'm unfamilliar with JS so wonder if >> or

  • @aleksb6349
    @aleksb63492 жыл бұрын

    beast

  • @Tenchi707
    @Tenchi707 Жыл бұрын

    You can only get so close with powers of twos

  • @kevgoeswoof
    @kevgoeswoof4 жыл бұрын

    Really good video! But how would this work when you don't have floating point number calculation available? Because Math.log (and so does Math.pow / **) returns a float. I kinda doubt that this would be possible in JS or rather easily doable.

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    IEEE 754 is fully implementable in hardware (and, or, not, xor, shift), so these operations are definitely possible in js without falling back on the standard library. Interestingly, if you simply cast a floating point number to an integer, it acts as a crude, out of scale logarithm. This is the basis for the famous "fast inverse square root".

  • @kevgoeswoof

    @kevgoeswoof

    4 жыл бұрын

    @@LowByteProductions Thank you! I think I already readabout the fast inverse square root somewhere but I looked it up and its pretty cool.

  • @rondamon4408
    @rondamon4408 Жыл бұрын

    Your videos are great, but I cannot watch them on my mobile device as the font size is too small

  • @JobvanderZwan
    @JobvanderZwan4 жыл бұрын

    0:11 I think you missed a zero EDIT: Jokes aside (there really is a missing zero though) great stuff as always! Was kind of hoping you would actually namedrop posits at some point after you mentioned you got intrigued by them last week, but otoh that's definitely a bit too deep into the hypothetical weeds for now

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    Haha I was hoping someone would count the zeros! But I have been looking into posits and unums quite a bit. Once I've wrapped my head around them enough to get a software implementation up and running, I think I'll make a video.

  • @JobvanderZwan

    @JobvanderZwan

    4 жыл бұрын

    Yeah, there's a weird kind of nerdy fun in figuring out how they work and about what kind of special optimised use-cases you can have for them, no? Also just to become aware that all these systems for representing numbers have design trade-offs and aren't as "finished" as we might think. PICO-8 for example uses its own 16:16 fixed-point number system because Joseph White (its creator) thought it would make for a more interesting fantasy console, and it creates some interesting limitations.

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    For sure. There is so much to enjoy there - figuring out the system and contrasting it with IEEE 754, the fact that it's one guy just coming up with stuff like a mad scientist/evil genius, the multiple iterations, the controversy with william kahan, and actually just reading the wikipedia discussion page and seeing these bitter debates. It's amazing - so actually thank you for introducing me! I didn't know that about PICO-8 either. That's a project I've been watching from the outside a bit - I really enjoy the crazy procedural animations people are able to crack out of it.

  • @milestailsprower4555

    @milestailsprower4555

    3 жыл бұрын

    @@LowByteProductions Why that's .1 cannot be represented exactly?

  • @ThanhBinh052
    @ThanhBinh0522 жыл бұрын

    Can you explain to me why 4? why not 5, 3, 2, or any other number?

  • @frezzingaces
    @frezzingaces Жыл бұрын

    Dumb question. Why not represent numbers as something that takes up more bits if more accuracy is needed, or takes up less if less is required. 0.5 vs 0.39201329 just inherently have different amounts of information in them right?

  • @benoitcerrina

    @benoitcerrina

    Жыл бұрын

    There are ways to do this just not efficiently.

  • @_koko_online
    @_koko_online4 жыл бұрын

    this is exactly whats driving me nuts on my current app hahaha

  • @ZhongyuanZhou
    @ZhongyuanZhou4 жыл бұрын

    9:03, the second line. There are 6 E and 9 M. Why not 5 E and 10 M?

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    You're right - this is a mistake, it should be 5E & 10M. Good catch!

  • @avi12
    @avi124 жыл бұрын

    Can you make videos in which you use Uint16Array?

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    The VM series is making use of typed arrays - I think so far only UInt8Array has been used (to place raw bytes into an array buffer) but the essence is the same. I'm sure they'll be used there later as well.

  • @anilgr1111
    @anilgr11118 ай бұрын

    i have a doubt how does computer calculate the percentage ? Should it not be able to represent the floating point number itself in the first place.

  • @LowByteProductions

    @LowByteProductions

    8 ай бұрын

    This video is about building a model of floating point, not necessarily in the same way it happens in hardware. The implementation uses floats internally, but we're not trying to bootstrap a system from the ground up; we're trying to learn how the algorithm works.

  • @anilgr1111

    @anilgr1111

    8 ай бұрын

    Ahhh okay, will try to dig how it works in the hardware level. Thanks for the clarification. Great content. Love from India ❤

  • @rvadataguy4459
    @rvadataguy44594 жыл бұрын

    Another good reason to use Excel!!

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    As if we needed one!

  • @kissmedarlin
    @kissmedarlin4 жыл бұрын

    hard...... I will see this after I learn Javascript

  • @sobanya_228
    @sobanya_2282 жыл бұрын

    Can we actually extract what went wrong from NaN in JS?

  • @LowByteProductions

    @LowByteProductions

    2 жыл бұрын

    In JS, unfortunately not. It might be possible in node by writing a C++ extension that could actually examine the bit pattern of the NaN and pass the result back to JS.

  • @Zakariat89
    @Zakariat894 жыл бұрын

    What color theme is used?

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    Dracula

  • @highlander8115
    @highlander8115 Жыл бұрын

    First time I got this was in Python

  • @sonofaput
    @sonofaput2 жыл бұрын

    Self-teaching here, so the following is not a boast. This is why a SC degree is a good thing.

  • @LowByteProductions

    @LowByteProductions

    2 жыл бұрын

    I didn't get a CS degree

  • @sonofaput

    @sonofaput

    2 жыл бұрын

    @@LowByteProductions Really? But you are dedicated lol

  • @visheshsethiya1874
    @visheshsethiya18743 жыл бұрын

    but why our exponent is 3 from [3,4]

  • @lebster_

    @lebster_

    3 жыл бұрын

    It’s the first number

  • 3 жыл бұрын

    I don't think that most people say imprecision of floating point numbers is a fault of JS. I believe they say that it's a fault of JS to force all numbers into being floats and not giving programmes appropriate tools to tackle the imprecision as the given domain requires.

  • @LowByteProductions

    @LowByteProductions

    3 жыл бұрын

    Which would be wrong anyway, since JS has ArrayBuffers, Uint{8, 16, 32}Arrays, Int{8, 16, 32}Arrays, and BigInts - for when specific or even arbitrary integer precision is required.

  • 3 жыл бұрын

    @@LowByteProductions I wonder how well-known they are in practice? I don't remember seeing them in the wild but I didn't look at too much JS anyway.

  • @LowByteProductions

    @LowByteProductions

    3 жыл бұрын

    On this channel they are very well known 😁 If you're an everyday web developer making landing sites in react then you might not come across them, but if you do any work with audio, webgl, pixel pushing on the canvas,or transferring and/or parsing binary data then you'll be familiar. Most people that have worked with node will also be familiar with the idea of a Buffer object - which these days is now just an abstraction built on the ArrayBuffer/TypedArray standards.

  • 3 жыл бұрын

    @@LowByteProductions good 🙂, I did mostly simple stuff although I came across ArrayBuffer. So it seems I misunderstood those JS critics.

  • @slonkazoid
    @slonkazoid4 жыл бұрын

    From reddit

  • @puckyMaXxx
    @puckyMaXxx3 жыл бұрын

    5:05 idk but isn't negative should be mirror of positive and not fractions of positive? I'm not math fellow but I'm sure this is fallacy of math as defining it.

  • @LowByteProductions

    @LowByteProductions

    3 жыл бұрын

    Open up a calculator and try it.

  • @puckyMaXxx

    @puckyMaXxx

    3 жыл бұрын

    @@LowByteProductions no not your video I mean math as whole. if you learn zeno paradox about half distance maybe you understood~ maybe~

  • @MrOboema
    @MrOboema4 жыл бұрын

    So, its an abstraction over 1's and 0's. And the abstraction is leaky. Got it.

  • @LowByteProductions

    @LowByteProductions

    4 жыл бұрын

    Leaky in what way? It's not like you need to know how the 3 parts and their bits fit together in order to use floats.

  • @brianoh99
    @brianoh994 жыл бұрын

    TL;DR

  • @moofymoo
    @moofymoo4 жыл бұрын

    maybe because Big Brother told that 1 + 2 is not 3..

  • @joaquinel
    @joaquinel2 жыл бұрын

    pppfff. It IS a js fault. js was supossed to be easy for scripts, why didnt they use a human notation? 0.1 + 0.2 = 0.3 =( that and arrays starting on zero, no need in high level langs. Day 1 Month 1... february 1 ? =( Interesting video. And channel. intense. =)

  • @Mizu2023

    @Mizu2023

    2 жыл бұрын

    it would be quite pain to implement decimal numbers manually in js so they used ieee 754

  • @kevinknight997
    @kevinknight9973 жыл бұрын

    javascript is easy to hate

  • @RagHelen
    @RagHelen9 ай бұрын

    Meh. There is a video here on YT made by a schoolgirl from India which explains it perfectly on a piece of paper.

  • @ComandoVIK
    @ComandoVIK2 жыл бұрын

    this is bs

  • @LowByteProductions

    @LowByteProductions

    2 жыл бұрын

    That's actually really convincing, I've never thought about it that way before

  • @JabrHawr

    @JabrHawr

    Жыл бұрын

    @Low Byte Productions :D

  • @laverock
    @laverock4 жыл бұрын

    why so long... It could be 5 - 7 minutes at most.

  • @raholll

    @raholll

    4 жыл бұрын

    because the watch time is what matters to KZread, mate

  • @lucasbezerra649

    @lucasbezerra649

    4 жыл бұрын

    do it so

  • @justcurious1940

    @justcurious1940

    Жыл бұрын

    yea u only need 5 minutes to learn about floats

  • @LowByteProductions

    @LowByteProductions

    Жыл бұрын

    Sounds great 👍 let me know when you've made the video that explains AND implements floating point numbers, which somehow fits in 5 minutes and makes sense to people. I'm sure it will be fantastic.

  • @justcurious1940

    @justcurious1940

    Жыл бұрын

    @@LowByteProductions please brother i have watched your video 3 times and i have been learning about floating points for the last 2 or 3 months I was just trying to make a joke about his comment great contents by the way i would love to watch a 5 hours video from u about floating points 🙂

  • @kanishmalviya
    @kanishmalviya2 жыл бұрын

    2.3 * 100 === 229.99999999999997