[ Javascript - Operator ] 자바스크립트 연산자

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

연산자의 우선순위란?

간단하게 사칙연산을 예로 우선순위를 생각해보면 10 + 10 + 5 * 5 = 이 경우

우리는 곱하기를 우선적으로 계산하고 나머지 계산식을 차례대로 더하게 될 것이다.

만약 위의 식을 (10 + 10) + 5 * 5 = 이렇게 바꾸게 된다면 5 * 5와 10 + 10의 우선 계산순위가

동일하게 바뀌듯이 자바스크립트 연산자에서도 연산자 간에 우선순위라는 것이 있다는 것이다.

 

 

※ 연산자 타입, 연산자 순으로 정렬해두었다.

• 멤버
  .[ ]
  
  
• 객체생성과 호출
  ()new
  
  
• 거짓(부정),증가와 감소
  !,  ~,  -,  +,  ++,  --,  typeof,  void,  delete
  
  
• 곱셉, 나눗셈, 나머지
  *,  /,  %
  
  
• 덧셈,뺄셈
  +, -
  
  
• 비트 시프트
  <<, >>, >>>
  
  
• 관계
  <, <=, >, >=, in, instanceof
  
  
• 등호
  ==, ===, !=, !==
  
  
• 비트논리곱
  &
  
  
• 비트 배타적 논리합
  ^
  
  
• 논리 곱
  &&
  
  
• 논리 합
  ||
  
• 조건
  ?:
  
  
• 할당
  =, +=, -=, *=, /=, %=, <<=, >>=, >>>=, <<<=, &=, ^=, |=
  
  
• 콤마
  ,

 

대입 연산자 :  =

우변의 계산 값을 좌변에 대입할때 사용한다.

const a = 1, b = 5;
a = b; //a에 b값인 5를 대입
console.log(a); // 5

 

(연산기호) 대입 연산자 :  +=, -=, *=, /=, %=, **=

이해하기가 난해할 수 있지만 쉽게 생각하면 a += b 는  a = a + b 와 같은 식이다.

조금더 간단하게 만든 단축식(short-cut)이라고 생각하면 된다.

// += 더하기 대입연산자
const a = 4, b = 5;
a += b; //a에 a + b의 값을 대입한다.
console.log(a); // 9

// -= 빼기 대입연산자
const a = 4, b = 5;
a -= b; //a에 a - b의 값을 대입한다.
console.log(a); // -1

// *= 곱하기 대입연산자
const a = 4, b = 5;
a *= b; //a에 a * b의 값을 대입한다.
console.log(a); // 20

// /= 나누기 대입연산자
const a = 4, b = 5;
a /= b; //a에 a / b의 값을 대입한다.
console.log(a); // 0.8

// %= 나머지 대입 연산자
const a = 4, b = 5;
a %= b; //a에 a / b의 나머지를 대입한다.
console.log(a); // 4

// **= 지수 대입연산자
//지수승을 말하며 현재값으로는 4의 5승 = 4 ** 5 이다.
let a = 4, b = 5;
a **= b; //a에 a의 b승의 값을 대입한다.
console.log(a); // 1024

//모든 비트연산자도 마찬가지로 작동한다.

 

 

비트연산자 - Bitwise Operator

 

1. 시프트 연산자

시프트 연산자란?

비트를 이동시키는 연산자이다. 즉 10진수를 2진수로 변환하고 2진수로서 연산을 하는 것이다.

시프트연산자는 피연산자가 2개인 2항연산자이며 기호는 <<, >>, <<<, >>> 이 있다.

 

• ※ 8bit 기준 예시입니다.

0

0

0

0

1

0

1

0

10진수의 정수 10을 2진수로 변환 해줬다.

 

 

<<, >> 설명

우선 >>와 <<에 대해서 설명하자면 방향대로 이진수를 이동시켜준다고 생각하면

이해하기 수월하다.

 

10 >> 2의 경우 1010을 오른쪽으로 두칸 움직이는 것이다. 그렇게된다면 10이 되는 것이다.

오른쪽으로 움직이면서 버려진 2진수의 값은 버려진다.(데이터손실)

0

0

0

0

0

0

1

0

그리고 이를 다시 10진수로 바꿔주면 값은 2가 된다.

10 >> 2 = 2

 

그리고 반대로  10 << 2 의 경우는

0

0

1

0

1

0

0

0

이를 10진수로 바꾸어주면 값은 40이 된다.

10 << 2 = 40

 

이를 통해서 10 * 2의 제곱과 같다는 것을 유추할 수 있다. 즉  a << b = a * 2 ^ b인 것이다.

 

 

 

<<<, >>> 설명

이 연산자는 <<, >>과 다른 것은 음수의 표현이 없다는 것.

즉 시프트연산된 2진수의 값을 절대값으로만 반환한다는 것이다.

 

• 절대값 시프트연산 예시

let a = -100, b = 2;

console.log(a >> b); //  -25

console.log(a >>> b); //  1073741799

 

2. 그 외 비트연산자

•  &
  대응되는 비트가 모두 1이면 1을 반환 (비트 AND 연산)
  
  
•  |
  대응되는 비트중에 하나라도 1이면 1을 반환 (비트 OR 연산)
  
  
•  ^
  대응되는 비트가 서로 다르면 1을 반환 (비트 XOR 연산)
  
  
•  ~
  비트가 1이면 0, 0이면 1로 반전시킴 (비트 NOT 연산)

 

&  AND 비트연산 예시

• 31 & 41  ( 비교대상이 모두 1이면 1 )

0	0	0	1	1	1	1	1
&	&	&	&	&	&	&	&
0	0	1	0	1	0	0	1

• = 9

0

0

0

0

1

0

0

1

 

|  OR 비트연산 예시

• 31 | 41  ( 비교대상이 하나라도 1이면 1 )

0	0	0	1	1	1	1	1
|	|	|	|	|	|	|	|
0	0	1	0	1	0	0	1

• = 63

0

0

1

1

1

1

1

1

 

^  XOR 비트연산 예시

• 31 ^ 41  ( 비교대상이 다르면 1 )

0	0	0	1	1	1	1	1
|	|	|	|	|	|	|	|
0	0	1	0	1	0	0	1

• = 54

0

0

1

1

0

1

1

0

 

~  NOT 비트연산 예시

• ~31  ( 비트를 반전시킴 )

0

0

0

1

1

1

1

1

• = 224

1

1

1

0

0

0

0

0

 

 

 

논리 연산자

논리연산자란?

연산자에 '논리’라는 수식어가 붙는다. 논리 연산자는 피연산자로 boolean type뿐 아니라

모든 타입의 값을 받을 수 있으며. 연산 결과도 어떠한 타입의 값을 받을 수 있다.

 

|| OR 연산자

• 피연산자를 불린형으로 변환했을때 피연산자중 하나라도 true인 경우 true를 반환한다.

console.log( true || true );  // true
console.log( true || false );  // true
console.log( false || false );  // false
console.log( false || true || false );  // true

console.log( 1 || 0 );  // true
console.log( 1 || 1 || 0 );  // true
console.log( 0 || 1 );  // true
console.log( 0 || 0 );  // false

피연산자가 불린형이 아닌경우 평가를 불린형으로 변환된다.

예시에서 0과 1같은 경우

 

&&  AND 연산자

• 피연산자를 불린형으로 변환했을때 피연산자 모두 true인 경우에만 true를 반환한다.

console.log( true && true );  // true
console.log( true && false );  // false
console.log( true && true && true );  // true
console.log( true && false && true );  // false

console.log( 1 && 0 );  // false
console.log( 1 && 1 );  // true
console.log( 1 && 0 && 1 );  // false
console.log( 1 && 1 && 1 );  // true

 

!  NOT 연산자

• 피연산자를 불린형으로 변환했을때 피연산자를 반전시킨다.

console.log( !true )  // false
console.log( !false )  // true

console.log( !0 )  // true
console.log( !1 )  // false

 

 

증감연산자

증감연산자란?

변수의 값을 1씩 증가시키거나 1씩 감소시키는 연산자이다. 증감연산자는

1씩 증가시키는 Increment연산자와 1씩 감소시키는 Decrement 연산자가 있다.

 

Increment ++

let num = 0;
num++;
console.log(num);  // 1

/*
num++ 를 풀어쓴다면
num = num + 1;  이다.
*/

Decrement --

let num = 1;
num--;
console.log(num);  // 0

/*
num-- 를 풀어쓴다면
num = num - 1;  이다.
*/

 

 

 

전위 연산자, 후위 연산자

연산자 위치에 따라서 전위(prefix), 후위(postfix)연산자로 나뉜다.

 

전위연산자

let a = 3;
const b = ++a

console.log(a, b);  // 4, 4

연산자가 앞에 붙어있기 때문에 전위 연산자이다.

전위연산자의 특징을 위에 예시로 설명하면 ++a가 b에 할당되기 전에 a가 증가연산이된 후

a자신에게 먼저 할당이 된 이후에  b에 할당된다.

 

전위연산자 풀이

let a = 3;
const b;

a = a + 1;
b = a

console.log(a, b);  // 4, 4

 

 

후위연산자

let a = 3;
const b = a++;

console.log(a, b);  // 4, 3

연산자가 뒤에 붙어있어 후위연산자이다.

후위연산자의 특징을 위에 예시로 설명하면 우선적으로 b에 a가 할당된다.

그 이후에 a = a + 1연산이 이루어지게된다.

 

후위연산자 풀이

let a = 3;
const b;

b = a;  // 먼저 할당되어 b = 3; 인 상태
a = a + 1;  // a = 4

console.log(a, b);  // 4, 3

 

 

증감연산자 대신 복합 대입연산자?

eslint에서는 증감연산자는 자동으로 세미콜론이 추가되는 대상이기 때문에

예상치 못하게 코드의 흐름을 변경시켜 오류를 발생시킬 가능성이 있다고 한다.

그렇기 때문에 eslint에서는 복합대입연산자 사용을 권하고 있는 모양이다.

 

 

 

마치며...

이번엔 자바스크립트 연산자에 대해서 쭉 포스팅을 해보았다. 처음 접해보는 비트연산식이나 전위, 후위 연산자에 대해서 작동형태만 알고 있을 뿐 정확한 작동방식은 모르고 있었는데 이번 포스팅을 통해 더 자세한 로직의 형태를 이해할 수 있게 되었다. 연산자는 코딩을 함에 있어 아주 중요한 내용이니 반드시 index를 기억해두어야겠다.