Placeholder Image

字幕列表 影片播放

  • Yeah, a bit more.

  • Oh, excited to be here.

  • Cool.

  • High.

  • So I'm Megan.

  • I am a software engineer.

  • It jack sta in city on.

  • I'm here today to talk to you all about numbers in general, but also specifically in javascript.

  • Um, and to have a little bit of fun with it.

  • I'm gonna put it in the context of Beyonce a little bit.

  • I see who here is a fan of Beyonce can actually see any of you.

  • So I'm just gonna assume your old fans of Beyonce and you're gonna love this talk, so I hope you all ready to learn.

  • So let's get back to basics.

  • What actually is a number?

  • Well, a number is an abstract concept which we use to count, measure, label and identify things.

  • Um, we kind of use them every day.

  • Um, they're pretty familiar concept, Um, And to help us kind of group them in and understand them, we can classify them, so, uh, we can group them into certain categories so we can start off with a natural numbers, which are our positive whole numbers.

  • Indigents.

  • Um, we have indigenous, which is negative and positive whole numbers and includes era.

  • We have rational numbers, which numbers that can be expressed as fractions, irrational numbers and numbers which cannot be expressed his fractions, such as pie or the square root of two on.

  • We also have real numbers.

  • Real numbers are a super set of all of the above categories, Um, and basically represent any number that you can see on the number line.

  • Um, we also have complex numbers, transcendental numbers, imaginary infinity and negative infinity infinite testicles.

  • It's real.

  • None of which I know anything about.

  • So not gonna go there.

  • So just as we can, um, classify numbers and group them into different ways, we can also represent them in different ways.

  • So when I talk about representation, I just mean how we communicate the numbers that way.

  • Using, um so inhuman languages.

  • If I asked you to think of the number eight, uh, many people here would imagine the Arabic numeral eight.

  • Um, some of us might, uh, imagine Bob, the Mandarin Chinese character.

  • Some of us might may think of thought, which is the Hindi, um, number eight.

  • So all of these are actually the same thing, that just different symbols, which we use to represent the number eight, um, And apologies.

  • If I've just, like, butchered the pronunciation of those feel free to come and correct me afterwards.

  • Eso justus We can represent numbers in different ways in human languages.

  • We can also represent them in different ways in jobs group.

  • So in Java script, there are five ways that we can represent numbers.

  • Um, we have outstanding based 10.

  • So if we imagine that number 1,234,000 567 we can also represent that as a binary number, which is based to Octel, which is based eight Hexi Decimal, which is based 16.

  • You use that a lot if you're working with CSS as well on dhe scientific notations.

  • So that little So this is what we use when we're handling really large numbers.

  • Um, and that a just means, like times 10 to the power off six in this case.

  • So what is a number in job script?

  • Well, just as a girl has to have has standards, so too does a programming language.

  • Ah, And in javascript, we follow the I e 754 um, standard for floating point arithmetic.

  • That's the Institute of Electrical and Electronic Engineers.

  • Um, it's a soup along really dry document.

  • If you're having trouble sleeping, I can recommend it.

  • Um, so it's very interesting of I just don't have the, uh, the ability to read that kind of document, but palette to you if you do.

  • Um, but basically, it outlines how numbers are implemented in JavaScript, um, and gives us a reason why Zahra 0.1 plus 0.2 does not equal 0.3, which is everyone's favorite JavaScript joke.

  • Um, so the aii 75 full specifies the implementation of floating point arithmetic in Java script, which is how we represent decimal points in boundary and that allows us to represent real numbers as an approximation to support a trade off between range and precision.

  • So when I talk about range and precision, computers have limited space, they're not that amazing.

  • Um, sorry.

  • No events.

  • Um, so when I talk about range in javascript, we have a range of numbers that's like the size of the set that we can represent, so we can represent from about negative nine quadrillion all the way up to positive nine quadrillions.

  • That's a pretty decent sample size.

  • And when I talk about precision, I main in JavaScript.

  • We can represent numbers safely to 17 decimal places.

  • Beyond that, it'll just get kind of wacky.

  • Um, and because computers have limited space, we have to make a trade off between range and precision.

  • We can either have greater range or greater precision.

  • We can't really have both, Unfortunately, so computers are super basic, a pun based space to you guys.

  • Um, this says hello.

  • Singable in battery.

  • Um, So regardless of how you write your number, everything in the your computer is gonna be stored in binary.

  • It's all just ones and zeros.

  • But we can't have decimal points in binary decimal coming from the wood deco meaning 10 um, finery is based to, So we can't really represent decimal point safely.

  • So a floating point arithmetic tries to account for that.

  • So let's think about our number one million, 234,567 underneath.

  • That is the representation of that number in binary floating point.

  • We have 64 bits, So 64 individual digits.

  • Um, and it's helpful to kind of think about this in terms of scientific notation if you're already familiar with it to break down these bits.

  • So the first bid represents the sign.

  • Um, if it's zero, it's a positive number.

  • If it's a one, it's a negative number.

  • The next 11 bits represent the exponent.

  • So how far along the decimal place should be?

  • Um, in this case, it would be like six points along six places alone.

  • Um, and we also have the significant or Mantis, um, which actually represents the the, um, like, actual digits of the number.

  • So let's have a look closer.

  • Look at everybody's favorite JavaScript bug.

  • Um, when I was a kid, one of my maths teachers always used to tell me that, um, calculate is never wrong.

  • Humans are.

  • Yeah, It's all I have to say about that, Mr Edwards.

  • Huh?

  • Um, So when we, uh, representing numbers in floating point arithmetic, we can represent images Super easy.

  • It's fine.

  • The conversion to boundaries.

  • Totally easy.

  • Um, but when we start representing fractions, things become a little more difficult.

  • So if we were trying to represents a 1/10 in finery finery is based to so representing one out of 10 in a system that only counts up to two is gonna present some complications.

  • Let's think about 1/3 when we represent 1/3 in decimal.

  • We we round it.

  • We don't say.

  • Point 33333333333333333 For the rest of our lives, we just say, 0.0.3 your 0.33 Um, but has anyone who's tried toe like implement a three column layout?

  • Grid layout and CSS will know it's ready 33% times three dozen equal 100%.

  • Always that pesky little 1%.

  • Um, so Al 0.1 plus 0.2 Problem is similar to this.

  • If we think about 0.1 represented in decimal, it's easy.

  • 0.1.

  • Let's convert that to boundary.

  • Okay, that's a lot more complicated.

  • Um, I did say that we don't have decimal points in binary.

  • That's not a decimal point.

  • It's a ratings point.

  • A ratings finery point.

  • Um, so it's a similar concept, but just in base, too.

  • Um, we're not gonna get into that, but if you look at this representation, you'll see it.

  • 0.0 There 110011001100 And that repetition just keeps on going.

  • Um, but because we only have 64 bits, we only have a certain amount of space to store this number.

  • We have to round it at some point.

  • And so when we take that rounded binary representation of their appoint one and convert it back to decimal, we got this.

  • So that's not 0.1.

  • Hence this problem.

  • So it's a rounding arrow.

  • How big a problem is this really?

  • If I was trying to measure one San Tomato and I had 0.16 0 hours full centimeters of era, that would be 0.903 times as long as a glucose molecule.

  • Okay, that seems pretty tiny.

  • Let's go bigger.

  • If I were trying to measure a kilometer and I had a margin of error a 0.16 04 kilometers, that would be 0.21 0 times as long as the distance from Earth to the moon.

  • Okay, No, big enough.

  • Let's go big or go home.

  • If I were trying to measure a let you, that's the distance that light travels in a year, and I had a margin of zero margin of error of 0.16 0 Full light is I'd be about 38.38 centimeters off, or about the height of a standard bowling pin.

  • Things you lent.

  • So in most cases, this degree of accuracy is really just not gonna be that important.

  • Um, we don't usually need to know the value to 17 decimal places.

  • Um, if we're creating a shopping cart, for instance, does your user really need to know they caught total to 17 decimal places?

  • No, I need to know what's like to maximum so we can just round it on.

  • And we can just round it really easily, using the grounding methods inside of the maths object.

  • So we've talked a bit about precision.

  • Now let's move on to range.

  • Size really does metal.

  • In my defense, Charlie started the willy jokes yesterday, so I'm just carrying on from her work.

  • So I ventured that we have a trade off between range and precision.

  • Um, and when I mentioned our range, I said, we have a ranging javascript of about negative nine quadrillion through two positive nine quadrillion, but I wasn't telling the entire truth.

  • Way to build trust.

  • Cool.

  • Um, so if I went into my job script console and I typed in 1.7 times 10 to the power of 308 I'd get that number back.

  • So obviously I can represent that number that's way bigger than nine quadrillion nine quadrillions only, like, 16 zeros.

  • And this has 308.

  • That's massive.

  • Um, but if I go 1.8 to the power times 10 to the power of 308 an infinity, I'm confused.

  • They're really remember that being her maths works, but okay, so job script actually has a maximum value.

  • Um, and you can access that inside of the number object and its 1.79769 we'll arrest those numbers times 10 to the power of 308.

  • So that's a really big number.

  • Um, And for really big numbers, we have naming conventions.

  • So, um, like a 1,000,000 billion quadrillion um, and there's naming conventions go all the way up to a number that is followed by 303 zeros, which is called a cent.

  • Ilyin.

  • It's a job script actually exceeds naming conventions like That's massive.

  • That's huge.

  • That's a pretty good range, if you're still not convinced that that's a good range.

  • Um, 3.28 times 10 to the power of 80 is the number of particles in the universe.

  • So if you're using any numbers bigger than that, what are you doing?

  • Stop.

  • We're gonna create a black hole or something.

  • Um, but if you are using numbers bigger than that, like, tell me I want to know what you're doing for real.

  • That's cool.

  • Um, so we have no business using numbers greater than that.

  • Maximum number.

  • Um, this is this is fine.

  • So we have a massive range up to 308 0 hours.

  • Um, but we can't safely represent numbers beyond this nine quadrillion that I'm keep banging on about.

  • So in JavaScript, we have a maximum and minimum safe into jail, and that's that nine quadrillion value.

  • But if we move me on those values, things get a little bit weird.

  • All right?

  • We've got a maximum safe into Joe.

  • We just pay attention to the lost three digits.

  • Because the rest of it it's just too much.

  • Um, it ends in 991 All right, let's try to do some maths.

  • All right?

  • Working so far.

  • Um, okay.

  • Back on track.

  • Ah, um, I don't know about that.

  • So the arithmetic just stops adding up at a certain point.

  • Oh, and so this big number problem is actually what inspired this talk.

  • Um, and now we're gonna get into beyonc?

  • Promise Show.

  • You've all been waiting with bated breath.

  • Um, so at work.

  • So for a bit of context at Jack's, tha, um, we're building a massive database of music credits so you can look up your favorite song and see who wrote, Produced, recorded, whatever.

  • Um, and you can see all the names and click through whatever so work One day I was working on a page.

  • Let's say I was looking at drunk in love by beyonc?

  • Which happens to be one of my favorite carrier G songs.

  • Um, if anyone's interested later, maybe we could make it happen.

  • Um, also in case you didn't understand the reference of my ship because he weren't familiar with Beyonce's discography.

  • This is the reference, Um, yeah, beyonc, SS.

  • It's cool.

  • Okay, so this is the page for drunk in Love by beyonc?

  • On Jackson?

  • Um, that you might notice something a bit weed in that credits panel on the lift is it?

  • Fiance is both the featured artist and the main artist, which is not really true, because Jay Z's the featured artist on that song.

  • Um, I mean, to me, this is a feature more than a bug, but, um double Beyonce a hell?

  • Yeah.

  • Cool.

  • Oh, so I noticed that we had this duplicate daughter rendering on the page.

  • Um, and Beyonce, I wouldn't like this, right.

  • She'd probably want Jay z to be represented.

  • Faily um so I checked the AP, I response, and I saw that.

  • Yeah, we've got beyond saying we've got Jay Z.

  • There's those two things are coming through, but having a look at those ID's if you notice the last few digits, that's not unique.

  • Um, which is not ideal because they're clearly not the same object.

  • Um, and so the problem here is that when we take the original ideas, which ended in 167 and 168 JavaScript is passing them incorrectly when I got them, because those numbers were too large.

  • Um And so what was happening?

  • Because we were getting the same ideas.

  • The framework that I use is in both, um and MBA.

  • Dada was saying, Hey, I've already got a resource object with that.

  • I d I'm not gonna fetch it again.

  • So here have beyond say again.

  • She's again feature, not a bug, but my boss didn't think so.

  • Um, yeah.

  • So as you can see, if you have ideas about numeric and they are in commenting and the two large probably gonna run into problems like this and you're really gonna stare is screened for, like, three hours going, Why, maybe, um right.

  • And so we were getting duplicate Donald on the page, which was not ideal.

  • Um, something to look out for when you are handling really big numbers in a P I responses is that sometimes they will be a difference between, like when you open your response in a new tab versus in depth tools.

  • Um, So when I was looking in depth tools, the ideas were exactly the same, so they were passed already.

  • Where is when I opened the response up in a new tablet?

  • Was the original, um, I d that was 167168 Um, so that's not ideal.

  • Um, that's happening in chrome and safari.

  • So you get the correct UNP asked into Joe in a new tab, But the past integer and deaf tools, um, in Firefox, you get the past into during both the new tab and the deaf tools, you know, is, um, although in edge, now that it's chromium, you'll probably get the same behaviors, Carm.

  • So, um, that's cool.

  • I don't really understand why that's happening.

  • If anyone works on these kind of tools and can enlighten me, I would love to know what it's like different in a new tab versus in the Dev Tools.

  • Um, yeah.

  • So because we have the, um, incremental numeric ideas, it was a problem.

  • So as solution was to move Thio you ideas, um, which is a pretty common solution.

  • They sold a bunch of problems.

  • Um, for us, that was primarily this problem where, uh, numbers were too large.

  • Um, and the funny thing was, we were actually using your ideas on, like, every other table.

  • We just for gotten this one in the database, and that was, like, uh um so that was fun.

  • Um, And so because we fix that now, drunken love appears with the correct credits for Jay Z and Beyonce safe, and the king and queen are happy.

  • So this just in?

  • Well, like a year ago.

  • But this just in, Um, we also have now big hint, which is a new numeric primitive that was introduced about 12 months ago.

  • Um, like, a week before the first time I gave this talk and I was like, What?

  • Oh, my God.

  • So stressful.

  • Eso it is available in HK, ERM five folks, 68 vita and edge.

  • It became available in Firefox 68 beta like a week, which was super exciting.

  • If your number's node like me, um and it means we can represent numbers beyond that maximum safe into Joe, which is pretty exciting, Um, so we can create them by a pending end to a number.

  • Um, so we top in 100 end and we received back 100 which is a big into, um, We can also use the big into method with a string or number.

  • Um, we can't use any floats because it is an interview, not a float or not begin to know Big decimal.

  • Um, we can do arithmetic with other Biggins, which is cool.

  • Um, we can do adding, subtracting, multiplying we can divide.

  • Um, but because we won't return any decimals will just round 20 So 10 divided by three is three and 1/3 but I'll just say three.

  • Ah, we can do this operation.

  • I don't know what it's cold, but it's like when you do something to the power off, let's call it to the power off.

  • Um, and we can also do modular, which is cool.

  • We can't do mix type operations, so we can't add 102 100 the different numeric types.

  • So, um, we can't actually makes them, but we can compare them so they have loose come loose quality, too.

  • Regular numbers, um, and we can compare them, like with greater than and less than they'll compare correctly.

  • So if we have, like, a array of mixed types, we consort, um, things like that.

  • Um, Now, let's do some Mets like some real maths with these big numbers.

  • So earlier we had this problem with, we were adding to the maximum safe into Joe and everything was just really confusing.

  • And weed.

  • Let's try that with a big number big into Joe.

  • So we'll set a variable big numb, and then I'll add one.

  • All right, Cool.

  • It works.

  • It works.

  • Yeah.

  • Clap for the creators of Big it just keeps going.

  • It's so beautiful.

  • I love it.

  • I love it.

  • Um, yeah.

  • So Begin is not yet ready for production, APS.

  • It's not available in or browsers.

  • And there's not a huge amount of documentation available.

  • But, um, this is how I feel about it.

  • Yes.

  • Numbers.

  • Big number of cool.

  • Um, what I think is most exciting about this is that this problem didn't even exist when javascript was created.

  • Like what, 23 24 years ago?

  • Um, I mean, just just kind of still like a baby in terms of what it could do.

  • But like some babies grow up to be Beyonce.

  • So, um, maybe JavaScript will grow up to baby on safe.

  • But I think it's really cool that, um, you know, it's easy to get caught up in Java script fatigue sometimes, but I think it's really cool to be working in an ecosystem that is constantly evolving and growing and loading and fixing its mistakes, which is cool.

  • So to summarize, JavaScript has some really weird number quicks, but, um, when you kind of dig into them, they're not totally unreasonable.

  • Um, I would say they all totally reasonable.

  • Um, when you kind of know what's going on, So there's something to kind of just be aware of, I guess, um, when you're talking about precise numbers, remember that job script uses 64 bit floating points.

  • So they're gonna be precision areas when you're going any further than 17 decimal places.

  • So around things.

  • And when we're talking about really big numbers, remember that.

  • Is that maximum safe into Joe?

  • Try not to go beyond it, if you can.

  • Um, we'll have your ideas passed through with strings or different kind of types.

  • Um, and remember that big aunt is coming, which is really cool.

  • I'm excited.

  • So I'm hoping that after this talk with mass, you'll be a little less confused.

  • No, the woman like this Good boy or a little less confused be and a little more sleigh.

  • Thank you so much.

Yeah, a bit more.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

雙倍的碧昂斯。在JavaScript中導航數字,由Meggan Turner主持|JSConf.Asia 2019 (Double the Beyoncé: Navigating Numbers in JavaScript by Meggan Turner | JSConf.Asia 2019)

  • 6 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字