반응형
연산자란?

 

덧셈, 뺄셈, 곱셉, 나눗셈과 같이 컴퓨터에서도 다양한 계산 작업을 하기 위해 연산자를 사용합니다.

자바스크립트 프로그래밍에서 사용하는 연산자로는 다음과 같은 연산자가 존재합니다.

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

 

산술 연산자

 

더하기(+), 뺴기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다.

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

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>산술연산자</title>
</head>
<body>
    <h3>산술연산자 : + - * / %</h3>
    
    <script>
        var num1 = 15;
        var num2 = 2;
        var result;

        result = num1 + num2; // num1의 값과 num2의 값을 더한 값을 result에 저장한다.
        document.write(result, "<br>");

        result = num1 - num2; // num1의 값과 num2의 값을 뺀 값을 result에 저장한다.
        document.write(result, "<br>");

        result = num1 * num2; // num1의 값과 num2의 값을 곱한 값을 result에 저장한다.
        document.write(result, "<br>");
        
        result = num1 / num2; // num1의 값과 num2의 값을 나눈 값을 result에 저장한다.
        document.write(result, "<br>");

        result = num1 % num2; // num1의 값과 num2의 값을 나누고 나머지 값을 result에 저장한다.
        document.write(result, "<br>");

    </script>
</body>
</html>

 

산술연산자

산술연산자 : + - * / %

17
13
30
7.5
1

 

문자 결합 연산자

 

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

 

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
ex) "새해 복" + "많이 받으세요" = "새해 복 많이 받으세요";

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>문자 연결 연산자 : +</h3>
    <script>
        var t1 = "학교종이";
        var t2 = "땡떙땡";
        var t3 = 8282;
        var t4 = "어서모이자";
        var result;

        //문자변수와 숫자변수가 사용이 되면, + 연결기능을 사용
        result = t1 + t2 + t3 + t4; //학교종이땡땡땡8282어서모이자
        document.write(result, "<br>");

        var num1 = "100";
        var num2 = 100;
        result = num1 + num2; //문자열 병합
        document.write(result, "<br>");

        //문자가 숫자로 변환(자동형변환)
        result = num1 - num2; // "100-100" - > 100 - 100 결과 : 0
        document.write(result, "<br>");

    </script>
</body>
</html>

 

Document

문자 연결 연산자 : +

학교종이땡떙땡8282어서모이자
100100
0

 

대입 연산자

 

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

복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다.

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>대입 연산자</title>
</head>
<body>
    <h3>대입연산자 : =, +=, -=, *=, /=, %=</h3>
    <script>
        var num1 = 10;
        var num2 = 3;

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

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

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

        //나머지를 구하는 연산자
        num1 %= num2; // num1 = num1 % num2
        document.write(num1, "<br>");
        
    </script>
</body>
</html>

 

대입 연산자

대입연산자 : =, +=, -=, *=, /=, %=

13
10
30
10
1

 

증감 연산자

 

증감 연산자는 1씩 증가 시키는 증가 연산자(++) 그리고 반대로 1씩 감소 시키는 감소 연산자(--)가 있습니다.

앞에 나온 연산자들과 달리 증감 연산자는 연산을 하고자 하는 변수가 한 개만 필요한 단항 연산자이다.

 

증가 연산자 : 변수의 값을 1만큼 감소시킵니다.
ex) 변수--; 또는 --변수;

감소 연산자 : 변수의 값을 1만큼 증가시킵니다.
ex) 변수++; 또는 ++변수;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>증감연산자</title>
</head>
<body>
    <h3>증감 연산자 : ++, --</h3>
    <script>
        var num1 = 10;
        var num2 = 20;
        var result;

        // 사용법 : ++변수;     변수--;
        // 기능 : 변수에 +1을 한 값을 저장. 변수에 -1을 한값을 저장.
        //num1--; // num1 = num1 - 1 한 값을 저장.
        
        //증감연산자가 변수 앞에 사용되면, 전위형 증감연산자    예) ++변수, --변수
        //증감연산자가 변수 뒤에 사용되면, 후위형 증감연산자    예) 변수++, 변수--
        
        result = --num1 + 10; // result = num1 - 1한 값을 저장.
        //result = num1-- + 10; //result = --num1 +10; // 먼저 

        document.write(result); //변수앞 또는 변수뒤에 증감연산자는 동작시점이 달라서 값이 달라진다.
        document.write("<br>");
        document.write(num1); //변수앞 또는 변수뒤에 증감연산자는 값이 동일하게 진행된다.
        
    </script>
</body>
</html>

 

증감연산자

증감 연산자 : ++, --

19
9

 

비교 연산자

 

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

연산된 결과값은 true(참) 또는 false(거짓)으로 논리형 데이터를 반환합니다.

 

종류 설명 비고
A > B A가 B보다 크다.  
A < B A가 B보다 작다.  
A >= B A가 B보다 크거나 같다.  
A <= B A가 B보다 작거나 같다.  
A == B A와 B는 같다. 숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 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로 반환된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비교 연산자</title>
</head>
<body>
    <h3>비교 연산자 : >, >=, <, <=, ==, !=, ===</h3>
    <script>
        var a = 10;
        var b = 20;
        var c = 10;
        var f = "20";
        var result;

        result = a > b; // a가 b보다 크다. -> false
        document.write(result, "<br>");
        
        result = a < b; // a가 b보다 작다. -> true
        document.write(result, "<br>");
        
        result = a <= b; // a가 b보다 같거나 작다. -> true
        document.write(result, "<br>"); 
        
        result = b == f; // 20 == "20" -> 20 == 20 변환되어 동일하게 된다. b와 f가 값이 같다. -> true
        document.write(result, "<br>");
        
        result = b === f; // 값과 타입이 둘 다 일치되었을 때를 비교한다. 숫자형 == 문자형 -> false
        document.write(result, "<br>");
        
        result = a != b; // a와 b가 값이 다르다. -> true
        document.write(result, "<br>");
        
    </script>
</body>
</html>

 

비교 연산자

비교 연산자 : >, >=, <, <=, ==, !=, ===

false
true
true
true
false
true

 

논리 연산자

 

논리 연산자로는 || (or), && (and), ! (not)이 있습니다.

논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결과값을 반환합니다. 

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>논리연산자</title>
</head>
<body>
    <h3> 논리 연산자 : &&, ||, !</h3>
    <script>
        var a = 10;
        var b = 20;
        var m = 30;
        var n = 40;

        var result;
        
        // || : or 논리 연산자
        document.write("|| or 연산자", "<br><br>");
        result = true || true; //true
        document.write(result, "<br>");

        result = true || false;  //true
        document.write(result, "<br>");
        
        result = false || true; //true
        document.write(result, "<br>");
        
        result = false || false;  //false
        document.write(result, "<br>");

        // 책 예제 소스
        result = a > b || b >= m || m > n; //false || false || false -> false
        document.write(result, "<br><br>"); //false

        // && : and 논리 연산자
        document.write("&& and 연산자", "<br><br>");

        result = true && true; //true
        document.write(result, "<br>");

        result = true && false; //false
        document.write(result, "<br>");
        
        result = false && true; //false
        document.write(result, "<br>");
        
        result = false && false; //false
        document.write(result, "<br>");

        // 책 예제 소스
        result = a <= b && b >= m && m <= n; //true && false && true -> false
        document.write(result, "<br><br>"); //false
        
        document.write("! 연산자", "<br><br>");

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

    </script>
</body>
</html>

 

논리연산자

논리 연산자 : &&, ||, !

|| or 연산자

true
true
true
false
false

&& and 연산자

true
false
false
false
false

! 연산자

true

 

연산자 우선순위

 

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

 

삼항 조건 연산자

 

조건식(true 또는 false의 결과값을 반환)의 결과에 따라 실행 결과가 달라지는 연산자를 말한다.

삼항 조건 연산자는 연산을 위해 피연산자가 3개 필요합니다.

 

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>삼항연산자</title>
</head>
<body>
    <h3>삼항연산자</h3>
    <script>
        var a = 10;
        var b = 3;

        // 조건식 ? 결과1 : 결과2;
        var result = a > b ? "javascript" : "hello"; // javascript
        document.write(result, "<br>");

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

        //조건식1 ? (조건식2? 결과1 : 결과2) : 결과3
    </script>
</body>
</html>

 

삼항연산자

삼항연산자

javascript
hello

 

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

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

[JavaScript] 제어문 (2) - 선택문 switch문  (0) 2024.01.28
[JavaScript] 제어문 (1) - 조건문(if, else, else if, 중첩 if)  (0) 2024.01.28
[JavaScript] JavaScript 시작하기 (3) - 변수  (0) 2024.01.17
[JavaScript] JavaScript 시작하기 (2) - 선언문과 주석 처리  (0) 2024.01.17
[JavaScript] JavaScript 시작하기 (1) - JavaScript 정의 및 맛보기 예제  (0) 2024.01.17

티스토리툴바