[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)을 반환한다.

비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.

 

비교 연산자	설명
==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함
===	왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함
!=	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함
!==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함
>	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함
>=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함
<	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함
<=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함

 

자바스크립트에서 비교 연산자는 피연산자의 타입에 따라 두 가지 기준으로 비교를 진행한다.

 

1. 피연산자가 둘 다 숫자면, 해당 숫자를 서로 비교한다.
2. 피연산자가 둘다 문자열이면, 문자열의 첫 번째 문자부터 알파벳 순서대로 비교한다.

🔔 예제)

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

 

부등 연산자(!=)와 불일치 연산자(!==)는 각각 동등 연산자와 일치 연산자의 비교와 정확히 반대로 동작한다.