연산자 (Operator)
계산하는 모든 방식
- 사칙연산 (+,-,*,/)
- 나머지 구하기 (%)
- 부등호 (>,<)
- -==, !==, ===, !==
- 콤마, typeof, delete, void
숫자 변환
Javascript는 연산 전에 모든 내용을 숫자로 변환된 값으로 연산한다.
| Value Type | 변환 값 |
|---|---|
| undefined | Nan |
| Null | +0 |
| Boolean | True : 1 / False : 0 |
| Number | 변환 필요 X |
| String | +의 경우 : 연결 |
| -, *, / 의 경우 : 값이 숫자일 경우 숫자로 연산 |
표현식
1+2
var total = 1+2;
var value = total / (2+3);1+2 = 3 이 일련의 과정을 "표현식을 평가한다"고 한다.
결과 값인 3과 같이 평가 후 도출되는 결과를 "평가 결과"라고 한다.
Javascript는 표현식의 연결체이다!
할당 연산자
단일 할당 연산자
예 ) =
var result = 1+2;우측 변의 결과를 좌변 result 변수에 할당하는 역할
복합 할당 연산자
= 앞에 연산자가 작성된 형태
예 ) +=, -=, *=, <<=...
= 앞의 연산자를 연산 후 =를 할당
예)
var point = 7;
point += 3;이런 경우,
1. point에 3을 우선 더한다 : 7+3 = 10
2. 도출된 10이 point에 할당된다.
Compile
Javascript를 기계어로 바꾸는 것
실행 순서 ) 왼쪽 -> 오른쪽으로 표현식을 평가한다.
(글자 읽는 순서랑 똑같다)
산술 연산자
+
양쪽 표현식을 평가 후, 평가 결과를 더한다 (연결한다)
한쪽이라도 숫자가 아닌 경우, 더하지 않고 연결(나열)한다.
예)
var two = "2";
var value = 1 + two;
console.log (value); ------> 12 (string이니까 나열되어 나타난다)
var value = 1+5+"ABC";
console.log (value);--------> 6ABC (string이니까 나열되어 나타난다)-
+와 유사하다.
string type 중 값이 숫자인 경우, number type으로 변환하여 계산한다.
*
위와 사용법은 동일하다.
양쪽의 평가 결과가 하나라도 숫자가 아니면 Nan으로 평가한다.
예)
console.log (10*"A");
결과 : Nan- 곱셈 중 소수점이 발생하는 경우
Javascript 상()부분에 소수점이 들어가있는 경우 연산 결과가 약간 다르게 나온다.
이런 경우 소수 부분을 정수로 바꿔준 후 정수끼리의 조합으로 산출될 수 있도록 해주면 된다.
예)console.log (2.3*3); 결과 값 : 6.899999999995 console.log (2.3*10*3/10); 결과 값 : 6.9
/ (나누기)
- 양 쪽 모두 숫자가 아닐 때 or 분모, 분자 모두 0일때 ->
Nan으로 변환 - 분모가 0인 경우 ->
infinity로 변환 - 분자가 0인 경우 ->
0으로 변환
% (나머지)
3%2 = 1 ( 3을 2로 나눴을 때 나머지 값)이 경우도 소수점이 발생하는 경우 모든 contents가 정수로 작성되어야 한다.
예) 아래의 경우엔 %을 사용하지 않는 쪽으로 대체 작성하여야 한다.
console.log (5%2.3);
결과 값 : 0.400000000000036
sol)
console.log ((5*10-(2*2.3*10))/10);
결과 값 : 0.4단항 연산자
산술연산자와 다르게 양쪽을 사용하지 않는다.
예)
산술연산자 : A+B
단항연산자 : ++value
기능 : 값을 Number type 으로 바꾼다
var value = "7";
console.log (typeof +value);
---> 결과 : Number위처럼 사용은 가능하지만 가급적 가독성을 위하여 하기와 같이 작성 할 것
console.log (typeof number(value));
---->결과 : Number-value
기능 : 값의 부호를 바꾼다
+인 결과값을 -로, -인 결과값을 +로 바꾼다.
연산 할 때만 부호가 바뀌어, original 값은 변하지 않는다.
var value = 7;
console.log (-value);
---> 결과 값 : -7var value = 7;
console.log (8 + -value);
---> 결과 값 : 1위와 같은 경우 가독성을 위하여 하기와 같이 적는 것이 좋다
console.log (8 + (value * -1));
var value = 7;
console.log (8 + -value);
console.log (value);
---> 결과 값 : 7 (value의 값은 변하지 않는다)후치 연산자
value++
문장을 수행한 후 값을 1 증가시킨다
= ;기준으로 턴 돌때마다 1씩 누적된다
var one = 1;
var value = one++ + 3;
console.log (value);
----> 결과 : 4 (value는 아직 턴 돌지 않았다!)
var one = 1;
var value = one++ + 3;
console.log (value);
console.log (one);
----> 결과 : 2 (value 턴이 다 돌았기에 1 추가된 값이 나온다)value--
문장을 수행 후 값을 1씩 떨어뜨린다
= ;기준으로 턴 돌때마다 1씩 줄어든다
var two = 2;
var value = two-- + 3;
console.log (value);
----> 결과 : 5 (value는 아직 턴 돌지 않았다!)
var two = 2;
var value = two-- + 3;
console.log (value);
console.log (two);
----> 결과 : 1 (value 턴이 다 돌았기에 -1 된 값이 도출된다)전치 연산자
++value
표현식 평가 전에 1 증가시킨다.
이 증가된 값을 표현식에서 사용
var one = 1;
var value = ++one + 3;
console.log (value);
결과 값 : 5--value
표현식 평가 전에 1 감소시킨다.
이 감소된 값을 표현식에서 사용
var two = 2;
var value = --two + 2;
console.log (value);
결과 값 : 3!value (논리 Not 연산자)
표현식 평가 결과를 true 또는 false로 변환한 후,
true 면 false로,
true 면 false로 변환
original 값은 바뀌지 않으며 사용될 때만 바뀐다.
var value = true;
console.log (!value);
------> 결과 값 : false
var value = true;
console.log (!!"A");
------> 결과 값 : trueUnicode
Unicode code 값을 코드포인트라고 한다.
표기 방법 : u0031
( U + 숫자)
Javascript 상 표기 방법 : 역슬래시 \사용
console.log ("\u0031")
----> 결과 값 : 1 역슬래시를 포함하여 문자로 적고싶은 경우 : 역슬래시 두번 사용 : \\
console.log ("\\u0031")
----> 결과 값 :\u0031UTF (Unicode Transportation Format)
UTF-8은 8bit로 코드포인트 맵핑을 한다는 의미
= 8 Bit Encoding
관계 연산자
instanceof랑 in은 못배웠다.
> (Greater-Than)
-
Number type 비교 시
-> 수학 값으로 비교한다.
L이R보다 크면 ->true
L이R보다 작으면 ->false``` console.log ((3+1)>1); 결과 값 : true ```
-
String type 비교 시
-
한 쪽이 string type 인 경우 ->
falseconsole.log (1 > "A">; 결과 값 : False -
양 쪽이 string type인 경우
->unicode 사전 순서대로 비교한다console.log ("\u0033" > "\u0032); 결과 값 : true 이런 식으로, 글자 하나하나도 다 unicode 사전 순서로 비교된다. console.log ("가" > " 다"); 결과 값 :false -
여러 글자로 구성된 경우
-> 글자 하나하나씩 비교한다.
첫 결판이 나면..다음 것은 비교하지 않는다.console.log ("A07" > "A21"); 결과 값 : false 해설 : 둘 다 A 는 공통사항이니까 skip. 0보다 2가 더 크기에 false.
-
** <, >, <=, >=는 비교 기준만 다르고 내용 동일.
== (동등 연산자)
왼쪽과 오른쪽이 같으면 -> true
왼쪽과 오른쪽이 다르면 -> false
value type은 비교하지 않는다 -> 1과 "1"은 같이 취급한다.
var value;
console.log (value==null);
결과 : true
해설 : 둘 다 value가 동일하기에 true (type은 고려 x)
var value;
console.log (value==undefined);
결과 : true
둘 다 value가 unidentify로 동일함!= (부등 연산자)
왼쪽과 오른쪽이 다르면 -> true
왼쪽과 오른쪽이 같으면 -> false
a!=b는 !(a==b)와 같다.
해설)
a!=b의 경우 -> a와 b가 다르니까 -> true
a==b의 경우 -> value가 다르니까 false인데 !가 감싸고 있으니까 -> true=== (일치 연산자)
왼쪽과 오른쪽이 value와 type이 모두 같으면 ->true
왼쪽과 오른쪽이 value 또는 type이 다르면 ->false
1===1 -> true
1==="1" -> false
var value;
console.log (value == null);
-> true (값이 같으니까)
var value;
console.log (value === null);
-> false (type이 다르다)Tip
비교하는 code를 작성하는 경우
- 일치연산자 (===)를 사용하여 작성.
값과 type을 동시에 비교 가능하여 안전하게 체크할 수 있다.- 불가한 경우, 동등연산자 (==)를 사용하여 체크.
!== (불일치 연산자)
값 또는 type이 다르면 -> true
값 또는 type이 다르면 -> false
|| (논리 or 연산자)
표현식의 평가결과가 하나라도 true면 -> true
표현식의 평가결과가 하나라도 true가 아니면-> false
var value, zero = 0, two = 2;
console.log (value||zero||two);
결과-> 2
vallue는 false, zero도 false, two만 true여서 true인 값을 출력한다모든 평가결과가 false면 마지막 변수값을 변환한다.
var value, zero = 0;
console.log (zero||value);
결과 ->undefined왼쪽 결과(첫 결과)가 true면, 오른쪽은 비교하지 않는다.
즉 한번 true가 나오면 그 이상 연산을 진행하지 않는다.
var one = 1;
console.log (one===1 || two===2);
결과 -> true이런 경우 실제 프로그램 돌릴 때 에러가 발생할 수 있음.
or연산자를 사용할 경우 에러요소 유무를 반드시 확인해야한다!
&& (논리 and 연산자)
표현식의 평가결과가 모두 true이면 -> true
표현식의 평가결과가 true가 아니면 -> false
var one = 1,
two = 2;
console.log (one&&two);
결과-> 2
모두 true인 경우, 마지막 값으로 반환한다왼쪽 결과(첫 결과)가 true면, 오른쪽은 비교하지 않는다.
즉 한번 true가 나오면 그 이상 연산을 진행하지 않는다.
->대신 비교한 마지막 value 변수 값으로 반환한다
var one = 1,
zero = 0;
console.log (one&&zero&&nine);
결과-> 0
zero가 0인 관계로 false여서 연산 stop 후 결과 0 도출조건 연산자 (=3항 연산자)
형식
exp? exp1 : exp2
첫번째 exp 표현식을 평가한다.
평가 결과가 true면 exp1의 결과를 반환한다.
평과 결과가 false면 exp2의 결과를 반환한다.
보통 if문 대용으로 간단한 것 작성 시 사용한다
console.log (1===1? "같음" : "다름");
-> 같음
console.log (1==="1"? "같음" : "다름");
-> 다름연산자 우선순위
MDN에 정리되어 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
