웹프로그래밍/JavaScript

JavaScript - 연산자

Uisin 2024. 8. 13. 10:47

연산자 (Operator)

 

 우리가 학교에서 배웠던 더하기 빼기 등 몇 가지 이미 알고 있는 기호들이 있는데 이를 프로그래밍 언어에서는 연산자라고 부르며 사용한다. 연산자는 수치 데이터를 곱하고 옮기고 비교하는 등 데이터를 가지고 다양한 비교 분석을 할 수 있도록 도와주는 도구라고 알고있으면 된다.

 

연산자의 기본원칙!

 1. 모든 연산에서 괄호 연산은 가장 먼저 계산한다

 2. 우선순위가 동일한 연산자는 좌에서 우로 진행되면서 연산이 이루어진다

 3. 이항 연산보다 단항 연산의 연산이 먼저 이루어진다

 4. 산술 연산자 > 비교 연산자 > 논리 연산자 순으로 우선순위가 주어진다

 5. 대입 연산자는 우선순위가 가장 낮다

 

산술연산자

 : 수치 데이터를 처리하기 위해 사용하는 기본적인 연산자로 우리가 가장 잘 알고있는 기호들이기도 하다^^

 

  • + : 더하기
  • - : 빼기
  • * : 곱하기
  • / : 나누기
  • % : 나머지 구하기
        var num1 = 7;
        var num2 = 5;
        document.write("num1 + num2 = " +(num01 + num02) + "<br>");
        document.write("num1 - num2 = " +(num01 - num02) + "<br>");
        document.write("num1 * num2 = " +(num01 * num02) + "<br>");
        document.write("num1 / num2 = " +(num01 / num02) + "<br>");
        document.write("num1 % num2 = " +(num01 % num02) + "<br>");

 

 

비교 연산자

비교연산자는 좌/우변을 비교해 참인지 거짓인지를 알아내는 연산자로 우리가 일상속에서 접할 수 있는 연산자들이다.

 

  • A > B  : A가 B보다 큰 경우
  • A < B : A 가 B 보다 작은 경우
  • A >= B  : A가 B보다 크거나 같은 경우
  • A <= B : A 가 B 보다 작거나 같은 경우
  • A == B : A와 B가 같은 경우
  • A != B : A와 B가 같지 않은 경우
  • A === B : A와 B가 같은 경우이지만 ==와는 달리 데이터유형과 값이 "모두" 같아야 참이 된다
  • A !== B : A와 B가 같지 않은 경우. 데이터 유형이나 값 중 "하나라도" 다르면 참이 된다
        var x = 10;
        var y = 20;
        document.write("x==y:" + (x==y) + "<br>");
        document.write("x!=y:" + (x!=y) + "<br>");
        document.write("x>y:" + (x>y) + "<br>");
        document.write("x<y:" + (x<y) + "<br>");
        document.write("x>=y:" + (x>=y) + "<br>");
        document.write("x<=y:" + (x<=y) + "<br>");

 

 

대입연산자

: 변수에 특정 값을 대입/할당 하는 연산자!

  • x=5 : x에 5를 대입한다.
  • x+=5 : x에 5를 더해서 대입한다.
  • x-=5 : x에 5를 빼서 대입한다.
  • x*=5 : x에 5를 곱해서 대입한다.
  • x/=5 : x에 5를 나눈 다음 대입한다.
  • x%=5 : x에 5로 나눈 나머지를 구한다.

 

        var num = 10;
        document.write("처음 값" + num + "<br>");
        num = 30;
        document.write("=변경 값" + num + "<br>");

        num += 10; //기존 값에 더하기
        document.write("+=변경 값" + num + "<br>");
        num -= 10; //기존 값에 빼기
        document.write("-=변경 값" + num + "<br>");
        num *= 5; //기존 값에 곱하기
        document.write("*=변경 값" + num + "<br>");
        num /= 20; //기존 값에서 나누기
        document.write("/=변경 값" + num + "<br>");
        num %= 3;  //나머지 구하기
        document.write("%=변경 값" + num + "<br>");

 

증감연산자

 : 1씩 증가시키거나 감소시키는 연산자들이다!

 

  • ++변수명 : 해당 줄에서 변수 값이 1만큼 증가
  • --변수명  : 해당 줄에서 변수 값이 1만큼 감소
  • 변수명-- : 코드의 다음 줄 부터 변수 값이 1만큼 감소
  • 변수명++ : 코드의 다음 줄 부터 변수 값이 1만큼 증가
        var num = 10;
        document.write("처음값 : " + num + "<br>");
        num++;
        document.write("num++ : "+ num + "<br>");
        num--;
        document.write("num-- : "+ num + "<br>");

        var num02 = 10;
        var num03 = 10;
        document.write("후처리 :" + num02++ + "<br>");
        document.write("전처리 :" + ++num03 + "<br>" + "<br>");

 

논리연산자

 : 결과 값이 참 (true) 또는 거짓(false)으로 나오는 논리적 연산자 

 

  • && : 논리곱연산자 : 모든 조건이 맞으면 true 반환
  • ! 부정연산자 : 값이 true면 false, false면 true 반환
  • ||  (논리합연산자) : 조건 중 하나라도 맞으면 true 반환
        var test01 = 10 > 5;
        var test02 = 10 <5;

        document.write('&&:' + (test01&&test02) + "<br>");
        document.write('||:' + (test01||test02) + "<br>");
        document.write('!:' + !test01 + "<br>");

 

 

 

연산자의 우선순위

우선순위 연산자 비고
1 (),[] 괄호 연산자
2 !, ++, -- 논리, 산술 연산자
3 *, /, % 산술 연산자
4 +. - 산술 연산자
5 <, <=, >, >= 비교 연산자
6 ==, ===, !=, !== 비교 연산자
7 && 논리 연산자
8 || 논리 연산자
9 =, +=, *= 등 대입, 복합 연산자

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

드래그 앤 드롭 - JavaScript  (0) 2024.09.02
JavaScript - 조건문과 반복문  (0) 2024.08.13
JavaScript 배우기  (0) 2024.08.12