연산자

산술 연산자

산술 연산자에는 산수 시간에 배운 더하기(+), 뺴기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다. 산술 연산자로 연산을 하기 위해서는 연산 대상 데이터가 반드시 2개 있어야 합니다.

종류

기본형

설명

+

A+B

더하기

-

A-B

빼기

*

A*B

곱하기

/

A/B

나누기

%

A%B

나머지

<script>
    var num1 = 15;
    var num2 = 100;
    var result = 400;
    
    result = num1 + num2; //115
    document.write(result,"<br />");
    
    result = num1 - num2; //-85
    document.write(result,"<br />");
    
    result = num1 * num2; //-1500
    document.write(result,"<br />");
    
    result = num1 / num2; //0.15
    document.write(result,"<br />");
    
    result = num1 % num2; //15 나머지는 홀수와 짝수를 나눌때 주로 사용
    document.write(result,"<br />");
</script>
<script>
    var t1 = "학교종이";
    t1 += "땡땡땡";
    t1 += "8282";
    t1 += "어서모이자";
    
    document.write(t1)
</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 str = "<table border='1'>";
        str +="<tr>"
        str +="<td>1</td>";
        str +="<td>2</td>";
        str +="</tr>";
        str += "</table>";
        
        document.write(str);
         
        var str = "<table>";
        str +="<tr>"
        str +="<td>총시간(%)</td>";
        str +="<td>NCS 소양 교과(%)</td>";
        str +="<td>NCS 전공 교과(%)</td>";
        str +="<td>비 NCS 교과(%)</td>";
        str +="</tr>";
         
        str +="<tr>"
        str +="<td>950 (100%)</td>";
        str +="<td>34 (3.6%)</td>";
        str +="<td>916 (96.4%)</td>";
        str +="<td>- (-%)</td>";
        str +="</tr>";
        str += "</table>";
        document.write(str);
    </script>
<script>
    var num1 = 100;
    var num2 = 200;
    
    num1 = num1 + num2;
    num1 += num2;
    document.write(num1,"<br>");
    
    var num1 = 100;
    var num2 = 200;
    
    num1 = num1 - num2;
    num1 -= num2;
    document.write(num1,"<br>");
    
    var num1 = 100;
    var num2 = 200;
    
    num1 = num1 * num2;
    num1 *= num2;
    document.write(num1,"<br>");
    
    var num1 = 100;
    var num2 = 200;
    
    num1 = num1 / num2;
    num1 /= num2;
    document.write(num1,"<br>");
    
    var num1 = 100;
    var num2 = 200;
    
    num1 = num1 % num2;
    num1 %= num2;
    document.write(num1,"<br>");
</script>
function func4(){
           let i = 10, j = 10, k = 30;
           i/=j; // i = i / j 1
           j-=i; // j = j - i 9
           k%=j; // k = k % j 3
           document.write(i);
           document.write(j);
           document.write(k);
}
func4();

증감 연산자

증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있습니다. 증감 연산자는 앞에서 배운 연산자와는 달리 피연산자가 한 개만 필요한 단항 연산자입니다.

var ⓐ A = ⓑ ++ B 먼저 ⓐ(B의 값을 1만큼 증가)가 실행되고, ⓑ(증가된 B의 값을 A에 대입)가 실행됩니다.

var ⓐ A = ⓑ B++; 먼저 ⓐ(B의 값을 A에 대입)가 실행되고, ⓑ(B의 값을 1만큼 증가)가 실행됩니다.

<script>
    let num1 = 10; //전역변수 num1에 숫자 10을 할당
    let num2 = 20; //전역변수 num1에 숫자 20을 할당
    let num3 = 20; 
    let rusult;
    
    document.write(num1,"<br>");
    
    num1 --;
    document.write(num1,"<br>");
    
    num1 ++;
    document.write(num1,"<br>");
    
    rusult = num2++; // ++ 뒤에 있으면 rusult 반영 안 됨 ++ 앞에 있으면 rusult 반영 됨
    document.write(rusult,"<br>");
    document.write(num2,"<br>");
    
    rusult = num3++;
    document.write(rusult,"<br>");
    document.write(num2,"<br>");
</script>
//10
//9
//10
//20
//21
//20
//21
function func1(){
           let result, a = 100, b = 200, c = 300;
           result = a < b ? b++ : --c;
           document.write(result);
}
func1();
function func2(){
           let hap, j, k, l;
           j = k = l = 0;
           hap = ++j + k++ + ++l;
           document.write(hap);
}
func2();
function func5(){
           for(i = 1; i <= 7; i++){
               for(j = 1;  j<= i; j++){
                   document.write(j);
               }
               document.write("<br>");
           }
       }
       func5();

비교 연산자

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

연산자

예시

==

x==y

좌변과 우변이 같다.

===

x===y

좌변과 우변이 같다. 데이터형도 같다.

!=

x!=y

좌변과 우변이 다르다.

!==

x!==y

좌변과 우변이 다르다. 데이터형도 다르다.

>

x>y

좌변이 우변보다 크다.

<

x<y

좌변이 우변보다 작다.

>=

x>=y

좌변이 우변보다 크거나 같다.

<=

x<=y

좌변이 우변보다 작거나 같다.

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

논리 연산자

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

연산자

예시

설명

&&

x && y

둘 다 true인 경우 true를 변환합니다.

||

x || y

둘 중의 하나 이상의 true인 경우 true를 변환합니다.

!

!x

반대 값을 변환합니다.

<script>
    let a = 10;
    let b = 20;
    let m = 30;
    let n = 40;
    let result;
    
    result = a > b || b >= m || m > n;
    document.write(result,"<br>");
    
    result = a > b || b >= m || m <= n;
    document.write(result,"<br>");
    
    result = a <= b && b >= m && m <= n;
    document.write(result,"<br>");
    
    result = a <= b && b >= m && m <= n;
    document.write(result,"<br>");
    
    result = !(a > b);
    document.write(result,"<br>");
</script>
//false
//true
//false
//false
//true
<script>
    document.write(false || false);
    document.write("<br>");
    document.write(false || true);
    document.write("<br>");
    document.write(true || true);
    document.write("<br>");
    document.write(false && false);
    document.write("<br>");
    document.write(false && true);
    document.write("<br>");
    document.write(true && true);
</script>
//false
//true
//true
//false
//false
//true

연산자 우선순위

일반적인 산수를 연산할 때처럼 연산자에도 우선순위가 있습니다. 예를 들어 '2+1(*3)=5'와 같은 식입니다.

Last updated

Was this helpful?