♠ 코어 자바스크립트

♣ 자바스크립트 기본

♥ 1.8 기본 연산자와 수학

용어: ‘단항’, ‘이항’, ‘피연산자’

연산자에 대해 학습하기 전에, 앞으로 자주 등장하게 될 용어 몇 가지를 정리해 보겠습니다.

• 피연산자(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, 이항 마이너스 연산자는 뺄셈을 해줍니다.
  

  위와 같이 부호를 반전해주는 단항 마이너스 연산자와 뺄셈에 쓰이는 이항 마이너스 연산자(뺄셈 연산자)는 기호는 같지만 수행하는 연산이 다릅니다. 두 연산을 구분하는 기준은 피연산자의 개수입니다.
  

수학

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

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

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

이제 학교에서 배운 기본 산술 연산자를 넘어, 자바스크립트가 제공하는 특별한 연산자 기능에 대해 살펴봅시다.

덧셈 연산자 +는 대개 숫자를 더한 결과를 반환합니다.

그런데 이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결)합니다.

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

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

예시:

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

첫 번째 피연산자가 문자열인지, 두 번째 피연산자가 문자열인지는 중요하지 않습니다. 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환됩니다.

좀 더 복잡한 예시를 살펴봅시다.

alert(2 + 2 + '1' ); // '221'이 아니라 '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 apples = "2";
let oranges = "3";

alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.

원하는 대로 값을 더해주려면, 단항 덧셈 연산자를 사용해 피연산자를 숫자형으로 변화시키면 됩니다.

let apples = "2";
let oranges = "3";

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.

alert( +apples + +oranges ); // 5

// `Number(...)`를 사용해서 같은 동작을 하는 코드를 작성할 수 있지만, 더 기네요.
// alert( Number(apples) + Number(oranges) ); // 5

위 식을 수학자가 본다면 불필요한 덧셈 기호에 대해 언급하며 식이 이상하다고 지적할 겁니다. 프로그래머라면 아니겠지만 말이죠. 위 식은 우리가 의도한 대로 단항 덧셈 연산자가 먼저 문자열을 숫자로 변환시키고, 이항 덧셈 연산자가 그 결과들을 더해주고 있습니다.

증가·감소 연산자

숫자를 하나 늘리거나 줄이는 것은 자주 사용되는 연산입니다.

자바스크립트에서는 이런 연산을 해주는 연산자를 제공합니다.

• 증가(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++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'이라고 부릅니다.
• ++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 부릅니다.

후위형과 전위형은 피연산자인 counter를 1만큼 증가시켜 준다는 점에서 동일한 일을 합니다.

두 형의 차이는 ++/--의 반환 값을 사용할 때 드러납니다.

자, 다시 상기해 보도록 합시다. 이미 배운 바와 같이 모든 연산자는 값을 반환합니다. 증가·감소 연산자도 마찬가지입니다. 전위형은 증가·감소 후의 새로운 값을 반환하는 반면, 후위형은 증가·감소 전의 기존 값을 반환합니다.

아래 예시를 통해 차이점을 직접 살펴보도록 합시다.

let counter = 1;
let a = ++counter; // (*)

alert(a); // 2

(*)로 표시한 줄의 전위형 ++counter는 counter를 증가시키고 새로운 값 2를 반환합니다. 따라서 alert는 2를 표시합니다.

이제 후위형을 살펴봅시다.

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

alert(a); // 1

(*)로 표시한 줄의 후위형 counter++는 counter를 증가시키긴 하지만, 증가 전의 기존 값을 반환합니다. 따라서 alert는 1을 표시합니다.

증가, 감소 연산자에 대한 내용을 정리하면 아래와 같습니다.

• 반환 값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없습니다. let counter = 0; counter++; ++counter; alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.
  
• 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 됩니다. let counter = 0; alert( ++counter ); // 1
  
• 값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 됩니다. let counter = 0; alert( counter++ ); // 0
  

♥ eddy’s point

거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작합니다. 1/2을 사용하면 제곱근을 구할 수 있죠.

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

이점을 이용하면 알고리즘 문제를 풀 때 유용할 것 같습니다.