[Javascript] 자바스크립트 연산자 - 대입, 증감, 논리

산술 연산자(arithmetic operator)

• 산술 연산자는 사칙연산을 다루는 기본적인 연산자로, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.

var x = 10, y = 4;

document.write(x + y);     // 14  // + : 더하기
document.write(x - y);     // 6   // - : 빼기
document.write(x * y);     // 40  // * : 곱하기
document.write(x / y);     // 2.5 // / : 나누기
document.write(x % y);     // 2   // % : 나눈 후 나머지

 

대입 연산자(assignment operator)

• 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.

var x = 10;   // = : 대입

document.write(x += 5;)     // 15 // += : 더한 후 왼쪽 피연산자에 대입
document.write(x -= 5;)     // 5  // -= : 뺀 후 왼쪽 피연산자에 대입
document.write(x *= 5;)     // 50 // *= : 곱한 후 왼쪽 피연산자에 대입
document.write(x /= 5;)     // 1  // /= : 나눈 후 왼쪽 피연산자에 대입
document.write(x %= 5;)     // 0  // %= : 나누고 나머지를 왼쪽 피연산자에 대입

y -= 5;       // y = y - 5와 같은 표현
z =- 5;       // z = -5와 같은 표현으로 단순 대입

 

증감 연산자(increment and decrement operator)

• 증감 연산자는 피연산자를 1씩 증가 혹은 감소시킬 때 사용하는 연산자다.
• ++ -- 가 피연산자 앞에 위치하면 먼저 피연산자의 값을 1씩 증감시키고 연산을 진행하고, 피연산자 뒤에 위치하면 연산을 먼저 수행하고 피연산자의 값을 1씩 증감한다.

var x = 10, y = 10, z = 10;

document.write(++x - 3);     // x의 값을 우선 1 증가시킨 후에 3을 뺌
document.write(x);           // 11

document.write(y++ - 3);     // 먼저 y에서 3을 뺀 후에 y의 값을 1 증가
document.write(y);           // 11

var w = z-- + 5 + --z;       // z = 8, w = 23
//      15 + 8

 

비교 연산자(comparison operator)

• 비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다.

var x = 1, y = 2, z = 3;

document.write(x == y);   // false // 값이 같으면 참을 반환
document.write(x != y);   // true  // 값이 같지 않으면 참을 반환

document.write(x === y);  // false // 값과 타입이 같으면 참을 반환
document.write(x !== y);  // true  // 값과 타입이 다르면 참을 반환

document.write(x > y);    // false // 왼쪽이 오른쪽보다 크면 참을 반환
document.write(x >= y);   // false // 왼쪽이 오른쪽보다 크거나 같으면 참을 반환

document.write(x < y);    // true  // 왼쪽이 오른쪽보다 작으면 참을 반환
document.write(x <= y);   // true  // 왼쪽이 오른쪽보다 작거나 같으면 참을 반환

• 피연산자가 둘 다 숫자면 숫자 크기를 비교하고, 둘 다 문자열이면 문자열의 첫번째 문자부터 알파벳 순서대로 비교한다. 

var x = 3, y = 5;
var a = "abc", b = "bcd";

document.write(x > y);  // y의 값이 x의 값보다 크므로 거짓
document.write(a <= b); // 알파벳 순서상 a가 b보다 먼저 나오므로 a가 b보다 작음
document.write(x < a);  // 숫자와 문자로 타입이 달라 비교할 수 없으므로 항상 거짓

• 동등 연산자 == 는 두 피연산자의 타입이 서로 다르면 비교를 위해 강제로 타입을 같게 변환하지만, 일치 연산자 === 는 타입의 변환 없이 두 피연산자의 값이 같고 타입도 같아야만 참을 반환한다.

var x = 3, y = '3', z = 3;

document.write(x == y);    // x와 y 타입을 서로 같게 한 후 비교하므로 true
document.write(x === y);   // x와 y 타입이 서로 다르므로 false
document.write(x === z);   // x와 z은 값과 타입이 모두 같으므로 true

• NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다.

NaN === NaN    // false
isNaN(NaN)     // true

 

논리 연산자(logical operator)

• 논리 연산자는 주어진 논리식을 판단하여 참(true)과 거짓(false)을 반환한다.

var x = true, y = false;

document.write(x && y); // false // AND 연산 - 모두 참이면 true
document.write(x || y); // true  // OR 연산 - 하나라도 참이면 true 
document.write(!x);       // false // NOT 연산- 참이면 false, 거짓이면 true

• 자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아니라, 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다.
• 논리곱 연산자 &&와 논리합 연산자 ||는 논리 평가를 결정한 피연산자의 평가 결과를 그대로 반환하는데 이를 단축 평가(Short-Circuit evaluation)라 부른다.

https://poiemaweb.com/js-type-coercion

• AND 연산자는 왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 리턴한다.
• OR 연산자는 왼쪽 피연산자가 falsy값일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 왼쪽 피연산자를 리턴한다.

console.log(null && undefined); // null // false && false 
console.log('0' && NaN);        // NaN  // true && false

console.log(0 || true);         // true // false || true
console.log({} || 123);         // {}   // true || true
console.log([] || '');          // []   // true || false

 

비트 연산자(bitwise operator)

• 비트 연산자는 논리 연산자와 비슷하지만 비트(bit) 단위로 논리 연산을 수행하거나, 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때 사용한다.

var x = 15, y = 8, z = 15;

document.write(&z);     // AND 연산 - 대응되는 비트가 모두 1이면 1 반환
document.write(|z);     // OR 연산 - 대응되는 비트 중 하나라도 1이면 1 반환
document.write(^z);     // XOR 연산 - 대응되는 비트가 서로 다르면 1 반환
document.write(~z);     // NOT 연산 - 비트가 1이면 0으로, 0이면 1로 반전

document.write(x << 1);   // << 연산 - 지정수만큼 비트 왼쪽 이동
document.write(y >> 1);   // >> 연산 - 부호유지와 지정수만큼 비트 오른쪽 이동
document.write(y >>> 1);  // >>> 연산 - 지정수만큼 비트 오른쪽 이동 새비트는 모두 0

http://www.tcpschool.com/javascript/js_operator_bitwise

 

기타 연산자

문자열 결합 연산자

• 자바스크립트에서 덧셈 + 연산자는 피연산자가 둘 다 숫자이면 숫자 덧셈을 수행하고, 피연산자가 하나라도 문자열이면 문자열 결합을 수행한다.
• 피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행한다.

var x = 3 + 4;                   // 피연산자가 둘 다 숫자이면 덧셈 연산
var y = "좋은 " + "하루 되세요!"     // 피연산자가 둘 다 문자열이면 문자열 결합 연산
var z = 12 + "월"                 // 피연산자가 하나라도 문자열이면 문자열 결합 연산

삼항 연산자(ternary operator)

• 물음표 ? 앞의 표현식에 따라 결괏값이 참이면 반환값 1을 반환하고 결괏값이 거짓이면 반환값 2를 반환한다.
• 삼항 연산자는 짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 만들 수 있다.

표현식 ? 반환값1 : 반환값2

var x = 3, y = 5;
var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환
document.write("둘 중에 더 큰 수는 " + result + "입니다");

쉼표 연산자

• 쉼표 연산자를 for 문에서 사용하면 루프마다 여러 변수를 동시에 갱신할 수 있다.

/* 루프마다 i의 값은 1씩 증가하고 동시에 j의 값은 1씩 감소 */

for (var i = 0, j = 9; i <= j; i++, j--) {
    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");
}

delete 연산자

• delete 연산자는 피연산자인 객체, 객체의 속성(property) 또는 배열의 요소(element) 등을 삭제해준다.
• 피연산자가 성공적으로 삭제되었을 경우에는 참(true)을 반환하고, 삭제하지 못했을 경우에는 거짓(false)을 반환한다.

var arr = [1, 2, 3];          // 배열 생성
delete arr[2];                // 배열의 원소 중 인덱스가 2인 요소를 삭제

document.write(arr);          // [1, 2, ]
document.write(arr[2]);       // undefined - 배열에 빈자리가 생김
document.write(arr.length);   // 3 - 배열 요소 삭제만 배열 길이 줄이지 않음

typeof 연산자

• typeof 연산자는 피연산자의 타입을 반환한다.

typeof "문자열"          // string
typeof 10              // number
typeof NaN             // number
typeof false           // boolean
typeof Symbol()        // symbol

typeof undefined       // undefined
typeof null            // object - null

typeof new Date()      // object - 함수가 아닌 객체
typeof []              // object
typeof {}              // object
typeof function () {}  // function

• 주의해야 할 것은 typeof 연산자로 null 값을 연산해 보면 null이 아닌 “object”를 반환한다는 것이다. 따라서 null 타입을 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용하도록한다.

var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

instanceof 연산자

• instanceof 연산자는 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인해 준다.
• 피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환한다.

var str = new String("이것은 문자열이다");

str instanceof Object;  // true
str instanceof String;  // true
str instanceof Array;   // false
str instanceof Number;  // false
str instanceof Boolean; // false

void 연산자

• void 연산자는 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환한다.
• void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용된다.

<a href="javascript:void(0)">이 링크는 동작하지 않습니다</a>

<a href = "javascript: void(document.body.style.backgroundColor = 'yellow')">이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다</a>

인스턴스 생성 연산자

var today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

 

연산자 우선순위

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/