Language/JavaScript [JavaScript] 기타 연산자
  • 728x90
    반응형

     

     

     

    문자열 결합 연산자

    자바스크립트에서 덧셈(+) 연산자는 피연산자의 타입에 따라 두 가지 다른 연산을 수행한다.

     

    1. 피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행한다.
    2. 피연산자가 하나라도 문자열이면, 문자열 결합을 수행한다.

    🔔 예제)

    var x = 3 + 4;		 // 피연산자가 둘다 숫자이면 덧셈 연산을 수행함.
    var y = "좋은" + "하루 되세요!"    // 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.
    var z = 12 + "월"	// 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.

     

    💡 피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 자바스크립트는 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행한다.

     

    피연산자가 하나는 문자열이고 다른 하나는 문자열이 아닐 때, 자바스크립트는 문자열이 아닌 피연산자를 자동으로 문자열로 변환한 후 문자열 결합을 수행한다.

     

     

     

    삼항 연산자(ternary operator)

    삼항 연산자는 유일하게 피연산자를 세 개나 가지는 조건 연산자이다.

    삼항 연산자의 문법은 다음과 같다.

     

    문법

    표현식 ? 반환값1 : 반환값2

     

    물음표(?) 앞의 표현식에 따라 결과값이 참이면 반환값 1을 반환하고, 결과값이 거짓이면 반환값2를 반환한다.

     

    🔔 예제)

    var x = 3, y = 5;
    var result = (x > y) ? x : y    // x 가 더 크면 x를 그렇지 않으면 y를 반환함.
    document.write("둘 중에 더 큰 수는" + result + "입니다.");

     

    삼항 연산자는 짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 만들어 준다.

     

     

     

    쉼표 연산자

    쉼표 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신할 수 있다.

     

    🔔 예제)

    // 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.
    for ( var i = 0, j = 9; i <= j; i++, j--) {
    	document.write("i 의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");
    }

     

     

     

    delete 연산자

    delete 연산자는 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element)등을 삭제해 준다.

     

    피연산자가 성공적으로 삭제되었을 경우에는 참(true)을 반환하고, 삭제하지 못했을 경우에는 거짓(false)을 반환한다.

    이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결함 방향은 오른쪽에서 왼쪽이다.

     

    🔔 예제)

    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Operators</title>
    </head>
    <body>
        <h1>delete 연산자</h1>
        <script>
            var arr = [1, 2, 3];                // 배열 생성
            delete arr[2];                        // 배열의 원소 중 인덱스가 2인 요소를 삭제함.
            document.write(arr + "<br>");        // [1, 2, ]
            // 배열에 빈자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아님.
            document.write(arr[2] + "<br>");
            // 배열의 요소를 삭제하는 것이지 배열의 크기까지 줄이는 것은 아님.
            document.write(arr.length);
       </script>    
    </body>
    </html>

    실행 결과

    delete 연산자


     

     

    typeof 연산자

    typeof 연산자는 피연산자의 타입을 반환한다.

    이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방향은 오른쪽에서 왼쪽이다.

     

    자바스크립트에서 많이 사용하는 값과 그 값에 대한 typeof 연산자의 결과값은 다음과 같다.

     

    typeof 연산자의 결과 값
    숫자, NaN "number"
    문자열 "string"
    true, false "boolean"
    null "object"
    undefined "undefined"
    함수 "function"
    함수가 아닌 객체 "object"

     

    🔔 예제)

    
    typeof "문자열"         // string
    typeof 10              // number
    typeof NaN             // number
    typeof false           // boolean
    typeof undefined       // undefined
    typeof new Date()      // object
    typeof null            // object

     

     

     

    instanceof 연산자

    instanceof 연산자는 피연산자인  객체가 특정 객체의 인스턴스인지 아닌지를 확인해 준다.

     

    피연산자가 특정 객체의 인스턴스이면 참(true)을 반환하고, 특정 객체의 인스턴스가 아니면 거짓(false)을 반환한다.

    이 연산자는 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.

     

    🔔 예제)

    
    str instanceof Object;    // true
    str instanceof String     // true
    str instanceof Array;     // false
    str instanceof Number     // false
    str instanceof Boolean    // false

     

     

     

    void 연산자

    void 연산자는 피연산자로 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값만을 반환한다.

    이 연산자는 피연산자가 단 하나뿐인 단항 연산자이며, 피연산자의 결합 방식은 오른쪽에서 왼쪽이다.

     

    🔔 예제)

    <!DOCTYPE html>
    <html lang="ko">
    
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Operators</title>
    </head>
    <body>
        <h1>void 연산자</h1>
    
        <a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a><br><br>
        <a href="javascript:void(document.body.style.backgroundColor='yellow')">
            이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
        </a>    
    </body>
    </html>

     

    실행 결과

     

    위의 예제처럼 void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 종종 사용된다.

     

     

     

     

     

    728x90
    반응형
상단으로