[자바스크립트] Math 객체와 수학 연산

웹개발/javascript

[자바스크립트] Math 객체와 수학 연산

joamashi 2024. 8. 8. 22:00

자바스크립트 Math 객체는 다양한 수학적인 상수와 함수를 제공하여 수학 연산을 쉽게 수행할 수 있도록 돕습니다.

주요 수학 연산 종류

삼각 함수

sin(x): x의 사인 값을 반환합니다.
cos(x): x의 코사인 값을 반환합니다.
tan(x): x의 탄젠트 값을 반환합니다.
asin(x): 사인 값이 x인 각도(라디안)를 반환합니다.
acos(x): 코사인 값이 x인 각도(라디안)를 반환합니다.
atan(x): 탄젠트 값이 x인 각도(라디안)를 반환합니다.

산술 연산

abs(x): x의 절댓값을 반환합니다.
ceil(x): x보다 크거나 같은 가장 작은 정수를 반환합니다. (올림)
floor(x): x보다 작거나 같은 가장 큰 정수를 반환합니다. (내림)
round(x): x를 가장 가까운 정수로 반올림합니다.
max(x, y, ...): 인수 중 가장 큰 값을 반환합니다.
min(x, y, ...): 인수 중 가장 작은 값을 반환합니다.
pow(x, y): x의 y승을 반환합니다.
sqrt(x): x의 제곱근을 반환합니다.
random(): 0 이상 1 미만의 난수를 반환합니다.

기타 유용한 메소드

Math.imul(number1, number2): 두 32비트 정수를 곱한 결과를 32비트 정수로 반환합니다. 정수 오버플로우를 방지하는 데 유용합니다.
Math.clz32(number): 32비트 부동소수점 숫자의 이진 표현에서 앞에 있는 0의 개수를 반환합니다. 비트 연산에서 자주 사용됩니다.
Math.sign(number): 숫자의 부호를 반환합니다. 양수이면 1, 음수이면 -1, 0이면 0을 반환합니다.
Math.trunc(x): x의 소수 부분을 버리고 정수 부분만 반환합니다.
Math.fround(x): x를 가장 가까운 32비트 부동소수점 숫자로 반올림합니다.

// 삼각 함수
let angleInRadians = Math.PI / 4;
let sine = Math.sin(angleInRadians); // 0.7071067811865476

// 산술 연산
let maxNumber = Math.max(10, 20, 5); // 20
let randomNum = Math.random(); // 0과 1 사이의 난수

// 기타 메소드
let result = Math.imul(2, 3); // 6
let leadingZeros = Math.clz32(8); // 28 (8의 이진 표현은 00000000000000000000000000001000이므로 앞에 28개의 0)
let sign = Math.sign(-5); // -1
let truncated = Math.trunc(3.14); // 3
let roundedToFloat = Math.fround(0.30000000000000004); // 0.3

활용 예

게임 개발: 랜덤 숫자 생성, 각도 계산, 물체의 이동 등
데이터 분석: 통계 계산, 데이터 정규화 등
그래픽 디자인: 도형 계산, 색상 변환 등

추가 정보

Math 객체는 함수 객체가 아닙니다. 모든 속성과 메소드는 정적이므로 Math 객체 자체를 생성할 필요 없이 바로 사용할 수 있습니다.
Math.PI: 원주율 π를 나타내는 상수입니다.
Math.E: 자연 로그의 밑 e를 나타내는 상수입니다.

삼각 함수

sin(x) 함수

Math.sin(x) 함수는 주어진 각도 x (라디안 단위)의 사인 값을 반환합니다.

let angleInRadians = Math.PI / 4; // 45도를 라디안으로 변환
let sineValue = Math.sin(angleInRadians);
console.log(sineValue); // 약 0.7071 (√2 / 2)

실제 활용 예시

단순한 삼각 함수 계산:

function calculateHypotenuse(opposite, adjacent) {
    let angle = Math.atan(opposite / adjacent);
    let hypotenuse = opposite / Math.sin(angle);
    return hypotenuse;
}

좌표 계산:

// 원 위의 점의 좌표 구하기
function getPointOnCircle(radius, angle) {
    let x = radius * Math.cos(angle);
    let y = radius * Math.sin(angle);
    return {x, y};
}

애니메이션:

// 간단한 움직이는 공 애니메이션
function drawBall(ctx, x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();
}

function animate() {
    let angle = Date.now() * 0.001; // 시간에 따라 변하는 각도
    let x = 200 + 100 * Math.sin(angle);
    let y = 100 + 100 * Math.cos(angle);
    drawBall(ctx, x, y, 20);
    requestAnimationFrame(animate);
}

중요한 점

라디안 단위: Math.sin() 함수는 라디안을 인자로 받습니다. 각도를 라디안으로 변환하려면 각도에 Math.PI / 180을 곱합니다. 예: Math.sin(30 * Math.PI / 180)은 30도의 사인 값을 구합니다.
범위: 사인 값의 범위는 -1부터 1까지입니다.
삼각 함수의 관계: 사인, 코사인, 탄젠트는 서로 연관되어 있습니다. 예를 들어, 피타고라스 정리와 함께 사용하여 삼각형의 변의 길이를 계산할 수 있습니다.

sin(x) 함수

Math.sin(x) 함수는 주어진 각도 x (라디안 단위)의 사인 값을 반환합니다.

let angleInRadians = Math.PI / 4; // 45도를 라디안으로 변환
let sineValue = Math.sin(angleInRadians);
console.log(sineValue); // 약 0.7071 (√2 / 2)

실제 활용 예시

단순한 삼각 함수 계산:

function calculateHypotenuse(opposite, adjacent) {
    let angle = Math.atan(opposite / adjacent);
    let hypotenuse = opposite / Math.sin(angle);
    return hypotenuse;
}

좌표 계산:

// 원 위의 점의 좌표 구하기
function getPointOnCircle(radius, angle) {
    let x = radius * Math.cos(angle);
    let y = radius * Math.sin(angle);
    return {x, y};
}

애니메이션:

// 간단한 움직이는 공 애니메이션
function drawBall(ctx, x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();
}

function animate() {
    let angle = Date.now() * 0.001; // 시간에 따라 변하는 각도
    let x = 200 + 100 * Math.sin(angle);
    let y = 100 + 100 * Math.cos(angle);
    drawBall(ctx, x, y, 20);
    requestAnimationFrame(animate);
}

중요한 점

라디안 단위: Math.sin() 함수는 라디안을 인자로 받습니다. 각도를 라디안으로 변환하려면 각도에 Math.PI / 180을 곱합니다. 예: Math.sin(30 * Math.PI / 180)은 30도의 사인 값을 구합니다.
범위: 사인 값의 범위는 -1부터 1까지입니다.
삼각 함수의 관계: 사인, 코사인, 탄젠트는 서로 연관되어 있습니다. 예를 들어, 피타고라스 정리와 함께 사용하여 삼각형의 변의 길이를 계산할 수 있습니다.

cos(x) 함수

Math.cos(x) 함수는 주어진 각도 x (라디안 단위)의 코사인 값을 반환합니다.

let angleInRadians = Math.PI / 4; // 45도를 라디안으로 변환
let cosineValue = Math.cos(angleInRadians);
console.log(cosineValue); // 약 0.7071 (√2 / 2)

실제 활용 예시

단순한 삼각 함수 계속:

function calculateAdjacent(hypotenuse, opposite) {
    let angle = Math.asin(opposite / hypotenuse);
    let adjacent = hypotenuse * Math.cos(angle);
    return adjacent;
}

좌표 계산:

// 원 위의 점의 좌표 구하기
function getPointOnCircle(radius, angle) {
    let x = radius * Math.cos(angle);
    let y = radius * Math.sin(angle);
    return {x, y};
}

애니메이션:

// 간단한 좌우 왕복 운동
function animate() {
    let angle = Date.now() * 0.001; // 시간에 따라 변하는 각도
    let x = 200 + 100 * Math.cos(angle);
    // y 값은 고정
    let y = 100;
    drawBall(ctx, x, y, 20);
    requestAnimationFrame(animate);
}

중요한 점

라디안 단위: Math.cos() 함수는 라디안을 인자로 받습니다. 각도를 라디안으로 변환하려면 각도에 Math.PI / 180을 곱합니다. 예: Math.cos(60 * Math.PI / 180)은 60도의 코사인 값을 구합니다.
범위: 코사인 값의 범위는 -1부터 1까지입니다.
삼각 함수의 관계: 사인, 코사인, 탄젠트는 서로 연관되어 있습니다. 예를 들어, 피타고라스 정리와 함께 사용하여 삼각형의 변의 길이를 계산할 수 있습니다.

tan(x) 함수

Math.tan(x) 함수는 주어진 각도 x (라디안 단위)의 탄젠트 값을 반환합니다. 탄젠트는 사인을 코사인으로 나눈 값과 같으며, 기울기를 나타내는 데 주로 사용됩니다.

let angleInRadians = Math.PI / 4; // 45도를 라디안으로 변환
let tangentValue = Math.tan(angleInRadians);
console.log(tangentValue); // 1 (45도의 탄젠트는 1)

실제 활용 예시

기울기 계산:

function calculateSlope(x1, y1, x2, y2) {
    let deltaY = y2 - y1;
    let deltaX = x2 - x1;
    let slope = deltaY / deltaX;
    return slope;
}

벡터 회전:

function rotateVector(x, y, angle) {
    let newX = x * Math.cos(angle) - y * Math.sin(angle);
    let newY = x * Math.sin(angle) + y * Math.cos(angle);
    return {x: newX, y: newY};
}

그래프 그리기:

// 탄젠트 그래프 그리기
function drawTangentGraph(ctx) {
    for (let x = -10; x <= 10; x += 0.1) {
        let y = Math.tan(x);
        ctx.fillRect(x * 10, -y * 10, 1, 1);
    }
}

중요한 점

라디안 단위: Math.tan() 함수는 라디안을 인자로 받습니다. 각도를 라디안으로 변환하려면 각도에 Math.PI / 180을 곱합니다. 예: Math.tan(60 * Math.PI / 180)은 60도의 탄젠트 값을 구합니다.
정의역: 탄젠트는 코사인이 0이 되는 지점 (즉, π/2, 3π/2, ...)에서 정의되지 않습니다. 이러한 점에서는 무한대가 됩니다.
삼각 함수의 관계: 사인, 코사인, 탄젠트는 서로 연관되어 있습니다. tan(x) = sin(x) / cos(x)라는 관계를 이용하여 다른 삼각 함수를 계산할 수 있습니다.

asin(x) 함수

Math.asin(x) 함수는 주어진 사인 값 x에 대한 각도(라디안)를 반환하는 역삼각함수입니다. 즉, sin(y) = x 일 때, asin(x) = y 를 계산합니다.

let sineValue = 0.5;
let angleInRadians = Math.asin(sineValue);
console.log(angleInRadians); // 약 0.5236 (30도에 해당하는 라디안 값)

acos(x) 함수

Math.acos(x) 함수는 주어진 코사인 값 x에 대한 각도(라디안)를 반환하는 역삼각함수입니다. 즉, cos(y) = x 일 때, acos(x) = y 를 계산합니다.

let cosineValue = 0.5;
let angleInRadians = Math.acos(cosineValue);
console.log(angleInRadians); // 약 1.0472 (60도에 해당하는 라디안 값)

atan(x) 함수

Math.atan(x) 함수는 주어진 탄젠트 값 x에 대한 각도(라디안)를 반환하는 역삼각함수입니다. 즉, tan(y) = x 일 때, atan(x) = y 를 계산합니다.

let tangentValue = 1;
let angleInRadians = Math.atan(tangentValue);
console.log(angleInRadians); // 약 0.7854 (45도에 해당하는 라디안 값)

산술 연산

abs(x) 함수

Math.abs(x) 함수는 숫자 x의 절댓값을 반환하는 함수입니다. 즉, 숫자의 부호를 무시하고 양수 값만을 반환합니다.

let num = -5;
let absoluteValue = Math.abs(num);
console.log(absoluteValue); // 5

ceil(x) 함수

Math.ceil(x) 함수는 주어진 숫자 x보다 크거나 같은 가장 작은 정수를 반환하는 함수입니다. 즉, 소수점 이하를 무조건 올림하여 정수로 만들어줍니다.

let num = 3.14;
let roundedUp = Math.ceil(num);
console.log(roundedUp); // 4

floor(x) 함수

Math.floor(x) 함수는 주어진 숫자 x보다 작거나 같은 가장 큰 정수를 반환하는 함수입니다. 즉, 소수점 이하를 버리고 정수 부분만 남깁니다.

let num = 3.14;
let roundedDown = Math.floor(num);
console.log(roundedDown); // 3

round(x) 함수

Math.round(x) 함수는 주어진 숫자 x를 반올림하여 가장 가까운 정수를 반환하는 함수입니다. 즉, 소수점 아래 첫째 자리가 5 이상이면 올림하고, 4 이하이면 내림합니다.

let num = 3.14;
let rounded = Math.round(num);
console.log(rounded); // 3

let num2 = 3.5;
let rounded2 = Math.round(num2);
console.log(rounded2); // 4

Math.max(x, y, ...) 함수

Math.max(x, y, ...) 함수는 주어진 숫자들 중에서 가장 큰 값을 반환하는 함수입니다. 즉, 여러 개의 숫자를 입력하면 그중 가장 큰 숫자 하나를 결과로 내놓습니다.

let num1 = 10;
let num2 = 5;
let num3 = 15;

let maxValue = Math.max(num1, num2, num3);
console.log(maxValue); // 15

Math.min(x, y, ...) 함수

Math.min(x, y, ...) 함수는 주어진 숫자들 중에서 가장 작은 값을 반환하는 함수입니다. 즉, 여러 개의 숫자를 입력하면 그중 가장 작은 숫자 하나를 결과로 내놓습니다.

let num1 = 10;
let num2 = 5;
let num3 = 15;

let minValue = Math.min(num1, num2, num3);
console.log(minValue); // 5

Math.pow(x, y) 함수

Math.pow(x, y) 함수는 x의 y제곱 값을 계산하여 반환하는 함수입니다. 즉, x를 y번 곱한 결과를 얻을 수 있습니다.

let base = 2;
let exponent = 3;

let result = Math.pow(base, exponent);
console.log(result); // 8 (2 * 2 * 2)

Math.sqrt(x) 함수

Math.sqrt(x) 함수는 주어진 숫자 x의 제곱근을 반환하는 함수입니다. 즉, 어떤 수를 제곱했을 때 x가 나오는 그 수를 찾는 것입니다.

let number = 16;
let result = Math.sqrt(number);
console.log(result); // 4

Math.random() 함수

Math.random() 함수는 0 이상 1 미만의 난수(임의의 숫자)를 생성하는 자바스크립트의 내장 함수입니다.

let randomNumber = Math.random();
console.log(randomNumber); // 0과 1 사이의 임의의 소수점 숫자 (예: 0.345678)

728x90