연산자는 규칙에 따라 계산하여 값을 구해주는 것이다.
연산자를 통해 표현식을 작성하면
자바스크립트 엔진이 그 JS코드를 기계어로 바꾸어(Compile) 해석하고 실행한다.
이를 표현식을 평가한다고 하며 그 반환값을 평과 결과라고 한다.
1. 대입 연산자 (할당 연산자)
오른쪽 항에 있는 숫자를 왼쪽에 있는 변수에 대입한다.
1=2;
라고 하면 에러가 뜬다.
1에 2를 대입할 수 없어서 그런것이다.
변하지 않는 수인 1은 상수이다.
2. 산술 연산자
종류 |
설명 |
예시 |
+, - *, / (기본 산술 연산자) |
더하기, 빼기, 곱하기, 나누기 |
1+1 결과값 = 2 |
+ |
더하기로 연결된 문자를 이어서 붙여준다. |
var name1 = "java" |
% (나머지 연산자) |
나누기 연산 후 남은 나머지 |
5%2 결과값 = 1 |
++ (증가 연산자) |
num++(접미사로 쓰인 경우) 값을 반환한 다음 1씩 증가시킨다. ++num(접두사로 쓰인 경우) 값을 1씩 증가시킨 다음 반환한다. |
예시1. 예시2. var a = 2; b = ++a; 결과값 = a=3, b=3 |
-- (감소 연산자) |
1씩 감소 |
var num =1; |
+=, -=, *=, /=, %= |
=앞의 기호에 대한 연산을 하고 |
Var sum = 1; 결과값 = 5 |
<script>
var str1 = "현재 시간";
var time1 = 1;
var time2 = 2;
var srt2 = "시 입니다.";
var str3 = str1+time1+time2+str2;
document.write(str3);
</script>
javascript는 왼쪽부터 오른쪽으로 식을 읽어나간다.
str1이 문자열값인데,
javascript는 앞에오는 값이 문자열일 경우
숫자도 문자로 해석해서 1+2가 연산되지 않고
결과값으로
현재 시간 12시입니다.가 나오게 된다.
그러나 //로 var str1을 주석처리하고
var str3에서도 제외하면
1+2가 그대로 숫자로 더해지기 때문에
3시입니다.
로 결과값이 나오게 된다.
- 문자열의 갯수가 숫자보다 많을 때
따옴표 안에 들어있는 숫자가 하나라도 있으면
숫자들은 문자로 자동 자료형 변환되어 결과값으로 나오며
- 숫자가 문자열 갯수보다 많으면
처음에 문자열이었던 숫자를 숫자 자료형으로 인식한다.
- 더하기 외에 연산에서는 따옴표로 되어 있어도
자료형을 숫자로 인식하여 계산된다.
- 연산자 양쪽에 있는 값 중 하나라도 숫자로 변환할 수 없으면
NaN을 반환한다.
단항 +연산자
형태: +value
값을 number타입으로 변환해줌.
Number()도 같은 기능을 수행한다.
var trueNum = "27";
console.log(typeof trueNum); //string
console.log(typeof +trueNum); //nubmer
console.log(typeof Number(trueNum)); //number 더 가독성 좋음.
후치, 전치연산자
공통점 : 값을 자동으로 1 증가시킨다.
전치 ++ 연산자 (++value) | 후치 ++ 연산자 (value++) |
- 표현식을 평가하기 전에 1 증가시킨다. |
- 문장(계산)을 수행한 후에 1 증가시킨다. |
/* 전치연산자 */
var one = 1;
var five = ++one + 4;
console.log(five) = 6;
console.log(one) = 2;
/* 후치연산자 */
var one = 1;
var five = one++ + 4;
console.log(five) = 5;
console.log(one) = 2;
예외 ) console.log( one-- + ++one );는 값이 2로
이렇게 전치 후치를 섞어서 쓰는건 혼동된 결과를 불러일으킬 수 있기 때문에
되도록 혼용해서 쓰지는 않는 걸로..
3. 비교 연산자
종류 |
설명 |
예시 |
|
동치 연산자 |
== (동등 연산자, equal operator) |
a와 b가 같은가? |
a == b |
=== (일치 연산자, strict equal operator) |
a와 b가 같은가? (엄격) |
a === b |
|
!= (부등 연산자) |
a와 b가 다른가? |
a != b |
|
!== (불일치 연산자) |
a와 b가 다른가? (엄격) |
a !== b |
|
논리 연산자 |
&& (and 연산자) |
좌항과 우항 모두 참인가? |
a == b && a == c |
|| (or 연산자) |
조건 중 하나 이상이 참인가? |
a == b || a == c |
|
! (not 연산자) |
Boolean의 값을 역전시킴 |
!false |
|
관계 연산자 |
>, < |
>: a가 b보다 크다면 <: a가 b보다 작다면 |
a>b a<b |
>=, <= |
>= : a가 b보다 크거나 같다면 <=: a가 b보다 작거나 같다면 |
a>=b a<=b |
||연산자 (논리 OR연산자)
-표현식의 평가 결과가 하나라도 true면 true
-||연산자를 사용하면 true대신에 true가 되는 변수값을 반환한다.
-왼쪽 결과가 true면 오른쪽은 비교하지 않음. 만약 틀린 비교면 오류가 나기 때문에..
-값을 반환할 때 true가 된 시점의 변수값을 반환
-반대로 false를 반환할 때는 마지막으로 false가 된 변수값을 반환한다.
/* ||연산자를 사용하면 true대신에 true가 되는 변수값을 반환한다. */
var value, zero = 0, two= 2;
console.log(value || zero || two); // 2
/* 모두가 false일 때 false대신에 마지막으로 false가 되는 변수값을 반환한다. */
var value, zero = 0;
console.log(zero || value); // undefined;
/* 왼쪽 결과가 true이면 오른쪽은 비교하지 않는다. */
var one = 1;
console.log(one === 1 || two === 2); // true
* 비교 연산의 특징
- 두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치한다.
- 두 숫자는 숫자로서 같은 값이면 일치한다.
- 숫자료 표현할 수 없는 값인 NaN은 자기 자신을 포함한 무엇과도 동등하지 않다.
- +0과 -0은 서로 같다.
- 두 불리언은 둘 다 true거나 false이면 일치한다.
- 서로 다른 두 객체는 절대 일치하지도, 동등하지도 않다.
- 객체를 비교하는 표현식은 두 연산자가 동일한 객체를 참조하는 경우에만 참이다.
- null과 undefined는 자기 자신과 일치하며, 서로 동등하다.
- null===undefined의 결과값은 false이다.
* == (동등 연산자)와 === (일치 연산자)의 차이
- 일치 연산자는 두 피 연산자가 같은 자료형에, 그 내용도 일치해야만 참이다.
- 동등 연산자는 비교 전에 두 연산자를 동일한 자료형으로 변환한다.
==연산자 대신 ===연산자를 쓰는 것을 강력하게 권한다고 한다.
같은 것만 같으니까 예외적인 것을 알 필요가 없고 명쾌하기 때문이다.
그 밖에 . .
- 콤마 연산자
기호: ,
콤마로 표현식을 분리,
var a = 1, b = 2;
- ()연산자
제일 높은 우선순위를 가진 연산자임
- 조건연산자 (3항연산자)
exp? exp-1 : exp-2
exp위치의 표현식을 먼저 평가
true이면 exp-1값 반환
false이면 exp-2값 반환
참고 출처
- https://opentutorials.org/course/3085/18871
- https://www.youtube.com/watch?v=Mga3LXPnWdc&list=PL-qMANrofLyvzqz2yYzNectJnYo5ZifE7
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
- https://opentutorials.org/course/743/4673
- https://opentutorials.org/course/743/4722
- 인프런-자바스크립트 비기너, www.inflearn.com/course/자바스크립트-비기너#
'JavaScript' 카테고리의 다른 글
[JavaScript] 반복문 (loop or iterate) (0) | 2021.03.24 |
---|---|
[JavaScript] 조건문 (Conditional statements) (0) | 2021.03.24 |
[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - to do list만들기 / 20.06.08 (0) | 2020.06.08 |
[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - local storage에 값 저장하기 / 20.06.06 (0) | 2020.06.06 |
[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - 시계만들기 / 20.06.05 (0) | 2020.06.05 |