연산자란 프로그래밍에서 쓰이는 기호로 산술, 문자열, 증감, 비교, 대입, 삼항, 논리, 비트연산자 등이 있습니다. (비트연산자는 잘 쓰지 않습니다.)
var a = 1 + 2; // 3
var b = 5 - 3; // 2
var c = 2 * 4; // 8
var d = 6 / 4; // 1.5
var e = 8 % 3; // 2
// 참고로 -와 * 그리고 /는 문자열로 표현된 숫자도 계산 해줍니다. 그러나 +는 안됩니다.
// 그 이유는 문자열연사자에서 설명하도록 하겠습니다.
var string = 'hello' + 'world'; // 'hello world'
var string2 = 'hi' + 9; // 'hi9'
var string3 = 1 + 'what' + 2; // '1what2'
var string4 = 3 + 4 + 'wow'; // '7wow'
+는 문자열과 더할 때 문자열이 아닌 데이터는 문자열로 바꿔서 연결해줍니다.
'문자열이 먼저다'라고 기억해두면 쉽습니다. 따라서 string2의 숫자 9는 문자열 '9'로 바뀌어서 결과 값이 'hi9'가 됩니다. string4를 보면 '34wow'가 아니라 '7wow'인데 그 이유는 왼쪽부터 더해나가기 때문입니다. 먼저 숫자 3 + 4를 해서 7이 되고, 그 후에 'wow' 문자열과 더해져서 '7wow'가 됩니다. 왼쪽부터 계산되고, 문자열이 있을 경우는 문자열로 바뀌어서 계산됩니다.
var i = 0;
i++; // i는 1이 됩니다.
alert(i++); // 1을 먼저 alert한 후에 ++되어 i는 2가 됩니다.
alert(++i); // 먼저 ++한 후에 alert하여 3을 alert하게 됩니다.
i = i + 1; // i++과 같습니다.
++가 앞에 붙으면 먼저 1을 더하고 다음 동작을 하고, ++가 뒤에 붙으면 동작을 먼저 한 후 1을 더합니다.
대입연산자
var a = 1;처럼 변수에 값을 대입하는 연산자 입니다. 가장 기본이죠!
줄여쓰는 연산자도 있습니다. 이를 복합대입연산자라고 불르는 데요. +=, -=, /=, *=, %= 등이 있습니다. 단순히 코드 양만 줄여줍니다.
```jsx
var i = 10;
i += 2; // 12
i -= 3; // 9
i *= 4; // 36
i %= 5; // 1
```
비교연산자
==, ≠, >, <, ≥, ≤ 순서대로 같음, 같지 않음, 큼 , 작음, 크거나 같지 않음, 작거나 같음 입니다.
프로그래밍에서는 ==가 같다는 뜻이고, =는 대입연산자입니다. 변수에 값을 대입하는 역할이죠.
100 == 10 * 10; //true
6! = 2 * 2; // true
2 * 5 > 3 * 3 // true
6 * 3 <= 2 * 9; //true
var ternary = i > 10 ? 15 : 6
//여기서 i > 10 == true면 ternary 변수는 15가 되고, false면 6이 됩니다.
논리연산자
&&, ||, !인데요 순서대로 그리고, 또는, 아닌이란 뜻을 가지고 있습니다. &&는 앞의 값이 참인 값을 때 다음 값으로 넘어갑니다. ||는 앞의 값이 거짓일 때 다음값으로 넘어갑니다. 앞의 값이 참이면 넘어가지 않습니다. !는 참인 값이면 false로 거짓인 값이면 true로 바꿔줍니다.
거짓인 값에는 '', 0, false, NaN, undefined, documet.all"이 있습니다. 이외
에는 모두 참인 값입니다. 논리연산자는 true, false를 연산하는 게 아니라, 참인 값과 거짓인 값들을 연산하는 것입니다.
var a = 10;
var b = 20;
(a < b) && ( a * 2 == b); // true
(a > b) || (a * 2 <= 20); // true
!(a < b); //false
//(a < b)는 (true) 참이고 a * 2 == b도 참입니다. 따라서 참 && 참이므로 true입니다.
//(a > b)는 (false) 거짓이고 (a * 2 <= 20)은 참입니다. 따라서 거짓 || 참이므로 true입니다.
비교연산자
0 == ''
0 == false
0 == []
//위의 세 개 모두 true입니다. 숫자 0은 false도 되고 빈 문자열도 되고, 빈 배열도 됩니다.
//자바스크립트에서 ==으로 비교연산을 할 때 자동으로 자료형을 바꿔버리고 값만 비교해서 이런
일이 생깁니다.
이런 경우를 방지하고자 자바스크립트에는 === 연산이 있습니다. 값 뿐만 아니라 자료형까지 같아야 true가 됩니다.
0 === '' // false
0 === false // false
0 === [] // flase
//이제 셋 다 false가 뜹니다. 자바스크립트에서 같은 값인지 비교할 때는 꼭 ===를 써야함을
//잊지말고 ==를 쓰는 것은 추천하지 않습니다. 자료형까지 다른지 비교 할 때는 !=대신에
//!==을 씁니다. ===와 !==을 기억하세요!