모던 자바스크립트 튜토리얼 part1 - 5.1 ~ 2

5.1 Methods of primitives

기본타입의 함수나 기능들이 동작하려면 해당 타입을 감싸는 'object wrapper"가 생성되어 기능을 수행한다.

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

1. 문자열이 속성에 접근하는 순간 string을 다룰 수 있는 메서드를 가진 이른바 새로운 객체 생성
2. 해당 함수가 동작하고 새로운 문자열을 반환
3. 생성된 객체는 소멸되고 str만 남음

즉, 기본타입이라도 메서드를 사용할 수 있으면서도 여전히 가벼운 기본 타입을 유지할 수 있는 것이다. java에서 제공하는 wrapper class와 비슷한 개념 같지만, 아마도 자바에서는 기본타입 사용 시에 자동으로 wrapper class 인스턴스가 생성되는 것은 아니니 혼동하지 말자.

 

new 키워드를 이용하여 object wrapper 객체를 따로 생성해서 사용하는 것은 권장하지 않는다. 왜냐하면 object는 항상 truthy하기 때문에 기본타입과 같은 값을 가져도 다른 결과를 불러올 수 있기 때문이다.

alert( typeof 0 ); // "number"

alert( typeof new Number(0) ); // "object"!

// ---------------------------

let zero = new Number(0);

if (zero) { // zero is true, because it's an object
  alert( "zero is truthy!?!" );
}

 

아래와 같이 new 키워드 없이 object wrapper를 생성하는 것은 해당 값을 적절한 타입으로 바꿀 때 유용하다.

let num = Number("123"); // convert a string to number

이 경우에는 당연히 정상적인 결과를 반환한다. 

 

null/undefined는 가장 기본적인 타입이며 해당하는 object wrapper를 가지고 있지도 않고, 함수를 갖고 있지 않다. 

alert(null.test); // error

 

5.2 Numbers

number는 다양한 방식으로 표현가능하다. alert로 출력한 결과는 참고해두자.

let billion = 1000000000;
let billion = 1_000_000_000;
let billion = 1e9;  // 1 billion, literally: 1 and 9 zeroes

alert( 7.3e9 );  // 7.3 billions (same as 7300000000 or 7_300_000_000

 

소숫점, 16진수 등 다른 표현은 아래 참고.

let mcs = 1e-6; // five zeroes to the left from 1
// -3 divides by 1 with 3 zeroes
1e-3 === 1 / 1000; // 0.001

// -6 divides by 1 with 6 zeroes
1.23e-6 === 1.23 / 1000000; // 0.00000123

// an example with a bigger number
1234e-2 === 1234 / 100; // 12.34, decimal point moves 2 times

alert( 0xff ); // 255
alert( 0xFF ); // 255 (the same, case doesn't matter)
let a = 0b11111111; // binary form of 255
let b = 0o377; // octal form of 255

alert( a == b ); // true, the same number 255 at both sides

toString(base)

base 값에 따라 여러 진법으로 표현할 수 있다.

et num = 255;

alert( num.toString(16) );  // ff
alert( num.toString(2) );   // 11111111

number 값에 바로 접근하여 메서드를 수행하고 싶을 때는 아래와 같이 사용하면 된다.

alert( 123456..toString(36) ); // 2n9c

toFixed(n)

let num = 12.34;
alert( num.toFixed(1) ); // "12.3"
let num = 12.36;
alert( num.toFixed(1) ); // "12.4"
let num = 12.34;
alert( num.toFixed(5) ); // "12.34000", added zeroes to make exactly 5 digits

Imprecise calculations

숫자는 64비트 포맷으로 표현된다. 경우에 따라 아주 큰 수를 표현해야할 때, 64비트를 뛰어 넘으면 Infinity로 판단한다.

alert( 1e500 ); // Infinity

 

또한, 아래와 같은 현상이 발생하기도 한다. 그 이유는 실제로 10진수에서는 단순해보이지만 2진수에서는 끝이없는 수이고, 이러한 문제를 가장 가까운 숫자로 반올림해서 해결하는데 이 과정에서 약간의 데이터 손실이 발생하기 때문이다. (다른 언어에도 동일한 문제가 있다고 하는데, 여태까지 몰랐다...)

alert( 0.1 + 0.2 == 0.3 ); // false
alert( 0.1 + 0.2 ); // 0.30000000000000004

// -------------------------------
alert(0.1.toString(2)); // 0.0001100110011001100110011001100110011001100110011001101
alert(0.2.toString(2)); // 0.001100110011001100110011001100110011001100110011001101
alert((0.1 + 0.2).toString(2)); // 0.0100110011001100110011001100110011001100110011001101

 

 

Tests: isFinite and isNaN

Infinity, -Infinity와 NaN은 number타입에 속하지만 다소 특별한 점이 있다.

alert(isNaN(NaN)); // true
alert(isNaN("str"); // true
alert( NaN === NaN ); // false

alert( isFinite("15") ); // true
alert( isFinite("str") ); // false, because a special value: NaN
alert( isFinite(Infinity) ); // false, because a special value: Infinity

let num = +prompt("Enter a number", '');

// will be true unless you enter Infinity, -Infinity or not a number
alert( isFinite(num) );

parseInt and parseFloat

java에서처럼 숫자가 아닌 타입을 숫자로 변환해준다. 차이점은 px, em 등 단위와 같은 문자열이 포함되어 있더라도, 숫자를 읽을 수 있는데까지 읽은 후 반환한다는 점이다.

alert( parseInt('100px') ); // 100
alert( parseFloat('12.5em') ); // 12.5

alert( parseInt('12.3') ); // 12, only the integer part is returned
alert( parseFloat('12.3.4') ); // 12.3, the second point stops the reading

// -------------------------
alert( parseInt('a123') ); // NaN, the first symbol stops the process

다른 진법으로 바꿔서 표현하는 것도 가능하다.

alert( parseInt('0xff', 16) ); // 255
alert( parseInt('ff', 16) ); // 255, without 0x also works

alert( parseInt('2n9c', 36) ); // 123456

Other math functions

Math.random(), Math.max(a, b, c ... ), Math.min(a, b, c ...), Math.pow(n, power)