[JavaScript] 연산자

 

 

연산자

연산자(Operator) 란 부여된 변수/리터럴에 대하여 미리 결정된 어떠한 처리를 행하기 위한 기호이다. 예를 들어, (+), (-) 등은 모두 연산자이다. 또한 연산자에 의해 처리되는 변수/리터럴을 오퍼랜드(Operand) 라고 부른다.

 

 

 산술 연산자

표준적인 사칙연산부터 시작해서 수치와 관련된 연산을 행하는 것이 산술 연산이다. 대수 연산자로고도 불린다.

console.log(10 + 3);   // 덧셈
console.log(10 - 7);   // 뺄셈
console.log(3 * 5);    // 곱셈
console.log(10 / 2);   // 나눗셈
console.log(10 % 3);   // 나머지 연산

var x = 3;

// 후치 덧셈, a = 3, x = 4
var a = x++;
console.log(`a : ${a} , x = ${x}`);

// 전치 덧셈, b = 5, x = 5
var b = ++x;
console.log(`b : ${b} , x = ${x}`);

// 전치 뺄셈, c = 4, x = 4
var c = --x;
console.log(`c : ${c} , x = ${x}`);

// 후치 뺄셈, d = 4, x = 3
var d = x--;
console.log(`d : ${d} , x = ${x}`);

 

+ 소수점을 포함한 계산에서의 주의할 점

자바스크립트에서는 내부 연산을 2진수로 행하기 때문에 아주 작은 오차가 발생할 수 있다. 다음 예제에서는 false 로 나온다. 

// 결과 : 0.6000000000000001
console.log(0.2 * 3);

// === 연산자 : 데이터형과 데이터값이 일치하는지 판단하는 연산자이다.
console.log(0.2 * 3 === 0.6);

따라서 엄밀하게 결과를 얻을 필요가 있는 경우나 값의 비교를 행할 경우에는 다음을 따른다.

1. 값을 일단 정수로 바꾼 뒤에 연산을 행한다
2. 위 1의 결과를 다시 소수로 바꾼다.

console.log((0.2 * 10) * 3 == 0.6 * 10);

 

 

 대입 연산자

지정된 변수에 값을 설정(대입)하는 연산자다. 산술 연산자나 비트 연산자와 함께 연동된 기능을 제공하는 복합 대입 연산자도 포함되어 있다. 대입 연산자의 종류와 사용법은 다음과 같다.

// = : 변수 등에 값을 대입한다.
let a = 3;
let b = 5;

// += : 좌변값에 우변값을 더한 값을 대입한다.
b += a;     // b = 5 + 3 = 8
console.log(b);

// -+ : 좌변값에 우변값을 뺀 값을 대입한다.
b -= a;     // b = 8 - 3 = 5
console.log(b);

// *= : 좌변값에 우변값을 곱한 값을 대입한다.
b *= 3;     // b = 5 * 3 = 15
console.log(b);   

// /= : 좌변값에 우변값을 나눈 값을 대입한다.
b /= 5;     // b = 15 / 5 = 3
console.log(b);

// %= : 좌변값에 우변값을 나눈 나머지 값을 대입한다.
b %= 2;     // b = 3 % 2 = 1
console.log(b); 

// &= : 좌변값에 우변값을 비트 AND 연산한 값을 대입한다.
b &= 1;     // b = 1 & 1 = 1
console.log(b);

// |= : 좌변값에 우변값을 비트 OR 연산한 값을 대입한다.
b |= 10;    // b = 1 | 10 = 11
console.log(b);

// ^= : 좌변값에 우변값을 비트 XOR 연산한 값을 대입한다.
b ^= 4;     // b = 11 ^ 4 = 15
console.log(b);

// <<= : 좌변값에 우변값만큼 좌측 시프트한 결과를 대입한다.
b <<= 1;    // b = 15 << 1 = 30
console.log(b);

// >>= : 좌변값에 우변값만큼 우축 시프트한 결과를 대입한다.
b >>= 1;    // b = 30 >> 1 = 15
console.log(b);

// >>>= : 좌변값에 우변값만큼 우측 시프트한 결과를 대입한다.(* Unsigned)
b >>>= 1;   // b = 15 >>> 1 = 7
console.log(b);

 

 

 기본형과 참조형에 따른 대입의 차이

기본형과 참조형을 취급하는데 있어 여러가지 차이가 있는데 그 중 하나가 대입이다.

 

 

기본형

 

다음의 예시를 보면, 변수 x 의 값을 y 에 대입할 경우 기본형은 값에 의한 전달을 한다. x 변수의 값과 같은 값이 y 변수에 담길 뿐 변수 x 가 다른 값으로 변경되어도 y 변수에 영향을 끼치지 않는다.

var x = 3;
var y = x;

x = 7;

console.log(x);      // 7
console.log(y);      // 3

 

 

참조형

 

var data1 = [0, 1, 2];
var data2 = data1;

data1[0] = 5;

console.log(data2);   // [ 5, 1, 2 ]

참조형의 경우 배열로 예시를 든 위의 코드를 보면 data1 배열의 첫번째 요소의 값을 변경할 경우 data2 의 요소값도 같이 변경된다. 이것은 참조형의 경우 값을 보관하고 있는 메모리 어드레스가 변수에 보관된다. 따라서 data2 에는 data1 의 배열 요소들의 값들이 저장되어 있는 메모리 어드레스 값이 대입되어 있다. 같은 메모리를 참조하고 있으므로 data1 을 통해서 변경하든 data2 를 통해서 변경하든 서로 같은 메모리를 변경하는 것이 된다.

 

 

 상수는 재대입할 수 없다.

'상수'는 다시 대입할 수 없는 변수이며 반드시 변경할 수 없다(=읽기 전용)는 의미는 아니다.

 

참조형의 배열의 경우를 예시로 들어보면,

const data = [1, 4, 6];

// 다시 대입할 경우 오류가 난다.
data = [3, 7, 1];

// 변수를 대입하는 것이 아닌 배열 요소의 값을 변경하는 것이다.
data[1] = 10;

data 변수에 새로운 배열을 대입하는 것은 오류가 아지만 data 요소의 값을 변경하는 것은 오류가 나지 않는다. data 변수에 들어있는 값은 배열 값이 저장된 메모리 어드레스 값이다. 따라서 배열의 첫번째 요소의 값을 변경해도 배열이 저장된 메모리 어드레스 값을 변경하는 것이 아니기 대문에 오류가 나지 않는다. 반대로 data 변수에 새로운 메모리 어드레스 값을 재대입하는 것은 오류가 난다.

 

 

 분할 대입

분할 대입이란 배열이나 객체를 분해하여 안의 요소/프로퍼티 값을 개별 변수로 분해하는 구문이다. 

 

배열의 분할 대입)

let data = [1, 30, 22, 45, 12];
let [x0, x1, x2, x3, x4] = data;

console.log(x0);
console.log(x1);
console.log(x2);
console.log(x3);
console.log(x4);

 

변수의 교환)

let x = 1;
let y = 2;

[x, y] = [y, x];

console.log(x);     // 2
console.log(y);     // 1

 

객체의 분할 대입)

배열과 달리 이름으로 프로퍼티를 개별 변수로 분해하기 때문에 순서는 상관없다.

let book = { title: 'Java', publish: '영화', price: 2000 };
let { price, title, memo = '없음' } = book;

console.log(price);   // 2000
console.log(title);   // Java
console.log(memo);    // 없음

 

중첩된 객체 분할 대입)

let book = {
    title: 'Java', publish: '영화', price: 2000,
    other: { x: 3, y: 6, z: 1 }
};
let { price, title, memo = '없음', other, other: {y} } = book;

console.log(price);   // 2000
console.log(title);   // Java
console.log(memo);    // 없음
console.log(other);   // { x: 3, y: 6, z: 1 }
console.log(y);       // 6

 

객체 분할 대입 시 변수의 별명 지정하기)

let other = { x: 3, y: 6, z: 1 };

let { x, y: tmpY, z: tmpZ } = other;

console.log(x);      // 3
console.log(tmpY);   // 6
console.log(tmpZ);   // 1

 

선언이 없는 대입)

let = object_T = {x: 3, y: 6, z: 1};

let x, y, z;
( { x, y, z } = object_T );

console.log(x);    // 3
console.log(y);    // 6
console.log(z);    // 1

 

 

 비교 연산자

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

// == : 좌/우변의 데이터값이 같은경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 == 5);

// =! : 좌/우변의 데이터값이 다를 경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 != 5);

// < : 좌변이 우변보다 작을 경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 < 5);

// <= : 좌변이 우변보다 같거나 작을 경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 <= 5);

// > : 좌변이 우변보다 클 경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 > 5);

// >= : 좌변이 우변보다 크거나 같을 경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 >= 5);

// === : 좌변과 우변의 값이 같고 데이터형도 같을 경우 true, 그렇지 않으면 false 을 반환한다.
console.log(5 === 5);

// !== : 좌변과 우변의 값이 같지 않을 경우 또는 데이터형이 다른 경우 true 를 반환한다.
console.log(5 !== 5);

// '조건식 ? 식1:식2' 에서 조건식이 참일 경우 식1, 거짓일 경우 식2를 취한다.
let x = (2 == 2) ? 1:0;
console.log(x);   // x = 1

 

+ 등가 연산자(==) 의 경우 데이터형에 따라 비교의 기준이 다르다.

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

var data1 = [1, 2, 3];
var data2 = [1, 2, 3];

// data1 과 data2 에 저장되는 값은 배열이 저장된 메모리 어드레스 값이다.
console.log(data1 == data2);  // false

 

 

 논리 연산자

복수의 조건식을 논리적으로 결합하여 그 결과를 true/false 값으로 변환한다. 일반적으로 비교 연산자와 조합해서 사용하면 더 복잡한 조건식을 표현할 수 있다.

let x = 1;
let y = 2;

// && : 좌변과 우변식 모두 참일 경우 true, 그렇지 않으면 false 을 반환한다.
console.log( x == 1 && y == 2 );   // true

// || : 좌변식과 우변식 중 어느식이든 참일 경우 true, 그렇지 않으면 false 을 반환한다.
console.log( x == 1 || y == x );   // true  

// ! : 식이 false 인 경우 true 를 반환한다. 식이 true 이면 false 을 반환한다.
console.log( !(x == 2) );   // true

 

 

 비트 연산자

비트 연산이란 정숫값을 2진수로 나타냈을 경우 각 행에 대해서 논리 계산을 실시하는 연산을 말한다.

// & : AND 연산
console.log(10&5);  // 1010 & 0101 = 0000 > 0

// | : OR 연산
console.log(10|5);  // 1010 | 0101 = 1111 > 15

// ^ : XOR 연산
console.log(10^12);  // 1010 ^ 1100 = 0110 > 6

// ~ : NOT 연산
console.log(~10);   // ~1010 = 0101 = -11

// << : 비트를 좌측으로 시프트한다.
console.log(10<<1);    // 20

// >> : 비트를 우측으로 시프트한다.
console.log(10>>1);    // 5

// >>> : 비트를 우측으로 시프트하되 좌측을 0으로 채운다.
console.log(10>>>1);   // 5

 

 

 delete 연산자

delete 연산자는 오페랜드에 지정한 변수나 배열 요소, 객체의 프로퍼티를 파기한다. 삭제에 성공했을 경우 delete 연산자는 true를 실패할 경우 false 을 반환한다.

 

㉮ 배열 요소를 delete 하는 경우

배열 요소를 삭제할 경우 해당하는 요소가 삭제되기만 할 뿐 요소가 앞으로 옮겨지는 것은 아니다. 인덱스 번호는 변하지 않는다.

var ary = [1, 2, 3];
console.log(delete ary[1]);    // true
console.log(ary);              // [ 1, <1 empty item>, 3 ]
console.log(ary[2]);           // 3

 

 

㉯ 객체 프로퍼티를 delete 하는 경우

객체의 프로퍼티를 삭제한 경우 프로퍼티 그 자체가 삭제될 뿐 프로퍼티가 참조하는 객체가 삭제되는 것은 아니다.

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

 

 

㉰ 명시적으로 선언된 변수를 delete 하는 경우

명시적으로 선언된 변수를 delete 할 수 없다.

var data1 = 1;
console.log(delete data1);     // false
console.log(data1);            // 1

 

단, 명시적으로 선언하지 않은 변수는 delete 할 수 있다.

data1 = 1;
console.log(delete data1);     // true

 

 

 typeof 연산자

typeof 연산자는 오퍼랜드에 지정한 변수/리터럴의 데이터형을 나타내는 문자열을 반환한다. 배열과 객체는 동일하게 object 로 인식한다.

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

var str = "dsd";
console.log(typeof str);     // string

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

var ary = [1, 2];
console.log(typeof ary);     // object

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