연산자
연산이란 '식이 표시하는 일정 규칙에 따라 계산'하는 것을 말한다
- 산술 연산은 두 항의 계산 결과를 반환한다.
- 대입 연산은 항상 오른쪽 항이 먼저 계산되어 왼쪽 항에 대입한다. 주로 변수 초기화에 사용된다.
- 연산자가 여러 개 사용되는 경우 우선순위가 적용된다.
1. 산술 연산자
연산자(Operator) | 의미(Description) | 예제 |
+ | 더하기/ Addition | 2+3=5를 반환 |
- | 빼기/ Subtraction | 6-2=4를 반환 |
* | 곱히가/ Multiplication | 3*4=12 |
** | Exponentiation () | |
/ | 나누기/ Division | 2/4=2 |
% | 나머지/ Modulus (Division Remainder) | 12%5=2 |
++ | Increment | |
-- | Decrement |
2. 대입 연산자
연산자 기준으로 오른쪽의 데이터를 왼쪽 변수에 대입한다.
연산자는 무조건 오른쪽이 먼저이다.
왼쪽 피연산자에는 주로 변수, 상수이다.
Operator | 예제 Example |
Same As | 풀이 |
= | x = y | x = y | 값y를 변수 x에 대입 |
+= | x += y | x = x + y | 변수 x의 값에서 y를 더한 결과를 x에 대입 |
-= | x -= y | x = x - y | 변수 x의 값에서 y를 뺀 결과를 x에 대입 |
*= | x *= y | x = x * y | 변수 x의 값에 y를 곱한 결과를 x에 대입 |
/= | x /= y | x = x / y | 변수 x의 값에 y를 나눈 결과를 x에 대입 |
%= | x %= y | x = x % y | |
**= | x **= y | x = x ** y |
2-1) 예시
입력 내용
console.log(2 + 3)
console.log(2 - 3)
console.log(2 * 3)
console.log(2 / 3)
console.log(2 % 3)
출력 결과
2 % 3 = 2/3 = 몫이 0이고 나머지가 2 ← 몫은 (몇이 나오든) 무시한다.
3. 변수 result = 산술 연산의 결과를 대입
result라는 변수는 값을 대입할 때, 산술 연산의 결과를 대입한다.
예시 2)
입력 내용
let result = 3+4
console.log(result)
result = 3-4
console.log(result)
result = 3*4
console.log(result)
result = 3/4
console.log(result)
출력 결과
4. 연산자 우선순위
대입 연산은 대입 연산자 오른쪽에 있는 식이 무조건 먼저이다.
오른쪽이 다수일 경우, 왼쪽부터 순서대로 : let result = 1+2+3+4+5
그러나 곱하기, 나누기가 더하기, 빼기보다 우선순위 높다
1+(2*3)+3=10
우선순위에서는 밀리지만 먼저 처리하고 싶은 연산은 소괄호로 순서를 바꿀 수 있다.
5 * (3 - 1)
위의 경우 (3 - 1)이 먼저 처리된다.
5. 복합 대입 연산자
대입 연산자, 복합 대입 연산자는 무조건 오른쪽이 먼저다.
예시 1)
입력 내용
let result = 3
result = result + 4
console.log(result)
출력 결과
예시 2)
입력 내용
let result = 3
result = result + 4
console.log(result)
result += 4
console.log(result)
출력 결과
예시 3)
입력 내용
let result = 3
result = result + 4
console.log(result)
result += 4
console.log(result)
result -= 4
console.log(result)
result *= 4
console.log(result)
result /= 4
console.log(result)
result %= 4
console.log(result)
출력 결과
'코딩 > JavaScript' 카테고리의 다른 글
querySelector, getElementById, textContent (0) | 2021.12.20 |
---|---|
DOM이란 (0) | 2021.12.20 |
템플릿 리터럴 (0) | 2021.12.19 |
자바스크립트 상수 (0) | 2021.12.19 |
자바스크립트 변수, 변수란, 변수 사용 이유 (0) | 2021.12.19 |