연산자
연산자는 계산연산자, 비트연산자, 관계연산자, 일치 연산자 등이 있습니다.
폭 넓은 데이터를 조작할 수 있으며, 객체에 연산자를 적용하면 일반적으로 valueOf()나 toString()메서드를 먼저 호출 해 해당 연산자가 조작할 수 있는 값을 얻습니다.
데이터를 다루는 여러 연산자에 대해서 알아보겠습니다.
단항연산자
단 하나에 값에만 적용되는 연산자입니다.
ECMAScript에서 가장 단순한 연산자입니다.
증감연산자
피연산자에 ++ 혹은 —를 추가하여 사용할 수 있습니다.
var age = 15;
var number = 15;
console.log(age++); //15
console.log(age); //16
console.log(++number); //16
console.log(number); //16
++가 피연산자 앞에 있을 경우 1값을 더한후 반환합니다.
++가 피연산자 뒤에 있을경우 값을 반환한 후 1값을 더합니다.
—도 동일한 동작이며 1값이 빼진다는 차이가 있습니다.
단항 플러스와 단항 마이너스
단항 플러스와 단항 마이너스는 숫자형 값에는 아무런 효력도 없습니다.
아래 예제를 봅시다
var num = 25;
num = +num; //여전히 25
그럼 어디에 쓰는걸까요?
단항 플러스를 숫자가 아닌 값에 적용하면 형 변환 함수인 Number()와 마찬가지로 동작합니다.
boolean값 false와 true는 각각 0과 1로 변경됩니다.
단항 마이너스는 보통 숫자형 값의 부호를 바꾸는 용도로 사용합니다.
var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
valueOf: function() {
return -1;
}
};
s1 = +s1; //value becomes numeric 1
s2 = +s2; //value becomes numeric 1.1
s3 = +s3; //value becomes NaN
b = +b; //value becomes numeric 0
f = +f; //no change, still 1.1
o = +o; //value becomes numeric 1
var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
valueOf: function() {
return -1;
}
};
s1 = -s1; //value becomes numeric -1
s2 = -s2; //value becomes numeric -1.1
s3 = -s3; //value becomes NaN
b = -b; //value becomes numeric 0
f = -f; //change to 1.1
o = -o; //value becomes numeric 1
비트연산자
메모리에서 숫자를 표현하는 비트를 직접 조작하는 저수준 연산자입니다.
비트 NOT
~(틸트)로 나타내며 단순히 피연산자의 1의 보수를 반환합니다.
var num1 = 25; //binary 00000000000000000000000000011001
var num2 = ~num1; //binary 11111111111111111111111111100110
console.log(num2); //-26
var num2 = -num1 - 1연산을 이용해도 같은 결과를 도출 할 수 있지만 비트연산자의 경우 저수준연산이기 때문에 훨씬 빠른속도로 결과를 반환합니다.
비트 AND
&(앰퍼샌드)로 나타내며 피연산자를 두개 취합니다.
AND는 두 비트가 모두 1일 때만 1을 반환합니다.
두 비트중 하나라도 0이라면 결과는 0입니다.
비트 OR
|(파이프)로 나타내며 두개의 피연산자를 취합니다.
피연산 비트중 하나라도 1이면 1을 반환합니다.
둘모두 0이라면 0을 반환합니다.
비트 XOR
^(캐럿)으로 나타내며 피연산자 두개를 취합니다.
XOR이 비트OR과 다른점은 두 비트중 하나만 1일때 1을 반환합니다.
두 비트가 모두 1이면 0을 반환합니다.
왼쪽 시프트
<<로 나타내며 좌항의 모든 비트를 우항의 숫자만큼 왼쪽으로 움직입니다.
숫자 2( 2진법으로 10 )를 왼쪽으로 5비트 움직인 결과는 64(2진법으로 1000000) 입니다.
부호 있는 오른쪽 시프트
>>로 나타내며 왼쪽시프트와 정반대로 동작합니다.
64를 오른쪽으로 5비트 움직이면 2가 됩니다.
부호 없는 오른쪽 시프트
>>>로 나타내며 32비트 숫자의 모든 비트를 오른쪽으로 움직입니다.
양수에서는 부호있는 오른쪽 시프트와 동일하게 동작합니다. 허나 음수일 경우 다릅니다.
부호없는 오른쪽 시프트의 경우 빈 비트를 0으로 채웁니다.
그로 인해 음수의 2진표현을 양수로 간주합니다.
var oldValue = -64; //equal to binary 11111111111111111111111111000000
var newValue = oldValue >>> 5; //equal to decimal 134217726
console.log(newValue); //134217726
위와같이 매우 큰숫자가 되어버립니다.
11111111111111111111111111000000 값이 00000111111111111111111111111110로 변경되어 10진수 134217726이 되어버립니다.
불리언 연산자
논리 NOT
!로 표시합니다.
피연산자의 반환값을 반대로 반환합니다.
alert(false) //false
alert(!false) //true
!!로 사용하면 반환값이 두번 변환하기 때문에 Boolean()함수를 쓴것과 마찬가지입니다.
논리 AND
&&로 나타내며 값 두개에 적용합니다.
var result = true && false;
만약 첫번째 피연산자에서 결과가 false일 경우 하면 두번째 피연산자를 거치지 않습니다.
논리 OR
||다음과 같이 파이프 두개로 표현합니다.
첫번째 피연산자가 true로 평가된다면 두번째 피연산자를 거치지 않습니다.
논리 OR 연산자의 행동을 이용해서 변수에 null이나 undefined가 저장되지 않게 할 수 있습니다.
var myObject = proferredObject || backupObject;
myObject에서는 두 값중 하나가 할당 될 것입니다.
proferredObject가 null이 아닐경우 proferredObject가 할당될 것입니다.
허나 proferredObject가 null일 경우 backupObject가 할당 될 것입니다.
곱셈 관련 연산자
곱셈, 나눗셈, 나머지 세 가지 곱셈 관련 연산자가 존재합니다.
곱셈
두 연산자를 곱하는데 쓰입니다.
```javascript
var result = 34 * 56;
나눗셈
두 연산자를 나눌 때 쓰입니다.
```javascript
var result = 66 / 11;
0을 0으로 나누면 NaN이 됩니다.
0이 아닌 숫자를 0으로 나눌 경우 첫 번째 피연산자의 부호에 따라 Infinity또는 -Infinity가 됩니다.
덧셈
숫자라면 값을 더하고 문자열이라면 합치게 됩니다.
var num1 = 5;
var num2 = 10;
var message = "The sum of 5 and 10 is " + (num1 + num2);
console.log(message); //"The sum of 5 and 10 is 15"
var message2 = "The sum of 5 and 10 is " + num1 + num2;
console.log(message2); //"The sum of 5 and 10 is 510"
위 예제와 같이
괄호를 사용하여 먼저 처리해준 경우 문자열 + 문자열(숫자 + 숫자)로 처리 하지만
괄호가 없을경우 문자열 + 문자열 + 문자열로 처리 하게 됩니다.
뺄셈
var result = 2 - 1;
관계 연산자
관계 연산자는 미만<, 초과 >, 이하<=, 이상>= 연산자가 있습니다.
두 피연산자를 비교하여 관계연산자에 맞게 불리언 값을 반환합니다.
NaN < 3 의 경우 연산이 불가능하여 false를 반환합니다.
“23” < 3 의 경우 숫자로 바꾸어서 비교하지만
“23” < “3”의경우 문자코드로 비교하기때문에 23이 크다는 결과가 반환되니 주의합시다.
동일/비동일 연산자
==, != 를 사용합니다.
두 변수가 동일한지 판단해주는 연산자입니다.
아래와 같은 특별한 경우가 있으니 한번 봐두시면 좋습니다.
| 표현식 | 값 |
|---|---|
| null == undefined | true |
| “NaN” == NaN | false |
| 5 == NaN | false |
| NaN == NaN | false |
| NaN != NaN | true |
| false == 0 | true |
| true == 1 | true |
| true == 2 | false |
| undefined == 0 | false |
| null == 0 | false |
| “5” == 5 | true |
일치/불일치 연산자
동일/비동일 연산자와 같은일을 하지만 피연산자의 타입을 변환하지 않고 있는 그대로를 비교합니다.===, !==로 나타내며 다음과 같이 피연산자의 타입을 변환하지 않아도 같을 때에만 true를 반환합니다.
var result1 = ('55' == 55); //true
var result2 = ('55' === 55); //false
result2의 경우 데이터 타입이 다릅니다 ‘55’ = 문자열 , 55 = 숫자
그렇기 때문에 false를 반환합니다.
null과 undefined는 비슷한 값이므로 ==로 비교할 경우 true를 반환합니다.
하지만 타입이 다르기 떄문에 ===를 사용할 경우 false를 반환합니다.
3항 연산자
이 코드는 아래와 같은 연산을 사용합니다.
var max = (num1 > num2) ? num1 : num2;
이 예제에서는 max에 num1과 num2중 큰 값이 저장됩니다.
이해가 잘 안되신다구요? 이해하기 쉽게 표현해 보았습니다.var max = 참 거짓 도출 ? 참 : 거짓;
참 거짓 도출 부분에서 true인지 false인지 연산자가 반환한 값을 통해 알아냅니다.
그 값이 true일 경우 참의 값을 반환하고 false일 경우 거짓의 값을 반환합니다.
할당 연산자
=로 나타내며 단순히 값을 변수에 할당합니다.
var num = 10;
num = num + 5;
위의 예제는 복합할당을 이용하여 간단히 줄여 쓸 수 있습니다.
var num = 10;
num += 5;
예제에서는 +를 사용해 +=로만 썼지만
곱셈 나눗셈 빽셈 나머지 심지어 시프트도 사용할 수 가 있습니다.
ex) *=, /=, %=, <<=, >>=, >>>=
쉼표 연산자
여러 문장을 한문장으로 합칠 때 사용합니다.
var num1=1, num2=2, num3=3;
보통 변수 선언에서 많이 사용하며 값을 할당할 때도 사용 할 수 있습니다.
var num = (5, 1, 4, 2, 3); // num에는 0이 저장됩니다.
마치며
자바스크립트에서 사용하는 연산자의 경우 다른 언어와 거의 동일 하기 때문에 이 포스트를 보는데 어려움이 없었을 것이라고 생각합니다.
하지만 데이터 타입이 느슨하기 때문에 서로 다른 데이터의 연산에 대해서 주의가 많이 필요합니다. 이해가 잘 안될 경우 예제를 다시한번 보고 직접 콘솔에서 테스트 해보시면 많이 도움이 되실 것 같습니다.
다음 포스트에서는 자바스크립트 문장에 대해서 알아보겠습니다.