본문 바로가기

Javascript/javascirpt

연산자

반응형

연산자란?

덧셈, 뺄셈, 곱셈, 나눗셈과 같은 연산을 컴퓨터에서도 다양한 연산자를 통해 계산 작업을 한다. 자바스크립트

프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다.

 

산술 연산자

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

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

ex)

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

  result = num1 + num2;
  document.write(result, "<br>");
  result = num1 - num2;
  document.write(result, "<br>");
  result = num1 * num2;
  document.write(result, "<br>");
  result = num1 / num2;
  document.write(result, "<br>");
  result = num1 % num2;
  document.write(result, "<br>");
</script>

출력화면

문자 결합 연산자

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

결합할 때 사용한다.

 

ex)

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

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

출력화면

※ 참고

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
ex) "I Can " + "Do it" = "I Can Do it";
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
ex) "그럼 " + 20000 = "그럼 20000";

대입 연산자

대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용합니다. 복합 대입 연산자(+=, -=, *=, /=, %=)는

산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말한다.

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

ex)

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

  num1 += num2;  //num1 = num1(10) + num2(3);
  document.write(num1, "<br>");  //13
  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>

출력화면

증감 연산자

증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 1씩 감소시키는 감소 연산자(--)가 있다.

증감 연산자는 앞에서 배운 연산자와는 달리 피연산자가 한 개만 필요한 단항 연산자이다.

※증감 연산자는 변수의 어느 위치에 오는가에 따라 결괏값이 달라진다.

①먼저 B의 값을 1만큼 증가시켜서 실행되고, 증가된 B의 값을 A에 대입되서 실행된다.
var A = ++B;

②먼저 B의 값을 A에 대입되고, B의 값을 1만큼 증가시키고 실행된다
var A = B++;

ex)

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

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

출력화면

비교 연산자

두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자이다. 연산된 결괏값은 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를
반환한다.

ex)

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

  result = a > b;
  document.write("a(10) > b(20) : ", result, "<br>");
  result = a < b;
  document.write("a(10) < b(20) : ", result, "<br>");
  result = a <= c;
  document.write("a(10) <= c(10) : ", result, "<br>");
  result = b == d;
  document.write("b(20) == d(&quot20&quot) : ", result, "<br>");
  result = b != d;
  document.write("b(20) != d(&quot20&quot) : ", result, "<br>");
  result = b === d;
  document.write("b(20) === d(&quot20&quot) : ", result, "<br>");
  result = b !== d;
  document.write("b(20) !== d(&quot20&quot) : ", result, "<br>");
</script>

출력화면

논리 연산자

논리 연산자에는 || (or), &&(and), !(not)이 있으며, 논리 연산자는 피연산자(연산 대상 데이터 x, y등)가 논리형 데이터인 ture 또는 false로 결괏값을 반환한다. ||(or) 연산자는 피연산자 중 하나만 true이면 true라는 결괏값을 변환한다.

하지만 &&(and)연산자는 피연산자 중 하나만 false이면 false라는 결괏값을 반환한다.

!(not)은 논리 부정 연산자로, 피연산자가 true이면 false라는 반대의 결괏값을 반환한다.

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

ex)

<script>
  var a = 10;
  var b = 20;
  var c = 30;
  var d = 40;
  var result;

  result = a > b || b >= c || c > d;
  document.write(result, "<br>");
  result = a > b || b >= c || c <= d;
  document.write(result, "<br>");
  result = a <= b && b >= c && c <=d;
  document.write(result, "<br>");
  result = a <= b && b <= c && c <=d;
  document.write(result, "<br>");
  result = !(a > b);
  document.write(result, "<br>");
</script>

출력화면

연산자 우선순위

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

'9'라고 대답한다면 우선순위를 고려하지 않은 것이다.

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

 

삼항 조건 연산자

삼항 조건 연산자 조건식(true 또는 false의 결괏값을 반환)의 결과에 따라 실행 결과가 달라지는 삼항 연산자로, 연산을

위해 피연산자가 3개 필요하다.

삼항 조건 연산자는 연산한 결과 조건식의 만족 여부에 따라 실행하는 코드를 다르게 실행하고자 할 때 사용한다.

ex)

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

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

</script>

출력화면

 

반응형

'Javascript > javascirpt' 카테고리의 다른 글

배열  (0) 2020.07.25
반복문  (0) 2020.07.20
조건문(if문, else if 문)  (0) 2020.06.18
연산자  (0) 2020.06.17
변수  (0) 2020.06.13
Javascript 정의와 외부로 연결하기  (0) 2020.05.23