[JavaScript] 자바스크립트 연산자 정리(연산자 우선순위, 대입 연산자)

자바스크립트 연산자 정리 관련해서, 마지막 포스팅이 될 것 같습니다.

 

총 3편으로 나누어서 포스팅하였으니, 비교, 산술, 비트, 논리 연산자에 대해서 글을 읽고 싶은 분은 아래 링크를 참고해주세요.

[JavaScript] 자바스크립트 연산자 정리(비트, 논리 연산자)

[JavaScript] 자바스크립트 연산자 정리(비교, 산술 연산자)

 

혹시나, 이 글을 처음 접하는 분이 계실지도 모르기 때문에, 반복해서 연산자의 중요성을 씁니다.

일단, 프로그래밍을 처음 접하게 되면, 문법 중에서 연산자를 가장 먼저 접하지 않을까 싶습니다. 그만큼, 연산자는 중요하고, 쉬우면서, 많이 사용하는 문법 중 하나라고 할 수 있습니다.

 

또한, 프로그래밍 언어 대부분이 비슷한 연산자를 사용하기 때문에, 연산자에 대해서 한번씩만 이해한다면 응용하는 것에도 그리 어렵지 않다는 것을 깨닫게 되실 거에요.

 

이번 포스팅은 연산자의 우선순위와 대입 연산자에 대해서 정리를 하도록 하겠습니다.

 

그럼, 바로 설명으로 들어가도록 하겠습니다.

 

연산자의 우선순위를 알아보자.

사실, 연산자 관련해서 정리하는 포스팅 내용 중에서, 가장 먼저 써야되나 고민했었는데 결국 제일 마지막에 쓰게 되네요.

 

연산자의 우선순위는 아래 표와 같습니다.

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

[출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators]

 

연산자 우선순위에 대해서 이해가 안되시는 분이 있을 수 있으므로, 간단하게 예제로 설명하도록 하겠습니다.

 

우리는 사칙연산을 할때에도 순서에 맞춰서 계산을 합니다. 예를 들면, 나눗셈과 곱셈을 더하기와 빼기보다 먼저 하죠. 연산자 우선순위도 그것과 같습니다.

아래의 경우에는 2순위인 괄호부터 계산합니다. 그래서 8이라는 값이 나오죠. 이후에, 4순위인 곱하기를 합니다.

그 후, 8과 10을 5순위인 빼기를 하는 것입니다. 따라서, -2라는 값이 나오게 되는 것이죠.

var a = 0;
a = (3 + 5) - 2 * 5; // -2

 

 

대입 연산자에 대해서 알아보자.

대입 연산자는 등호(=)를 이용하여, 우변에 있는 피연산자끼리 연산자로 계산한 값을 좌변에 대입을 하는 연산자를 말합니다.

예를 들면, c = a + b 라는 수식이 있다면, a와 b를 더한 값을 대입 연산자 = 를 이용하여 c에 대입하는 것입니다.

대충 어떤 느낌인 지는 감이 오실 것으로 생각하고, 어떠한 대입 연산자가 있는 지 정리하도록 하겠습니다.

 

= : 기본 대입 연산자

우리가 흔히 알고 있는 등호 입니다. 프로그래밍에서는 우변에 있는 계산 값을 좌변에 대입할 때 사용하는 연산자 입니다.

// 대입 연산자 예제.
var a = 3, b = 5;
a = b; // a에 b값을 대입한다.
console.log('a = ' + a); // a = 5

 

+= : 덧셈 대입 연산자

프로그래밍을 처음 하시는 분이라면 헷갈릴만한 모습입니다. 더하기 연산자 인지, 대입 연산자 인지 말입니다. 정답은 둘 다입니다.

a += b 라는 수식으로 예를 들어볼께요. 이것은, 풀어서 말하면 a = a + b 와 같습니다.

바로 예제를 보시면 이해가 쉬울 것입니다.

// 더하기 대입 연산자 예제.
var a = 3, b = 5;
a += b; // a에 a + b 값을 대입한다.
console.log('a = ' + a); // a = 8

 

-= : 빼기 대입 연산자

덧셈 대입 연산자를 보셨으니, 이해하는 데 편하실 거에요. 빼기 대입 연산자는 뺀 후에 대입을 하는 연산자입니다.

a -= b 라는 수식으로 예를 들어보겠습니다. 이것은 풀어서 a = a - b 와 같습니다.

역시, 예제를 보시면 이해하실 거에요.

// 빼기 대입 연산자 예제.
var a = 3, b = 5;
a -= b; // a에 a - b 값을 대입한다.
console.log('a = ' + a); // a = -2

 

*= : 곱하기 대입 연산자

더하기 빼기 대입 연산자와 같으므로, 바로 예제로 설명하도록 하겠습니다.

a *= b 라는 수식이 있다면, 다시 말해서 a = a * b와 같습니다.

// 곱하기 대입 연산자 예제.
var a = 3, b = 5;
a *= b; // a에 a * b 값을 대입한다.
console.log('a = ' + a); // a = 15

 

/= : 나누기 대입 연산자

나누기 대입 연산자는 나눈 후에 대입을 하는 연산자 입니다.

바로 예로 설명하도록 하겠습니다. a /= b 라는 수식은, a = a / b 와 같습니다.

// 나누기 대입 연산자 예제.
var a = 3, b = 5;
a /= b; // a에 a / b 값을 대입한다.
console.log('a = ' + a); // a = 0.6

 

%= : 나머지 대입 연산자

프로그래밍을 처음 하시는 분이라면 나머지 연산도 잘 모르실 수 있습니다.

나머지 연산이란, 피연산자끼리 나눈 후에 나머지 값을 반환하는 연산입니다.

예를 들면, 5 % 3 = 2 와 같습니다.

// 나머지 대입 연산자 예제.
var a = 3, b = 5;
a %= b; // a에 a % b 값을 대입한다.
console.log('a = ' + a); // a = 3

 

**= : 지수 대입 연산자

이것 역시 프로그래밍을 처음 하시는 분이라면 지수 대입 연산자도 처음 듣는 분이 많으실텐데요.

이것은 수학에서 지수승이라고 생각하시면 되겠습니다.

예를 들면, 2의 10승을 수식으로 표현하자면, 2 ** 10과 같다고 보시면 되겠습니다.

예제는 아래와 같습니다.

// 나머지 대입 연산자 예제.
var a = 3, b = 5;
a %= b; // a에 a % b 값을 대입한다.
console.log('a = ' + a); // a = 3

 

<< : 왼쪽 시프트 대입 연산자

시프트라는 용어도 모르시는 분이 계실 수 있기 때문에 간단하게 설명하자면, 우리가 사용하는 십진수를 이진수로 변경하여 왼쪽 또는 오른쪽으로 한 자리씩 이동하는 것을 말합니다.

왼쪽 시프트는 왼쪽으로 한 자리씩 이동하는 것입니다. 이때, 한 자리를 한 비트라고 생각하시면 되겠습니다.

예를 들어, 4 << 2 라는 수식이 있습니다. 4는 이진수로 바꾸면 100입니다. 이 값을 2번 왼쪽으로 움직이면 10000이 됩니다. 10000을 다시 십진수로 변경하면, 16이 되겠죠.

아래 예제를 보시면서 이해해보세요.

// 왼쪽 시프트 대입 연산자 예제.
var a = -3, b = 5;
a <<= b; // a에 a << y 값을 대입한다.
console.log('a = ' + a); // a = 96

 

>> : 오른쪽 시프트 대입 연산자

왼쪽과는 반대로 오른쪽으로 한 자리씩 이동하는 연산자입니다. 이때, 오른쪽으로 더 이상 이동할 수 없다면, 그 숫자는 버립니다.

즉, 3 >> 2 라는 수식이 있습니다. 3을 이진수로 바꾸면 11이 됩니다. 이 값을 2번 오른쪽으로 움직이면 0이 됩니다.

// 오른쪽 시프트 대입 연산자 예제.
var a = -80, b = 5;
a >>= b; // a에 a >> y 값을 대입한다.
console.log('a = ' + a); // a = 2

 

>>> : 부호 없는 오른쪽 시프트 대입 연산자

>> 연산자와 비슷하지만, 피연산자가 음의 숫자일 경우에 차이가 있습니다. >> 연산자는 음의 숫자를 시프트할 때, 음의 숫자로 인식하지만, >>> 연산자의 경우에는 음의 숫자로 인식하지 않고 숫자 그대로 값을 반환한다는 것입니다.

예제를 보시면 좀 더 이해하는 데 편하실 거에요. 아래처럼, >>=를 사용할 때는 마이너스 값을 그대로 반환하지만, >>>=를 사용하면 같은 비트 숫자라도 양의 숫자로 반환한다는 것입니다.

// 부호 없는 왼쪽 시프트 대입 연산자 예제.
var a = -100, b = 2;
console.log(a >>= b); // -25

var a = -100, b = 2;
console.log(a >>>= b); // 1073741799

 

&= : 비트 AND 대입 연산자

비트 AND 연산과 대입 연산을 혼합한 연산자입니다. 즉, a &= b 는 a = a & b 와 같은 수식입니다.

// 비트 AND 대입 연산자 예제.
var a = 5, b = 3;
a &= b; // a에 a & y 값을 대입한다.
console.log('a = ' + a); // a = 1

 

|= : 비트 OR 대입 연산자

비트 OR 연산과 대입 연산을 합친 연산자입니다. 즉, a |= 는 a = a | b 와 같은 수식이라고 할 수 있습니다.

// 비트 OR 대입 연산자 예제.
var a = 5, b = 3;
a |= b; // a에 a | y 값을 대입한다.
console.log('a = ' + a); // a = 7

 

혹시나 글을 보시면서 이해가 안되는 연산자가 있다면, 글의 상단 부분에 다른 연산자에 대한 설명을 포스팅으로 정리하였으니, 참고하시면 좋을 것 같습니다.

잘못된 내용이나 이해가 안되시는 부분이 있다면 댓글 남겨주세요! :)