Section 16: Numbers & Strings - Deep Dive - Behind the Scenes & Beyond the Basics

The goals

💪🏻More about Numbers

✌🏻Working with the Number & Math Objects

👍🏻More about Strings & Template Literals

 

Javascript internally works with the binary system as we learned

Therefore Javascript converts this number to the binary system for doing the calculation and then basically converts it back to give us an output that makes sense to us humans because we rather work with the decimal system than with the binary system.

 

 

0.2 is equal to 1/5 in decimal system

0.4 is equal to 2/5 in decimal system

but in binary system, it is totally different number

So this is how Javascript performs the calculation and tries to show us the number we can understand

그래서 연산시에 저 오차때문에 완벽히 일치하는 값이 나오지 않아서 등식에서 에러가 발생하게 되는 것

 

해결방법

1. 정확히 계산하려면 정수로 한다 (특히나 정확해야 하는 돈이나 코인의 경우)

e.g. 5.1달러 -> 5100센트

 

2. 반올림 문법을 활용한다

e.g. precision = Math.pow(10, precision)

       Math.ceil(num * precision) / precision

 

3. double 자료형

애초에 숫자를 메모리에 저장할 때 숫자 1개당 64칸을 사용하도록 지정함 

-> 단점: 메모리 용량 2배 필요

 

이런 점을 잘 알고 있으면 overflow, Not a Number, infinity현상 이해에 도움이 됨!

 

BigInt()

BigInt는 숫자값을 안정적으로 나타낼 수 있는 최대치보다 큰 정수를 표현할 수 있는 새로운 원시값이다. BigInt값은 정수 리터럴의 뒤에 n을 붙이거나 (10n) BigInt함수를 호출해 생성할 수 있다.

 

BigInt is a primitive wrapper object used to represent and manipulate primitive bigint values — which are too large to be represented by the number primitive.

A BigInt value, also sometimes just called a BigInt, is a bigint primitive, created by appending n to the end of an integer literal, or by calling the BigInt() function (without the new operator) and giving it an integer value or string value.

 

Math.random()

Math.floor()

 

 

Tagged Template

It can be useful when we have a scenario where we conveniently want to create some output, could be a string but could be something totally different as well, based on some string input.

 

What is Tagged Template Literals?

Tagged template literals were introduced in the ES6 version of JavaScript. I’m safely assuming that most of you are hopefully aware of template strings, where you can interpolate dynamic content inside a string.

let greetings = "Hi";
let name = "Techsith";
let age = 35;

let statement = `${greetings} my name is ${name} and I am ${age}`;

The code sample above will render “Hi my name is Techsith and I am 35” as expected. In this template string, “ my name is “ and “ and I am ” are static content and greetings, name, and age are dynamic content. There are use cases where you want to take the user provided template string and perform some transformation to the dynamic content based on some logic. Tagged template literals let you extract all the dynamic values, which are called tags, and segregate them from the static content. This gives us the ability to transform these tags and interpolate it with the static content to derive a new string.

let greetings = "Hi";
let name = "Techsith";
let age = 35;

function transform(static, ...tags) {
  console.log(static); // ["", " my name is ", " and I am ", ""]
  console.log(tags); //["Hi", "Techsith", 35]
}

transform`${greetings} my name is ${name} and I am ${age}`;

In the above example, we’ve created a function called transform. It takes two arguments: static array that holds all the static content and tags array that holds all the tags (dynamic content). When you run this function, it prints the following values, which are segregated based on content.

static => [“”, “ my name is “, “ and I am “, “”]
tags => [“Hi”, “Techsith”, 35]

By interpolating static array with tags array, you can reconstruct the original string. When you dissect the output, you’ll get empty strings if the tags are placed at the beginning or at the end of the string, respectively.

Tagged Templates Interpolation

Let’s transform the name tag value Techsith to Hemil and reconstruct the string.

 

let greetings = "Hi";
let name = "Techsith";
let age = 35;

function transform(static, ...tags) {
  let index = tags.findIndex((el) => el === "Techsith");
  tags[index] = "Hemil";

  let str = static[0];
  for (i = 0; i < tags.length; i++) {
    str += tags[i] + static[i + 1];
  }
  return str;
}

let newString = transform`${greetings} my name is ${name} and I am ${age}`;

console.log(newString); //"Hi my name is Hemil and I am 35"

 

RegEx

정규표현식 regular expression은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 (formal language)다. 정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 자바스크립트는 펄 perl의 정규 표현식 문법을 ES3부터 도입했다.

 

정규표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다.

 

 

 

 

 

Sources

https://www.youtube.com/watch?v=-GsrYvZoAdA&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

BigInt - JavaScript | MDN

https://patelhemil.medium.com/magic-of-tagged-templates-literals-in-javascript-e0e2379b1ffc

Magic of Tagged Templates Literals in JavaScript?