[JavaScript] 자바스크립트 연산자

 

---

 

목차

 

연산자 목록

산술 연산자

대입 연산자

증감 연산자

비교 연산자

논리 연산자

비트 연산자

기타 연산자

 

---

---

[연산자 목록]

우선순위	연산자	설명	결합 방향
1	()	묶음(괄호)	-
2	.	멤버 접근	왼쪽에서 오른쪽으로
	new	인수 있는 객체 생성	-
3	()	함수 호출	왼쪽에서 오른쪽으로
	new	인수 없는 객체 생성	오른쪽에서 왼쪽으로
4	++	후위 증가 연산자	-
	--	후위 감소 연산자	-
5	!	논리 NOT 연산자	오른쪽에서 왼쪽으로
	~	비트 NOT 연산자	오른쪽에서 왼쪽으로
	+	양의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
	-	음의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
	++	전위 증가 연산자	오른쪽에서 왼쪽으로
	--	전위 감소 연산자	오른쪽에서 왼쪽으로
	typeof	타입 반환	오른쪽에서 왼쪽으로
	void	undefined 반환	오른쪽에서 왼쪽으로
	delete	프로퍼티의 제거	오른쪽에서 왼쪽으로
6	**	거듭제곱 연산자	오른쪽에서 왼쪽으로
	*	곱셈 연산자	왼쪽에서 오른쪽으로
	/	나눗셈 연산자	왼쪽에서 오른쪽으로
	%	나머지 연산자	왼쪽에서 오른쪽으로
7	+	덧셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
	-	뺄셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
8	<<	비트 왼쪽 시프트 연산자	왼쪽에서 오른쪽으로
	>>	부호 비트를 확장하면서 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
	>>>	부호 비트를 확장하지 않고 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
9	<	관계 연산자(보다 작은)	왼쪽에서 오른쪽으로
	<=	관계 연산자(보다 작거나 같은)	왼쪽에서 오른쪽으로
	>	관계 연산자(보다 큰)	왼쪽에서 오른쪽으로
	>=	관계 연산자(보다 크거나 같은)	왼쪽에서 오른쪽으로
	instanceof	인스턴스 여부 판단	왼쪽에서 오른쪽으로
10	==	동등 연산자	왼쪽에서 오른쪽으로
	===	일치 연산자	왼쪽에서 오른쪽으로
	!=	부등 연산자	왼쪽에서 오른쪽으로
	!==	불일치 연산자	왼쪽에서 오른쪽으로
11	&	비트 AND 연산자	왼쪽에서 오른쪽으로
12	^	비트 XOR 연산자	왼쪽에서 오른쪽으로
13	|	비트 OR 연산자	왼쪽에서 오른쪽으로
14	&&	논리 AND 연산자	왼쪽에서 오른쪽으로
15	||	논리 OR 연산자	왼쪽에서 오른쪽으로
16	? :	삼항 연산자	오른쪽에서 왼쪽으로
17	=	대입 연산자 (=, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=)	오른쪽에서 왼쪽으로
18	...	전개	-
19	,	쉼표 연산자	왼쪽에서 오른쪽으로

 

---

[산술 연산자]

사칙 연산을 다루는 가장 기본적이며 많이 사용하는 연산자

두 개의 피연산자를 가지는 이항 연산자

산술 연산자	설명
+	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함.
-	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌.
*	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함.
/	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔.
%	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함.

---

 

[대입 연산자]

변수에 값을 대입할 때 사용하는 이항 연산자

대입 연산자	설명
=	왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함.
+=	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함.
-=	왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함.
*=	왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함.
/=	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함.
%=	왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함.

 

---

[증감 연산자]

피연산자를 1씩 증가, 감소시킬 때 사용하는 연산자

증감 연산자	설명
++x	먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함.
x++	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴.
--x	먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함.
x--	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴.

 

---

[비교 연산자]

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

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

 

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

 

<동등 연산자와 일치 연산자>

동등 연산자(==,equal)와 일치 연산자(===, strict equal)는 모두 두 개의 피연산자가 서로 같은지를 비교해준다.

두 연산자 모두 피연산자의 타입을 가리지는 않지만, 그 같음을 정의하는 기준이 조금 다르다.

 

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

 

---

[논리 연산자]

주어진 논리식을 판단하여 참(true)와 거짓(false)를 반환

&& 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연산자

! 연산자는 피연산자가 단 하나뿐인 단항 연산자

논리 연산자	설명
&&	논리식이 모두 참이면 참을 반환함. (논리 AND 연산)
||	논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산)
!	논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산)

 

<진리표(truth table)>

A	B	A && B	A || B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

 

---

[비트 연산자]

비트(bit) 단위로 논리 연산을 수행

비트 연산자	설명
&	대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산)
|	대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산)
^	대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산)
~	비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산)
<<	지정한 수만큼 비트를 전부 왼쪽으로 이동시킴. (left shift 연산)
>>	부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산)
>>>	지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨.

 

---

[기타 연산자]

<문자열 결합 연산자>

<script>
	var x = 3 + 4;					// 피연산자가 둘 다 숫자이면 덧셈 연산을 수행함.
	var y = "좋은 " + "하루 되세요!"	// 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.
	var z = 12 + "월"			// 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.
	document.write(x + "<br>");
	document.write(y + "<br>");
	document.write(z);
</script>

<결과>

7

좋은 하루 되세요!

12

<삼항 연산자>

피연산자를 세 개를 가지는 조건 연산자

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

반환값1 : 참

반환값2 : 거짓

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

 

<쉼표 연산자>

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

<script>
		// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.
		for (var i = 0, j = 9; i <= j; i++, j--) {
			document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");
		}
</script>

 

<delete 연산자>

피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element)등을 삭제해준다.

• 참(true) : 피연산자가 성공적으로 삭제되었을 때
• 거짓(false) : 피연산자를 삭제하지 못했을 경우

<script>
	var arr = [1, 2, 3];				// 배열 생성
	delete arr[2];						// 배열의 원소 중 인덱스가 2인 요소를 삭제함.
	document.write(arr + "<br>");		// [1, 2, ]
	// 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
	document.write(arr[2] + "<br>");
	// 배열의 요소를 삭제하는 것이지 배열의 크기까지 줄이는 것은 아님.
	document.write(arr.length);
</script>

 

<typeof 연산자>

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

피연산자가 단 하나뿐인 단항 연산자

값	typeof 연산자의 결괏값
숫자, NaN	"number"
문자열	"string"
true, false	"boolean"
null	"object"
undefined	"undefined"
함수	"function"
함수가 아닌 객체	"object"

 

<instancedof 연산자>

 

instancedof 연산자는 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를  확인해 준다.

• 참(true) : 피연산자가 특정 객체의 인스턴스이면
• 거짓(false) : 특정 객체의 인스턴스가 아니

<script>
	var str = new String("이것은 문자열입니다.");
	document.write(str + "<br>");
	
	document.write((str instanceof Object) + "<br>");
	document.write((str instanceof String) + "<br>");
	document.write((str instanceof Array) + "<br>");
	document.write((str instanceof Number) + "<br>");
	document.write(str instanceof Boolean);
</script>

<void 연산자>

피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만 반환한다.

void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 사용된다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>JavaScript Operators</title>
</head>

<body>

	<h1>void 연산자</h1>

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

</html>

 

 

 

https://devyihyun.tistory.com/159

[Javascript] 자바스크립트 제어문

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

코딩교육 티씨피스쿨