[JavaScript] The Modern JavaScript Tutorial - (2-8) Basic operators, maths

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

피연산자(operand)는 연산자가 연산을 수행하는 대상이다.

5 * 2에는 왼쪽 피연산자 5와 오른쪽 피연산자 2, 총 두 개의 피연산자가 있다. 인수(argument)라는 용어로 불리기도 한다.

피연산자를 하나만 받는 연산자는 단항(unary) 연산자라고 부른다. 단항 마이너스 연산자 -가 그 대표적이 예이다.

let x = 1;
x = -x;
alert(x);   // -1, 단항 마이너스 연산자는 부호를 뒤집는다.

피연산자를 두 개 받는 연산자는 이항(binary) 연산자라고 부르며, 앞서 나온 마이너스 연산자는 이항 연산자로도 사용할 수 있다.

let a = 1, b = 3;
alert(b - a);   // 2, 이항 마이너스 연산자는 뺄셈 처리한다.

기호는 같지만 피연산자의 갯수에 따라 수행하는 연산이 달라지는 경우가 있음을 기억하자.

 

수학

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

 

나머지 연산자 %

나머지 연산자(remainder operator)는 % 기호로 나타내며, a % b는 a를 b로 나눈 후 그 나머지를 정수로 반환해 준다.

alert(5 % 2);   // 5를 2로 나눈 후, 나머지인 1을 출력한다.
alert(8 % 3);   // 8을 3으로 나눈 후, 나머지인 2를 출력한다.

 

거듭제곱 연산자 **

거듭제곱 연산자(exponentiation operator)를 사용한 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'이 출력된다.

두 개의 숫자 뒤에 문자열이 오는 경우, 숫자끼리 먼저 더해진 후에 문자열과의 병합이 일어난다.

alert(6 - '2');     // 4, '2'를 숫자로 바꾼 후 연산한다.
alert('6' / '2');   // 3, 두 피연산자를 숫자로 바꾼 후 연산한다.

 

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

+는 단항 연산자로도 사용할 수 있다.

숫자에 단항 덧셈 연산자를 붙이면 아무런 동작도 하지 않지만, 피연산자가 숫자가 아닌 경우네는 숫자형으로의 변환이 일어난다. Number(...)와 동일하게 동작한다.

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

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

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

개발을 하다 보면 문자열을 숫자로 변환해야 하는 경우가 자주 생긴다.

HTML form에서 값을 가져왔는데, 그 값이 문자형일 때 등등... 실제 폼에서 가지고 온 값은 대개 문자열이다. 다음 예제를 보자.

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

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

 

연산자 우선순위

Operator precedence

Operator precedence - JavaScript | MDN

 

할당 연산자

할당할 때 쓰이는 = 또한 할당(assignment) 연산자라고 불린다.

우선순위가 낮기 때문에 x = 2 * 2 + 1과 같은 표현식에서 계산이 먼저 이뤄지고, 그 결과가 x에 할당되는 이유가 바로 이 때문이다.

let x = 2 * 2 + 1;
alert(x);   // 5

자바스크립트에서 대부분의 연산자들은 값을 반환한다. +와 -뿐만 아니라 = 역시 값을 반환한다.

x = value를 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환된다.

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

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

a = b = c = 2 + 2;

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

할당 연산자를 여러 개 연결한 경우, 맨 우측부터 연산이 진행된다. 2 + 2 → c → b → a

그러나 가독성을 위해 각각 줄을 나눠서 작성하도록 하자.

 

복합 할당 연산자

let n = 2;
n += 5; // n = n + 5
n *= 2; // n = n * 2

복합 할당 연산자는 산술 연산자와 비트 연산자에도 적용할 수 있다. +=, *=, -=, /= 등...

우선 순위는 할당 연산자와 동일하다. 대부분의 다른 연산자들이 실행된 후에 복합 할당 연산자가 실행된다.

let n = 2;
n *= 3 + 5;
alert(n);   // 16, 우측의 3 + 5 = 8부터 계산되기 때문에 n = n * 8

 

증가·감소 연산자

증가(increment) 연산자 ++는 변수를 1 증가시키고, 감소(decrement) 연산자 --는 변수를 1 감소시킨다.

변수에만 사용할 수 있다는 걸 명심하자. 5++처럼 값에 사용하지 못한다.

let counter = 2;
counter++;  // counter = counter + 1
counter--;  // counter = counter - 1

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

counter++처럼 피연산자 뒤에 올 때는 '후위형(postfix form)', ++counter처럼 피연산자 앞에 올 때는 '전위형(prefix form)'이라고 부른다.

두 형 모두 피연산자인 counter에 1만큼 처리한다는 점에서 동일하지만, ++/--의 반환값을 사용할 때 차이점이 드러나게 된다.

// prefix form
let counter = 1;
let a = ++counter;    // 증가 이후의 값 반환
alert(a);   // 2

// postfix form
let counter = 1;
let a = counter++;    // 증가 이전의 값 반환
alert(a);   // 1

 

비트 연산자

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

• & AND
• | OR
• ^ XOR
• ~ NOT
• <<
• >>
• >>>

Expressions and operators

Expressions and operators - JavaScript | MDN

 

쉼표 연산자

쉼표 연산자(comma operator) ,는 특이한 연산자 중 하나이다. 코드를 짧게 쓰려는 의도로 가끔 사용된다.

여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 이를 사용한다. 단, 코드 가독성에 도움이 되지 않기 때문에 정말 필요한 경우에만 사용하길 권장한다.

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

for (a = 1, b = 3, c = a * b; a < 10; a++) {
    //...
}

 

과제

전위형과 후위형

let a = 1, b = 1;

let c = ++a;    // ?
let d = b++;    // ?

/*
a = 2, b = 2, c = 2, d = 1
*/

 

할당 후 결과 예측하기

let a = 2;

let x = 1 + (a *= 2);

/*
a = 4, x = 5
*/

 

형 변환

"" + 1 + 0      // "10"
"" - 1 + 0      // -1
true + false    // 1
6 / "3"         // 2
"2" * "3"       // 6
4 + 5 + "px"    // "9px"
"$" + 4 + 5     // "$45"
"4" - 2         // 2
"4px" - 2       // NaN
7 / 0           // Infinity
"  -9  " + 5    // "  -9  5"
"  -9  " - 5    // -14
null + 1        // 1
undefined + 1   // NaN
" \t \n" - 2    // -2

 

덧셈 고치기

let a = prompt("덧셈할 첫 번째 숫자를 입력해 주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해 주세요.", 2);

//alert(a + b); // 12
alert(+a + +b); //3

 

 

해당 포스트는 'The Modern JavaScript Tutorial' 문서를 읽으며 개인 백업용으로 메모하였습니다.

javascript.info/

The Modern JavaScript Tutorial