[JavaScript] 산술연산자, 복합대입연산자, 비교연산자, 논리연산자, 삼항연산자

---

 

1.  산술 연산자

종류	설명	예시
+	두 피연산자의 값을 더함	c = a + b
-	첫 번째 피연산자 값에서 두 번째 피연산자 값을 뺌	c = a - b
*	두 피연산자의 값을 곱함	c = a * b
/	첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눔	c = a / b
%	첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눈 나머지를 구함	c = a % b
++	피연산자를 1 증가	a++ / ++a
--	피연산자를 1 감소	b-- / --b

 

+, -, * , /  연산 예시

  

    
    
    
    
  
<script>
      const num1 = 20;
      const num2 = 10;
      const score1 = num1 + num2;
      const score2 = num1 - num2;
      const score3 = num1 * num2;
      const score4 = num1 / num2;
      console.log(score1 + ',' + score2 + ',' + score3 + ',' + score4);
      // 30, 10, 200, 2
</script>

 

% 연산 예시

  

    
    
    
    
  
<script>
    const evenOdd = 2;
    const result = evenOdd % 2;
    let comment; // const는 선언과 동시에 초기화 해야 함
    if (result === 0) {
        comment = evenOdd + '는(은) "짝수" 입니다.';
    }else {
        comment = evenOdd + '는(은) "홀수" 입니다.';
    }
    console.log(comment); // 2는(은) "짝수" 입니다.

    // 삼항 연산자를 사용하면 선언과 동시에 초기화 가능
    const comment2 = (result === 0) ? evenOdd +'는(은) "짝수" 입니다.' 
                                    : evenOdd + '는(은) "홀수" 입니다.';
    console.log(comment2); // 2는(은) "짝수" 입니다.
</script>

 

💡 증감 연산자
a++  : 기존의 변수 값에 1을 더함. 후위.
++a  : 기존의 변수 값에 1을 더함. 전위.
a--   : 기존의 변수 값에 1을 뺌. 후위.
--a   : 기존의 변수 값에 1을 뺌. 전위.

  

    
    
    
    
  
<script>
    let num1 = 10;
    num1++;
    document.write(num1); // 11

    // 후위 : 해당 문장을 실행한 후 값을 더함.
    let num2 = 10;
    document.write(num2++); // 10
    document.write(num2++); // 11

    // 전위 : 값을 더한 후 해당 문장을 실행
    let num3 = 10;
    document.write(++num3); // 11
    document.write(++num3); // 12
</script>

 

  

    
    
    
    
  
<script>
    /* 응용 예시 */
    var increase = 0;
    var add = 0;
    ++increase;
    console.log(increase); // 1
    increase++;
    console.log(increase); // 2
    add = ++increase; // 3
    console.log(add + ',' + increase); // 3, 3
    add = increase++;
    console.log(add + ',' + increase); // 3, 4
</script>

 

---

2.  복합대입연산자

✏️  대입 연산자(=)와 다른 연산자를 함께 사용하는 연산자

종류	설명
=	연산자 오른쪽의 값을 왼쪽 변수에 할당
+=	a += 1  ▶️  a = a + 1
-=	a -= 1  ▶️  a = a - 1
*=	a *= 1  ▶️  a = a * 1
/=	a /= 1  ▶️  a = a / 1
%=	a %= 1  ▶️  a = a % 1

 

  

    
    
    
    
  
<script>
    let value = 10;
    value += 10; // value = value + 10;
    document.write(value); // 20

    // 복합 대입 연산자를 사용해서 문자열을 조합
    let list = '';
    list += '<ul>';
    list += '    <li>Hello</li>';
    list += '    <li>javaScript..!</li>';
    list += '</ul>';

    document.write(list);
</script>

---

3.  비교 연산자

종류	설명	예시
		조건식	결과값
==	피연산자가 서로 같으면 true	3 == "3"	true
===	피연산자도 같고 자료형도 같으면 true	a === "3"	false
!=	피연산자가 서로 같지 않으면 true	3 != "3"	false
!==	피연산자가 같지 않거나 자료형이 같지 않으면 true	3 !== "3"	true
<	왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true	3 < 4	true
<=	왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true	3 <= 4	true
>	왼쪽 피연산자가 오른쪽 피연산자보다 크면 true	3 > 4	false
>=	왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true	3 >= 4	false

  

    
    
    
    
  
<script>
    const comparison1 = (5 > 2);
    console.log(comparison1); // true

    const comparison2 = (5 < 2);
    console.log(comparison2); // false

    const comparison3 = (5 == 5);
    console.log(comparison3); // true

    const comparison4 = (5 == '5');
    console.log(comparison4); // true

    const comparison5 = (5 === '5');
    console.log(comparison5); // false

    const comparison6 = (5 != '5');
    console.log(comparison6); // false

    const comparison7 = (5 !== '5');
    console.log(comparison7); // true

    const comparison8 = (5 === Number('5'));
    console.log(comparison8); // true
</script>

 

💡  문자열 비교
    -  비교 연산자는 숫자뿐만 아니라 문자열도 서로 비교 가능
    -  문자들의 아스키 ASCII 값을 비교해서 결정
    -  대문자 < 소문자  / 내림차순 값이 더 크다

 

---

4.  논리 연산자

✏️  boolean 연산자라고도 하며 true, false를 처리하는 연산자

종류	기호	설명
OR 연산자	||	피연산자 중 하나면 true여도 true
AND 연산자	&&	피연산자가 모두 true일 경우에만 true
NOT 연산자	!	피연산자의 반댓값을 지정

 

  

    
    
    
    
  
<script>
    let logic1, logic2, logic3, logic4, logic5, logic6;
    logic1 = (3 > 2) && (5 > 3);
    console.log(logic1); // true

    logic2 = (3 < 2) && (5 > 3);
    console.log(logic2); // false

    logic3 = (3 > 2) || (5 > 3);
    console.log(logic3); // true

    logic4 = (3 < 2) || (5 < 3);
    console.log(logic4); // false

    logic5 = !(3 < 2);
    console.log(logic5); // true

    logic6 = !(3 > 2);
    console.log(logic6); // false
</script>

 

---

 

5.  삼항 연산자

 

✏️  조건식의 결과(true, false)에 따라 결과 값을 다르게 나오게 해주는 연산자
✏️  형식 [ 조건식 ? 실행문1 : 실행문2; ]
✏️  조건식이 true 일 때는 실행문1, false 일 때는 실행문2가 실행됨

  

    
    
    
    
  
<script>
    let num1 = 10;
    let num2 = -10;
    console.log(num1 > 0 ? '양수' : '음수'); // 양수
    console.log(num2 > 0 ? '양수' : '음수'); // 음수

    let num3 = 31;
    let type = num3 % 2 === 0 ? '짝수' : '홀수';
    console.log(`${num3}는 ${type}입니다.`); // 31는 홀수입니다.

    // 템플릿 문자열을 사용해서 직접 코드를 넣는 방법도 추천
    let num4 = 32;
    console.log(`${num4}는 ${num4 % 2 === 0 ? '짝수' : '홀수'}입니다.`); // 32는 짝수입니다.

    // 숫자 0은 false, 나머지 숫자는 true.
    console.log(`${num4}는 ${num4 % 2 ? '홀수' : '짝수'}입니다.`); // 32는 짝수입니다.
</script>

 

 

 

 

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]