연산자를 사용하여 JavaScript에서 수학을 수행하는 방법

소개

수학 연산은 모든 프로그래밍 언어의 가장 기본적이고 보편적인 기능 중 하나입니다. JavaScript에서 숫자는 브라우저 창 크기 치수 찾기, 금전 거래의 최종 가격 얻기, 웹 사이트 문서의 요소 간 거리 계산과 같은 일반적인 작업에 자주 사용됩니다.

수학에 대한 높은 수준의 이해가 유능한 개발자가 되기 위한 전제 조건은 아니지만 JavaScript에서 사용할 수 있는 작업 유형과 실제 작업을 수행하기 위한 도구로 수학을 사용하는 방법을 아는 것이 중요합니다.

다른 프로그래밍 언어와 달리 JavaScript에는 하나의 숫자 데이터 유형만 있습니다. 예를 들어 정수(양수 또는 음수 정수)와 부동 소수점(소수점이 있는 숫자) 사이에는 구분이 없습니다.

이 자습서에서는 산술 연산자, 대입 연산자 및 JavaScript 숫자 데이터 유형과 함께 사용되는 연산 순서를 살펴보겠습니다.

산술 연산자

산술 연산자는 수학 연산을 나타내고 값을 반환하는 기호입니다. 방정식 3 + 7 = 10에서 +는 더하기를 나타내는 구문입니다.

JavaScript에는 프로그래밍과 관련된 몇 가지 추가 연산자뿐만 아니라 기본 수학의 친숙한 연산자가 많이 있습니다.

다음은 JavaScript 산술 연산자의 참조 테이블입니다.

이 기사 전체에서 이러한 각 연산자에 대해 자세히 알아볼 것입니다.

덧셈과 뺄셈

더하기 및 빼기 연산자는 JavaScript에서 사용할 수 있으며 숫자 값의 합과 차이를 찾는 데 사용할 수 있습니다. JavaScript에는 계산기가 내장되어 있으며 콘솔에서 직접 수학 연산을 수행할 수 있습니다.

예를 들어 더하기 기호(+)를 사용하여 10 및 20을 추가하는 것과 같이 숫자를 사용하여 몇 가지 간단한 추가 작업을 수행할 수 있습니다.

10 + 20;

Output
30

일반 숫자로 수학을 수행하는 것 외에도 숫자를 변수에 할당하고 동일한 계산을 수행할 수도 있습니다. 이 경우 x 및 y에 숫자 값을 할당하고 합계를 z에 배치합니다.

// Assign values to x and y
let x = 10;
let y = 20;

// Add x and y and assign the sum to z
let z = x + y;

console.log(z);

Output
30

마찬가지로 빼기 기호(-)를 사용하여 숫자 또는 숫자를 나타내는 변수를 뺍니다.

// Assign values to x and y
let x = 10;
let y = 20;

// Subtract x from y and assign the difference to z
let z = y - x;

console.log(z);

Output
10

음수와 실수(십진수)로 더하고 뺄 수도 있습니다.

// Assign values to x and y
let x = -5.2;
let y = 2.5;

// Subtract y from x and assign the difference to z
let z = x - y;

console.log(z);

Output
-7.7

JavaScript에서 주목하고 알아야 할 한 가지 흥미로운 점은 숫자와 문자열을 추가한 결과입니다. 우리는 1 + 1이 2와 같아야 한다는 것을 알고 있지만 이 등식은 예상치 못한 결과를 낳을 것입니다.

let x = 1 + "1";

console.log(x);
typeof x;

Output
11
'string'

두 숫자를 더하는 대신 JavaScript는 전체 명령문을 문자열로 변환하고 함께 연결합니다. 원하지 않는 결과가 발생할 수 있으므로 JavaScript의 동적으로 유형이 지정되는 특성에 주의하는 것이 중요합니다.

JavaScript에서 덧셈이나 뺄셈을 사용하는 일반적인 이유는 id에서 고정 내비게이션 바의 픽셀 높이를 뺀 값으로 스크롤하기 위해서입니다.

function scrollToId() {
	const navHeight = 60;
	window.scrollTo(0, window.pageYOffset - navHeight);
}

window.addEventListener('hashchange', scrollToId);

위의 예에서 ID를 클릭하면 ID 위 60픽셀로 스크롤됩니다.

덧셈과 뺄셈은 JavaScript에서 사용하게 될 가장 일반적인 수학 방정식 중 두 가지입니다.

곱셈과 나눗셈

곱셈 및 나눗셈 연산자는 JavaScript에서도 사용할 수 있으며 숫자 값의 곱과 몫을 찾는 데 사용됩니다.

별표(*)는 곱셈 연산자를 나타내는 데 사용됩니다.

// Assign values to x and y
let x = 20;
let y = 5;

// Multiply x by y to get the product
let z = x * y;

console.log(z);

Output
100

곱셈은 판매세를 적용한 후 항목 가격을 계산하는 데 사용될 수 있습니다.

const price = 26.5;    // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate

// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
let fixedPrice = totalPrice.toFixed(2);

console.log("Total:", fixedPrice);

Output
Total: 28.67

슬래시(/)는 나누기 연산자를 나타내는 데 사용됩니다.

// Assign values to x and y
let x = 20;
let y = 5;

// Divide y into x to get the quotient
let z = x / y;

console.log(z);

Output
4

나눗셈은 시간을 분 단위로 구하는 등 시간을 계산하거나 시험에서 정답의 백분율을 계산할 때 특히 유용합니다.

모듈로

약간 덜 친숙한 산술 연산자는 나눗셈 후 몫의 나머지를 계산하는 모듈로(모듈러스라고도 함) 연산자입니다. Modulo는 백분율 기호(%)로 표시됩니다.

예를 들어 3이 9에 정확히 세 번 들어가고 나머지가 없다는 것을 알고 있습니다.

9 % 3;

Output
0

다음 함수에서 볼 수 있듯이 모듈로 연산자를 사용하여 숫자가 짝수인지 홀수인지 확인할 수 있습니다.

// Initialize function to test if a number is even
const isEven = x => {
	// If the remainder after dividing by two is 0, return true
	if (x % 2 === 0) {
		return true;
	}
	// If the number is odd, return false
	return false;
}

// Test the number
isEven(12);

Output
true

위의 예에서 12는 2로 균등하게 나뉘므로 짝수입니다.

종종 프로그래밍에서 모듈로는 흐름 제어를 위한 조건문과 함께 사용됩니다.

거듭제곱

지수는 JavaScript의 최신 연산자 중 하나이며 지수로 숫자의 거듭제곱을 계산할 수 있습니다. 거듭제곱의 구문은 한 행에 두 개의 별표(**)입니다.

10의 5제곱 또는 10^5는 다음과 같이 씁니다.

10 ** 5;

Output
100000

10 ** 5는 10에 10을 다섯 번 곱한 것과 같습니다.

10 * 10 * 10 * 10 * 10;

이것을 작성하는 또 다른 방법은 Math.pow() 메서드를 사용하는 것입니다.

Math.pow(10, 5);

Output
100000

지수 연산자를 사용하는 것은 주어진 숫자의 거듭제곱을 찾는 간결한 방법이지만 평소와 같이 메서드와 연산자 중에서 선택할 때 코드 기반의 스타일과 일관성을 유지하는 것이 중요합니다.

증가 및 감소

증가 및 감소 연산자는 변수의 수치를 1씩 증가시키거나 감소시킵니다. 두 개의 더하기 기호(++) 또는 두 개의 빼기 기호(--)로 표시되며 종종 루프와 함께 사용됩니다.

증가 및 감소 연산자는 변수에만 사용할 수 있습니다. 원시 숫자에 사용하려고 하면 오류가 발생합니다.

7++

Output
Uncaught ReferenceError: Invalid left-hand side expression in postfix operation

증가 및 감소 연산자는 연산자가 변수 앞 또는 뒤에 위치하는지 여부에 따라 접두사 또는 접미사 연산으로 분류할 수 있습니다.

먼저 ++x를 사용하여 접두사 증분을 문자로 보낼 수 있습니다.

// Set a variable
let x = 7;

// Use the prefix increment operation
let prefix = ++x;

console.log(prefix);

Output
8

x의 값이 1씩 증가했습니다. 차이를 확인하기 위해 y++를 사용하여 후위 증분을 테스트합니다.

// Set a variable
let y = 7;

// Use the prefix increment operation
let postfix = y++;

console.log(postfix);

Output
7

접미사 연산에서 y 값이 증가하지 않았습니다. 표현식이 평가될 때까지 값이 증가하지 않기 때문입니다.

증가 또는 감소 연산자는 루프에서 가장 자주 나타납니다. 이 for 루프 예제에서는 0부터 시작하여 반복할 때마다 값을 1씩 증가시켜 작업을 10번 실행합니다.

// Run a loop ten times
for (let i = 0; i < 10; i++) {
  console.log(i);
}

Output
0
1
2
3
4
5
6
7
8
9

위의 코드는 증가 연산자를 사용하여 달성되는 루프를 통한 반복을 보여줍니다.

우리는 x++를 x = x + 1의 줄임말로, x--를 x = x - 1의 줄임말로 생각할 수 있습니다. .

할당 연산자

가장 일반적으로 사용되는 연산자 중 하나는 대입 연산자입니다. 이 연산자는 이미 보았고 등호(=)로 표시됩니다. =를 사용하여 오른쪽의 값을 왼쪽의 변수에 할당합니다.

// Assign 27 to age variable
let age = 27;

표준 할당 연산자 외에도 JavaScript에는 산술 연산자를 =와 결합하는 복합 할당 연산자가 있습니다.

예를 들어 더하기 연산자는 원래 값으로 시작하여 새 값을 추가합니다.

// Assign 27 to age variable
let age = 27;

age += 3;

console.log(age);

Output
30

이 경우 age += 3은 age=age + 3이라고 쓰는 것과 같습니다.

모든 산술 연산자는 할당과 결합하여 복합 할당 연산자를 만들 수 있습니다. 아래는 JavaScript의 대입 연산자 참조 표입니다.

복합 할당 연산자는 증가 및 감소와 유사하게 루프와 함께 자주 사용되며 방정식을 반복하거나 자동화해야 할 때 사용됩니다.

연산자 우선 순위

왼쪽에서 오른쪽으로 읽지만 연산자는 일반 수학에서와 마찬가지로 우선 순위에 따라 평가됩니다.

다음 예에서 곱셈은 방정식의 결과를 결정하는 덧셈보다 우선 순위가 높습니다.

// First multiply 3 by 5, then add 10
10 + 3 * 5;

Output
25

대신 더하기 연산을 먼저 실행하려면 항상 우선 순위가 가장 높은 괄호로 그룹화해야 합니다.

// First add 10 and 3, then multiply by 5
(10 + 3) * 5;

Output
65

아래는 JavaScript에서 산술 연산자의 연산자 우선 순위에 대한 참조 표입니다. 증가 및 감소의 경우 접미사가 접두사보다 우선 순위가 높습니다.

증가/감소, 곱셈/나눗셈, 덧셈/뺄셈은 동일한 수준의 우선 순위를 갖습니다.

연산자 우선 순위에는 산술 연산자뿐만 아니라 대입 연산자, 논리 연산자, 조건 연산자 등이 포함됩니다. 전체 목록을 보려면 MDN(Mozilla Developer Network)에서 연산자 우선 순위를 확인하세요.

결론

이 문서에서는 많은 친숙한 수학 연산자와 프로그래밍에 특정한 몇 가지를 포함하여 산술 연산자 및 구문을 다루었습니다.

또한 산술과 할당을 결합하여 복합 할당 연산자를 만드는 방법과 JavaScript의 연산 순서를 배웠습니다.