[JavaScript] 변수/연산자 우선순위/비교 연산자
변수의 선언과 초기화
변수(variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 그 값이 변경될 수 있다.
자바스크립트에서는 var 키워드를 사용하여 변수를 선언한다.
자바스크립트에서는 선언되지 않은 변수를 사용하려고 하거나 접근하려고 하면 오류가 발생한다.
단, 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행한다.
🔔 예제)
var month; // month 라는 이름의 변수 선언
date = 25; // date 라는 이름의 변수를 묵시적으로 선언
선언된 변수는 나중에 초기화할 수도 있고, 선언과 동시에 초기화할 수도 있다.
🔔 예제)
var month; // 변수의 선언
var date = 25; // 변수의 선언과 동시에 초기화
month = 12; // 변수의 초기화
쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언하거나 초기화할 수도 있다.
🔔 예제)
var month, date; // 여러 변수를 한 번에 선언
var hours = 7, minutes = 15; // 여러 변수를 선언과 동시에 초기화
month = 10, date = 5; // 여러 변수를 한 번에 초기화
변수의 타입과 초기값
자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있다.
이렇게 한 변수에 다른 타입의 값을 여러 번 대입할 수는 있지만, 한 번 선언된 변수를 재선언할 수는 없다.
🔔 예제)
var num = 10; // 변수의 선언과 함께 초기화
num = [10, 20, 30]; // 배열 대입
var num; // 이 재선언문은 무시됨
배열(array)이란 여러 값들로 이루어진 하나의 집합을 의미한다.
자바스크립트에서 선언만 되고 초기화하지 않은 변수는 undefined 값을 갖는다.
🔔 예제)
var num; // undefined
num = 10; // 10
자바스크립트 연산자의 우선순위표
자바스크립트에서 연산자의 우선순위와 결합 방향은 다음과 같다.
| 우선 순위 | 연산자 | 설명 | 결합 방향 |
| 1 | () | 묶음(괄호) | - |
| 2 | . | 멤버 접근 | 왼쪽에서 오른쪽으로 |
| new | 인수 있는 객체 생성 | - | |
| 3 | () | 함수 호출 | 왼쪽에서 오른쪽으로 |
| 4 | ++ | 후위 증가 연산자 | - |
| -- | 후위 감소 연산자 | - | |
| 5 | ! | 논리 NOT 연산자 | 오른쪽에서 왼쪽으로 |
| ~ | 비트 NOT 연산자 | 오른쪽에서 왼쪽으로 | |
| + | 양의 부호(단항 연산자) | 오른쪽에서 왼쪽으로 | |
| - | 음의 부호(단항 연산자) | 오른쪽에서 왼쪽으로 | |
| ++ | 전위 증가 연산자 | 오른쪽에서 왼쪽으로 | |
| -- | 전위 감소 연산자 | 오른쪽에서 왼쪽으로 | |
| typeof | 타입 반환 | 오른쪽에서 왼쪽으로 | |
| void | undefined 반환 | 오른쪽에서 왼쪽으로 | |
| delete | 프로퍼티의 제거 | 오른쪽에서 왼쪽으로 | |
| 6 | ** | 거듭제곱 연산자 | 오른쪽에서 왼쪽으로 |
| * | 곱셈 연산자 | 왼쪽에서 오른쪽으로 | |
| / | 나눗셈 연산자 | 왼쪽에서 오른쪽으로 | |
| % | 나머지 연산자 | 왼쪽에서 오른쪽으로 | |
| 7 | + | 덧셈 연산자(이항 연산자) | 왼쪽에서 오른쪽으로 |
| - | 뺄셈 연산자(이항 연산자) | 왼쪽에서 오른쪽으로 | |
| 8 | << | 비트 왼쪽 시프트 연산자 | 왼쪽에서 오른쪽으로 |
| >> | 부호 비트를 확장하면서 비트 오른쪽 시프트 | 왼쪽에서 오른쪽으로 | |
| 9 | < | 관계 연산자(보다 작은) | 왼쪽에서 오른쪽으로 |
| <= | 관계 연산자(보다 작거나 같은) | 왼쪽에서 오른쪽으로 | |
| > | 관계 연산자(보다 큰) | 왼쪽에서 오른쪽으로 | |
| >= | 관계 연산자(보다 크거나 같은) | 왼쪽에서 오른쪽으로 | |
| instanceof | 인스턴스 여부 판단 | 왼쪽에서 오른쪽으로 | |
| 10 | == | 동등 연산자 | 왼쪽에서 오른쪽으로 |
| === | 일치 연산자 | 왼쪽에서 오른쪽으로 | |
| != | 부등 연산자 | 왼쪽에서 오른쪽으로 | |
| 11 | & | 비트 AND 연산자 | 왼쪽에서 오른쪽으로 |
| 12 | ^ | 비트 XOR 연산자 | 왼쪽에서 오른쪽으로 |
| 13 | | | 비트 OR 연산자 | 왼쪽에서 오른쪽으로 |
| 14 | && | 논리 AND 연산자 | 왼쪽에서 오른쪽으로 |
| 15 | || | 논리 AND 연산자 | 왼쪽에서 오른쪽으로 |
| 16 | ? : | 삼항 연산자 | 오른쪽에서 왼쪽으로 |
| 17 | = | 대입 연산자 (=, +=, 0=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=) |
오른쪽에서 왼쪽으로 |
| 18 | ... | 전개 | - |
| 19 | , | 쉼표 연산자 | 왼쪽에서 오른쪽으로 |
위의 표에서 나온 순서대로 우선순위가 빠른 연산자가 가장 먼저 실행된다.
또한, 같은 우선순위를 가지는 연산자가 둘 이상 있을 때에는 결합 순서에 따라 실행 순서가 결정된다.
💡 위의 표를 모두 외우기 보다는 필요할 때마다 참조하는 것이 좋다.
비교 연산자(comparison operator)
비교 연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다.
비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.
| 비교 연산자 | 설명 |
| == | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함 |
| === | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함 |
| != | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함 |
| !== | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함 |
| > | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함 |
| >= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함 |
| < | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함 |
| <= | 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함 |
자바스크립트에서 비교 연산자는 피연산자의 타입에 따라 두 가지 기준으로 비교를 진행한다.
- 피연산자가 둘 다 숫자면, 해당 숫자를 서로 비교한다.
- 피연산자가 둘다 문자열이면, 문자열의 첫 번째 문자부터 알파벳 순서대로 비교한다.
🔔 예제)
var x = 3, y = 5;
var a = "abc", b = "bcd";
document.write((x > y) + "<br>"); // y의 값이 x의 값보다 크므로 false
document.write((a <= b) + "<br>"); // 알파벳 순서상 'a'가 'b'보다 먼저 나오므로 'a'가 'b'보다 작음.
document.write(x < a); // x의 값은 숫자이고 a의 값은 문자열이므로 비교할 수 없음.
위의 세 번째 연산에서 변수x의 값은 숫자이고, 변수 a의 값은 문자열이다.
비교 연산자 < 는 x의 값이 a의 값보다 작을 때만 참을 반환하고, 나머지 경우에는 전부 거짓을 반환하는 연산자이다.
따라서 타입이 서로 달라 비교할 수 없는 경우에는 참의 조건을 만족하게 하지 못하므로, 언제나 거짓(false) 만을 반환하게 된다.
동등 연산자와 일치 연산자
동등 연산자(==, equal)와 일치 연산자(===, steict equal)는 모두 두 개의 피연산자가 서로 같은지를 비교해 준다.
두 연산자 모두 피연산자의 타입을 가리지는 않지만, 그 같음을 정의하는 기준이 조금 다르다.
동등 연산자(==)는 두 피연산자의 값이 서로 같으면 참(true)을 반환한다.
이때 두 연산자의 타입이 서로 다르면, 비교를 위해 강제로 타입을 같게 변환한다.
하지만 일치 연산자(===)는 타입의 변화 없이 두 피연산자의 값이 같고, 타입도 같아야만 참(true)을 반환한다.
🔔 예제)
var x = 3, y = '3', z = 3;
document.write((x == y) + "<br>"); // x와 y의 타입이 서로 다르므로 타입을 서로 같게 한 후 비교를 하므로 true
document.write((x === y) + "<br>"); // x와 y의 타입이 서로 다르므로 fasle
document.write(x === z); // x와 z의 값과 타입이 모두 같으므로 true
부등 연산자(!=)와 불일치 연산자(!==)는 각각 동등 연산자와 일치 연산자의 비교와 정확히 반대로 동작한다.