[JavaScript] 연산자

연산자(Operator)

: 부여된 변수/리터럴에 대하여 미리 결정된 어떠한 처리를 행하기 위한 기호
: (=), (,), (-) 등
: 피연산자(Operand)는 연산자에 의해 처리되는 변수/리터럴

1. 산술 연산자

연산자	개요
+	숫자의 덧셈
-	숫자의 뺄셈
*	숫자의 곱셈
/	숫자의 나눗셈
%	숫자의 나머지 연산
++	전치 덧셈
++	후치 덧셈
--	전치 뺄셈
--	후치 곱셈

◾ 가산 연산자(+)

console.log(10 + 1); // 결과 : 11
console.log('10' + 1); // 결과 : 101 ①

① '10' 문자열이기 때문에 '+'는 연결 연산자로 인식되어 101이라는 결과가 나옴

◾ 증가 연산자(+)와 감소 연산자(--)

var x = 3;
var y = x++;
console.log(x); // 결과 : 4
console.log(y); // 결과 : 3 ①

var x = 3;
var y = ++x;
console.log(x); // 결과 : 4
console.log(y); // 결과 : 4 ②

① 변수 x를 변수 y에 먼저 대입한후 변수 x를 증가 시킴 (후치 연산)
② 변수 x를 먼저 증가한 후에 그 결과를 변수 y에 대입 (전치 연산)

2. 대입 연산자

: 지정된 변수에 값을 대입하는 연산자 ('=')

 =    : 변수 등에 값을 대입한다 
 +=   : 좌변값에 우변값을 더한 값을 대입한다 
 -=   : 좌변값에 우변값을 뺀 값을 대입한다 
 *=   : 좌변값에 우변값을 곱한 값을 대입한다 
 /=   : 좌변값에 우변값을 나눈 값을 대입한다 
 %=   : 좌변값에 우변값을 나눈 나머지 값을 대입한다 
 &=   : 좌변값에 우변값을 비트 AND 연산한 값을 대입한다 
 |=   : 좌변값에 우변값을 비트 OR 연산한 값을 대입한다 
 ^=   : 좌변값에 우변값을 비트 XOR 연산한 값을 대입한다 
 <<=  : 좌변값에 우변값을 좌측 시프트한 결과를 대입한다  
>=  : 좌변값에 우변값을 우측 시프트한 결과를 대입한다 
>>= : 좌변값에 우변값을 우측 시프트한 결과를 대입한다 

◾ 기본형과 참조형에 따른 대입 차이 - '='연산자

var x = 1;
var y = x;
var x = 2;
console.lo(y); // 결과 : 1 ①

var data1 = [0, 1, 2];
var data2 = data1;
data1[0] = 5;
console.log(data2); // 결과 : [5, 1, 2] ②

① 변수의 값이 복사되는 것이라 원래 변수 x의 값을 변경해도 복사한 곳의 변수 y에 영향을 미치지 못한다. (값 전달 : 값 그 자체를 건네주는 것)
② 참조형의 경우는 값을 보관하고 있는 어드레스가 보관되기 때문에 data1의 변경은 date2에도 영향을 미친다. (참조 전달 : 값을 보관하고 있는 참조 장소의 정보를 건네주는 것)

◾ 분할 대입 - 배열
: 배열을 분해하여 안의 요소를 개별 변수로 분해하는 구문이다.

var data = [56, 40, 26, 82, 19, 17, 73, 99];
var x0 = data[0];
var x1 = data[1];
var x2 = data[2];

let data = [56, 40, 26, 82, 19, 17, 73, 99];
let [x0, x1, x2, ....other] = data
console.log(x0); // 결과 : 56
console.log(x1); // 결과 : 40
console.log(x2); // 결과 : 26
console.log(other); // 결과 : [82, 19, 17, 73, 99]

◾ 분할 대입 - 객체
: 객체를 분해하여 안의 프로퍼티값을 개별 변수로 분해하는 구문이다.

let book = { title : 'Java포켓 레퍼런스 ', publish : '기술평론사', price : 26800, 
other: { keywd : 'Java SE 8', logo : 'logo.jpg'}};
let { title, other, other: { keywd }, memo = '없음'} = book;

console.log(title); // 결과 : Java포켓 레퍼런스
console.log(other); // 결과 : { keywd : 'Java SE 8', logo : 'logo.jpg'}
console.log(keywd); // 결과 : Java SE 8
console.log(memo); //  결과 : 없음

let book = { title : 'Java포켓 레퍼런스 ', publish : '기술평론사'};
let { title : name, publish : company } = book;

console.log(name); // 결과 : Java포켓 레퍼런스
console.log(company); // 결과 : 기술평론사

3. 비교 연산자

: 좌변/우변의 값을 비교하여 그 결과를 true/false로 반환한다.

연산자	개요
==	좌변과 우변의 값이 같을 경우 (true)
!=	좌변과 우변의 값이 같지 않을 경우 (true)
<	좌변과 우변보다 작은 경우 (true)
<=	좌변과 우변의 작거나 같을 경우 (true)
>	좌변과 우변의 값이 클 경우 (true)
>=	좌변과 우변의 크거나 같을 경우 (true)
===	좌변과 우변이 값이 같고 데이터형도 같은 경우 (true)
!==	좌변과 우변의 값이 같지 않을 경우 또는 데이터형이 다른 경우 (true)
?:	'조건식? 식1: 식2' 조건식이 true인 경우는 식1을, false인 경우는 식2

❗ 등가 연산자(=)와 동치 연산자(===) ❗
'=='와 '===' 연산자의 주된 차이점은, 예를 들어, 숫자를 숫자 리터럴과 비교하면, '=='는 그것을 허용하지만, '===' 두 변수의 형식은 동일하지 않은 경우, 값뿐만 아니라 두 변수의 유형도 확인하므로, 허용하지 않는 것이다. 즉, '==='는 'false'으로 반환하고, '=='는 'true'로 반환다.

console.log('3.14E2' == 314); // true
console.log('0x10' == 16); // true
console.log('1' == 1); // true

console.log('3.14E2' === 314); // false
console.log('0x10' === 16); // false
console.log('1' === 1); // false

4. 논리 연산자

: 복수의 조건식을 논리적으로 결합하여 그 결과를 true/false로 반환한다.

 && : 좌우식이 모두 true인 경우 (true) 
 || : 좌우식의 어느 쪽이든 true인 경우 (true) 
 !  : 식이 false인 경우 (true) 

var x = 1;
var y = 2;
console.log(x === 1 && y === 1); // 결과 : false
console.log(x === 1 || y === 1); // 결과 : true

❕ 암묵적으로 false ❕

• 빈 문자열(" ")
• 숫자 0, NaN(Not a Number)
• null, undefined

◾ 단락 회로 평가
: 논리 연산자는 두개의 식 중에서 좌측식부터 판별을 시작 하는데, 좌측식 결과에 따라서 우측식은 판별하지 않고 넘어간다.

x = 5;
x === 1 && console.log('...'); // false ①

x = 1;
x === 1 || console.log('...'); // true ②

① 좌측이 false인 경우 &&연산자에서는 우측식이 실행되지 않고 조건식 전체가 false
② 좌측이 true인 경우 ||연산자에서는 우측식이 실행되지 않고 조건식 전체가 true

5. 비트 연산자

: 정숫값을 2진수로 나타냈을 경우 각 행에 대해서 논리 계산을 실시하는 연산

 & : 좌변과 우변의 값 모두에 세트된 비트 (AND 연산)
 | : 좌변과 우변의 값 중 어느 쪽이든 세트된 비트 (OR 연산)
 ^ : 좌변과 우변의 값 중 어느 한쪽에는 세트되었으나 양쪽에는 세트되지 않은 비트(XOR 연산)
 ~ : 비트를 반전(NOT 연산)
 << : 비트를 좌측으로 시프트
> : 비트를 우측으로 시프트
>> : 비트를 우측으로 시프트 하되, 좌측을 0으로 채움

◾ 비트 논리 연산자
: 주어진 정수를 2진수로 표시한 다음에 각 행에 대해서 논리 연산을 하고그 결과 값을 다시 원래의 10진수 표기로 되돌림

10진수 2진수 10진수
6      0110
3     &0011                 // AND 양쪽 모두의 비트가 1 - 1
    ---------                      어느 한쪽의 비트가 0 - 0
       0010  = 2

❕ 2진수로 음수를 표현 하는 것 ❕
: 비트 열을 반전시켜서 1을 더한 것이 그 값의 절댓값 = 2의 보수 표현

10진수 2진수 10진수
10     1010
     -------- (부정'~')         // 1010 + 1 = 1011(11)
       0101 = -11              // 0101 = -11

◾ 비트 시프트 연산자
: 주어진 정수를 2진수로 표시한 다음에 각 행에 대해서 논리 연산을 하고그 결과 값을 다시 원래의 10진수 표기로 되돌림

10진수 2진수 10진수
10     1010
     -------- << 1                // 좌측으로 시프트 : 우측의 행 0으로 채워짐
       10100 = 20

6. 이외의 연산자

연산자	개요
,(콤마)	좌우의 식을 계속해서 실행
delete	객체의 프로퍼티나 배열의 요소를 삭제
instanceof	객체가 지정된 클래스의 인스턴스인지를 판정
new	새로운 인스턴스를 생성
typeof	오퍼랜드의 데이터형을 취득
void	미정의 값을 되돌림

◾ delete 연산자
: 오퍼랜드에 지정한 변수나 배열 요소, 객체의 프로퍼티를 파기한다.

var ary = ['JavaScript', 'Ajax', 'ASP.NET']; 
console.log(delete ary[0]); // 결과 : true 
console.log(ary); // 결과 : [1: 'Ajax', 2: 'ASP.NET'] ①

var obj = {x:1, y:2};
console.log(delete obj.x); // 결과 : true 
console.log(obj.x); // 결과 : undefined

var obj2 = {x:obj, y:2};
console.log(delete obj2.x); // 결과 : true 
console.log(obj); // 결과 : {y:2} ②

var data1 = 1;
console.log(delete data1); // 결과 : false 
console.log(data1); // 결과 : 1 ③

data2 = 10;
console.log(delete data2); // 결과 : true
console.log(data2); // 결과 : 오류(data2는 존재하지 않음)

① 배열 요소 삭제한 경우, 해당 요소만 삭제 될 뿐 요소가 앞으로 옮겨지는 것은 아님 (인덱스 번호 변하지 않음)
② 프로퍼티를 삭제한 경우, 프로퍼티 그 자체가 삭제 될 뿐 프로퍼티가 참조하는 객체가 삭제되는 것은 아님
③ 명시적으로 선언된 변수를 삭제 할 수 없다.

◾ typeof 연산자
: 오퍼랜드에 지정한 변수/리터럴의 데이터형을 나타내는 문자열을 반환한다.

var num = 1;
console.log(typeof num); // 결과 : number

var str = '안녕하세요';
console.log(typeof str); // 결과 : string

var flag = true;
console.log(typeof flag); // 결과 : boolean

var ary = ['JavaScript', 'Ajax', 'ASP.NET'];
console.log(typeof ary); // 결과 : object

var obj = {x:1, y:2};
console.log(typeof obj); // 결과 : object