코딩/Javascript

[JS-중급편-OOP] 6.숫자(Numbers)

드리프트 2020. 12. 24. 18:20
728x170

 

 

JavaScript로 코드를 짤 때 우리는 대부분의 시간을 숫자를 다루는 데 소비 할 겁니다.

 

숫자로 직접 작업하지 않더라도 무언가의 수를 유지하거나 배열로 작업하는 것과 같은 가장 기본적인 작업을 수행할 때 숫자를 간접적으로 만나게 됩니다.

 

이 튜토리얼에서는 일반적인 작업을 수행하는 데 쓸 수 있는 방법을 살펴봄으로써 JavaScript의 숫자에 대해 알아보겠습니다.

 

그 과정에서, 숫자 관련하여 좀 더 깊게 들어가기도 할 겁니다.

 

 

숫자 사용하기

 

숫자를 사용하려면 우리가 해야 할 일은 단지 사용하는 것뿐입니다.

 

다음은 숫자 3으로 초기화된 stooges라는 변수를 선언하는 간단한 예입니다.

 

let stooges = 3;

 

이게 다입니다.

 

그냥 사용하면 됩니다.

 

만약 소수점이 있는 숫자를 사용한다면 그냥 정수처럼 소수로 사용하면 됩니다.

 

let pi = 3.14159;
let color = 0xFF;
let massOfEarth = 5.9742e+24;

 

위의 예에서 우리는 10진수 값, 16 진수 값, 지수를 사용하는 정말 큰 수를 볼 수 있습니다.

 

해당 브라우저는 자동으로 알아서 해당 숫자를 인식할 겁니다.

 

음수도 쉽게 사용할 수 있습니다.

 

음수를 사용하려면 음수 값으로 바꾸려는 숫자 앞에 마이너스 (-) 문자를 넣으시면 됩니다.

 

let temperature = -42;

 

다음 두 섹션에서는 조금 더 깊이 들어가서 우리가 할 수 있는 다른 재밌는 작업들을 살펴보겠습니다.

 

더보기

쉬어가기 : 자바스크립에서의 숫자

자바스크립에서 숫자로 작업하는 게 쉬운 이유는 자바스크립트가 숫자 타입이 별로 없다는 이유입니다.

 

다른 언어에서 했던 것처럼 숫자를 int, double, byte, float 등의 타입으로 선언할 필요가 없습니다.

 

유일한 예외는 정말 크거나 아주 작은 숫자가 필요한 경우 BigInt 객체가 필요할 겁니다.

 

나중에 BigInt에 대해 이야기하겠습니다.

 

그리고 자바스크립트는 모든 숫자를 64비트 플로팅 포인트(64bit floating point) 숫자로 변환해서 취급합니다.

 

연산자

초등학교 수학 시간에 배운 것을 구현하기 위해 코드에서는 수학 연산자를 그대로 사용합니다.

 

일반적인 연산자를 살펴보겠습니다.

 

간단한 연산 하기

자바 스크립트에서는, +, -, *, / 및 % 연산자를 사용하여 간단한 수학계산을 할 수 있습니다.

 

% 연산자는 다른 언어에서와 마찬가지로 나머지를 구하는 연산자입니다.

 

간단한 예입니다.

 

let total = 4 + 26;
let average = total / 2;
let doublePi = 2*3.14159;
let subtractItem = 50 – 25;
let remainder = total % 7;
let more = (1 + average * 10) / 5;

 

위의 예의 마지막 줄에서 괄호를 이용하여 연산 우선순위를 지정할 수 있습니다.

 

다시 말하지만, 이 모든 것은 계산기 관련 작업입니다.

 

JavaScript는 다음 순서로 표현식(expression)을 평가합니다.

 

  1. 괄호

  2. 지수

  3. 곱셈

  4. 나눗셈

  5. 더하기

  6. 빼기

수학 시간에 배운 사칙 연산 우선순위와 같습니다.

 

 

증가시키기 (감소시키기)

 

숫자로 하는 일반적인 작업은 변수를 특정 양만큼 증가 또는 감소시키는 것입니다. 

 

다음은 변수 i를 1 씩 증가시키는 예입니다.

 

let i = 4;
i = i + 1;

 

증가 또는 감소시킬 때 꼭 1만큼만 할 필요가 없습니다.

 

임의의 숫자를 사용할 수 있습니다.

 

let i = 100;
i = i - 2;

 

이 모든 것이 단순히 더하기 나 빼기 일 필요는 없습니다. 

 

다른 작업도 수행할 수 있습니다.

 

let i = 100;
i = i / 2;

 

여기서 패턴을 보기 시작해야 합니다.

 

사용 중인 연산자에 관계없이 i 변수를 계속 수정하고 있음을 알 수 있습니다.

 

이 패턴을 사용하는 빈도 때문에 이것을 약간 단순화하는 연산자가 있습니다.

 

Expression

What it does

i++

변수 i를 1만큼 증가 (i = i + 1)

i--

변수 i를 1만큼 감소 (i = i - 1)

i += n

변수 i를 n만큼 증가 (i = i + n)

i -= n

변수 i를 n만큼 감소 (i = i - n)

i *= n

변수 i를 n만큼 곱하기 (i = i * n)

i /= n

변수 i를 n만큼 나누기 (i = i / n)

i %= n

변수 i를 n으로 나눈후 나머지 (i = i % n)

i **= n

변수 i를 n승(지수)으로 계산

 

앞에서 본 세 가지 예제에서 이러한 연산자를 사용하면 코드는 다음과 같습니다.

 

i++;
i -= 2;
i /= 2;

 

마무리하기 전에 알아야 할 한 가지 단점이 있습니다.

 

값을 1 씩 증가 또는 감소시키는 "++" 및 "--" 연산자와 관련이 있습니다. "++" 및 "--"  연산자가 변수 앞에 있느냐 뒤에 있느냐가 중요합니다.

 

다음 예제를 봅시다.

 

let i = 4;
let j = i++;

 

이 두 줄을 실행하면 i의 값은 5가 됩니다. j의 값은 4가 됩니다.

 

이 예에서 ++연산자는 변수 뒤에 있습니다.

 

++연산자가 변수 뒤에 있으면 해당 코드 라인이 평가될 때 변수 i를 j에 대입하고 나중에 변수 i를 1 만큼 증가하게 됩니다.

 

++연산자를 변수 앞에 배치하면 결과가 약간 다릅니다.

 

let i = 4;
let j = ++i;

 

i의 값은 여전히 5입니다.

 

여기서 다른 점이 있습니다.

 

j의 값도 5입니다.

 

++연산자가 변수 앞에 있으면 해당 코드 라인이 평가되기 전에 미리 변수 i를 증가시키고 j에 대입하게 됩니다.

 

이 두 예제 사이에서 틀린 점은 ++연산자의 위치입니다.

 

연산자의 위치에 따라 나중에 증가될지 또는 미리 증가된 값이 반환될지 결정됩니다.

 

 

16 진수 및 8 진수

 

일반 10 진수 값을 사용하는 것 외에도 16 진수 및 8 진수 값도 사용할 수 있습니다.

 

8 진수 값으로 작업할 때는 숫자를 0으로 시작해야 합니다.

 

let leet = 02471;

 

16 진수 값의 경우 0x로 시작해야 합니다.

 

let leet = 0x539;

 

많은 상황에서 8 진수 및 16 진수 값을 문자열 형식으로 다룰 수 있습니다.

 

문자열인 경우 일반 숫자처럼 조작할 수 없습니다.

 

먼저 문자열을 숫자로 변환해야 합니다.

 

그렇게 하는 방법은 parseInt 함수를 사용하는 것입니다.

 

let hexValue = parseInt('FFFFFF', 16);
let octalValue = parseInt('011', 8);

 

parseInt 함수를 사용하는 방법은 16 진수 또는 8 진수에 해당하는 문자열을 넣은 다음 두 번째 인수로 몇 진수로 변환할지 숫자를 적어 주면 됩니다.

 

 

 

 

 

특별한 값 - Infinity와 NaN

 

마지막으로 살펴볼 것은 숫자 값이 아닌 두 가지 글로벌 속성입니다.

 

이 값은 Infinity 및 NaN입니다.

 

Infinity

Infinity 및 –Infinity를 사용하여 무한히 크거나 무한히 작은 수를 정의할 수 있습니다.

 

let myLoveForYou = Infinity * 2;

 

Infinity를 사용해야 할 가능성은 매우 낮습니다.

 

대신 코드가 리턴하는 방식으로 사용되는 것을 보게 될 겁니다.

 

예를 들어 0으로 나누면 Infinity가 반환됩니다.

 

NaN

NaN 키워드는 "Not a Number"를 나타내며 잘못된 숫자 연산을 수행하면 반환됩니다. 

 

예를 들어 다음과 같은 경우 NaN이 반환됩니다.

 

let nope = 1920 / "blah";

 

위 코드가 NaN이 반환되는 이유는 숫자와 문자열을 나눌 수 없기 때문입니다.

 

나중에 더 몇 가지를 살펴보겠습니다.

 

 

Math 객체(Object)

숫자는 다양한 수학적 표현식에 사용되며 단순한 덧셈, 뺄셈, 곱셈 및 나눗셈을 뛰어넘습니다.

 

복잡한 숫자 작업을 보다 쉽게 작업할 수 있도록 도와주는 Math 객체가 있습니다.

 

이 객체는 편리하게 사용할 수 있는 많은 함수와 상수를 제공하며,

 

이 객체가 수행하는 작업 중 일부를 매우 간략하게 살펴보겠습니다.

 

 

상수

 

pi, Euler 상수, 자연로그 등과 같은 수학 상수를 명시적으로 정의할 필요가 없도록 Math 객체는 많은 공통 상수를 미리 정의해 놓았습니다.

 

사용법

뜻

Math.E

Euler의 상수

Math.LN2

2의 자연로그 값

Math.LN10

10의 자연로그 값

Math.LOG2E

베이스 2와 숫자 E의 로그값

Math.LOG10E

베이스 10과 숫자 E의 로그값

Math.PI

파이값 3.14159

Math.SQRT1_2

1/2의 제곱근 값

Math.SQRT2

2의 제곱근 값

 

이 모든 상수 중에서 가장 많이 사용하는 것은 Math.PI입니다.

 

 

 

 

 

화면에 원을 그리는 것부터 삼각함수를 구하는 작업까지 파이는 광범위하게 사용됩니다.

 

다음은 반경이 주어지면 원주를 반환하는 함수의 예입니다.

 

function getCircumference(radius) {
	return 2 * Math.PI * radius;
}

alert(getCircumference(2));

 

Math.PI를 다른 변수, 상수와 함께 사용할 수 있습니다.

 

 

숫자 반올림하기

소수점 숫자는 종종 말도 안 되는 정도의 정밀도를 나타내서 반올림할 필요가 종종 생깁니다.

 

let position = getPositionFromCursor(); // 159.3634493939

 

위 숫자를 적절한 정수 값으로 반올림하는데 도움이 되는 Math 함수가 있습니다.

 

Math.round(), Math.ceil(), Math.floor() 함수가 그것입니다.

 

위 함수를 이해하기 가장 쉬운 방법은 실제 예를 보면 됩니다.

 

Math.floor(.5) // 0
Math.ceil(.5) // 1
Math.round(.5) // 1

Math.floor(3.14) // 3
Math.round(3.14) // 3
Math.ceil(3.14) // 4

Math.floor(5.9) // 5
Math.round(5.9) // 6
Math.ceil(5.9) // 6

 

이 세 가지 함수는 항상 정수로 반올림합니다.

 

정확한 숫자 세트로 반올림하려면 다음번에 좀 더 자세히 알아볼 예정입니다.

 

 

삼각 함수

Math 객체를 사용하면 필요한 거의 모든 삼각 함수에 쉽게 액세스 할 수 있습니다.

 

Math.cos(0) //1
Math.sin(0) //0
Math.tan(Math.PI / 4) //1
Math.cos(Math.PI) //1
Math.cos(4 * Math.PI) //1

 

이러한 삼각 함수는 라디안 값 형식의 인수를 사용합니다.

 

숫자 형식이면 먼저 라디안으로 변환해야 합니다.

 

 

승수와 제곱근

Math 객체 함수 중에 승수와 제곱근을 계산하는 함수가 있습니다.

 

각각, Math.pow(), Math.exp(), Math.sqrt()입니다.

 

Math.pow(2, 4) // 2^4 (or 2 * 2 * 2 * 2)
Math.exp(3) //Math.E^3
Math.sqrt(16) // 4

 

 

절대값 구하기

숫자의 절댓값을 원한다면 Math.abs() 함수를 사용하면 됩니다.

 

Math.abs(37) //37
Math.abs(-6) //6

 

랜덤 숫자

0과 1 사이의 임의의 숫자를 생성하려면 Math.random() 함수를 사용하면 됩니다.

 

아래 예를 보면 쉽게 사용법을 익힐 수 있습니다.

 

let randomNumber = Math.random() * 100;

 

 

결론

지금까지 자바스크립트 숫자와 Math 객체에 대해 알아보았습니다.

 

예제를 보면 쉽게 이해할 수 있으니 참고 바랍니다.

 

다음 편에서는 getter와 setter에 대해 알아보겠습니다.

 

 

그리드형

'코딩 > Javascript' 카테고리의 다른 글

[JS-중급편-OOP] 8.객체 완전 분석(Objects)  (0) 2020.12.26
[JS-중급편-OOP] 7.Getters and Setters  (0) 2020.12.26
[JS-중급편-OOP] 5.프리미티브 타입에 관하여  (0) 2020.12.24
[JS-중급편-OOP] 4.문자열과 변수 결합  (0) 2020.12.23
[JS-중급편-OOP] 3.문자열(String)  (0) 2020.12.22

'코딩/Javascript'의 다른글

  • 현재글[JS-중급편-OOP] 6.숫자(Numbers)

관련글

댓글

티스토리툴바