산술 연산자
산술 연산자는 우리에게 굉장히 익숙한 연산자들입니다.
이항 산술 연산자 | 의미 |
+ | 덧셈 |
- | 뺄셈 |
* | 곱셈 |
/ | 나눗셈 |
% | 나머지 |
이항 산술 연산자는 우리가 평소에도 사용하는 평범한 연산자들이죠?
특별한게 있다면 %로 표현된 나머지 연산자 입니다.
console.log( 5 % 2 ) // 1
이제 단항 산술 연산자에 대해서 알아보겠습니다.
단항 산술 연산자 | 의미 |
++ | 증가 |
-- | 감소 |
+ | 별 다른 의미 없음 |
- | 양수를 음수로, 음수를 양수로 반전합니다. |
const x = 1
x++ // x = x + 1 와 같은 의미 입니다.
x-- // x = x - 1 와 같은 의미 입니다.
이와 같이 간단히 표현할 수 있다는 특성을 이용해
조건문 혹은, 반복문에서 자주 사용하게 될 것입니다.
할당 연산자
할당 연산자 |
= |
+= |
-= |
*= |
/= |
%= |
const x = 10;
x+=5 // x = x + 5 와 같은 의미 입니다. x = 15
x-=5 // x = x - 5 와 같은 의미 입니다. x = 10
x*=3 // x = x * 3 와 같은 의미 입니다. x = 30
x/=3 // x = x / 3 와 같은 의미 입니다. x = 10
x%=4 // x = x % 4 와 같은 의미 입니다. x = 2
우리가 자주 사용하는 줄임말과 같이 축약형으로 사용할 수 있습니다.
비교 연산자
비교 연산자 | 의미 |
== | 동등 비교 |
=== | 일치 비교 |
!= | 부동등 비교 |
!== | 불일치 비교 |
const x = 5
const y = '5'
x == y // true, 동등비교는 암묵적으로 타입을 변환해보면서 값이 같은지 비교합니다.
x === y // false, 일치비교는 타입과 값까지 같아야 참을 반환합니다.
x != y // false, !은 부정의 의미를 담고 있습니다. 따라서 두 값이 같지 않은지 묻는 것입니다.
x !== y // true, 일치비교는 타입과 값까지 같아야 하기 때문에 두 값은 엄밀히 다릅니다.
따라서 우리는 동등비교보다는 일치 비교를 통해 엄격한 비교를 하는 것이 값을 예측하기가 쉬워 집니다.
다만 주의할 점은 NaN값은 본인과의 비교에서 false가 나오는 유일한 값입니다.
0 === 0 //true
0 == -0 // true
0 === -0 // true
0 은 음의 0의 값과 같습니다.
대소 비교 연산자 | 설명 |
> | 좌항이 우항보다 크다. |
< | 좌항이 우항보다 작다. |
>= | 좌항이 우항보다 크거나 같다. |
<= | 조항이 우항보다 작거나 같다. |
대소비교 연산자는 우리가 수학문제를 풀때 사용했던 그대로의 의미를 가지고 있습니다.
삼항 조건 연산자
삼항 조건 연산자는 표현식입니다.
표현식은 뭐였는지 기억하시나요?
값으로 사용할 수 있는 문이라고 했죠.
따라서 삼항 조건 연산자는 표현식이라서 값으로 사용할 수 있게 됩니다.
const score = 100
const foo = score>=100 ? '대단해요!' : '그래도 잘했어요'; // 대단해요!
//조건? 참일때 수행할 문 : 거짓일때 수행할 문;
논리 연산자
논리 연산자 | 의미 |
|| | 논리합 |
&& | 논리곱 |
! | 부정 |
true || true; // true
true || false; // true
false || true; // true
false || false; // false
true && true; // true
true && false; // false
false && true; // false
false && false; // false
!true // false
!false // true
!!true // true
!!false // false
논리합은 언제나 true값을 먼저 찾아 반환합니다.
논리곱은 만약 false값이 있으면 false 값을 반환합니다.
좌항부터 우항으로 읽어나갑니다.
그룹 연산자
그룹연산자도 마찬가지로 우리가 수학에서 자주 사용했던 괄호에 대한 내용입니다.
우선순위를 조정할 때 사용하게 됩니다.
2 * (3 + 5) // 16
typeof 연산자
typeof '' //string
typeof 1 //number
typeof NaN //number
typeof true //boolean
typeof undefined //undefined
typeof Symbol() //Symbol
typeof null //object
typeof [] //object
typeof {} //object
typeof new Date() //object
typeof /test/gi //object
typeof function () {} //function
데이터가 어떤 타입인지 알려주는 연산자 입니다.
지수 연산자
2**2 //4
Math.pow(2,2) // 4
(-2)**2 //음수의 경우 괄호로 묶어서 표현해야 합니다.
제곱을 표현하는 연산자입니다.
보통 쉽게 곱셈연산자를 두번 사용해서 표현합니다.
연산자 우선순위
- ()
- new매개변수 존재, []프로퍼티 접근, ()함수호출, ?.옵셔널체이닝연산자
- new매개변수 미존재
- x++, x--
- !x, +x, -x, ++x, --x, typeof, delete
- ** 제곱
- *,/,%
- +, -
- <, <=, >=, >, in instanceof
- == , !=, ===, !==
위와 같은 순서는 사실 우리가 코드를 작성하면서 무의식적으로 사용하는 것을 나타낸 것이기 때문에
암기하기 위해 애쓰지 않으셔도 됩니다.
아~ 그냥 이렇게 흐름이 흘러가는 구나 하고 알고 계시면 됩니다!
'💪JavaScript > script.js' 카테고리의 다른 글
[모던 자바스크립트 딥다이브]_타입 변환과 단축 평가 어디까지 보고 오셨어요? (0) | 2023.08.05 |
---|---|
[모던 자바스크립트 딥다이브]_제어문 어디까지 보고 오셨어요? (0) | 2023.08.05 |
[모던 자바스크립트 딥다이브]_데이터 타입 어디까지 보고 오셨어요? (0) | 2023.08.05 |
[모던 자바스크립트 딥다이브]_표현식과 문 어디까지 보고 오셨어요? (0) | 2023.07.30 |
[모던 자바스크립트 딥다이브]_변수 어디까지 보고 오셨어요? (0) | 2023.07.29 |
산술 연산자
산술 연산자는 우리에게 굉장히 익숙한 연산자들입니다.
이항 산술 연산자 | 의미 |
+ | 덧셈 |
- | 뺄셈 |
* | 곱셈 |
/ | 나눗셈 |
% | 나머지 |
이항 산술 연산자는 우리가 평소에도 사용하는 평범한 연산자들이죠?
특별한게 있다면 %로 표현된 나머지 연산자 입니다.
console.log( 5 % 2 ) // 1
이제 단항 산술 연산자에 대해서 알아보겠습니다.
단항 산술 연산자 | 의미 |
++ | 증가 |
-- | 감소 |
+ | 별 다른 의미 없음 |
- | 양수를 음수로, 음수를 양수로 반전합니다. |
const x = 1
x++ // x = x + 1 와 같은 의미 입니다.
x-- // x = x - 1 와 같은 의미 입니다.
이와 같이 간단히 표현할 수 있다는 특성을 이용해
조건문 혹은, 반복문에서 자주 사용하게 될 것입니다.
할당 연산자
할당 연산자 |
= |
+= |
-= |
*= |
/= |
%= |
const x = 10;
x+=5 // x = x + 5 와 같은 의미 입니다. x = 15
x-=5 // x = x - 5 와 같은 의미 입니다. x = 10
x*=3 // x = x * 3 와 같은 의미 입니다. x = 30
x/=3 // x = x / 3 와 같은 의미 입니다. x = 10
x%=4 // x = x % 4 와 같은 의미 입니다. x = 2
우리가 자주 사용하는 줄임말과 같이 축약형으로 사용할 수 있습니다.
비교 연산자
비교 연산자 | 의미 |
== | 동등 비교 |
=== | 일치 비교 |
!= | 부동등 비교 |
!== | 불일치 비교 |
const x = 5
const y = '5'
x == y // true, 동등비교는 암묵적으로 타입을 변환해보면서 값이 같은지 비교합니다.
x === y // false, 일치비교는 타입과 값까지 같아야 참을 반환합니다.
x != y // false, !은 부정의 의미를 담고 있습니다. 따라서 두 값이 같지 않은지 묻는 것입니다.
x !== y // true, 일치비교는 타입과 값까지 같아야 하기 때문에 두 값은 엄밀히 다릅니다.
따라서 우리는 동등비교보다는 일치 비교를 통해 엄격한 비교를 하는 것이 값을 예측하기가 쉬워 집니다.
다만 주의할 점은 NaN값은 본인과의 비교에서 false가 나오는 유일한 값입니다.
0 === 0 //true
0 == -0 // true
0 === -0 // true
0 은 음의 0의 값과 같습니다.
대소 비교 연산자 | 설명 |
> | 좌항이 우항보다 크다. |
< | 좌항이 우항보다 작다. |
>= | 좌항이 우항보다 크거나 같다. |
<= | 조항이 우항보다 작거나 같다. |
대소비교 연산자는 우리가 수학문제를 풀때 사용했던 그대로의 의미를 가지고 있습니다.
삼항 조건 연산자
삼항 조건 연산자는 표현식입니다.
표현식은 뭐였는지 기억하시나요?
값으로 사용할 수 있는 문이라고 했죠.
따라서 삼항 조건 연산자는 표현식이라서 값으로 사용할 수 있게 됩니다.
const score = 100
const foo = score>=100 ? '대단해요!' : '그래도 잘했어요'; // 대단해요!
//조건? 참일때 수행할 문 : 거짓일때 수행할 문;
논리 연산자
논리 연산자 | 의미 |
|| | 논리합 |
&& | 논리곱 |
! | 부정 |
true || true; // true
true || false; // true
false || true; // true
false || false; // false
true && true; // true
true && false; // false
false && true; // false
false && false; // false
!true // false
!false // true
!!true // true
!!false // false
논리합은 언제나 true값을 먼저 찾아 반환합니다.
논리곱은 만약 false값이 있으면 false 값을 반환합니다.
좌항부터 우항으로 읽어나갑니다.
그룹 연산자
그룹연산자도 마찬가지로 우리가 수학에서 자주 사용했던 괄호에 대한 내용입니다.
우선순위를 조정할 때 사용하게 됩니다.
2 * (3 + 5) // 16
typeof 연산자
typeof '' //string
typeof 1 //number
typeof NaN //number
typeof true //boolean
typeof undefined //undefined
typeof Symbol() //Symbol
typeof null //object
typeof [] //object
typeof {} //object
typeof new Date() //object
typeof /test/gi //object
typeof function () {} //function
데이터가 어떤 타입인지 알려주는 연산자 입니다.
지수 연산자
2**2 //4
Math.pow(2,2) // 4
(-2)**2 //음수의 경우 괄호로 묶어서 표현해야 합니다.
제곱을 표현하는 연산자입니다.
보통 쉽게 곱셈연산자를 두번 사용해서 표현합니다.
연산자 우선순위
- ()
- new매개변수 존재, []프로퍼티 접근, ()함수호출, ?.옵셔널체이닝연산자
- new매개변수 미존재
- x++, x--
- !x, +x, -x, ++x, --x, typeof, delete
- ** 제곱
- *,/,%
- +, -
- <, <=, >=, >, in instanceof
- == , !=, ===, !==
위와 같은 순서는 사실 우리가 코드를 작성하면서 무의식적으로 사용하는 것을 나타낸 것이기 때문에
암기하기 위해 애쓰지 않으셔도 됩니다.
아~ 그냥 이렇게 흐름이 흘러가는 구나 하고 알고 계시면 됩니다!
'💪JavaScript > script.js' 카테고리의 다른 글
[모던 자바스크립트 딥다이브]_타입 변환과 단축 평가 어디까지 보고 오셨어요? (0) | 2023.08.05 |
---|---|
[모던 자바스크립트 딥다이브]_제어문 어디까지 보고 오셨어요? (0) | 2023.08.05 |
[모던 자바스크립트 딥다이브]_데이터 타입 어디까지 보고 오셨어요? (0) | 2023.08.05 |
[모던 자바스크립트 딥다이브]_표현식과 문 어디까지 보고 오셨어요? (0) | 2023.07.30 |
[모던 자바스크립트 딥다이브]_변수 어디까지 보고 오셨어요? (0) | 2023.07.29 |