JavaScript[기본 연산자와 수학]

이번 시간에는 기존의 사칙연산과 자바스크립터에서만 제공하는 연산자에 대해 알아보겠습니다.

 

용어: '단항', '이항', '피연산자', 연산자

먼저 용어 몇 가지에 대해 정리해보겠습니다.

• 피연산자는 연산자가 연산을 수행하는 대상입니다. 
  5 * 2 이면 피연산자는 5, 2 총 두 개의 피연산자가 있습니다. 피연산자는 인수라고 불리기도 합니다.
• 피연산자를 하나만 받는 연산자를 단항 연산자라고 합니다.
  let x = 1; 에서 1은 단항 연산자입니다.
• 두 개의 피연산자를 받는 연산자는 이항 연산자라고 부릅니다.
  let x = 1, y = 3; alert(y-x); // 2 -는 이항 연산자이다.

 

 

수학

자바스크립트에서 지원하는 수학 연산자는 다음과 같습니다.

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %,
• 거듭제곱 연산자 **

%과 **에 대해 설명하겠습니다.

 

나머지 연산자 %

나머지 연산자는 %로 나타내며 a%b 와 같은 형태로 나타냅니다.

이 의미는 a를 b로 나눈 후 그 나머지를 반환하라는 의미입니다.

예시

alert(5%2); // 5를 2로 나눈 나머지 1을 출력
alert(8%3); // 8을 3으로 나눈 나머지 2를 출력

 

거듭제곱 연산자 **

거듭제곱 연산자를 사용한 a**b를 평가하면 a를 b번 곱한 값이 반환됩니다.

alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

 

거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작합니다.

alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)

 

 

이항 연산자 '+'와 문자열 연결

자바스크립트에서 제공하는 특별한 연산자 기능에 대해 알아보겠습니다.

덧셈 연산자 +는 숫자를 더한 결과를 반환할 뿐만 아니라 피연산자로 문자열이 전달되면 덧셈 연산자는 문자열을 병합(연결)합니다.

let s = "my" + "string";
alert(s); // mystring

 

따라서 이항 연산자 +를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점에 주의해야합니다.

alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"

 

피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환됩니다.

alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.

연산은 왼쪽에서 오른쪽으로 순차적으로 진행되기 때문에 2+2의 계산이 된 후 문자열 1과 더해져서 41이 출력되었습니다.

 

반대로 뺄셈과 나눗셈 연산자가 문자형 피연산자를 어떻게 다루는지 살펴보겠습니다.

alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산이 진행됩니다.
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행됩니다.

뺄셈과 나눗셈은 문자열을 숫자로 바꾸어 연산을 진행하는 것을 확인할 수 있습니다.

 

 

단항 연산자 +와 숫자형으로의 변환

덧셈 연산자 +는 이항 연산자뿐만 아니라 단항 연산자로도 사용할 수 있습니다.

숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않습니다. 그러나 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어납니다.

// 숫자에는 아무런 영향을 미치지 않습니다.
let x = 1;
alert(+x); // 1

let y = -2;
alert(+y); // -2

// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert(+""); // 0

단항 덧셈 연산자는 짧은 문법으로 Number(...)와 같은 일을 진행합니다.

이는 개발을 할 때 문자열을 숫자로 변환하는 경우에 쓰일 수 있습니다. html 폼(form)필드에서 값을 가져왔을 때 그 값이 문자형일 때가 대표적이다. 실제로 폼에서 가져온 값은 대부분 문자열이다.

그래서 덧셈 연산자를 이용하면 문자형을 숫자로 바꿀 수 있다.

let apple = "2";
let orange = "3";

alert(apple + orange); // 23, 이항 덧셈 연산자는 문자열을 연결한다.

// 이항 덧셈 연산자가 적용되기 전에 단항 덧셈 연산자가 피연산자들을 숫자형으로 바꿔준다.
alert(+appel + +orange); // 5

 

연산자 우선순위

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

예를 들어 1 + 2 * 2 라는 식이 있으면 *가 +보다 높은 우선순위를 가지고 있다.

자바스크립트에서 정의한 연산자 우선순위가 마음에 들지 않는다면 괄호를 사용하면 된다. (1 + 2) * 2 에서 *보다 +가 우선되는 것처럼 말이다.

연산자 우선순위는 다음 페이지에서 확인할 수 있습니다.

참고로 우선순위 숫자가 클수록 먼저 실행하는 순위가 됩니다. 순위가 같으면 왼쪽부터 시작합니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Operator precedence - JavaScript | MDN

 

 

할당 연산자

무언가를 할당할 때 쓰이는 =도 연산자입니다. 할당 연산자라고 불리며 우선순위는 3으로 아주 낮습니다.

그래서 x = 2 * 2 + 2 라는 식이 있을 때 모든 계산이 끝나고 x에 할당되는 것입니다.

이를 활용해서 좀 더 복잡한 표현식을 작성할 수 있습니다.

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

다만 이렇게 작성하면 가독성이 떨어지기에 코드를 작성할 때는 사용하지 않는다.

 

할당 연산자 체이닝

할당 연산자는 아래와 같이 여러 개를 연결할 수도 있습니다(체이닝).

let a; b; c;

a = b = c = 2 + 2;

alert(a); //4
alert(b); //4
alert(c); //4

이처럼 할당 연산자를 여러 개 연결한 경우, 평가는 우측부터 진행됩니다. 먼저 가장 우측의 2 + 2가 평가되고, 그 결과가 왼쪽에 순차적으로 할당됩니다. 그러면 모든 변수가 같은 값을 공유하게 됩니다.

그런데 이렇게 작성하는 것은 가독성이 나쁨으로 다음과 같이 작성하는 것을 권유합니다.

c = 2 + 2;
b = c;
a = c;

 

복합 할당 연산자

코드를 작성하다 보면 변수에 연산자를 적용하고 그 결과를 같은 변수에 저장해야 하는 경우가 생깁니다.

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과 동일합니다.)

 

 

증가 감소 연산자

숫자를 하나 늘리거나 줄이는 것은 자주 사용되는 연산입니다. 자바스크립트에서는 이런 연산을 해주는 연산자를 제공합니다.

• 증가 연산자 ++ 는 변수 1을 증가시킵니다.

let counter = 2;
counter++;      // counter = counter + 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 3

• 감소 연산자 -- 는 변수 1을 감소시킵니다.

let counter = 2;
counter--;      // counter = counter - 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 1

❗ 증가 / 감소 연산자는 변수에만 쓸 수 있습니다. 5++와 같이 사용하려고 하면 에러가 발생합니다.

 

증가 감소 연산자는 변수 앞(전위형)이나 뒤(후위형)에 올 수 있습니다. 다만 이 차이는 반환 값을 사용할 때 드러납니다.

// 전위형
let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

//후위형
let counter = 1;
let a = counter++; // (*) ++counter를 counter++로 바꿈

alert(a); // 1

둘 다 counter에 1만큼 증가시켜주지만 전위형은 증가시킨 값 2를 반환하고 후위형은 증가시키기 전의 값인 1을 반환합니다.

 

그래서 반환 값을 사용하지 않는 경우라면 전위형과 후위형에 차이가 없습니다.

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.

 

비트 연산자

비트 연산자(bitwise operator)는 인수를 32비트 정수로 변환하여 이진 연산을 수행합니다.

이런 비트 조작 관련 연산자는 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어에서 지원합니다.

다음은 비트 연산 시 쓰이는 연산자 목록입니다.

• 비트 AND ( & )
• 비트 OR ( | )
• 비트 XOR ( ^ )
• 비트 NOT ( ~ )
• 왼쪽 시프트(LEFT SHIFT) ( << )
• 오른쪽 시프트(RIGHT SHIFT) ( >> )
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )

비트 연산자는 흔하게 쓰이진 않습니다. 웹 개발 시엔 이런 일이 자주 있지 않기 때문에 비트 연산자를 만날 일은 거의 없습니다. 암호를 다뤄야 할 때는 비트연산자가 유용하기 때문에 나중에 MDN에서 비트 연산자에 대해 알아보는 것을 추천드립니다.

 

 

쉼표 연산자

쉼표 연산자 , 는 보기 힘든 특이한 연산자 입니다.

쉼표 연산자를 사용하면 코드 한 줄에서 여러 표현식을 평가할 수 있지만 마지막 표현식의 결과만 반환됩니다.

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

예시를 보면 1 + 2 가 버려지고 3 + 4만 실행되어 a에 할당되었습니다. 이때 주의할 것은 쉼표의 우선순위가 매우 낮다는 점입니다. 할당 연산자인 = 보다 낮아 위의 예시에서는 괄호를 사용하였습니다.

만약 저기서 괄호를 뺐다면 a = 3, 7에서 = 가 실행되어 3이 a에 할당어 alert가 실행될 것입니다. 그러면 7은 무시됩니다.

이런 연산자를 어디서 사용할 수 있을까요?

바로 여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 이를 사용합니다.

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}