본문 바로가기
코딩/자바스크립트

기본 연산자와 수학

by rosemarie 2022. 10. 11.
반응형

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

  • 피연산자(operand): 연산자가 연산을 수행하는 대상입니다. '피연산자’는 '인수(argument)'라고 불리기도 함.
  • 단항(unary) 연산자: 피연산자를 하나만 받는 연산자. 
let x = 1;

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

이항연산자

let x = 1, y = 3;
alert( y - x ); // 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'이 출력됩니다.
cf>
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

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

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

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

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

 

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

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

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

연산자 우선순위

괄호는 모든 연산자보다 우선순위가 높기 때문에 자바스크립트에서 정의한 연산자 우선순위를 무력화시킨다. 우선순위 숫자가 클수록 먼저 실행됩니다. 순위가 같으면 왼쪽부터 시작해서 오른쪽으로 연산이 수행된다.

 

순위연산자 이름기호

17 단항 덧셈 +
17 단항 부정 -
16 지수 **
15 곱셈 *
15 나눗셈 /
13 덧셈 +
13 뺄셈 -
3 할당 =

 

할당 연산자 =

 

값을 반환하는 할당 연산자

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

 

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, b, a에 순차적으로 할당

but 권장!

 

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

복합 할당 연산자

+=와 *=연산자

 

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 증가시킨다.

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

 

  • counter++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'이라고 부른다.
  • ++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 부른다.
  • 전위형은 증가·감소 후의 새로운 값을 반환하는 반면, 후위형은 증가·감소 전의 기존 값을 반환
let counter = 1;
let a = ++counter; // (*)
alert(a); // 2

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

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

값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 됩니다.

 

let counter = 0;
alert( ++counter ); // 1

 

값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 된다.

 

let counter = 0;
alert( counter++ ); // 0
다른 연산자 사이의 증가·감소 연산자

++/-- 연산자를 표현식 중간에 사용하면 증가·감소 연산자의 우선순위는 다른 대부분의 산술 연산자보다 높기 때문에, 평가가 먼저 이뤄진다.

let counter = 1;
alert( 2 * ++counter ); // 4
let counter = 1;
alert( 2 * counter++ );
let counter = 1;
alert( 2 * counter );
counter++;

비트 연산자

: 인수를 32비트 정수로 변환하여 이진 연산을 수행함.

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

쉼표 연산자

 

쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가한다. 이때 마지막 표현식의 평가 결과만 반환된다.

 

let a = (1 + 2, 3 + 4);//1 + 2은 평가가 되지만 그 결과는 버려진다. 3 + 4만 평가되어 a에 할당.

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

쉼표의 연산자 우선순위는 매우 낮다. 할당 연산자 = 보다 더 낮다.

따라서 위 예시에선 괄호가 중요하다.괄호가 없으면 a = 1 + 2, 3 + 4에서 +가 먼저 수행되어 a = 3, 7이 된다. 할당 연산자 =는 쉼표 연산자보다 우선순위가 높으므로 a = 3이 먼저 실행되고, 나머지(7)는 무시된다. 즉 (a = 1 + 2), 3 + 4

쉼표 연산자는 여러 동작을 하나의 줄에서 처리하는 복잡한 구조에서 사용한다.

 

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

 

<복습 질문> 전위형 증가 연산자와 후위형 증가 연산자의 차이는??

'코딩 > 자바스크립트' 카테고리의 다른 글

if와 '?'를 사용한 조건 처리  (0) 2022.10.11
비교연산자  (0) 2022.10.11
형 변환  (0) 2022.10.11
alert, prompt, confirm을 이용한 상호작용  (0) 2022.10.11
자료형  (1) 2022.10.11