Javascript Operator   자바스크립트 연산자

(2018-11-06)

연산자

1. 자바스크립트 기본 연산자

  ㅇ 단항 연산자
     -  `+` (단항 덧셈, 숫자로 강제 변환)
     -  `-` (단항 부정, 부호 바꿈)  

     -  증가 연산자 : `++` (전위 증가 또는 후위 증가)
     -  감소 연산자 : `--` (전위 감소 또는 후위 감소)
        .  `= ++i`(전위 연산자), `= i++`(후위 연산자) 비교
           ..  `= ++i` : 먼저 평가하고(먼저 1을 더함), 그 다음에 대입
           ..  `= i++` : 먼저 대입하고, 그 다음에 평가(후에 1을 더함)

  ㅇ 계산 연산자 또는 산술 연산자
     -  `*` (곱셈), `/` (나눗셈), `%` (나머지), `+` (덧셈), `-` (뺄셈)

     - 例)
        .  0/0            => NaN (계산 불능)
        .  "문자열" + 1   => "문자열1" (문자열 취급 변환)
        .  true + true    => 2   (논리값 타입을 1 또는 0으로 바꾸어 계산)
        .  1 + null       => 1   (null을 0으로 바꾸어 계산)
        .  1 + ""         => 1   (빈 문자열 ""을 0으로 바꾸어 계산)
        .  1 + undefinded => NaN (계산 불능, undefined를 NaN으로 간주)

  ㅇ 문자열 병합 연산자
     -  `+`

  ㅇ 산술 대입 연산자 (단축형)
     -  `+=` : 例) a += b => a = a + b
     -  `-=` : 例) a -= b => a = a - b 
     -  `*=` : 例) a *= b => a = a * b
     -  `/=` : 例) a /= b => a = a / b
     -  `%=` : 例) a %= b => a = a % b

  ㅇ 할당/대입 연산자(assignment operator)
     -  `=`
  
  ㅇ 그룹 연산자 : `( )`
     - 계산 순서를 명시적으로 우선 지정


2. 비교, 논리, 조건 연산자

  ㅇ 비교 연산자 (8개)
     - (느슨한 비교) :  `==`, `!=`, `>`, `<`, `>=`, `<=` (6개)
     - (엄격한 비교) :  `===` , `!==` (2개)

  ※ `==`, `===` 비교
     - `==`  :  (표준 동등 연산자, standard equality operator)
        . 아래와 같이, 형변환 및 비교 과정을 함께 수행함
           .. 타입이 같고, 값이 같으면, => true, 값이 틀리면 => false
           .. undefined,null은 같은 것으로 봄 => true
           .. 문자열,수치가 함께 있으면, 수치로 형변환하고 비교 함
           .. 논리값일 때, true는 1, false는 0으로 수치로 형변환 하고 비교함
           .. 객체 타입과 원시 타입이 함께 있으면,
              객체를 toString(),valueOf() 메소드형변환하고 비교함
     - `===` :  (완전 일치 연산자, strict equality operator)
        . 형변환을 수행하지 않고, 엄격한 비교 과정을 수행함

  ㅇ 논리 연산자
     * 다른 프로그래밍 언어와 달리, 논리식 평가 결과에 따라 논리값이 아닌 피연산자를 반환
        . 이때, 해당 피연산자가 필요한 장소에서 논리값으로 타입 변환 되므로 정상 동작
     - 논리곱 : `&&`
        . 例) a = b && c => 왼쪽 피연산자(b)가 true이면, 오른쪽 피연산자(c)를 반환, 
           .. (만일, 왼쪽 피연산자(b)가 false이면, 왼쪽 피연산자(b)를 반환)
     - 논리합 : `||`
        . 例) a = b || c => 왼쪽 피연산자(b)가 false이면, 오른쪽 피연산자(c)를 반환, 
           .. (만일, 왼쪽 피연산자(b)가 true이면, 왼쪽 피연산자(b)를 반환)
        . 例) 여러 값 후보 중 null,undefined가 아닌 값 선택할 때 유용
        . 例) 초기값 설정시에도 유용
     * 例) 
        . age >= 18 && console.log("게임 허용"); // 성인이면, 게임 허용
        . age >= 18 || console.log("게임 불가"); // 미성년이면, 게임 불가
     - 논리부정 : `!`

  ㅇ 조건 연산자 (삼항 연산자) : ` ? : `
     -  [조건식] ? [참일 경우 반환값] : [거짓일 경우 반환값] 
        . 조건식이 true이면, 2번째 피연산자를 값으로 반환, false이면 3번째 피연산자 반환


3. 비트 연산자

  ※ 내부적으로, 피연산자2의 보수 형식으로 32 비트 정수로 변환하여 처리

  ㅇ 비트 논리 연산자 :  `& (AND)`, `| (OR)`, `^ (XOR)`, `~ (NOT)`
     - 例) 105 & (-91) 10 = 01101001 AND 10100101 2 = 001100001 2 = 33 10비트 시프트 연산자 
     - `<< (왼쪽 시프트)`
        . 例) (01101001)<<3 => 01001000 (왼쪽으로 3 비트 이동, 오른쪽 빈자리는 0 으로 채움)
     - `>> (부호 있는 오른쪽 시프트)`
        . 例) (10100101)>>3 => 11110100 (오른쪽 3 비트 이동, 왼쪽 빈자리는 부호 비트로 채움)
     - `>>> (부호 없는 오른쪽 시프트)`
        . 例) (10100101)>>3 => 00010100 (오른쪽 3 비트 이동, 왼쪽 빈자리는 0 으로 채움)
  ㅇ 비트 대입 연산자 (단축형) : `&=`, `|=`, `^=`, `<<=`, `>>=`, `>>>=`


4. 자바스크립트 기타 연산자

  ㅇ new 연산자        : 새로운 객체를 생성하며 반환
  ㅇ typeof 연산자     : 데이터 타입을 조사하여 그 결과를 반환 
     - 例) ☞ 자바스크립트 타입 구분 참조
  ㅇ instanceof 연산자 : 객체의 종류를 확인하여 그 종류를 반환
  ㅇ in 연산자         : 객체프로퍼티의 포함 여부를 확인
     - 어떤 프로퍼티객체에 포함되면 true, 미 포함이면 false 반환
        . 例) 프로퍼티명 in 객체명; => 평가 결과에 따라 true 또는 false 반환
  ㅇ void 연산자       : 정의되지 않은 값을 반환


5. 자바스크립트 연산자 우선순위

  ㅇ  1)  ()                               : 결합순서 없음
  ㅇ  2)  . , []                           : 왼쪽 → 오른쪽 결합순서,
         new 인수 있는 경우                : 결합순서 없음
  ㅇ  3)  () 함수호출                      : 왼쪽 → 오른쪽 결합순서,
         new 인수 없는 경우                : 오른쪽 → 왼쪽 결합순서
  ㅇ  4)  ++ (후위증가), -- (후위감소)     : 결합순서 없음
  ㅇ  5)  ! , ~ , + (단항덧셈), - (단항부정), typeof, void, delete, ++ (전위증가),
         -- (전위감소)                     : 오른쪽 → 왼쪽 결합순서
  ㅇ  6)  * , / , %                        : 왼쪽 → 오른쪽 결합순서
  ㅇ  7)  + , - , + (문자열병합)           : 왼쪽 → 오른쪽 결합순서
  ㅇ  8)  << , >> , >>>                    : 왼쪽 → 오른쪽 결합순서
  ㅇ  9)  < , <= , > , >= , in, instanceof : 왼쪽 → 오른쪽 결합순서
  ㅇ 10)  == , != , === , !==              : 왼쪽 → 오른쪽 결합순서
  ㅇ 11)  &                                : 왼쪽 → 오른쪽 결합순서
  ㅇ 12)  ^                                : 왼쪽 → 오른쪽 결합순서
  ㅇ 13)  |                                : 왼쪽 → 오른쪽 결합순서
  ㅇ 14)  &&                               : 왼쪽 → 오른쪽 결합순서
  ㅇ 15)  ||                               : 왼쪽 → 오른쪽 결합순서
  ㅇ 16)  ? :                              : 오른쪽 → 왼쪽 결합순서
  ㅇ 17)  yield, yield*                    : 오른쪽 → 왼쪽 결합순서
  ㅇ 18)  = , += , *= , /= , %= , <<= , >>= , >>>= , 
          &= , ^= , |=                     : 오른쪽 → 왼쪽 결합순서
  ㅇ 19)  ...                              : 결합순서 없음
  ㅇ 20)  ,                                : 왼쪽 → 오른쪽 결합순서


6. 자바스크립트 연산자 부수효과

  ㅇ = (대입연산자), ++ (증가연산자), -- (감소연산자), delete 들은,
     연산 후에 변수 자신의 값을 바꾸는 부수효과가 있게 됨


[자바스크립트] 1. JavaScript 2. JS 연산자 3. 기초 문법
[JS 변수,타입] [JS 이벤트] [JS 함수] [JS 객체] [JS 배열] [JS 활용] [jQuery]

 
        최근수정     요약목록(시험중)     참고문헌