티스토리 뷰

[JQUERY]자바스크립트

jQuery 008. 증감연산자 ++,--

가산동 2018. 8. 4. 13:46

증감연산자에 대해 알아보자. 아래는 이번 시간에 알아볼 예제와 결과 화면이다.


증감연산자는 반복적으로 증가하거나 감소하는 작업을 할때 사용하면 편리하다. 특히 반복문에 사용된다.

아래는 예제 소스이다. 


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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
        //증감연산자
        
        //a++
        var a = 10;
        document.write("a++ = " ,a++ ,"<br/>");
        document.write("a++ 연산 이후의 a 값" ,"<br/>");
        document.write("a = " ,a ,"<br/>");
        
        //a--
        var a = 10;
        document.write("a-- = " ,a-- ,"<br/>");
        document.write("a-- 연산 이후의 a 값" ,"<br/>");
        document.write("a = " ,a ,"<br/>");
        
        //++a
        var a = 10;            
        document.write("++a =" ,++a ,"<br/>");
        document.write("++a 연산 이후의 a 값" ,"<br/>");
        document.write("a " ,++a ,"<br/>");
        
        //--a
        var a = 10;
        document.write("--a =" ,--a ,"<br/>");
        document.write("--a 연산 이후의 a 값" ,"<br/>");
        document.write("--a " ,--a ,"<br/>");
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs


위 예제를 하나씩 조개서 보도록 하겠다. 




//a++

var a = 10;

document.write("a++ = " ,a++ ,"<br/>");

document.write("a++ 연산 이후의 a 값" ,"<br/>");

document.write("a = " ,a ,"<br/>");


a라는 변수에 10을 대입하면 a는 10인 상태다. 그뒤 document.wirte 에서 a++ 연산을 진행하였다. 

결과를 보면, 당장은 10인걸 볼수 있다. 그 이후에 a 의 값을 다시 확인하면 11로 증가한 것을 볼 수 있다.


변수 이름 뒤에 ++ 이나 --를 붙여 연산하는 경우를 후위 연산이라 한다. 다르게 앞에서 ++ 이나 -- 를 붙여 연산하는 경우를 전위 연산이라 한다. 위 예제의 경우 '후위 연산' 이기 때문에 a++ 연산을 하며 출력을 하면 a의 값에 변화가 없지만, 출력 이후에는 a의 값을 증가 시키기 때문에 값이 11이 된다. 





//a--

var a = 10;

document.write("a-- = " ,a-- ,"<br/>");

document.write("a-- 연산 이후의 a 값" ,"<br/>");

document.write("a = " ,a ,"<br/>");


똑같이 a에 10을 대입한뒤 a-- 연산을 진행하면 당장은 a의 값은 10이지만 이후에 다시 a의 값을 출력해보면

값이 9로 출력되는 것을 볼 수있다.



//++a

var a = 10;

document.write("++a =" ,++a ,"<br/>");

document.write("++a 연산 이후의 a 값" ,"<br/>");

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


이번엔 전위 연산이다. '전위 연산'은 후위 연산과는 달리 먼저 증감 시킨다. 

위 후위 연산과는 다르게 처음부터 증가되어 값이 11이 된것을 볼 수 있다. 

다음 라인에서 증감연산을 한번더 진행했다. 그래서 결과는 12가 된것을 볼 수 있다. 



//--a

var a = 10;

document.write("--a =" ,--a ,"<br/>");

document.write("--a 연산 이후의 a 값" ,"<br/>");

document.write("--a " ,--a ,"<br/>");


똑같이 전위 연산을 활용해서 --연산을 하였다. a의 값이 10에서 9, 9에서 8로 감소하는 것 을 볼 수있다.


아래는 위에서 사용한 문서편지기 다운및 설치방법 링크

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기

[[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기




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

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 010. 함수 function ,매개변수(파라미터)  (0) 2018.09.11
jQuery 009. 함수 function  (0) 2018.09.10
jQuery 007. 복합연산자 += , -= , *= , /= , %=  (0) 2018.07.26
jQuery 006. 연산자 +-*/%  (0) 2018.07.26
jQuery 005. 배열 list  (0) 2018.07.24
댓글