자바스크립트에는 데이터 조작에 쓸 수 있는 연산자가 여러가지 존재합니다.
이러한 연산자는 더하기 빼기같은 계산 연산자, 비트 연산자, 관계 연산자, 일치 연산자 등이 있습니다.
단항 연산자
단 하나의 값에만 적용 되는 연산자를 '단항 연산자'라고 부릅니다.
단항 연산자는 가장 단순한 연산자 입니다.
증감 연산자
증감연산자는 피연산자의 앞에서 쓸수도 있고 뒤에 쓸 수도 있습니다.
var age = 29;
++age;
console.log("age = " + age);
처음 age 값이 29 였는데 30으로 1 더해졌습니다.
var age = 29;
age = age + 1;
console.log("age = " + age);
이것도 위와 같은 결과 값을 나타냅니다.
++ 말고 -- 을 쓰면 1을 빼는 계산을 합니다.
var age = 29;
--age;
console.log("age = " + age);
이번에는 age가 29 에서 28로 되었습니다.
증감연산자를 사용하게 되면 값을 바꾼 다음 문자을 평가합니다.
이런 방식은 보통 부작용이라고 부릅니다.
var age = 29;
var anotherAge = --age + 2;
console.log("age = " + age);
console.log("anotherAge = " + anotherAge);
age에서 1을 뺀 다음 2를 더한 값으로 초기화 됩니다.
감소 연산자를 먼저 적용하므로 age가 28로 바뀌고 여기에 2를 더해 30이 된 겁니다.
++나 --를 피연산자 다음에 쓰면 피연산자에 1을 더하거나 빼기는 마찬가지지만 매우 중요한 차이가 있습니다.
피연산자 다음에 쓴 증감연산자는 문장을 평가한 다음에 적용됩니다.
var age = 50;
age++;
console.log("age = " + age);
연산자를 변수 다음으로 옮겼지만 이 문장이 하는 일에 차이가 없습니다.
한 문장에서는 다른 조작이 같이 쓰이면 차이가 분명히 드러납니다.
var num1 = 2;
var num2 = 20;
var num3 = num1-- + num2;
var num4 = num1 + num2;
console.log("num3 = " + num3);
console.log("num4 = " + num4);
증감 연산자의 위치를 바꿨을 뿐인데 num1 과 num2을 더하고 나중에 num1을 빼는 계산을 한다.
또 하나의 예제로 증감연산자를 숫자말고 다른곳에 하면 어떻게 될까?
var s1 = "2";
var s2 = "z";
var b = false;
var f = 1.1;
var o = {
valueOf: function() {
return -1;
}
};
s1++;
s2++;
b++;
f--;
o--;
console.log("s1 = " + s1);
console.log("s2 = " + s2);
console.log("b = " + b);
console.log("f = " + f);
console.log("o = " + o);
단항 플러스와 단항 마이너스
단항 플러스는 + 기호를 변수 앞에 써서 양수를 만들 수 있고 단항 마이너스는 - 기호를 변수 앞에 써서 음수로 만들 수 있다.
var num = 25;
var num1 = -num;
var num2 = +num;
console.log("num1 = " + num1);
console.log("num2 = " + num2);
다음 예제로 단항 플러스를 여러 가지 데이터 타입에 적용한 결과입니다.
var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
valueOf: function() {
return -1;
}
};
console.log("s1 = " + +s1);
console.log("s2 = " + +s2);
console.log("s3 = " + +s3);
console.log("b = " + +b);
console.log("f = " + +f);
console.log("o = " + +o);
단항 마이너스 연산자를 사용한 예제는 다음과 같다.
var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = {
valueOf: function() {
return -1;
}
};
console.log("s1 = " + -s1);
console.log("s2 = " + -s2);
console.log("s3 = " + -s3);
console.log("b = " + -b);
console.log("f = " + -f);
console.log("o = " + -o);
비트 연산자
메모리에 숫자를 표현하는 비트를 직접 조작하는 저수준 연산자입니다.
var num = -18;
console.log( "num = " + num.toString(2));
비트 NOT
바트 NOT 은 텔레(~) 로 나타내며 단순히 피연산자의 1의 보수를 반환합니다.
var num1 = 25;
var num2 = -num1;
var num3 = ~num1;
console.log("num2 = " + num2);
console.log("num3 = " + num3);
~ 은 보수를 사용하여 계산하므로 +1를 해주면 단항 마이너스 연산을 사용한곳과 같은 결과를 얻을 수 있습니다.
두 예제 비슷한 결과 값을 가지고 있지만 비트 연산은 대단히 저수준에서 숫자를 직접 조작하므로 두 번 째 예제에 비해 훨 씬 빠릅니다.
비트 AND
비트 AND 연산자는 앰퍼샌드(&)로 나타내며 피연산자를 두 개를 취합니다.
비트 AND는 모두 1일 때만 1를 반환합니다.
var result = 25 & 3;
console.log(result);
25 는 2진법으로 나타 내면 11001
3을 2진법으로 나타내면 00011 이므로
AND 로 세로로 계산하면 00001 이 됩니다.
비트 OR
비트 OR 연산자는 파이프(|)로 나타내며 역시 피연산자 두 개를 취합니다.
비트 OR연산은 피연산 비트 중 하나라도 1이면 1을 반환합니다.
var result = 25 | 3;
console.log(result);
한쪽에 1인 비트가 네개가 있으므로 결과는 11011로 27이 나옵니다.
비트 XOR
비트 XOR 연산자는 캐럿(^)으로 나타내며 피연산자 두 개를 취합니다.
비트 XOR이 비트 OR과 다른 점은 두 비트 중 하나만 1일 때 1을 반환한다는 점입니다.
두 비트가 모두 1이면 0을 반환합니다.
var result = 25 ^ 3;
console.log(result);
결과 값으로 result는 11010 으로 10진수로 바꾸니 26이 나온다.
왼쪽시프트
왼쪽 시프트는 <<로 나타내며 좌항의 모든 비트를 우항의 숫자만큼 왼쪽으로 움직입니다.
오른쪽 시프트
부호 있는 오른쪽 시프트는 >> 로 나타내며 왼쪽 시프트와 다르게 반대 방향으로 움직입니다.
부호 없는 시프트는 >>> 로 나타내며 오른쪽으로 움직입니다.
하지만 음수에서는 오른쪽 시프트와 달리 빈비트는 숫자의 부호와 관계없이 0으로 채워집니다.
오른쪽 시프트는 음수는 절댓값의 2의 보수로 하므로 매우 큰 숫자가 나옵니다.
var oldValue = 64;
var newValue = oldValue >> 5;
console.log("<< 왼쪽 시프트");
console.log(newValue);
oldValue = 64;
newValue = oldValue >>> 5;
console.log(">>> 부호없는 오른쪽 시프트");
console.log(newValue);
oldValue = -64;
newValue = oldValue >>> 5;
console.log(">>> 부호없는 오른쪽 시프트");
console.log(newValue);
불리언 연산자
볼리언 연산자는 == 연산자 만큼이나 중요하며 프로그래밍 언어가 제 구실을 하는 데 꼭 필요합니다.
볼리언 연산자에는 NOT 과 AND, OR 세 가지가 있습니다.
논리 NOT
논리 NOT 연산자는 느낌표(!) 로 표시하며 자바스크립트의 모든 값에 적용할 수 있습니다.
논리 NOT 연산자는 데이터 타입에 관계 없이 항상 볼리언 값을 반환합니다.
console.log(!false);
console.log(!"blue");
console.log(!0);
console.log(!NaN);
console.log(!"");
console.log(!12345);
논리 AND
논리 AND 연산자는 앰퍼샌드 2개(&&)로 나타내며 다음과 같이 두 개에 적용합니다.
var result = true && false;
논리 OR
논리 OR 연산자는 다음과 같이 두개 (||) 로 표현합니다.
var result = true || false;
곱셈 관련 연산자
자바스크립트에는 곱셈, 나눗셈, 나머지의 세 가지 곲셈 관련 연산자가 있습니다.
곱셈
곰셈 연산자는 아스테리스크(*) 를 써서 나타내며 두 숫자를 곱하는데 쓰입니다.
var result = 34 * 56;
나눗셈
나눗셈 연산자는 슬래시(/) 기호로 표현하며 다음과 같이 첫 번째 피연산자를 두 번째 피연산자로 나눕니다.
var result = 66 / 11;
나머지
나머지 연산자는 퍼센트 기호(%)로 나타내며 다음과 같이 사용합니다.
var result = 26 % 5;
덧셈 관련 연산자
뎃셈과 뺄셈 연산자는 일반적으로 프로그래밍 언어에서 가장 단순한 수학 연산자 입니다.
덧셈
덧셈 연산자(+)는 다음 예제처럼 누구나 예상할 수 있는 방식으로 동작합니다.
var result = 1 + 2;
피연산자 중 하나가 객체나 숫자, 불리언이라면 toString() 메서드를 호출해서 문자열 값을 얻고 이전에 설명한 규칙을 적용합니다.
var result = 5 + 5;
var result2 = 5 + "5";
console.log("result = " + result);
console.log("result2 = " + result2);
일반적으로 5 + 5 는 10(숫자) 이며 첫 번째 코드가 이 경우입니다. 하지만 피연산자 중 하나가 문자열 ("5")이라면 결과는 "55"(문자열)입니다. 첫번 째 피연산자가 "5"로 변환되기 때문입니다.
var num1 = 5;
var num2 = 10;
console.log("The Sum of 5 and 10 is " + num1 + num2);
console.log("The sum of 5 and 10 is " + ( num1 + num2 ));
문자열에 숫자를 합치려면 괄호를 사용하여 쓸 수 있다.
뺄셈
뺄셈 연산자(-) 역시 매우 자주 쓰입니다.
var result = 2 - 1;
console.log(result);
덧셈 연산자와 마찬가지로 뺄셈 연산자에도 특별한 규칙이 있습니다.
var result1 = 5 - true;
var result2 = NaN - 1;
var result3 = 5 - 3;
var result4 = 5 - "";
var result5 = 5 - "2";
var result6 = 5 - null;
console.log("result1 = " + result1);
console.log("result2 = " + result2);
console.log("result3 = " + result3);
console.log("result4 = " + result4);
console.log("result5 = " + result5);
console.log("result6 = " + result6);
관계 연산자
관계 연산자에는 미만 ( < ) 과 초과 ( > ) , 이하 ( <= ) , 이상( >= ) 연산작 있습니다.
var result1 = 5 > 3;
var result2 = 5 < 3;
console.log("5 > 3 => " + result1);
console.log("5 < 3 => " + result2);
관계 연산자의 피연산자가 모두 문자열이여도 두 값을 비교할 수 있다.
대개 미만 연산자가 "알파벳 순서로 앞에 있다" 는 뜻이고, 초과 연산자는 "알파벳 순서로 뒤에 있다"는 뜻일 거라고 생각하지만 그게 아니다.
첫 번째 문자열의 문자 코드와 두 번째 문자열의 문자 코드를 대응하며 비교합니다.
대문자의 문자 코드 전체가 소문자의 문자 코드보다 작다.
var result = "Brick" < "alphabet";
var result2 = "Britck".toLowerCase() < "alphabet".toLowerCase();
var result3 = "23" < "3";
var result4 = "a" < 3;
var result5 = NaN < 3;
var result6 = NaN >= 3;
console.log("result = " + result );
console.log("result2 = " + result2);
console.log("result3 = " + result3);
console.log("result4 = " + result4);
console.log("result5 = " + result5);
console.log("result6 = " + result6);
동일 연산자
두 변수가 동일한지 판단하는 일은 프로그래밍에서 가장 중요한 조작 중 하나입니다.
연산자를 두 별로 불리해서 '동일' 과 '비동일' 연산자는 비교하기 전에 타입을 변환하며 '일치'와 '불일치' 연산자는 타입 변환 없이 비교하는 것으로 정했습니다.
동일 연산자는 == 로 표시하며 두 피연산자가 동일하면 true를 반환합니다.
비동일 연산자는 !=로 나타내며 두 피연산자가 동일하지 않으면 true를 반환합니다.
두 연산자 모두 피연산자를 비교하기 전에 변환합니다.
이런 변환을 종종 '타입 강제'라고 부릅니다.
console.log( "null == undefined => " + (null == undefined));
console.log( "'NaN' == NaN => " + ("NaN" == NaN));
console.log( "5 == NaN => " + (5 == NaN));
console.log( "NaN == NaN=> " + (NaN == NaN));
console.log( "NaN != NaN => " + (NaN != NaN));
console.log( "false == 0 => " + (false == 0));
console.log( "true == 1 => " + (true == 1));
console.log( "true == 2 => " + (true == 2));
console.log( "undefined == 0 => " + (undefined == 0));
var result1 = ("55" == 55);
var result2 = ("55" === 55);
var result3 = ("55" != 55);
var result4 = ("55" !== 55);
console.log("result1 = " + result1);
console.log("result2 = " + result2);
console.log("result3 = " + result3);
console.log("result4 = " + result4);
== 은 변환 후 비교를 하고 === 는 데이터타입이 일치 하지 않으면 false를 반환한다.
3항 연산자
3항 연산자는 가장 다재다능한 연산자 중 하나이다.
var max = (num1 > num2) ? num1 : num2;
num1 과 num2 중 큰 값이 저장됩니다. num1이 num2보다 크다면 num1을 max에 저장하고, num1이 num2보다 작거나 같다면 num2을 max에 저장합니다.
할당 연산자
단순한 할당은 = 로 나타내며 다음 예제처럼 단순히 값을 변수에 할당합니다.
var num = 10;
덧셈이나 곱셈 관련, 비트 시프트 연산자와 = 기호를 합쳐 복합 연산자 만들 수 있습니다.
var num = 10;
num = num + 10;
이 코드를 다음 복합 할당으로 줄여 쓸 수 있습니다.
var num = 10;
num += 10;
쉼표 연산자
쉼표 연산자는 다음과 같이 여러 문자을 한 문장으로 합칠 때 씁니다.
var num1 = 1, num2 = 2, num3 = 3;
쉼표 연산자는 보통 변수 선언에 가장 많이 사용하지만 값을 할당할 때도 쓸 수 있습니다.
항상 표현식의 마지막 값을 반환합니다.
var num = ( 5, 1, 4, 8, 0);
console.log("num = " + num);
'프로그래밍 > 자바스크립트(javascript)' 카테고리의 다른 글
| [자바스크립트/javascript] 변수, 컨텍스트, 가비지 콜렉션 (0) | 2020.05.04 |
|---|---|
| [자바스크립트/javascript] 함수 (0) | 2020.05.03 |
| [자바스크립트/javascript] 제어문, 반복문 ( if문, switch문, for문, for-in문, while문, do-while문 ) (0) | 2020.05.02 |
| [자바스크립트/javascript] 식별자, 주석, 스트릭트 모드, 변수, 데이터 타입 (0) | 2020.04.30 |
| [자바스크립트/javascript] 태그 위치, 스크립트 처리 지연 (0) | 2020.04.30 |
