28, 29장 #23
28, 29장 #23
Conversation
songeunseo
requested review from
MinboyKim,
junepil,
Turtle-Hwan,
joeuns,
whddltjdwhd,
zziglet and
clicelee
| new 연산자를 사용하지 않고 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자를 반환한다. | ||
|
|
||
| ```jsx | ||
| const a = new Number(123); | ||
| a === 123 // false | ||
|
|
||
| const b = Number(123); | ||
| b === 123 // true | ||
| ``` |
There was a problem hiding this comment.
오 첨알았네요 그냥 대충 썼었는데..
Number(new Number(123)) 으로 하면 다시 number type이 되네요
Number는 return number type이고 new Number는 return Number instance인가봐요
input으로 들어온 걸 일단 number로 변환해 보고 변환되면 number로 주나보네요
There was a problem hiding this comment.
Number(): type이 number인 숫자를 반환
new Number(): type이 object인 Number 인스턴스 반환
만약 우리가 문자열 '123'을 숫자로 변환하고자 한다면 그냥 Number('123')을 해도 괜찮을 것 같다는 생각입니다.
단순 원시값으로 변환해도 Number 인스턴스의 메서드들은 래퍼 객체를 통해 사용할 수 있으니까요!
래퍼객체에 대한 자세한 내용은 조은님이 지난번에 정리해주신 21장 빌트인 객체 에서 다루고 있습니다!
function main() {
const num1 = Number("1e9");
const num2 = new Number("1e9");
console.log(typeof num1);
console.log(typeof num2);
console.log(num1.toLocaleString());
console.log(num2.toLocaleString());
/*
number
object
1,000,000,000
1,000,000,000
*/
}| **빌트인 전역 함수 `isNaN`과 비교** | ||
|
|
||
| - `isNaN`은 전달받은 인수를 숫자로 암묵적 타입 변환하여 검사를 수행한다. | ||
| - `Number.isNaN`은 전달받은 인수를 숫자로 암묵적 타입 변환하지 않는다. 따라서 숫자가 아닌 인수가 주어졌을 때 반환값은 언제나 false다. | ||
|
|
||
| ```jsx | ||
| Number.isNaN(undefined); // false | ||
|
|
||
| // undefined는 NaN으로 암묵적 타입 변환된다. | ||
| isNaN(undefined); // true | ||
| ``` |
There was a problem hiding this comment.
Number.isNaN 은 진짜 NaN 인 것만 true이고,
isNaN은 falsy나 truthy 마냥 Number가 아닌 것(Not-a-Number)을 true로 취급하더라고요
NaNthy...?
There was a problem hiding this comment.
잼있게 알아보는 JS null/undefined/NaN 여기에 나오는 사진 비유가 너무 웃겨요ㅋㅋㅋㅋㅋ
| Number.isSageInteger(Number.MAX_SAFE_INTEGER+1) // false | ||
| ``` | ||
|
|
||
| ### 28.3.5 `Number.prototype.toExponential` |
There was a problem hiding this comment.
Number에 바로 붙어있는 메서드와 Number.prototype 안에 들어있는 메서드의 차이가 뭘까요??
초기에 추가되고 나중에 추가된 것의 차이일까요??
There was a problem hiding this comment.
앞의 클래스 단원에서 나온 내용 복습할 겸 정리해요.
Number 함수도 하나의 객체이기 때문에 메소드를 가질 수 있고 따라서 Number.isSafeInteger()와 같이 사용이 가능하고 이와 다르게 Number.prototype의 메소드는 프로토타입 체이닝을 통해 Number를 래핑 객체로 가지는 리터럴들에서 직접 호출할 수 있어요.
const num = 100;
num.toExponential() // 프로토타입 체이닝을 통해 호출 가능
num.isSafeIntiger() // 정의되어 있지 않음이런 기술적인 분류와 별개로 어떤 이유로 인스턴스 메소드와 정적 메소드를 나눴는지 생각을 조금 해봤는데
MDN 페이지에서 메소드들을 쭉 확인해보니 Number로써 사용이 가능한지 확실하지 않은 인자를 필요로 할 경우 정적 메소드에, 평가되는 값을 지니고 있을 경우에 인스턴스 메소드로 만들어 놓은 것 같습니다!
| ### 숫자 리터럴과 함께 Number 프로토타입 메서드 | ||
|
|
||
| 를 사용할 경우 에러가 발생한다. | ||
|
|
||
| ```jsx | ||
| 77.toExponential(); // SyntaxError: Invalide or unexpected token | ||
| ``` | ||
|
|
||
| 점(.)은 소수 구분 기호 또는 프로퍼티 접근 연산자로 사용될 수 있는데, 자바스크립트 엔진이 숫자 뒤의 .을 소수 구분 기호로 해석해버려 toExponential()을 프로퍼티로 해석하지 못하기 때문이다. | ||
|
|
||
| **해결 방법** | ||
|
|
||
| 1. 숫자 리터럴에 괄호를 씌우기 | ||
|
|
||
| ```jsx | ||
| (77).toExponential(); | ||
| ``` | ||
|
|
||
| 숫자 리터럴을 괄호로 감싸면 점(.)이 메서드 호출 연산자로 정확히 해석됨. | ||
|
|
||
| 2. 숫자 뒤에 .을 붙이기 | ||
|
|
||
| ```jsx | ||
| 77.1234.toExponential(); | ||
| 77..toExponential(); | ||
| ``` | ||
|
|
||
| 첫 번째 .은 부동 소수점 숫자의 소수 구분 기호로 보고, 숫자에 소수점은 하나만 존재하므로 두 번째 .은 프로퍼티 접근 연산자로 해석된다. | ||
|
|
||
| 3. 숫자 뒤에 공백을 추가 | ||
|
|
||
| ```jsx | ||
| 77 .toExponential(); | ||
| ``` | ||
|
|
||
| 자바스크립트 숫자는 정수 부분과 소수 부분 사이에 공백을 포함할 수 없기 때문에 숫자와 . 사이에 공백이 오면 .을 프로퍼티 접근 연산자로 해석한다. |
There was a problem hiding this comment.
와 이 부분은 진짜진짜 처음 보네요
Number(77).toExponential() 이런 식으로만 써서 그런가 숫자 리터럴에 바로 붙일 생각 조차를 안해봤는데 충격이네요..
역시 개발자들이 코드를 어떻게 짜도 알아서 해석해서 일단 돌아가게 해주는 JS..~~!
There was a problem hiding this comment.
숫자 뒤에 공백 추가하면 되는게 더 어이없어여 ㅋㅋㅋㅋㅋ
| | Math.round() | Math.ceil() | Math.floor() | Math.trunc() | | ||
| | --- | --- | --- | --- | | ||
| | 소수점 첫째 자리에서 반올림 | 소수점 이하 올림 | 소수점 이하 내림 | 소수점 이하 버림 | | ||
| | 가장 가까운 정수 선택 | `+` 방향으로 가까운 정수 선택 | `-` 방향으로 가까운 정수 선택 | 0의 방향으로 가까운 정수 선택 | |
There was a problem hiding this comment.
저는 코딩 테스트 문제를 풀 때, 소수점을 버려야 하는 경우 ~~ 연산자를 사용했습니다.
예를 들어, Math.floor()와 같은 역할을 하지만 더 간결하게 표현할 수 있습니다.
console.log(Math.floor(3.14)); // 3
console.log(~~3.14); // 3이 원리는 비트 NOT(~) 연산자를 두 번 적용하여 정수값만 가져오는 방식입니다.
~ (틸드 한 개)는 비트 NOT 연산자로 부호를 반전시키지만, ~~를 사용하면 부호를 원래대로 복구하면서 정수 변환이 이루어집니다.
console.log(~5); // -6 (비트 반전)
console.log(~~5); // 5 (비트 반전 후 다시 반전 → 정수 변환)이를 활용하면 Math.floor()를 대체하여 간결하게 정수 변환을 수행할 수 있습니다.
다만 음수인 경우에는 trunc()처럼 사용되고, 가독성이 안 좋아질 수 있다는 단점이 있는것 같아 실무에서 잘 쓰이지 않는것 같습니다
여러분은 자주 사용하시나요?
There was a problem hiding this comment.
알고리즘 문제를 js로 풀어보지 않아서 몰랐는데 | 0을 이용해서 4.9 | 0과 같이 비트 연산을 해도 지민님이 사용한 ~~ 연산과 같은 효과를 볼 수 있네요. 근데 비트 연산이 32비트 정수 정확도까지만 지원해서 초과하는 범위는 사용할 수 없대요!
|
|
||
| ### 28.2.4 `Number.MAX_SAFE_INTEGER` | ||
|
|
||
| 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값(9007199254740991)이다. (= 53비트로 표현할 수 있는 가장 큰 정수 2^53 - 1) |
There was a problem hiding this comment.
만약 서비스 특성상 더 큰 정수값을 다뤄야 하는 경우, 이를 문자열로 변환하여 비교하는것이 효과적일까요?
There was a problem hiding this comment.
문자열을 비교할 때는 사전순으로 비교하기('2' > '10')에 추가적인 로직이 필요할 것 같아서 BigInt를 이용하는게 좀 더 좋아보여요!
BigInt는 숫자 리터럴 뒤에 n을 붙이거나 BigInt() 함수를 호출(new 키워드 XXXXXX!)하여 선언할 수 있습니다.
다음 몇가지 주의사항만 조심하면 됩니당
- bigint형은 bigint 형 끼리만 연산해야 합니다!
- Math 객체의 메서드를 사용할 수 없습니다!
There was a problem hiding this comment.
new를 사용하지 않는게 객체를 반환하는 함수가 아니라서 그러려나요... 파스칼 케이스인데 new가 없으니까 굉장히 어색하네요
There was a problem hiding this comment.
number 필드가 여러개인 클래스를 하나 만들어도 되지 않을까요? 추가로 필요한 메소드들까지 정의해서요
There was a problem hiding this comment.
bignumber.js라는 외부 라이브러리도 존재하긴 하네요..
import BigNumber from "bignumber.js";
const bigNum1 = new BigNumber("9007199254740991000000");
const bigNum2 = new BigNumber("10");
console.log(bigNum1.plus(bigNum2).toString()); // "9007199254740991000010"
console.log(bigNum1.times(bigNum2).toString()); // "90071992547409910000000"
| function isEqual(a, b) { | ||
| return Math.abs(a-b) < Number.EPSILON; | ||
| } | ||
| isEqual(0.1+0.2, 0.3); // true |
There was a problem hiding this comment.
| ### 28.2.3 `Number.MIN_VALUE` | ||
|
|
||
| 자바스크립트에서 표현 할 수 있는 가장 작은 양수값($5 \times 10^{-324}$)이다. 이것보다 작은 숫자는 0이다. |
There was a problem hiding this comment.
이 부분을 보고 Number.EPSILON(Number.MIN_VALUE(EPSILON을 사용할까? MIN_VALUE를 사용하면 더 정밀하게 판단 가능하지 않을까? 라는 의문이 들었습니다.
그러나 이는 오답입니다.
실제로 MIN_VALUE가 EPSILON보다 작은 건 맞지만, 우리가 두 수가 같은지 판단할 때 기준을 두 수의 차이가 MIN_VALUE 보다 작은가? 로 잡는다면!
실제로 두 수의 차이는 너무 작아서 사실상 거의 같은 숫자라고 판단해도 되지만, MIN_VALUE는 너무 작아서 둘이 같지 않은 숫자라고 판단해버리기 때문입니다.
예제를 살펴봅시다!
function main() {
function isEqualByMIN_VALUE(a, b) {
return Math.abs(a - b) < Number.MIN_VALUE;
}
function isEqualByEPSILON(a, b) {
return Math.abs(a - b) < Number.EPSILON;
}
const a = 0.1 + 0.2; // 실제 값: 0.30000000000000004
const b = 0.3;
console.log(a); // 0.30000000000000004
console.log(b); // 0.3
console.log(isEqualByMIN_VALUE(a, b)); // false
console.log(isEqualByEPSILON(a, b)); // true
}따라서 두 수를 비교할 때는 EPSILON을 사용하는 것이 바람직합니다.
There was a problem hiding this comment.
근데 MIN_VALUE가 EPSILON보다 작다면 1과 1보다 큰 숫자 중에서 가장! 작은 숫자와의 차이라는EPSILON 의 정의가 틀리게 되는거 아닌가요..? 궁금하네욤
There was a problem hiding this comment.
'작다'라는 판단을 EPSILON만큼의 차이부터 하겠다는 의미인 것 같아요
그 이하의 값들은 모두 같은 것으로 판단하겠다는..
There was a problem hiding this comment.
1 + Number.MIN_VALUE는 1이고, 1 + Number.EPSILON은 1.0000000000000002이네용
|
|
||
| 점(.)은 소수 구분 기호 또는 프로퍼티 접근 연산자로 사용될 수 있는데, 자바스크립트 엔진이 숫자 뒤의 .을 소수 구분 기호로 해석해버려 toExponential()을 프로퍼티로 해석하지 못하기 때문이다. | ||
|
|
||
| **해결 방법** |
|
|
||
| ### 28.2.4 `Number.MAX_SAFE_INTEGER` | ||
|
|
||
| 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값(9007199254740991)이다. (= 53비트로 표현할 수 있는 가장 큰 정수 2^53 - 1) |
There was a problem hiding this comment.
new를 사용하지 않는게 객체를 반환하는 함수가 아니라서 그러려나요... 파스칼 케이스인데 new가 없으니까 굉장히 어색하네요
|
|
||
| ### 28.2.4 `Number.MAX_SAFE_INTEGER` | ||
|
|
||
| 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값(9007199254740991)이다. (= 53비트로 표현할 수 있는 가장 큰 정수 2^53 - 1) |
There was a problem hiding this comment.
number 필드가 여러개인 클래스를 하나 만들어도 되지 않을까요? 추가로 필요한 메소드들까지 정의해서요
| Number.isSageInteger(Number.MAX_SAFE_INTEGER+1) // false | ||
| ``` | ||
|
|
||
| ### 28.3.5 `Number.prototype.toExponential` |
There was a problem hiding this comment.
앞의 클래스 단원에서 나온 내용 복습할 겸 정리해요.
Number 함수도 하나의 객체이기 때문에 메소드를 가질 수 있고 따라서 Number.isSafeInteger()와 같이 사용이 가능하고 이와 다르게 Number.prototype의 메소드는 프로토타입 체이닝을 통해 Number를 래핑 객체로 가지는 리터럴들에서 직접 호출할 수 있어요.
const num = 100;
num.toExponential() // 프로토타입 체이닝을 통해 호출 가능
num.isSafeIntiger() // 정의되어 있지 않음이런 기술적인 분류와 별개로 어떤 이유로 인스턴스 메소드와 정적 메소드를 나눴는지 생각을 조금 해봤는데
MDN 페이지에서 메소드들을 쭉 확인해보니 Number로써 사용이 가능한지 확실하지 않은 인자를 필요로 할 경우 정적 메소드에, 평가되는 값을 지니고 있을 경우에 인스턴스 메소드로 만들어 놓은 것 같습니다!
|
|
||
| ### 28.3.7 `Number.prototype.toPrecision` | ||
|
|
||
| 인수로 전달받은 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환한다. |
There was a problem hiding this comment.
유효숫자를 배우지 않아서 항상 에타에 올라올 때마다 이게 뭔가 했는데 그냥 지수 표현식같은 거였군요
| 진법을 나타내는 2~36 사이의 정수값을 인수로 전달할 수 있고, 기본값은 10이다. | ||
|
|
||
| ```jsx | ||
| (10).toString(); // '10' |
There was a problem hiding this comment.
인스턴스 메소드 이렇게 사용하는 거 처음 봐요 ㄷㄷ
| ### 숫자 리터럴과 함께 Number 프로토타입 메서드 | ||
|
|
||
| 를 사용할 경우 에러가 발생한다. | ||
|
|
||
| ```jsx | ||
| 77.toExponential(); // SyntaxError: Invalide or unexpected token | ||
| ``` | ||
|
|
||
| 점(.)은 소수 구분 기호 또는 프로퍼티 접근 연산자로 사용될 수 있는데, 자바스크립트 엔진이 숫자 뒤의 .을 소수 구분 기호로 해석해버려 toExponential()을 프로퍼티로 해석하지 못하기 때문이다. | ||
|
|
||
| **해결 방법** | ||
|
|
||
| 1. 숫자 리터럴에 괄호를 씌우기 | ||
|
|
||
| ```jsx | ||
| (77).toExponential(); | ||
| ``` | ||
|
|
||
| 숫자 리터럴을 괄호로 감싸면 점(.)이 메서드 호출 연산자로 정확히 해석됨. | ||
|
|
||
| 2. 숫자 뒤에 .을 붙이기 | ||
|
|
||
| ```jsx | ||
| 77.1234.toExponential(); | ||
| 77..toExponential(); | ||
| ``` | ||
|
|
||
| 첫 번째 .은 부동 소수점 숫자의 소수 구분 기호로 보고, 숫자에 소수점은 하나만 존재하므로 두 번째 .은 프로퍼티 접근 연산자로 해석된다. | ||
|
|
||
| 3. 숫자 뒤에 공백을 추가 | ||
|
|
||
| ```jsx | ||
| 77 .toExponential(); | ||
| ``` | ||
|
|
||
| 자바스크립트 숫자는 정수 부분과 소수 부분 사이에 공백을 포함할 수 없기 때문에 숫자와 . 사이에 공백이 오면 .을 프로퍼티 접근 연산자로 해석한다. |
| | Math.round() | Math.ceil() | Math.floor() | Math.trunc() | | ||
| | --- | --- | --- | --- | | ||
| | 소수점 첫째 자리에서 반올림 | 소수점 이하 올림 | 소수점 이하 내림 | 소수점 이하 버림 | | ||
| | 가장 가까운 정수 선택 | `+` 방향으로 가까운 정수 선택 | `-` 방향으로 가까운 정수 선택 | 0의 방향으로 가까운 정수 선택 | |
There was a problem hiding this comment.
알고리즘 문제를 js로 풀어보지 않아서 몰랐는데 | 0을 이용해서 4.9 | 0과 같이 비트 연산을 해도 지민님이 사용한 ~~ 연산과 같은 효과를 볼 수 있네요. 근데 비트 연산이 32비트 정수 정확도까지만 지원해서 초과하는 범위는 사용할 수 없대요!
|
@songeunseo 위치 바꿔주세요! |
|
폴더 위치 안 바꾸셔도 돼요😝 |
| ### 28.2.3 `Number.MIN_VALUE` | ||
|
|
||
| 자바스크립트에서 표현 할 수 있는 가장 작은 양수값($5 \times 10^{-324}$)이다. 이것보다 작은 숫자는 0이다. |
There was a problem hiding this comment.
근데 MIN_VALUE가 EPSILON보다 작다면 1과 1보다 큰 숫자 중에서 가장! 작은 숫자와의 차이라는EPSILON 의 정의가 틀리게 되는거 아닌가요..? 궁금하네욤
| ### 숫자 리터럴과 함께 Number 프로토타입 메서드 | ||
|
|
||
| 를 사용할 경우 에러가 발생한다. | ||
|
|
||
| ```jsx | ||
| 77.toExponential(); // SyntaxError: Invalide or unexpected token | ||
| ``` | ||
|
|
||
| 점(.)은 소수 구분 기호 또는 프로퍼티 접근 연산자로 사용될 수 있는데, 자바스크립트 엔진이 숫자 뒤의 .을 소수 구분 기호로 해석해버려 toExponential()을 프로퍼티로 해석하지 못하기 때문이다. | ||
|
|
||
| **해결 방법** | ||
|
|
||
| 1. 숫자 리터럴에 괄호를 씌우기 | ||
|
|
||
| ```jsx | ||
| (77).toExponential(); | ||
| ``` | ||
|
|
||
| 숫자 리터럴을 괄호로 감싸면 점(.)이 메서드 호출 연산자로 정확히 해석됨. | ||
|
|
||
| 2. 숫자 뒤에 .을 붙이기 | ||
|
|
||
| ```jsx | ||
| 77.1234.toExponential(); | ||
| 77..toExponential(); | ||
| ``` | ||
|
|
||
| 첫 번째 .은 부동 소수점 숫자의 소수 구분 기호로 보고, 숫자에 소수점은 하나만 존재하므로 두 번째 .은 프로퍼티 접근 연산자로 해석된다. | ||
|
|
||
| 3. 숫자 뒤에 공백을 추가 | ||
|
|
||
| ```jsx | ||
| 77 .toExponential(); | ||
| ``` | ||
|
|
||
| 자바스크립트 숫자는 정수 부분과 소수 부분 사이에 공백을 포함할 수 없기 때문에 숫자와 . 사이에 공백이 오면 .을 프로퍼티 접근 연산자로 해석한다. |
There was a problem hiding this comment.
숫자 뒤에 공백 추가하면 되는게 더 어이없어여 ㅋㅋㅋㅋㅋ
|
|
||
| ### 28.2.4 `Number.MAX_SAFE_INTEGER` | ||
|
|
||
| 자바스크립트에서 안전하게 표현할 수 있는 가장 큰 정수값(9007199254740991)이다. (= 53비트로 표현할 수 있는 가장 큰 정수 2^53 - 1) |
There was a problem hiding this comment.
bignumber.js라는 외부 라이브러리도 존재하긴 하네요..
import BigNumber from "bignumber.js";
const bigNum1 = new BigNumber("9007199254740991000000");
const bigNum2 = new BigNumber("10");
console.log(bigNum1.plus(bigNum2).toString()); // "9007199254740991000010"
console.log(bigNum1.times(bigNum2).toString()); // "90071992547409910000000"| ### 28.2.3 `Number.MIN_VALUE` | ||
|
|
||
| 자바스크립트에서 표현 할 수 있는 가장 작은 양수값($5 \times 10^{-324}$)이다. 이것보다 작은 숫자는 0이다. |
There was a problem hiding this comment.
'작다'라는 판단을 EPSILON만큼의 차이부터 하겠다는 의미인 것 같아요
그 이하의 값들은 모두 같은 것으로 판단하겠다는..
| function isEqual(a, b) { | ||
| return Math.abs(a-b) < Number.EPSILON; | ||
| } | ||
| isEqual(0.1+0.2, 0.3); // true |
28, 29장 입니다!