코밍이의 하루

[JS] 대입 연산자, 증감 연산자 본문

웹언어 공부/JS

[JS] 대입 연산자, 증감 연산자

코밍이 2021. 8. 10. 00:33

1. 개발 환경

구분 내용
사용 언어 HTML5, JS
개발환경 Visual Studio Code
참고 도서 [Do it] 자바스크립트 + 제이쿼리 입문
웹브라우저 Chrome

 

2. 주요 문법

1) 대입연산자

- 연산된 데이터를 변수에 저장할 때 사용

종류 풀이
A = B A = B
A += B A = A+B
A *= B A = A * B
A /= B A = A / B
A %= B A = A % B

 

2) 증감 연산자

기본형
① 변수의 값을 1만큼 감소시킨다.
- 변수--; 또는 --변수;

② 변수의 값을 1만큼 증가시킨다.
- 변수++; 또는 ++변수;
ex) var A = ++B;
- 먼저 B의 값을 1만큼 증가시키고 증가된 B의 값을 A에 대입한다.

ex2) var A = B++;
- B의 값을 A에 대입시키고 B의 값을 1만큼 증가시킨다.

 

3. 소스 코드 및 실행 결과

1) 대입연산자 

- dboperatr_c.html

 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 복합 대입 연산자 </title>
<script>
		var num1 = 10;
		var num2 = 3;
		num1 += num2;
		document.write(num1, "<br>"); // 13
		 
		num1 -= num2;
		document.write(num1, "<br>"); // 10
		 
		num1 *= num2;
		document.write(num1, "<br>"); // 30
		 
		num1 %= num2;
		document.write(num1, "<br>"); // 0 
</script>
</head>
<body>
</body>
</html>

dboperatr_c.html

- texttable_c.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 복합대입 연산자-테이블 만들기 </title>
<script>
	var str = "<table border='1'>";
	str += "<tr>";
	str += "<td>1</td><td>2</td><td>3</td>";
	str += "</tr>";
	str += "</table>";
	document.write( str );
</script>
</head>
<body>
</body>
</html>

texttable_c.html

 

2) 증감 연산자

- growth_c.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 증감 연산자 </title>
<script>
	var num1 = 10;
	var num2 = 20;
	var result;
	 
	num1--; //9
	document.write(num1, "<br>");

	num1++; //10
	document.write(num1, "<br>");    

	result = num2++;  //result: 20, num2: 21  
	document.write(result, "<br>"); 

	result = ++num2;  //result: 22, num2: 22  
	document.write(result, "<br>"); 
</script>
</head>
<body>
</body>
</html>

growth_c.html