JavaScript - 3. 연산자

✔ 자바스크립트의 연산자에 대해 정리합니다.

 

 

연산자에 대해서

 

 :) 연산자란 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등의 연산을 수행하기 위해

    사용되는 기호를 의미한다. 이때 연산의 대상을 피연산자라 부른다. 

 

 

    1) 산술 연산자 (사칙연산)

        : 산술 연산자는 가장 기본적이면서도 자주 사용하는 연산자로 더하기, 빼기, 나누기, 곱하기를 

         연산한다. 이 연산자는 두 개의 피연산자를 가지는 이항 연산자이다.

 

 

종류	설명
+	두 값을 더한 결과값을 출력
-	두 값을 뺀 결과값을 출력
×	두 값을 곱한 결과값을 출력
/	두 값을 나눈 후에 그 몫을 출력
%	두 값을 나눈 후에 그 나머지를 출력

 

 let x = 10;
 let y = 4;
 console.log('x + y =', x + y)
 console.log('x - y =', x - y)
 console.log('x * y =', x * y)
 console.log('x / y =', x / y)
 console.log('x % y =', x % y)

 

 

  2) 대입 연산자

     : 변수에 값을 대입할 때 사용하는 이항 연산자이며, 산술 연산자와 결합한 다양한 복합 

       대입 연산자로 사용한다.

 

 

종류	설명
=	왼쪽 피연산자에 오른쪽 피연산자의 값을 대입
+=	왼쪽 피연산자와 오른쪽 피연산자의 값을 더한 후 그 결과값을 왼쪽 피연산자에 대입
-=	왼쪽 피연산자와 오른쪽 피연산자의 값을 뺀 후 그 결과값을 왼쪽 피연산자에 대입
×=	왼쪽 피연산자와 오른쪽 피연산자의 값을 곱한 후 그 결과값을 왼쪽 피연산자에 대입
/=	왼쪽 피연산자와 오른쪽 피연산자의 값을 나눈  그 몫을 왼쪽 피연산자에 대입
%=	왼쪽 피연산자와 오른쪽 피연산자의 값을 나눈 그 나머지를 왼쪽 피연산자에 대입

 

 let x = 12, y = 27, z = 5;
 console.log(x = x - 5)
 console.log(y -= 5); // y = y - 5 와 같은 표현임.
 console.log(z = - 5); // z = - 5 와 같은 표현임. 
 //z =- 5 연산은 단순히 -5를 변수 z에 할당,  y = y - 5연산과 비교하여 살펴보자!

 

 

 

3) 증감 연산자

  : 피 연산자를 1씩 증가 또는 감소시킬 때 사용되는 연산자이며 피연산자가 하나인

    단항 연산자이다. 이 연산자는 피연산자의 어느 쪽에 위치하는 가에 따라 연산의

    순서와 결과가 달라진다.

 

 

종류	설명
변수++	해당 문장을 먼저 실행한 후, 1만큼 증가 (후위)
++변수	먼저 1만큼 증가시킨 후, 해당 문장을 실행 (전위)
변수--	해당 문장을 먼저 실행한 후, 1만큼 감소 (후위)
--변수	먼저 1만큼 감소시킨 후, 해당 문장을 실행(전위)

 

 

 let num1 = 10
 console.log(num1++); //10
 console.log(num1++); //11
 console.log(num1++); //12
 console.log(num1); //13
 
 let num2 = 10
 console.log(++num2); //11
 console.log(++num2); //12
 console.log(++num2); //13
 console.log(num2); //13

 

 

  4) 비교 연산자

   : 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환하며, 두 개의

     피연산자를 가지는 이항 연산자이다.

 

  ♠ 자바스크립트에서는 피연산자의 타입에 따라 두 가지 기준으로 비교 연산을 진행한다. 

 

  - 피연산자 둘다 숫자

    : 해당 숫자를 서로 비교

 

  - 피연산자 둘다 문자열

    : 문자열을 사전 순으로 비교 (앞쪽일수록 작다.)

    → 유니코드 문자의 코드 값을 기준으로 비교하므로 모든 언어를 비교하는 것이 가능하다.      

 

   (1) 동등 / 일치 연산자 

   

종류	설명
==  (동등 비교)	왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환
!= (부등 비교)	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환.
=== (일치 비교)	왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환
!== (불일치 비교)	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환

 

  ※ 일치 비교 연산자를 사용할 것을 권장!

    : 자바스크립트는 연산를 처리할 때, 암묵적으로 타입이 자동 변환되기도 한다. 이를 

      암묵적 타입 변환이라 한다. 여기서 일치 비교 연산자 사용을 권장하는 이유는 동등

      비교 연산자는 두 값을 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후에 같은

      값인지를 비교하므로 예측하기 어려운 결과를 보여주기 때문이다. 

 

 

 (2) 대소 관계 비교 연산자

  

종류	설명
>	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환
>=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환
<	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환
<=	왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환

 

//동등 / 일치 비교 연산자
  console.log('' == '0')  // false
  console.log(0 == '')  // true
  console.log(0 == '0')  // true
 
  console.log(false == 'false')  // false
  console.log(false == '0')  // true
 
  console.log(false == undefined)  // false
  console.log(false == null)  // false
  console.log(null == undefined)  // true
 
  console.log(5 != 8)  // true
  console.log(5 != 5)  // false
  console.log(5 != '5')  // false
 
  console.log(5 !== 8) // true
  console.log(5 !== 5) // false
  console.log(5 !== '5') // true
 
 
  // 대소 관계 비교 연산자
  console.log(5 > 2) //true
  console.log(5 < -5) //false
  console.log(12 >= 12) //true
  console.log(5 <= 0) //false
  console.log('가방' < '하마') //true

 

 

5) 논리 연산자

   : 주어진 논리식을 판단하여, boolean 자료형의 값인 참(true), 거짓(false)을 

     반환하는 연산자로 && 연산자와 || 연산자는 두 개의 피연산자를 가지는 이항 연

     산자이며, ! 연산자는 피연산자가 단 하나뿐인 단항 연산자이다. 

 

 

종류	설명
&&	논리식이 모두 참이면 true 를 반환   (AND 연산자, 논리곱 연산자 라고 부른다)
||	논리식 중에서 하나라도 참이면 참을 반환함.  (논리 OR 연산자, 논리합 연산자라고 부른다)
!	논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함  (논리 NOT 연산자, 논리 부정 연산자라고 부른다)

  

 

A	B	A&&B	A||B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

 

 let a = true, b = false
 console.log(a && b); // false  
 // a가 true이라면, b가 결과값이 된다. 반면, a가 false이라면 결과는 a가 된다.
 console.log(a || b); // true  
 // a가 true이라면 결과는 a가 된다. 반면, a가 false이라면 결과는 b가 된다. 
 console.log(!a);  // false
 
 연산 과정
 console.log(30 > 20 || 20 > 10);
       ↓
 console.log(true || ture);
       ↓
 console.log(true);

 

 

 

6) 그 외 연산자   

    

   (1) 연결 연산자

        : + 연산자는 피연산자 둘 다 숫자일 경우에는 산술 연산인 덧셈으로 연산 하지만

          피연산자 둘 다 문자(열) 일 경우에는 두 값을 연결해주는 연결 연산을 수행한다.

 

  let strTest1 = 3 + 2;
  let strTest2 = '안녕!' + ' JavaScript야 ~';
  let strTest3 = 12 + '월'
  console.log(strTest1); // 피연산자 둘 다 숫자면, 산술 연산인 덧셈을 수행
  console.log(strTest2); // 피연산자 둘 다 문자열이면, 문자열 연결 연산을 수행 
  console.log(strTest3); // 피연산자 둘 중 하나라도 문자열이면, 문자열 연결 연산을 수행 

   

 

   (3) 제곱 연산자

       : 값을 제곱할 때 사용하는 연산자이다. 

 

 let a = 3;
 console.log(3**3);