오늘 공부하면서 나는 JS에 대한 깊이 있는 이해와 활용 능력이 많이 부족한 상태라고 생각했다.
단순한 암기가 아니라 “왜 그렇게 되는지”를 깊이 이해해야 하는 단계인 것 같다.
내가 잘 모르는 부분들을 정리하면서 공부해 보겠다.
용어
-
피연산자(operand)는 연산자가 연산을 수행하는 대상이다.
5*2에는 왼쪽 피연산자5와2총 두 개의 피연산자가 있다. ‘피연산자’는 ‘인수(argument)’라는 용어로 불리기도 한다. -
피연산자를 하나만 받는 연산자는 단항(unary) 연산자라고 부른다. 피연산자의 부호를 뒤집는 단항 마이너스 연산자
-는 단항 연산자의 대표적인 예이다.
let x = 1;
x = -x
alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집는다.- 두 개의 피연산자를 받는 연산자는 이항(binary) 연산자라고 부른다. 마이너스 연산자는 아래와 같이 이항 연산자로 쓸 수도 있다.
let x = 1, y = 3;
alert( y - x ); // 2, 이항 마이너스 연산자는 뺄셈을 해 준다.위와 같이 부호를 반전해 주는 단항 마이너스 연산자와 뺄셈에 쓰이는 이항 마이너스 연산자(뺄셈 연산자)는 기호는 같지만 수행하는 연산이 다르다. 두 연산을 구분하는 기준은 피연산자의 개수이다.
수학
자바스크립트에서 지원하는 수학 연산자는 다음과 같다.
- 덧셈 연산자
+ - 뺄셈 연산자
- - 곱셈 연산자
* - 나눗셈 연산자
/ - 나머지 연산자
% - 거듭제곱 연산자
**
나머지 연산자 %
나머지 연산자(remainder operator)는 % 기호로 나타내지만, 비율을 나타내는 퍼센트와는 관련이 없다.
나머지 연산자를 사용한 표현식 a & b는 a를 b로 나눈 후 그 나머지(remainder)를 정수로 반환한다.
alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력거듭제곱 연산자 **
거듭제곱 연산자(exponentiation operator)를 사용한 a ** b를 평가하면 a를 b번 곱한 값이 반환된다.
alert( 2 ** 2 ); // 4
alert( 2 ** 3 ); // 8거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작한다.
alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)이항 연산자 ’+‘와 문자열 연결
덧셈 연산자 +는 대게 숫자를 더한 결과를 반환한다.
그런데 이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합한다.
let a = "my" + "treasure";
alert(a); // mytreasure따라서 이항 연산자 +를 쓸 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점에 주의해야 한다.
alert(2 + 2 + '1'); // '221;'이 아니라 '41'이 출력된다.연산은 왼쪽에서 오른쪽으로 순차적으로 진행되기 때문에 이런 결과가 나왔다. 두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어난다.
이처럼 이항 덧셈 연산자 +는 문자열 연결과 변환이라는 기능을 제공한다. 다른 산술 연산자가 오직 숫자형의 피연산자만 다루고, 피연산자가 숫자형이 아닌 경우에 그 형을 숫자형으로 바꾸는 것과는 대조적이다.
아래는 뺄셈 -과 나눗셈 / 연산자가 어떻게 문자형 피연산자를 다루는지를 보여준다.
alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산이 진행됨.
alert ( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행됨.단한 연산자 +와 숫자형으로의 변환
덧삼 연산자 +는 이항 연산자뿐 아니라 단항 연산자로도 사용할 수 있다.
숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않는다. 그러나 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어난다.
// 숫자형이 아닌 피연산자는 숫자형으로 변환한다.
alert(+true); // 1
alert(+""); // 0단항 덧셈 연산자는 짧은 문법으로도 Number(...)와 동일한 일을 할 수 있게 해 준다.
할당 연산자
무언가를 할당할 때 쓰이는 =도 연산자이다. 이 연산자는 할당(assignment) 연산자라고 불리는데, 우선순위는 3으로 아주 낮다.
x = 2 * 2 + 1과 같은 표현식에서 계산이 먼저 이뤄지고, 그 결과가 x에 할당되는 이유도 바로 이 때문이다.
값을 반환하는 할당 연산자
=는 연산자이기 때문에 흥미로운 함축성을 내포하고 있다.
js에서 대부분의 연산자들은 값을 반환한다. +와 -뿐 아니라 = 역시 값을 반환한다.
x = value를 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환된다.
할당 연산자 체이닝
할당 연산자는 아래와 같이 여러개를 연결할 수도 있다.
let a, b, c;
a = b = c = 2 + 2;
alert(a); // 4
alert(b); // 4
alert(c); //4이렇게 할당 연산자를 어러개 연결한 경우, 평가는 우측부터 진행된다. 먼저 가장 우측의 2+2가 평가되고, 그 결과가 좌측의 c, b, a에 순차적으로 할당된다.
복합 할당 연산자
프로그램을 짜다 보면, 변수에 연산자를 적용하고 그 결과를 같은 변수에 저장해야 하는 경우가 종종 생긴다.
아래와 같은 경우다.
let n = 2;
n = n + 5;
n = n * 2;이때, +=와 *= 연산자를 사용하면 짧은 문법으로 동일한 연산을 수행할 수 있다.
let n = 2;
n += 5; // n은 7이 된다. (n = n + 5와 동일)
n *= 2; // n은 14가 된다. (n = n * 2와 동일)
alert(n); //14이런 복합 할당 연산자는 산술 연산자와 비트 연산자에도 적용할 수 있다. /=, -= 등의 연산자를 만들 수 있다.
복합 할당 연산자의 우선순위는 할당 연산자와 동일하다. 따라서 대부분 다른 연산자가 실행된 후에 복합 할당 연산자가 실행된다.
let n = 2;
n *= 3 + 5;
alert(n); // 16 (*=의 우측이 먼저 평가되므로, 위 식은 n *= 8과 동일하다.증가, 감소 연산자
- 증가(increment) 연산자
++는 변수를 1 증가시킨다.
let counter = 2;
counter++; // counter = counter + 1과 동일하게 동작
alert(counter); // 3- 감소(decrement) 연산자
--는 변수를 1 감소시킨다.
let counter = 2;
counter--; // counter = counter - 1과 동일하게 동작
alert(counter); // 1증가, 감소 연산자는 변수에만 쓸 수 있다. 5++와 같이 값에 사용하려고 하면 에러가 발생한다.
++와 -- 연산자는 변수 앞에나 뒤에 올 수 있다.
counter++와 같이 피연산자 뒤에 올 때는, '후위형'이라고 부른다.++counter와 같이 피연산자 뒤에 올 때는, '전위형'이라고 부른다.
후위형과 전위형은 피연산자인 counter를 1만큼 증가시켜 준다는 점에서 동일한 일을 한다.
두 형의 차이는 ++/--의 변환 값을 사용할 때 드러난다.
모든 연산자는 값을 반환한다. 증가, 감소 연산자도 마찬가지이다. 전위형은 증가, 감소 후 새로운 값을 반환하는 반면, 후위형은 증가, 감소 전의 기존 값을 반환한다.
let counter = 1;
let a = ++counter // (*)
alert(a); // 2(*)로 표시한 줄의 전위형 ++couter는 counter를 증가시키고 새로운 값 2를 반환한다. 따라서 alert는 2를 표시한다.
후위형
let counter = 1;
let a = counter++; // (*)
alert(a); // 1(*)로 표시한 줄의 후위형 couter++는 counter를 증가시키긴 하지만, 증가 전의 기존값 1을 반환한다.
정리
- 반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없다.
- 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 된다.
- 값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 된다.
