모던 자바스크립트 (자료구조와 자료형) 3-2. 객체의 순환과 숫자형

객체 순회 메서드

- Object.keys()

: 객체의 키만 담은 배열을 반환

 

- Object.values()

: 객체의 값만 담은 배열을 반환

 

- Object.entries()

 : [키, 값]을 가진 배열을 반환

=> keys(), values(), entries() 모두 키가 심볼형인 프로퍼티를 무시

let user = {
  name: "John",
  age: 30
};

// Object.keys(user) = ["name", "age"]
// Object.values(user) = ["John", 30]
// Object.entries(user) = [ ["name","John"], ["age",30] ]


// values()를 통해 프로퍼티 값을 대상으로 값을 출력
user = {
  name: "Violet",
  age: 30
};

// 값을 순회합니다.
for (let value of Object.values(user)) {
  alert(value); // Violet과 30이 연속적으로 출력됨
}

 

 

 

 

객체 변환하기

- Object.fromEntries(array)

: Entries로 만든 배열을 객체로 변환

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 객체를 배열로 변환해서 배열 전용 메서드인 map을 적용하고 fromEntries를 사용해 배열을 다시 객체로 되돌립니다.
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

alert(doublePrices.meat); // 8

 

 

 

숫자형

- bigInt

: 2^53 ~ 2^-53 의 범위를 벗어나지 못하는 재약 때문에 탄생한 숫자형

: 10억을 나타낼떄는 1bn으로 표시 (Billion)

let billion = 1e9;  // 10억, 1과 9개의 0

alert( 7.3e9 );  // 73억 (7,300,000,000)

// 1e3 = 1 * 1000
// 1.23e6 = 1.23 * 1000000

let ms = 0.000001;
// 1에서 왼쪽으로 6번 소수점 이동
// ms = 1e-6; 

// 10을 세 번 거듭제곱한 수로 나눔
// 1e-3 = 1 / 1000 (=0.001)

// 10을 여섯 번 거듭제곱한 수로 나눔
// 1.23e-6 = 1.23 / 1000000 (=0.00000123)

 

 

 

16진수

: 0x를 사용하여 표현

alert( 0xff ); // 255
alert( 0xFF ); // 255 (대·소문자를 가리지 않으므로 둘 다 같은 값을 나타냅니다.)

 

 

2진수

: 0b를 사용하여 표현

 

 

8진수

: 0o를 사용하여 표현

let a = 0b11111111; // 255의 2진수
let b = 0o377; // 255의 8진수

alert( a == b ); // true, 진법은 다르지만, a와 b는 같은 수임

 

 

이외의 진법

: parseInt를 사용하여 다룸

 

 

 

num.toString(base)

: base진법으로 num을 표현한 후, 이를 문자형으로 변환

: base는 2부터 36까지 쓸 수 있고 기본 값은 10

let num = 255;

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

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

 

 

 

어림수 구하기 (rounding)

- Math.floor

: 소수점 첫째 자리에서 내림(버림). 3.1은 3, -1.1은 -2가 됩니다.

 

- Math.ceil

: 소수점 첫째 자리에서 올림. 3.1은 4, -1.1은 -1이 됩니다.

 

- Math.round

: 소수점 첫째 자리에서 반올림. 3.1은 3, 3.6은 4, -1.1은 -1이 됩니다.

 

- Math.trunc

: 소수부를 무시. 3.1은 3이 되고 -1.1은 -1이 됩니다.

: Internet Explorer에서는 지원하지 않음

 

 

 

num.toFixed(n)

: 소수점 n 번째 수까지의 어림수를 구한 후 이를 문자형으로 반환해주는 메서드

let num = 12.36;
alert( num.toFixed(1) ); // "12.4"

 

 

 

부정확한 계산

: 숫자는 64비트 내에서 표현 (숫자 52비트 / 소수점 위치 11비트 / 부호 1비트)

: 64비트를 넘는 숫자는 Infinity로 표현

 

- 정밀도 손실 

: 부정확한 비교 연산의 결과

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

alert( 0.1 + 0.2 ); // 0.30000000000000004

 

- toFixed()

: 정밀도 손실을 해결하는 방법

let sum = 0.1 + 0.2;
alert( sum.toFixed(2) ); // 0.30

 

 

 

숫자형 판단

- isNaN()

: 인수를 숫자로 변환한 다음 NaN인지 테스트함

: NaN은 어떤 값과도 같지 않음

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

alert( NaN === NaN ); // false

 

- isFinite()

: 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환함

alert( isFinite("15") ); // true
alert( isFinite("str") ); // false, NaN이기 때문입니다.
alert( isFinite(Infinity) ); // false, Infinity이기 때문입니다.

let num = +prompt("숫자를 입력하세요.", '');

// 숫자가 아닌 값을 입력하거나 Infinity, -Infinity를 입력하면 false가 출력됩니다.
alert( isFinite(num) );

 

 

 

Object.is()

: ===과 같이 비교하는 메서드

: === 보다 더 신뢰할 수 있음

: 비교 결과가 정확해야 하는 경우 사용

Object.is(NaN, NaN) === true

Object.is(0, -0) === false

 

 

 

숫자로의 변환

: 12px, $12000 과 같은 데이터를 정수 혹은 소수로 반환

: 문자열에서 숫자만 읽고, 읽은 숫자를 에러가 발생하기 전에 반환해주는 ‘약한’ 형 변환을 사용

 

- parseInt()

: 문자열 중 포함된 숫자들을 정수로 반환

: 두 번째 인수를 사용할 경우 원하는 진수로 변환

 

- parseFloat()

: 문자열 중 포함된 숫자들의 부동 소숫점 숫자를 반환

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

alert( parseInt('12.3') ); // 12, 정수 부분만 반환됩니다.
alert( parseFloat('12.3.4') ); // 12.3, 두 번째 점에서 숫자 읽기를 멈춥니다.

alert( parseInt('a123') ); // NaN, a는 숫자가 아니므로 숫자를 읽는 게 중지됩니다.

alert( parseInt('0xff', 16) ); // 255
alert( parseInt('ff', 16) ); // 255, 0x가 없어도 동작합니다.

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

 

 

 

수학함수

- Math.random()

: 0과 1사이의 난수를 반환 (1을 제외)

 

- Math.max()

: 연속 되는 숫자 중 최대치를 반환

 

- Math.min()

: 연속 되는 숫자 중 최소치를 반환

 

- Math.pow(n, power)

: n^power 라는 거듭제곱 값 반환

alert( Math.random() ); // 0.1234567894322
alert( Math.random() ); // 0.5435252343232
alert( Math.random() ); // ... (무작위 수)

alert( Math.max(3, 5, -10, 0, 1) ); // 5
alert( Math.min(1, 2) ); // 1

alert( Math.pow(2, 10) ); // 2의 10제곱 = 1024

 

 

 

 

refference

https://ko.javascript.info/keys-values-entries

https://ko.javascript.info/number