[JavaScript] 기본 연산자

-
JavaScript에서 많이 사용되는 기본적인 연산자들에 대해 알아보려고 한다.


연산자를 학습할때 알아둬야할 용어들이 있다.

알아둬야할 용어: '단항', '이항', '피연산자'


- 피연산자는 연산자가 연산을 수행하는 대상이다. 1 + 2 라는 연산이 있으면 피연산자는 1과 2이다. 피연산자는 인수라는 용어로 사용되기도 한다.

- 피연산자가 한개인경우 단항 연산자, 두개인 경우 이항 연산자라고 부른다. 위에 1 + 2는 이항 연산자이다.



자바스크립트에서 주로 사용되는 수학 연산자는 아래와 같다.

+    덧셈 연산자

-    뺄셈 연산자

*    곱셈 연산자

/    나눗셈 연산자

%  나머지 연산자

**   거듭제곱 연산자

각 수학 연산자가 자바스크립트에서 어떻게 사용되는지 알아보자



+ (덧셈 연산자)

덧셈 연산자의 경우 숫자+숫자 연산시 숫자 결과값을 반환한다. 

반면에 숫자+문자열인경우 두 숫자를 계산하지않고 결과값으로 문자열을 반환한다.

숫자형이 아닌 피연산자에 +를 붙여주면 숫자형으로 변화한다.


ex) 5 + 5 // 결과 값 10
숫자끼리 연산하여 결과 값은 10이다.

ex) 5 + '5' // 결과 값 '55'
숫자와 문자열을 연산하면 결과값은 문자열이다. 숫자 5와 문자열 5를 연산하면 결과값은 55이다. 문자열 5가 앞으로 와도 동일하게 동작한다.


ex) 5 + +'5' // 결과 값 10
숫자로 변환이 가능한 값들에 + 연산자를 붙여주면 숫자로 반환되어 연산이 가능해진다. 문자열 '5' 앞에 +가 붙으면 숫자 5로 형변환이 된다.

ex) 1 + '2' + 3 + '4' // 결과 값 '1234'
숫자 1과 문자열 '2' 가 더해지면서 문자열이 '12'와 같은 문자열이 되었고 문자열에 숫자를 더해도 문자열로 되기때문에 문자열 '1234'가 된다.

ex) 1 + '2' + 3 + 4 + 5 // 결과 값 '12345'
첫번째 두 피 연산자가 계산되면 문자열 '12'가 되므로 뒤에 3, 4, 5를 더해도 앞에 두개의 피연산자 결과값이 문자열 이므로 문자열 '12345'가 결과 값이된다.

ex) 1 + 2 + 3 + '4' + 5 // 결과 값 '645'
첫번째부터 세번째 피연산자까지는 숫자이므로 계산되어 숫자 6을 반환하고 네번째 피연산자부터 문자열이기때문에 뒤에 값들은 문자열로 합쳐져 결과 '645'가 결과 값이 된다.

ex5) +true // 결과 값 1
true는 1 false는 0으로 표현이 가능하다. 숫자로 형변환이 가능하기 때문에 결과값은 1이다.

ex6) +'' // 결과 값 0
빈 문자열은 +연산자와 만나면 숫자0으로 형 변환이 된다.

ex7) +'가나다' // 결과 값 NaN
문자열은 숫자로 형 변환이 불가능하기 때문에 NaN을 반환한다.

ex8)
let stringNum1 = '2';
let stringNum2 = '3';

stringNum1 + stringNum2 // 결과 값 '23';
+stringNum1 + +stringNum2 // 결과 값 5;

+ 연산자를 작성하지않고 Number(...)를 사용해도 숫자로 변환이 가능한 문자열 타입의 숫자를 숫자로 형변환이 가능하다.
Number(stringNum1) + Number(stringNum2) // 결과 값 5;


- (뺄셈 연산자)

플러스 연산자는 문자열과 숫자를 연산하면 문자열을 결과값으로 반환하는데 반해 마이너스 연산자를 포함한 다른 연산자들은  피연산자가 숫자가 아닌 경우 그 형을 숫자형으로 바꾼다.

뺄셈과 나눗셈 연산자는 아래 예시와 같이 문자열을 숫자형으로 변환하여 연산한다.
ex1) 5 - '2' // 결과 값 3, '2'가 숫자 2로 형 변환되어 계산된다.
ex2) '6' / '2' // 결과 값 3, 두 피연산자가 문자열이지만 숫자형으로 형 변환되어 계산된다.


* (곱셈 연산자), / (나눗셈 연산자)
곱셈과 나눗셈 역할을 하며 마이너스 연산자에서 설명했듯이 플러스 연산자를 제외한 다른 연산자는 문자열로 표현된 숫자들을 숫자형으로 형 변환하여 계산된다.

ex1) '5' * 2 // 결과 값 10
ex2) '4' / 2 // 결과 값 2
ex3) 3 * '가' // 결과 값 NaN



% (나머지 연산자), ** (거듭제곱 연산자)
나머지 연산자는 a % b 와 같이 사용하며 a를 b로 나눈 후 나머지를 정수로 반환한다.

거듭제곱 연산자는 a ** b 와 같이 사용하며 a를 b번 곱한 값이 반환된다.

나머지 연산자와 거듭제곱 연산자 또한 문자열로 표현된 숫자들을 숫자형으로 형 변환하여 계산된다.

ex1) '5' % 2 // 결과 값 1
ex2) '4' ** 2 // 결과 값 16



연산자 우선순위

하나의 표현식에 둘 이상의 연산자가 있는 경우, 실행 순서는 연산자의 우선순위에 의해 결정된다. 

하지만 이러한 연산자 우선순위를 무력화 시킬 수 있는 방법이 있다. 

(...)를 사용하면 자바스크립트에서 정의한 연산자 우선순위를 무력화 시킬 수 있다.

        순위        

        연산자 이름        

        기호        

…

…

…

17

단항 덧셈

+

17

단항 부정

-

16

지수

**

15

곱셈

*

15

나눗셈

/

13

덧셈

+

13

뺄셈

-

…

…

…

3

할당

=

…

…

…


더 자세한 연산자 순위는 아래 MDN 주소에서 확인 가능하다.



복합 할당 연산자

코드를 작성하다보면 변수에 연산자를 사용하고 그 결과 값을 같은 변수에 저장해야하는 경우가 있다.

예를들면 아래 예제와 같이 말이다.
ex)
let n = 5;
n = n + 2;
n = n * 3;

이때 복합 할당 연산자를 사용하면 위 코드를 짧은 문법으로 동일한 동작을 하는 코드를 작성할 수 있다.

ex)
let n = 5;
n += 2; // n은 7이 된다.(n = n + 2와 동일한 코드이다.)
n *= 3; // n은 21이 된다.(n= n * 3과 동일한 코드이다.)

복합 할당 연산자의 우선순위는 할당 연산자와 동일하다. 그래서 다른 연산자가 실행된 이후에 복합 할당 연산자가 실행된다.



증가(++), 감소(--) 연산자

숫자를 하나 증가시키거나 줄이는데 사용하는 연산자이다.

증가 연산자 ++는 변수의 값을 1 증가시킨다.
ex)
let num = 1;
num++;
num // 결과 값 2

감소 연산자 --는 변수의 값을 1 감소시킨다.
ex)
let num = 1;
num--;
num // 결과 값 0



++와 -- 연산자는 변수 앞이나 뒤에 올 수 있다.

num++ 또는 ++num 과 같이 사용 가능하다.

뒤에 연산자가 오면 후위형(postfix form)이라고 부르며 앞에 연산자가 오는 경우는 전위형(prefix form)이라고 부른다.

num++ 은 후위형(postfix form)
++num 은 전위형(prefix form)


전위형과 후위형 둘다 값을 증가, 감소 시키는점은 같으나 
전위형은 값을 증가 또는 감소 후에 증가 또는 감소된 값을 바로 반환하지만
후위형은 증가 또는 감소 이전의 기존값을 반환하는 차이점이 있다.

ex)
let num = 0;
alert(num++); // 결과 값 0, 아래에서 바로 출력하면 값은 증가했지만 해당 부분에 출력 값은 0이다.
alert(num); // 결과 값 1, 위에서는 출력 값이 0이었지만 값이 증가되어 1이 출력된다.
alert(++num); // 결과 값 2, 전위형이므로 값이 바로 1이 증가되어 출력된다.
alert(num); // 결과 값 2, 바로 위에 결과값 2가 출력된다.






댓글

댓글 쓰기