[ JavaScript ] 기본 연산자와 수학

기본 연산자와 수학

· 덧셈(+), 곱셈(*),뺄셈(-)

· '단항', '이항', '피연산자'

---

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

  5*2에는 왼쪽 피연산자 5와 오른쪽 피연산자2, 총 두개의 피연산자가 있다.

· 피연산자를 하나만 받는 연산자는 단항(unary) 연산자라고 부른다.

  피연산자는 부호를 뒤집는 단항 마이너스 ㅕㄴ산자 - 는 단항 연산자의 대표적인 예시이다.

let x = 1;

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

· 두 개의 피연산자를 받는 연산자는 이항(binary) 연산자라고 부른다.

  마이너스 연산자는 아래와 같이 이항 연산자로 쓸 수도 있다.

let x = 1, y = 3;
alert( y - x );  // 2, 이항 마이너스 연산자는 뺄셈을 해준다.

 

 

 

 

1. 수학

· 덧셈 연산자 +

· 뺄셈 연산자 -

· 곱셈 연산자 *

· 나눗셈 연산자 /

· 나머지 연산자 %

· 거듭제곱 연산자 **

 

1) 나머지 연산자 %

· 나머지 연산자는 % 기호로 나타내지만 비율을 나타내는 퍼센트와 관련은 없다.

· 나머지 연산자를 사용한 표현식 a % b 는 a를 b로 나눈 후 그 나머지를 정수로 반환해준다.

 

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 )

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

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

 

 

 

 

 

 

 

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, 두 피연산자가 숫자로 바뀐 후 연산이 진행된다.

 

 

 

 

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

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

· 숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않는다.

  하지만 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어난다.

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

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

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

· 단항 덧셈 연산자는 짧은 문법으로도 Number(...)와 동일한 일을 할 수 있게 해준다.

 

· 이항 덧셈 연산자를 사용하면 아래와 같이 문자열로 변해서 연결이 된다.

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

 

단항 덧셈 연산자가 먼저 문자열을 숫자로 변환시키고 이항 덧셈 연산자가 그 결과값을 더해준다.

 

 

 

 

 

 

 

 

 

 

4. 연산자 우선순위

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

· 1 + 2 * 2 라는 식이 있을 때 곱셈이 먼저 그 후에 덧셈이 일어난다. 이런 개념이 연산자 우선순위이다.

· 괄호는 모든 연산자보다 우선순위가 높기 때문에 자바스크립트에서 정의한 연산자 우선순위를 무력화 시킨다.

· 순위가 같으면 왼쪽부터 시작해서 오른쪽으로 연산이 수행된다.

순위	연산자 이름	기호
17	단항 덧셈	+
17	단항 부정	-
16	지수	**
15	곱셈	*
15	나눗셈	/
13	덧셈	+
13	뺄셈	-
3	할당	=

'단항 덧셈 연산자'는 우선순위 17로 '이항 덧셈 연산자'의 우선순위 13보다 높다.

표현식 "+apples + +oranges"에서 단항 덧셈 연산자가 덧셈보다 먼저 수행되는 이유가 바로 연산자 우선순위 때문이다.

 

 

 

 

 

 

 

5. 할당 연산자

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

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

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

 

 

 

 

 

6. 값을 반환하는 할당 연산자

· =는 연산자이기 때문에 흥미로운 함축성을 내포하고 있다.

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

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

let a = 1;
let b = 2;

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

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

위 예제에서 표현식 ( a = b + 1 )은 a에 값을 할당하고 그 값인 3을 반환한다. 그리고 반환 값은 이어지는 표현식에 사용된다.

하지만 직접 코드를 작성할 땐 이런 방식을 사용하지 않는것이 좋다. 이런 트릭을 사용하면 코드가 명확하지 않을 뿐만 아니라 가독성도 떨어지기 때문이다.

 

 

 

 

 

 

7. 할당 연산자 체이닝

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

let a, b, c;

a = b = c = 2 + 2;

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

할당 연산자를 여러 개 연결한 경우 우측부터 진행된다. 먼저 가장 우측의 2 + 2가 평가되고 그 결과가 좌측의 c, b, a에 순차적으로 할당된다.

하지만 되도록이면 연산자를 체이닝 하는것 보다 가독성을 위해 아래와 같이 줄을 나눠 코드를 작성하는게 좋다.

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

이렇게 작성하면 읽기도 쉽고, 눈을 빠르게 움직이며 코드를 읽을 수 있다.

 

 

 

 

 

 

 

 

8. 복합 할당 연산자

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 과 동일하다 )

 

 

 

 

 

 

 

 

9. 증가/감소 연산자

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

 

1) 증가(increment) 연산자  /  ++는 변수를 1 증가시킨다.

let counter = 2;
counter++;  // counter = counter + 1과 동일하게 동작한다.
alert( counter );  // 3

2) 감소(decrement) 연산자  /  --는 변수를 1 감소시킨다.

let counter = 2;
counter--;  // counter = counter - 1과 동일하게 동작한다.
alert(counter );  // 1

· 증가/감소 연산자는 변수에만 쓸 수 있다. 5++와 같이 값에 사용하면 에러가 발생한다.

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

 

3) counter++와 같이 피연산자 뒤에 올 때는 '후위형'이라고 부른다.

4) ++counter와 같이 피연산자 앞에 올 때는 '전위형'이라고 부른다.

· 후위형과 전위형은 피연산자인 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

 

 

 

 

 

 

 

 

9. 비트 연산자

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

· 비츠 연산자는 저수준(2진 표현)에서 숫자를 다뤄야 할 떄 쓰이므로 흔하게 쓰이진 않는다.

 

1) 비트 AND ( & )

2) 비트 OR ( | )

3) 비트 XOP ( ^ )

4) 비트 NOT ( ~ )

5) 왼쪽 쉬프트( Left Shift ) ( << )

6) 오른쪽 쉬프트 ( Right Shift ) ( >> )

7) 부호 없는 오른쪽 쉬프트 ( Zero-Fill Right Shift ) ( >>> )

 

 

 

 

 

 

 

 

 

10. 쉼표 연산자

· 쉼표연산자 , 는 많이 쓰이지 않는 연산자 중 하나이다.

· 쉼표연산자 , 는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다.

  이때 표현식 각각이 모두 평가되지만 마지막 표현식의 평가 결과만 반환되는게 특징이다.

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

· 보통은 아래와 같은 상황에서 쉼표연산자를 사용한다.

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