자바스크립트

연산자

연산자는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있습니다.

빼기, 더하기, 곱하기, 나누기, 비교 등을 하는 일련의 작업을 연산작업이라고합니다.

연산자의 종류

산술 연산자

산술 연산자에는 산수 시간에 배운 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다.

쉽게 말해, 산술 연산자는 사칙 연산을 수행합니다.

산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야합니다.

산술 연산자 종류와 기본형

종류	기본형	설명
+	A+B	더하기
-	A-B	빼기
*	A*B	곱하기
/	A/B	나누기
%	A%B	나머지

문자 결합 연산자

문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터입니다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.

기본형
    문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
    ex) "do it" + "javascript" = "do it javascript";

    문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
    ex) "100" + 200 = "100200;"

다음은 t1, t2, t3, t4라는 변수에 문자와 숫자 데이터를 각각 넣고 하나의 문자 데이터로 결합하는 예제입니다.

<script>
    var t1 = "학교종이";
    var t2 = "땡땡땡";
    var t3 = 8282;
    var t4 = "어서 모이자";
    var result;

    result = t1 + t2 + t3 + t4;
    document.write(result); // "학교종이 땡땡땡 8282 어서 모이자"
</script>

대입 연산자

대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용합니다. 복합 대입 연산자(+=,-=,*=,/\,%=)는 산술 연산자와 대입 연산자가 복합적으로 적영된 것을 말합니다.

대입 연산자의 종류

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

대입 연산자의 예제입니다.

<script>
    var num1 = 10;
    var num2 = 3;

    num1 += num2;       //num1 = num1(10) + num2(3);
    document.writhe(num1, "<br>");   //13
    var result;

    num1 -= num2;       //num1 = num1(13) - num2(3);
    document.write(num1, "<br>");    //10

    num1 *= num2;       //num1 = num1(10) * num2(3);
    document.write(num1,  "<br>");   //30

    num1 %= num2;       //num1 = num1(30) % num2(3);
    document.write(num1,  "<br>");   //0
</script>

    결과화면
    13
    10
    30
    0

다음은 여러 개의 문자형 데이터로 저장된 HTML태그를 복합 대입 연산자를 이용하여 하나의 문자로 결합한 다음 document.writhe(str);을 이용하여 화면에 출력하는 예제입니다.

<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>

결과화면
    
        
            1
            2
            3

증감 연산자

증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있습니다. 증감 연산자는 앞에서 배운 연산자와는 달리 피연산자가 한 개만 필요한 단항 연산자입니다. 증감 연산자는 변수의 어느 위치에 오는가에 따라 결과값이 달라집니다.

기본형
    1. 변수의 값을 1만큼 감소시킵니다.
    변수--; 또는 --변수;
    
    2. 변수의 값을 1만큼 증가시킵니다. 
    변수++; 또는 ++변수;


    1. 먼저 B의 값이 1 증가하고 증가된 B값을 A에 대입합니다.
    var A = ++B;

    2. 먼저 B값을 A에 대입하고 B값을 1 증가시킵니다.
    var A = B++;

다음은 증감 연산자를 사용해 변수에 저장된 숫자를 증가하거나 감소하여 문서를 출력하는 예제입니다.

<script>
   var num1 = 10;
   var num2 = 20;
   var result;

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

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

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

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

결과화면
9           //num1--;를 먼저 계산하므로 9가 출력됩니다.
10
20
22

비교 연산자

비교 연산자는 두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자입니다. 연산된 결괏값은 true(참) 또는 false(거짓)로 논리형 데이터를 반환합니다.

비교 연산자의 종류

종류	설명	비고
A > B	A가 B보다 크다.
A < B	A가 B보다 크다.
A >= B	A가 B보다 크거나 같다.
A <= B	A가 B보다 작거나 같다.
A == B	A와 B는 같다.	숫자를 표기할 경우 자료형(type)은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환합니다. 가령, 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 true를 반환합니다.
A != B	A와 B는 다르다.	숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 다르면 true를 반환합니다. 가령, 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 A!=B에 대해 false를 반환합니다.
A === B	A와 B는 같다	숫자를 비교할 경우 반드시 표기된 숫자와 자료형도 일치해야하만 true를 반환합니다. 10과 "10"을 비교했을 경우 표기된 숫자는 같지만 하나는 숫자형 10이고 하나는 문자형 "10"이므로 false를 반환합니다.
A !== B	A와 B는 다르다	숫자를 비교할 경우 반드시 표기된 숫자 또는 자료형이 일치하지 않을 때 true를 반환합니다. 가령, 10과 "10"을 비교했을 경우 표기된 숫자는 같지만 하나는 숫자형 10이고 하나는 문자형 "10"이므로 이때는 true를 반환합니다.

비교 연산자 ==와 !=는 피연산자의 자료형(type)이 비교 연산자의 실행 결과에 영향을 미치지 않습니다. 아래 예제의 경우 변수 k에는 숫자형 데이터 10이 저장되었고, 변수 m에는 문자형 데이터 "10"이 저장되었습니다. 그리고 두 변수 모두 숫자형 데이터 10과 같은지 비교하였고 결과는 둘 다 true를 반환합니다.


    var k=10, m="10";
    k == 10     //true
    m == 10     //true

하지만 비교 연산자 중 ===과 !==는 피연산자 자료형에 따라 결괏값이 달라집니다. 아래 예제의 경우 변수 k에는 숫자형 데이터 10이 저장되었고, k===10은 숫자형 데이터로 둘 다 일치하기 때문에 true를 반환합니다. 하지만 변수 m에는 문자형 데이터 "10"이 저장되었습니다. 문자형 데이터 "10"과 숫자형 데이터 10은 자료형이 다르므로 m===10은 false를 반환합니다.


    var k=10, m="10";
    k === 10     //true
    m === 10     //false

위 결과에서 볼 수 있듯이 ==과 != 연산자는 데이터의 type이 실행 결과에 영향을 미치지 않지만, ===과 !== 연산자는 비교 데이터의 type이 실행 결과에 영향을 미칩니다. 다음 예제로 비교 연산자에 대해 더 살펴보겠습니다.

<script>
    var a = 10;
    var b = 20;
    var c = 10;
    var f = "20";
    var result;

    result = a>b;   //false
    document.write(result, "<br>");
    result = a<b;   //true
    document.write(result, "<br>");
    result = a<=b;   //true
    document.write(result, "<br>");
    result = b ==f;   //true
    document.write(result, "<br>");
    result = a !=b;   //true
    document.write(result, "<br>");
    result = b ===f;   //false
    document.write(result, "<br>");
</script>

결과화면
false       //a에는 10, b에는 20이 있으므로 10>20=false가 됩니다.
true
true
true 
true 
false

논리 연산자

논리 연산자에는 ｜｜(or) &&(and), !(not)이 있으며, 논리 연산자는 피연산자가 논리형 데이터인 true 혹은 false로 결괏값을 반환합니다. ｜｜(or)연산자는 피연산자 중 하나만 true이면 true라는 결괏값을 반환합니다. 하지만 &&(and) 연산자는 피연산자 중 하나만 false이면 false라는 결괏값을 반환합니다. !(not)은 논리 부정 연산자로, 피연산자가 true이면 false라는 반대의 결괏값을 반환합니다.

논리 연산자의 종류

종류	설명
｜｜	or 연산자라 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결괏값을 반환합니다.
&&	and 연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결괏값을 반환합니다.
!	not 연산자라 부르며, 단항 연산자입니다. 피연산자의 값이 true이면 반대로 false로 결괏값을 반환합니다.