자바스크립트 연산자

+ , - , * , / 

 

일반적인 수학과 조금 다른 연산자에 대해서 다룹니다.

 

용어 : "unary","binary",operand"

 

피연산자(operand) - 연산자가 적용되는 것. 5 * 2 에는 두 개의 피연산자가 있습니다. 왼쪽 피연산자는 5 , 오른쪽 피연산자는 2 입니다. "인수" 라고도 부릅니다.

 

단항 연산자(Unary operator) - 단항 연산자일 경우 값에 - 를 넣으면 숫자의 부호가 -로 변경됩니다.

 

let x = 1;

x = -x;
alert( x ); // -1, unary negation was applied

//결과 -1

이진 연산자(Binary operator) - 같은 마이너스는 바이너리 형식으로 존재합니다.

 

let x = 1, y = 3;
alert( y - x ); // 2, binary minus subtracts values

//결과 2

수학에선 -2 의 값을 -를 제거한 2가 출력 됩니다. 

 

문자열 연결 : 바이너리 +

일반적인 + 연산자는 숫자를 더합니다.

그러나 바이너리 + 가 문자열에 적용 되면 문자가 병합됩니다.

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

피연산자 중 하나가 문자열이면 다른 하나는 문자열로 변환됩니다.

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

규칙은 두 피연산자 중 문자열이 포함되어 있으면 문자열로 변환됩니다.

 

그러나 코드 진행 순서는 왼쪽에서 오른쪽으로 실행됩니다. 두 개의 숫자 뒤에 문자열이 오면 숫자는 문자열로 변환

되기전에 연산을 한 후 문자열로 변환합니다.

alert(2 + 2 + '1' ); // 41

바이너리 + 의 특별한 기능이며, 다른 산술 연산자는 숫자로만 작동하며 피연산자를 숫자로 변환합니다.

 

var num = 2 -'1';
var num1 = 2 /'1';
alert(typeof num + num ); // 1
alert(typeof num1 + num1); // 2
alert( '6' / '2' ); // 3

기존의 + 연산자 였다면 문자열로 변환 되어야 하는데 다른 산술 연산자는 항상 숫자로 변환합니다.

javascript 의 typeof 연산자는 피연산자의 타입을 문자열로 반환합니다. 반환값이 number면 숫자임을 알 수 있습니다.

 

숫자 변환 : 단항 +

단항 연산자가 숫자일경우 앞에 + 붙여도 아무 변화가 없습니다. 숫자이기 때문이죠.

하지만 숫자가 아닌 다른 기호는 숫자로 변환합니다.

 

// No effect on numbers
let x = 1;
alert( +x ); // 1

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

// Converts non-numbers
alert( +true ); // 1
alert( +"" );   // 0

///////////////////////
alert( true ); // true
alert( "" );   // 아무값도 없음.

 

같은 기능을 하는 Number()가 있습니다. 하지만 위의 방식은 코드가 많이 생략됩니다.

 

그렇다면 문자열을 숫자로 변환할때 그 값을 합치려면 어떻게 해야 할까요?

위의 바이너리+ 는 문자열을 문자열로 더해줍니다.

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

alert( apples + oranges ); // "23", the binary plus concatenates strings

위의 과일의 개수를 합치려면 숫자로 변환한다음 더해야 합니다.

 

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

// Number 객체는 숫자 값으로 작업할 수 있게 해주는 래퍼 객체입니다.
alert( Number(apples) + Number(oranges) ); // 5

// 단항 + 를 사용하여 위와 같은 작업을 실행 할 수 있습니다.
alert( +apples + +oranges ); // 5

단항+ 가 먼저 적용이 되고 문자열을 숫자로 변환 한 다음 그 변환된 숫자를 더해줍니다.

 

그렇다면 왜 바이너리 값 앞에 단항+ 가 먼저 적용이 될까요? 그건 우선 순위 때문입니다.

 

연산자의 우선순위 ( Operator precedence )

 

수학에서는 1+2 * 2의 계산식이 있다면 곱셈이 덧셈보다 우선순위가 높으므로 2 * 2 를 먼저 계산한 후 1을 더해주죠

하지만 ( 1 + 2 ) * 2 는 괄호를 넣어줌으로써 우선순위를 변경할 수 있습니다.

 

JavaScript에는 많은 연산자가 있습니다. 모든 연산자에는 해당 우선 순위 번호가 있습니다. 숫자가 큰 번호가 먼저 실행되며 우선순위가 같으면 왼쪽에서 오른쪽으로 실행이 됩니다.

PrecedenceNameSign

 

Precedence (상위)	Name (이름)	Sign (기호)
16	unary plus (단항 +)	+
16	unary negation (단항 부정)	-
14	multiplication (곱셈)	*
14	division (나누기)	/
13	addition (더하기)	+
13	subtraction (빼기)	-
…	…	…
3	assignment	=
…	…	…

위의 표 처럼 "단항 +"는 "더하기" 보다 우선 순위가 높습니다. 그래서 "+apples + +oranges"에서 더하기전에 "단항 +"

를 실행한 후 addition(더하기)가 작동 합니다.

 

할당 ( Assignment )

= 연산자는 우선 순위가 매우 낮습니다 (3)

 

그래서 우리가 변수를 x = 2 * 2 + 1; 라고 할당 했다면 계산이(2*2+1) 먼저 수행된 후 그 결과 값이 x 변수에 할당(=) 됩니다.

 

let x = 2 * 2 + 1;

alert( x ); // 5

할당을 연결할 수 있습니다.

 

let a, b, c;

a = b = c = 2 + 2;

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

이런식으로 연결된 과제는 오른쪽에서 왼쪽으로 평가됩니다. 우측의 2+2계산이 수행된 후 왼쪽 변수에 할당 됩니다.

 

대입 연산자(=)는 항상 값을 반환합니다.

let a = 1;
let b = 2;

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

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

위의 코드처럼 ( a = b(2) + 1 ) 이 대입되므로 기존의 a(1) 값에서 3으로 변환 합니다 . c = 3-3이 되죠 그래서 c의 값은 0을 반환 합니다.

 

나머지(Remainder) %

% 퍼센트 와는 관련이 없습니다.

a & b 의 정수 부분의 나머지 값을 의미 합니다.

alert( 5 % 2 ); // 5를 2로 나누어 남은 나머지값이 1이기 때문에 1을 반환합니다.
alert( 8 % 3 ); // 8를 3으로 나누어 남은 나머지값이 2이기 때문에 2을 반환합니다.
alert( 6 % 3 ); // 6를 3으로 나누어 남은 나머지값이 0이기 때문에 0을 반환합니다.

지수화(Exponentiation) **

지수 연산자는 최근에 추가 된 연산자 입니다.

 

지수란 ?

4x4x4를 지수로 나타내면 

4³ 오른쪽 작은 숫자를 지수라 부르고 지수 밑에 있는 숫자를 밑이라고 부릅니다.

4가 밑이고 3이 지수 입니다.

 

코드로 나타낸다면

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

정수가 아닌 숫자에도 적용이 됩니다.

alert( 4 ** (1/2) ); // 2  (power of 1/2 is the same as a square root, that's maths)
alert( 8 ** (1/3) ); // 2  power of 1/3 is the same as a cubic root

증가 / 감소

숫자를 하나씩 늘리거나 줄이는 것 가장 많이쓰는 연산자중 하나이죠

 

++는 변수를 1 씩 증가 시킵니다.

let counter = 2;
counter++;      // works the same as counter = counter + 1, but is shorter
alert( counter ); // 3

-- 는 1씩 감소 합니다.

let counter = 2;
counter--;      // works the same as counter = counter - 1, but is shorter
alert( counter ); // 1

증가 / 감소는 변수에만 적용 할 수 있습니다. 5++ 라고 입력하면 오류가 발생합니다.

증가 / 감소 연산자는 변수의 앞 뒤에 위치할 수 있습니다.( counter++ , ++counter ) 둘다 모두 1을 증가 시킵니다.

두개의 차이점이 무엇일까요?

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

alert(a); // 2

counter의 값을 먼저 ++ 증가 시키고 그 증가시킨 값을 반환합니다 그렇기 때문에 2 라는 값이 반환이 되죠.

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

alert(a); // 1
alert(counter); //2

위와 같은 경우는 counter에 값은 2로 증가는 하였지만 a 에 대입될때 counter = 1이 대입후 증가(++) 하였기때문에

a의 값은 1을 반환합니다.

 

위와같이 conuter++ , ++counter 의 결과 값을 사용하지 않으면 차이는 없습니다.

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, the lines above did the same

하지만 결과 값을 사용하면 차이가 발생합니다.

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

값을 증가시키고 이전 값을 사용하려면 후위 양식이 필요합니다.

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

다른 연산자들 사이의 증가/감소

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

let counter = 1;
alert( 2 * counter++ ); // 2, because counter++ returns the "old" value

한줄에 하나의 행동 스타일을 권고 합니다.

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

비트 연산자

비트 단위 연산자는 인수를 32비트 정수로 처리하고 이진 표현 수준에서 작업합니다.

이 연산자는 JavaScript와 관련이 없습니다. 대부분의 프로그래밍 언어에서 지원됩니다.

연산자 목록 : 

• AND ( & )
• OR ( | )
• XOR ( ^ )
• NOT ( ~ )
• LEFT SHIFT ( << )
• RIGHT SHIFT ( >> )
• ZERO-FILL RIGHT SHIFT ( >>> )

수정

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

위와 같은 표기법을 += , *= 연산자를 사용하여 코드를 줄일 수 있습니다.

let n = 2;
n += 5; // now n = 7 (same as n = n + 5)
n *= 2; // now n = 14 (same as n = n * 2)

alert( n ); // 14

이런 방식으로도 가능합니다.

let n = 2;

n *= 3 + 5;

alert( n ); // 16  (right part evaluated first, same as n *= 8)

콤마

쉼표 연산자는 특이한 연산자 중 하나입니다.

 

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

alert( a ); // 7 (the result of 3 + 4)

첫번째 표현식인 1+2는 버려지고 마지막 결과인 3+4가 반환됩니다.

 

마지막 부분을 제외한 모든 것을 버리는 연산자가 필요한 이유는 무엇일까요?

// three operations in one line
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

위와 같은 경우의 코드가 존재할 수 있습니다. 저는 잘 안쓸거같아요 ㅋ

 

참고 : https://javascript.info/operators#remainder

Operators