티스토리 뷰

Programming/JavaScript, jQuery

[javascript 4강] 연산자

국브 2019. 2. 10. 00:00

 [javascript 4강] 연산자



이번글에서는 자바스크립트에서 연산자를 알아보겠습니다.

연산자는 덧샘, 뻇샘, 곱하기, 비교, 등등 수학에서 이미 배웠던내용이며

다른 개발언어와 비슷하거나 같기때문에 금방이해하실수 있습니다.

연산자에 들어가기전 이전글을 남겨 놓습니다.


 이전 글 링크 


2019/02/07 - [Programming/JavaScript, jQuery] - [javascript 1강] 자바스크립트 개요 및 개발환경설정


2019/02/09 - [Programming/JavaScript, jQuery] - [javascript 2강] 입출력 및 기본문법


2019/02/09 - [Programming/JavaScript, jQuery] - [javaScript 3강] 변수와 자료형




 1. 할당연산자


할당연산자는 변수에 값을 넣어주는 것을 의미합니다. 

즉 변수에 대입을 하는것입니다.

평소에 변수에 값을 넣는것이 모두 할당연산자를 사용하는것 입니다.

할당연산자는 다른개발언어에서도 사용되는 연산자 입니다.


 작성 방법 


var 변수 = 값; 



 예제  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it;
            it = 123;
 
            console.log(it);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


it 라는 변수를 생성하고 it 라는 변수에 123이라는 값을 할당연산자 (=) 를 사용하여 할당한후

console.log(it); 출력결과 123 이라는 값이 출력된것을 확인할수 있습니다.




 2. 사칙연산자 및 나머지연산자


사칙연산자는 덧샘, 뺄셈, 곱셈, 나눗셈 이고 나머지연산자는 어떤수를 나누었을때 나오는 값을 구하는것입니다.

이또한 다른개발언어에서 모두 사용되고 있는 연산자 입니다.


 작성 방법 


더하기


변수+변수2;


빼기


변수-변수2;


곱하기


변수*변수2;


나누기


변수/변수2;


나머지값


변수%변수2;



 예제 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it = 10;
            var it2 = 5;
            
            console.log(it + it2);
            console.log(it - it2);
            console.log(it * it2);
            console.log(it / it2);
            console.log(it % it2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


변수 it 에 10 의 값과 변수 it2 에 5 값을 할당해 주었습니다.

 console.log(it + it2); 출력결과 10 + 5 가되어 15가 출력되는것을 확인할수 있고,

 console.log(it - it2); 출력결과 10 - 5 가되어 5가 출력되는것을 확인할수 있고,

 console.log(it * it2); 출력결과 10 * 5 가되어 50이 출력되는것을 확인할수 있고,

 console.log(it / it2); 출력결과 10 / 5 가되어 2가 출력되는것을 확인할수 있고,

 console.log(it % it2); 출력결과 10 / 5 의 나머지값 즉 0 이 출력됩니다.




 3. 자동증감 연산자


자동연산자도 다른 개발언어에서도 사용하고 있는 연산자입니다.

a 변수를 +1 을 하려면 식으로는 a+1 이라고 입력해야하지만..

자동증감자 연산자를 사용하면 ++a 라고만 입력하면 되는것입니다.

즉 간결하게 작성할수 있게됩니다.

자동증감 연산자에서는 전위증가 와 후위증가가 있습니다.

전위와 후위의 내용은 중요하기때문에 꼭알고 넘어가셔야 합니다.

전위증가 와 후위증가는 이전글에 작성해둔것이 있어 이전글을 남기겠습니다.


 이전 글 링크 


2016/07/06 - [Programming/개발자 팁] - [java,자바] 전위 후위 증감연산자 차이 (++x, x++)



 작성 방법 


전위 증가


++변수


전위 감소


--변수


후위 증가


변수++


후위 감소


변수--



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it = 10;
           
            console.log(++it);
            console.log(--it);
            console.log(it++);
            console.log(it--);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 



변수 it 에 10 의 값을 할당해 주었습니다.

console.log(++it); 에서 ++it 값을 풀어서 적어보면 it = 10 + 1 입니다. 그결과 11이 출력됩니다.

console.log(--it); 에서 --it 값을 풀어서 적어보면 it = 11 - 1 입니다. 그결과 10이 출력됩니다.

console.log(it++); 에서 it++ 값을 풀어서 적어보면 it= 10 + 1 입니다. 하지만! 그결과 10이 출력됩니다.

후위증감 연산자 앞에 있는 함수나 연산을 먼저시행하고.. 모든것을 실행한후에 후위증감 연산을 시행합니다.

즉! console.log(it) 를 먼저 실행한후에.. it= 10 + 1 를 실행한것입니다.

그래서 출력결과는 10이 나오지만 현재 it 변수의 값은 11입니다.

console.log(it--); 에서 it-- 값을 풀어서 적어보면 it= it - 1 입니다. 하지만! 그결과 11이 출력됩니다.

즉! console.log(it) 를 먼저 실행한후에.. it= 10 - 1 를 실행한것입니다.

그래서 출력결과는 11이 나오지만 현재 it 변수의 값은 10입니다.




 4. 비교연산자


비교연산자 또한 많은 언어에서 사용하고 있는 연산자입니다.

어떤게 큰것인지? 어떤게 크거나 작은것인지? 등 비교를 하기위한 연산자 입니다.


 작성 방법 


변수<변수2

변수>변수2

변수<=변수2

변수>=변수2

변수==변수2

변수!=변수2



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it = 10;
            var it2 = 5;
            
            console.log(it < it2);
            console.log(it > it2);
            console.log(it <= it2);
            console.log(it >= it2);
            console.log(it == it2);
            console.log(it != it2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 


변수 it 에 10 의 값과 변수 it2 에 5 값을 할당해 주었습니다.

 console.log(it < it2); 10 < 5 는 거짓이기 때문에 false 의 값이 출력됩니다. (10은 5보다 작은가?)

 console.log(it > it2); 10 > 5 는 참이기 때문에 true 의 값이 출력됩니다. (10은 5보다 큰가?)

 console.log(it <= it2); 10 <= 5 는 거짓이기 때문에 false 의 값이 출력됩니다. (10은 5보다 작거나 같은가?)

 console.log(it >= it2); 10 >= 5 는 참이기 때문에 true 의 값이 출력됩니다. (10은 5보다 크거나 같은가?)

 console.log(it == it2); 10 == 5 는 거짓이기 때문에 false 의 값이 출력됩니다. (10은 5와 같은가?)

 console.log(it != it2); 10 != 5 는 참이기 때문에 true 의 값이 출력됩니다. (10은 5와 다른가?)

 



 5. 논리 연산자


논리연산자도 많은 언어에서 사용하고있습니다.

비교를 할때 "또는" 이나 "~와~는" 과같은 뜻으로 쓰입니다.


 작성 방법 


또는 (OR)


변수||변수2 


~와~는 (AND)


변수&&변수2



 예제  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it = true;
            var it2 = false;
            
            console.log(it && it2);
            console.log(it || it2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


it 변수에 true의 값을 할당하고, it2 변수에 false 의 값을 할당하였습니다.

console.log(it && it2); 에서는 변수 it, it2 모두 true 가 아니기 떄문에 false 라는 값이 나왔습니다.

console.log(it || it2); 에서는 하나라도 참이면 true 이기때문에 it 변수의 값이 true 여서 true 라는 값이 나왔습니다.




 6. 부정 연산자


부정연산자는 현재의 상태를 부정하는것입니다. 

만약 true 라는값이 있다면 false 로, false 라는값이 있다면 true 로 나오게 됩니다.


 작성 방법 

 

!변수



 예제  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it = true;
            
            console.log(!it);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


it 변수의 값은 true 로 할당되어 있습니다.

console.log(!it); 에서 it 값의 반대값인 false 를 출력하는것을 확인할수 있습니다.




 7. 복합대입 연산자


사칙연산자 및 나머지연산자와 할당연산자를 합쳐서 사용하는 연산자 입니다.

복합대인 연산자 또한 최대한 간단하게 입력하기 위해서 사용됩니다.


 작성 방법 


변수 += 변수 or 값

변수 -= 변수 or 값

변수 *= 변수 or 값

변수 /= 변수 or 값

변수 %= 변수 or 값



 예제 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        
            //숫자형
            var it = 10;
            var it2 = 5;
            
            console.log(it += it2);
            console.log(it -= it2);
            console.log(it *= it2);
            console.log(it /= it2);
            console.log(it %= it2);
            
        </script>
    </head>
    <body>
    </body>
</html>
cs


 실행결과 및 설명 

 


변수 it 에 10 의 값과 변수 it2 에 5 값을 할당해 주었습니다.

 console.log(it += it2); 에서는 it = it + it2 라는 식의 함축적 의미를 지니고 있습니다. 10 + 5 = 15 이기때문에 15의 값이 출력되는것을 확인할수 있습니다.

 console.log(it -= it2); 에서는 it = it - it2 라는 식의 함축적 의미를 지니고 있습니다.  위의 식으로 인해 it 의 현재값은 15입니다. 즉 15 - 5 = 10 이기때문에 10의 값이 출력됩니다.

 console.log(it *= it2); 에서는 it = it * it2 라는 식의 함축적 의미를 지니고 있습니다. 위의 식으로 인해 it 의 현재값은 10입니다. 즉 10 * 5 = 50 이기때문에 50의 값이 출력됩니다.

 console.log(it /= it2); 에서는 it = it / it2 라는 식의 함축적 의미를 지니고 있습니다. 위의 식으로 인해 it 의 현재값은 50입니다. 즉 50 / 5 = 10 이기때문에 10의 값이 출력됩니다.

 console.log(it %= it2); 에서는 it = it % it2 라는 식의 함축적 의미를 지니고 있습니다. 위의 식으로 인해 it 의 현재값은 10입니다. 즉 10 / 5 의 나머지값인 0 이 출력됩니다.




 글을 마치며..


이번글을 통해 자바스크립트 연산자에 대해서 알아보았습니다.

모두 수고하세요!


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 



저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[javascript 6강] 조건문(제어문)  (0) 2019.02.11
[javascript 5강] 배열  (0) 2019.02.10
[javascript 3강] 변수와 자료형  (0) 2019.02.09
[javascript 2강] 입출력 및 기본문법  (0) 2019.02.09
[javascript 1강] 자바스크립트 개요 및 개발환경설정  (0) 2019.02.07
댓글