JS - 기본 연산자와 수학

가가·2020년 9월 23일
0

js

목록 보기
7/11
post-thumbnail

기본 연산자와 수학

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

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

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

수학

js에서 지원하는 수학 연산자
+,-,*,/,%(나머지),**(거듭제곱)

나머지 연산자 %

remainder operator. a%b는 a를 b로 나눈 후 그 나머지 (remainder)를 정수로 반환해줌.

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

거듭제곱 연산자 **

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

a ** b 는 a를 b번 곱한 값이 반환된다.

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

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

js가 제공하는 특별한 연산자 기능

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

덧셈 + 는 대개 숫자를 더한 결과를 반환. but, 이항연산자 + 의 피연산자로 문자열이 전달되면 덧셈연산자는 덧셈이 아닌 문자열을 병합(연결) 함. 따라서 이항연산자 + 를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점.

alert(2+2+'1'); // '221' X '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(...)와 동일한 일을 할 수 있게 해준다.

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 

단항 덧셈 연산자가 먼저 문자열을 숫자로 변환 시키고, 이항 덧셈 연사자가 그 결과들을 더해주고 있다.그런데 왜 이항 덧셈 연산자가 적용되기전에 단항 덧셈 연산자가 먼저 적용 될까?

연산자 우선순위


단항 덧셈 연산자는 우선순위 17로 (이항) 덧셈 연산자의 13 보다 높다.
그래서 단항 덧셈 연산자가 덧셈보다 먼저 수행.

할당 연산자

무언가를 할당할 때 쓰는 = 도 연산자. 이 연산자는 할당 연산자라고 불리는데, 우선순위는 3으로 매우 낮음.

let x = 2 * 2 + 1;

alert(x); //5

값을 반환하는 할당 연산자

js 대부분 연산자들은 값을 반환.
x= value을 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환

let a =1;
let b =2;

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

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

할당연산자의 동작원리를 이해할 수 있어야함. 다만 직접 코드를 작성할 땐 이런 방식을 이용하지 말자 ! (코드 명확성 X, 가독성 X)

할당 연산자 체이닝

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

let a, b, c;
a = b = c = 2 + 2;

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

할당 연산자를 여러개 연결한 경우, 우측부터 진행

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 증가

let counter = 2;
counter ++; // counter = counter + 1 과 동일
alert(counter); //3

감소(decrement)연산자 --는 변수 1 감소

let counter = 2;
counter --; //counter = counter - 1 과 동일
alert(counter); //1

증가/감소 연산자는 변수에만 사용 가능 !

counter++와 같이 피연산자 뒤에 올 때는, 후위형
++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

반환값을 사용하지 않는경우라면, 전위형과 후위형에 차이 x

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

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

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

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

(증가,감소 연산자는 대부분의 산술 연산자 보다 우선순위가 높기에 평가가 먼저 이뤄짐)

비트 연산자

  • 비트 AND (&)
  • 비트 OR (|)
  • 비트 XOR (^)
  • 비트 NOT (~)
  • 왼쪽 시프트 (Left shift) (<<)
  • 오른쪽 시프트 (Right shfit) (>>)
  • 부호 없는 오른쪽 시프트 (Zero-Fill right shift) (>>>)

웹 개발시엔 자주 사용하지 않지만, 암호를 다뤄야할땐 비트 연산자가 유용하다.

쉼표 연산자

, 는 코드를 짧게 쓰려는 의도로 가끔사용된다.
여러표현식을 코드 한 줄에서 평가할 수 있게 해준다. 이 때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야한다.

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

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

1+2는 평가가 되지만, 그 결과는 버려짐. 3+4만 평가되어 a에 할당.
쉼표 연산자는 여러동작을 하나의 줄에서 처리하려는 복잡한 구조에서 이를 사용. 코드 가독성에 도움이 되지 않으니 생각해본후 필요한 경우에만 사용하자!

profile
주니어개발자

0개의 댓글