연산자

1. 연산자란?

 

일반적으로 사칙연산등을 하는 일련의 작업을 연산작업이라고 한다.

 

종류 : 산술, 문자 결합, 대입(복합대입), 증감, 비교, 논리, 삼항 조건 연산자

 

2. 산술연산자

 

이항 산술 연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
&	나머지

 

    <script>
        var num1 = 15;
        var num2 = 2;
        var result;

        result = num1 + num2;
        document.write(num1 + " + " + num2 + " = " + result + "<br>"); // 15 + 2 = 17
        result = num1 - num2;
        document.write(num1 + " - " + num2 + " = " + result + "<br>"); // 15 - 2 = 13
        result = num1 * num2;
        document.write(num1 + " x " + num2 + " = " + result + "<br>"); // 15 * 2 = 30
        result = num1 / num2;
        document.write(num1 + " ÷ " + num2 + " = " + result + "<br>"); // 15 / 2 = 7.5
        result = num1 % num2;
        document.write(result + "<br>"); // 15 % 2 = 1
    </script>

 

결과화면

 

 

3. 문자 결합 연산자

 

더하기 연산에 문자형 데이터가 한 개라도 들어있으면 다른 데이터들은 자동으로 문자형 데이터로 형변환된다.

 

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

        result = t1 + t2 + t3 + t4;
        document.write(result);
    </script>

실행결과

 

4. 대입 연산자

 

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

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

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

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

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

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

실행결과

 

 

복합대입연산자

 

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

 

5. 증감 연산자

 

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

변수 ++ : 먼저 변수가 실행되고, 1을 더한다.

++ 변수 : 먼저 1을 더하고, 변수를 실행한다.

변수 -- : 먼저 변수가 실행되고, 1을 뺀다.

-- 변수 : 먼저 1을 빼고, 변수를 실행한다.

 

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

        num1--; // num1 = 10 - 1 = 9
        document.write("num1 = " + num1, "<br>");

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

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

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

실행결과

 

6. 비교 연산자

 

두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자이다.

결과값은 true 또는 false로 반환한다. 

 

    <script>
        var a = 10;
        var b = 20;
        var c = 10;
        var d = "10";
        var e = 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 <= d; //false 문자형과 숫자형 비교
        document.write(result + "<br>");
        
        result = b <= f; //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 변수형까지 동일해야 true
        document.write(result + "<br>");

        result = c != d; //false 값만 같아도 false
        document.write(result + "<br>");

        result = c !== d; //true 변수형까지 동일해야 false
        document.write(result + "<br>");

        result = c !== e; //false 변수형이 달라야 true
        document.write(result + "<br>");
    </script>

 

7. 논리 연산자

 

두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자이다.

결과값은 true 또는 false로 반환한다. 

논리 연산자	의미
||	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

 

8. 연산자 우선순위

1. ()
2. 단항 연산자(--, ++, !)
3. 산술 연산자(*, /, %, +, -)
4. 비교 연산자(>, >=, <, <=, ==, ===, !==, !=)
5. 논리 연산자(&&, ||)
6. 대입(복합 대입) 연산자(=, +=, -=, *=, /=, %=)

 

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

실행결과

 

 

9. 삼항 조건 연산자

 

조건식의 결과에 따라 실행 결과가 달라지는 삼항 연산자이다.

조건식 ? 자바스크립트 코드 1 : 자바스크립트 코드2

조건식이 일치(true)하면 왼쪽 항이 실행되고, 일치하지 않으면(false) 오른쪽 항이 실행된다

 

<script>
	var a = 10;
	var b = 3;

	var result = a > b ? "javascript" : "hello";
	document.write(result); //jvaascript
</script>

 

 

---

10. 총 정리 실습

 

예제1) 적정 체중을 구하는 테스트기 만들기

 

 

적정 체중 계산법 : 적정체중 = (본인 신장 - 100) X 0.9

 

<script>
	var userHeight = 180; //신장
	var userWeight = 74; //몸무게
	
	//평균 체중 = (키 - 100) * 0.9
	var normal_w = (userHeight - 100) * 0.9;
	document.write(normal_w);
</script>

결과

 

 

예제2) 적정 체중을 구하는 테스트기 만들기

 

<script>
	var name = prompt("당신의 이름은?", "");
	var height = prompt("당신의 신장은?", "0");
	var weight = prompt("당신의 몸무게는?", "0");
	
	var normal_w = (height - 100) * 0.9;
	var result = weight >= normal_w - 5 && weight <= normal_w + 5;
	result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
	document.write(name +"님은 "+ result);
</script>

prompt창을 이용해 값을 입력 받으면 적정체중인지 아닌지를 계산해주는 코드이다.

 

---

참고 :  ⌜Do it! 자바스크립트 + 제이쿼리 입문⌟ 책을 공부하며 요약・정리한 내용입니다.