자바스크립트 연산자 종류 및 예제 정리

자바스크립트 연산자 종류 및 각 연산자의 예제를 정리해 보았습니다.

자바스크립트 연산자 종류 및 예제

자바스크립트 산술연산자

자바스크립트 연산자 첫번째는, 산술 연산자 입니다. 산술 연산자는 우리가 흔히 아는 덧셈, 뺄셈, 곱셈 등의 사칙연산과 나머지 연산자 등을 말합니다.

<body>
  <script>
      // 덧셈
    console.log( 1 +4 );
     //  뺼셈
    console.log( 1 - 4 );
     // 곱셈
    console.log( 3 * 8 );
     // 나눗셈
    console.log( 9 / 3 );
     // 숫자+문자
    console.log( 3 + "학기" );
 
    const 홀수짝수체크 = (number) =>{
     //2로 나누어 나머지가 0이면 짝수, 1이면 홀수
      if ( number % 2 === 0  ){
        console.log( "짝수" );
      }else{
        console.log( "홀수");
      }
    }
 
    홀수짝수체크( 2 );
    홀수짝수체크( 103 );
  </script>
</body>

각 연산자에 맞게 아래와 같이 계산이 됩니다.

사칙연산 및 나머지 연산자

 

자바스크립트 증감 연산자

증감연산자는 숫자를 점차적으로 증가시키거나 감소시키는 연산자입니다. 자기 자신의 값을 변경시킵니다.

<body>
  <script>
    let num = 9;
 
    num++;
    console.log( num ); // 10출력
 
    num--;
    console.log( num ); // 다시 9 출력
 
  </script>
</body>

 

자바스크립트의 비교 연산자

비교 연산자는 크거나 작음 혹은 같거나 같지 않음의 조합으로 값을 비교할 때 사용하는 연산자 입니다.

<body>
    <script>
      const value1 = 10;
      const value2 = 20;
 
      console.log(value1 > value2); // false
      console.log(value1 < value2); //true
      console.log(value1 === value2); //false
      console.log(value1 !== value2); //true
    </script>
  </body>

 

자바스크립트 논리 연산자

논리 연산자는 true, false 해당 결과값에 대한 AND, OR, NOT 연산을 제공하는 연산자입니다.

<body>
    <script>
      const value1 = 10;
      const value2 = 20;
 
      const valTrue = value1 < value2;
      const valFalse = value1 > value2;
 
      // true  && false = false
      console.log(valTrue && valFalse);
      // true  || false = true
      console.log(valTrue || valFalse);
      // ! true  && false = ftrue
      console.log(!( valTrue && valFalse) );
    </script>
  </body>

true && false 연산의 결과는 false, true || false 연산의 결과는 true, true && false의 연산의 결과는 false이나 !(Not) 연산자로 인해 반대 true를 리턴하게 됩니다.

 

자바스크립트의 삼항연산자

삼항연산자는 조건에 따라 분기 처리를 가지는 연산을 수행하며, 3개의 피연산자를 갖게 됩니다.

삼항 연산자의 경우 ( 조건 ? 참인 경우 실행 코드 : 거짓인 경우 실행 코드 ) 의 형태로 작성되는데, 조건의 결과가 true 일 때에는 ? 다음의 코드 결과가 리턴되고, 조건의 결과가 false 일 때에는 : 다음의 코드 결과를 리턴합니다.

<body>
  <script>
    //결과는 거짓이므로 :  다음의 코드 결과를 반환함
    const result = ( 100 > 200 ? "자바" : "스크립트");
    console.log( result ); // 스크립트 
  </script>
</body>

 

자바스크립트의 Null 연산자(Nullish)

Nullish 연산자는 입력받은 피연산자 중 Null 혹은 undefined를 체크하여 정상적으로 할당된 값을 발견한 경우 해당 값을 리턴합니다.

삼항연산자는 물음표를 하나 쓰는 반면, 널리쉬 연산자는 물음표를 2개 사용합니다.

<body>
  <script>
    const uValue = undefined;
    const nValue = null;
    const normal = 300;
    const nValue2  = null;
 
// undefined 이나 null 아닌 값을 만나면 해당 값을 리턴
    console.log( uValue ?? nValue ?? normal ?? nValue2 );
 
  </script>
</body>

순차적으로 연산을 하다가 undefined 이나 null 아닌 값을 만나면 해당 값을 리턴하고 종료됩니다.

 

자바스크립트 대입연산자

대입연산자는 대입연산자와, 산술연산자와 논리연산자 등의 조합으로 이루어진 연산자들의 조합으로 이루어진 연산자를 말합니다.

<body>
  <script>
    let numb = 10;
    numb += 2;
    console.log( numb );
 
    numb *= 3;
    console.log( numb );
  </script>
</body>

 

자바스크립트 전개 구문

전개 구문이란, 반복 가능한 객체(Iterative)에 적용할 수 있는 것으로, 배열이나 객체, 문자열의 요소에 사용할 수 있습니다.

<body>
    <script>
      // 문자열의 경우
      const string1 = "sapui5 자바스크립트";
      console.log(...string1);
 
      //배열의 경우
      const array1 = [3, 4, 8, 12, 54, 20];
      console.log(...array1);
 
      const objTemp1 = [
        {
          name: "영수",
          age: 30,
          job: "student",
        },
        {
          name: "철수",
          age: 20,
          job: "typewriter",
        },
      ];
 
      console.log(...objTemp1);
    </script>
  </body>

각 반복가능한 요소로 분해하여 전개함

이상으로 자바스크립트 연산자 종류 에 대해서 알아보았습니다. 웹 개발시에는 자주 사용하지 않는 비트연산자 등 더 자세한 사항을 알고자 한다면 모질라 MDN 이 문서를 확인해 보시기 바랍니다.

본문 내용 중 undefined, null에 관련된 자세한 사항은 이 글을 참고해 보시기 바랍니다.