JS. 연산자

1. 연산자

• 덧셈 + 곱셈 * 나눗셈 / 같은 수학적인 연산을 하는 기호들을 연산자라고 합니다.

1.1 Java Script에서 지원하는 연산자

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

1.2 연산자 용어

1) 피연산자

• 연산자가 연산을 수행하는 대상.
  2 * 4 에서 피 연산자는 2와 4입니다.

• 피 연산자는 다른 말로, 인수(argument)라고도 합니다.

2) 단항 연산자

• 피연산자가 한 개만 있는 경우.

let x = 1;

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

3) 이항 연산자

• 피연산자가 두 개 있는 경우

let x=1;
let y=2;

alert( y - x );	// 이항 연산자에서 마이너스는, 피 연산자간의 뺄셈을 합니다.

2. 이항 연산자 +와 문자열 병합

• + 연산자는 피연산자간의 덧셈을 수행합니다.

• 피연산자가 문자열이라면 덧셈이 아니라, 문자열을 병합해줍니다.

let str= "my" + "son"; // my와 son문자열을 병합함
alert(str);	// myson 문자열이 출력

2.1 문자형과 숫자형의 병합

• 이항 연산자에서 피 연산자가 문자형과 숫자형이라면, 문자열로 병합 됩니다.

let str= "my" + 123;	// my123, 123을 문자열로 인식합니다 

alert(str);	// "my123" 문자열이 출력됩니다.

❤️ 이항 연산자에서 피 연산자가 3개인 경우

alert("1"+2+3);	// 문자열 "123"이 출력됩니다.
alert(2+4+"6");	// 문자열 "66"이 출력됩니다. 


/* */
연산은 좌측에서 우측으로 연산을 수행합니다.
좌측의 피 연산자가 숫자형이라면 덧셈을 진행한 후 우측의 문자열과 병합을 하게 됩니다.


alert("1"+2+3);
1) 좌측부터 우측으로 연산 수행 → 문자열 "1"에서 덧셈 연산자는 병합을 의미
2) "1"+"2"+"3" = "123"


alert(2+4+"6");
1) 좌측에서 우측으로 연산 수행 → 숫자형에서 덧셈 연산자는 덧셈을 의미
2) 2+4 = 6 → 숫자 6과 문자열 "6"을 더하면, 병합이 됨
3) 6+"6" = "66" 

3. 단항 연산자에서 +

• 숫자형이 아닌 다른 자료형에서 단항 연산자인 가정하에 + 을 사용하면, 숫자형으로
  형 변환되므로 숫자형에서는 사용해도 변화가 없습니다.

let x = 1;
x = +x;	
// 피 연산자가 숫자,아무런 변화가 없다


let y = -2;
y = +y;
// 피 연산자가 음수인 숫자,  아무런 변화가 없다


alert( +true );	// 1, 숫자형 1로 변환됩니다.
alert( +"");	// 0, 숫자형 0으로 변환됩니다.
/*
숫자가 아닌 자료형 = 숫자로 변환된다
변환할 수 없다면, NaN 값을 반환한다
*/

4. 연산자 우선순위

• 각 연산자마다 우선 순위값이 있습니다.

• 우선순위 값이 높은 연산을 먼저 수행하게 됩니다.

• 아래는 이항 연산자와 단항 연산자간의 우선순위를 비교하기 위한 예제입니다.

let apple="2";
let banana="4";

alert( apple + banana );	// 출력 : "24" 문자열이 출력된다. 
// 이항 연산자에서 문자열의 덧셈은 병합을 의미 


let date="10";
let value="20";

alert( +date + +value );	// 출력 : 30 숫자가 출력된다.
// 단항 연산자와 이항 연산을 동시에 수행 


/*
문자열 "1020"이 아니고 정수 30이 출력 되는 이유 

1) 단항 연산자가 이항 연산자보다 우선 순위가 높음 > 단항 연산부터 수행
2) "10" 형 변환 = 10 | "20" 형 변환 = 20 > 이항 연산 수행 
3) 숫자형 끼리 덧셈이므로 10 + 20 = 30
*/

// 위에서 사용한 코드는 아래 코드와 동일하다 
alert( Number(date) + Number(value) ); // 출력 : 30 

5. 할당 연산자 (=)

• 변수에 값을 할당할 때 사용하는 연산자입니다.

• = 즉 변수명에 데이터를 저장

• 우선순위가 매우 낮기 때문에, 덧셈이나 곱셈을 수행한 값을 마지막에 할당하는 것 입니다.
  ( 우선순위는 참고로 3임 )

let value = 3;	// 3의 값을 변수 value에 할당 or 저장

5.1 할당 연산자 동작 원리

• 대부분의 연산자는 연산결과 값을 반환 합니다.

• 할당연산자도 반환 과정을 수행합니다.

/* 변수 선언 */
let a = 1;
let b = 2;

/* 변수 선언및 연산 수행*/
let c = 3 - (a = b+1);


/* */
1) 괄호의 우선순위가 뺄셈보다 높기에 괄호부터 진행 (a = b+1)
2) 괄호안에서 덧셈 연산자가 할당 연산자보다 우선순위가 높다.
	b+1의 값을 a에 할당합니다. a = 3

3) 괄호 연산이 종료되고, 3에서 a를 뺄셈한다.
	3 - 3 = 0


console.log(a);	// 결과 : 3
console.log(c);	// 결과 : 0

❗ 할당 연산자의 우선 순위가 낮기 때문에, 괄호 연산부터 수행하고 결과 값을 변수 c에 반환

5.2 할당 연산자 체이닝

• 할당 연산자를 여러 개로 연결해서 사용할수도 있습니다.

• 이 구문은 거의 사용할 일이 없습니다.

/* 변수 선언 */
let a, b, c;

/* 변수에 값 대입 */
a = b = c = 2 + 2;
/* 수행 과정 */
/*
1. 우선 순위가 높은 단항 연산부터 수행, 2 + 2 = 4
2. 4의 값을 c에 할당 c(4)
3. c의 값을 b에 할당 b(4)
4. b의 값을 a에 할당 a(4)
*/

/* 변수를 메세지로 호출 */
alert(a);	// 4
alert(b);	// 4
aelrt(c);	// 4

6. 복합 할당 연산자

• *= += /= -= 같은 연산자를 복합 할당 연산자라고 합니다.

• 연산자와 할당연산자를 같이 사용하는 것을 의미합니다.

• 코드를 간소화 시킬 수 있어서 좋습니다.

• 우선순위는 할당연산자와 동일합니다.

/* 할당 연산자 사용 */
let n = 2;

n = n + 4;	// 2+4 = n(6)
n = n * 2;	// 6*2 = n(12)


/* 복합 할당 연산자 사용 */
let n2 = 2;

n2 += 4;	// 2+4 = 6
n2 *= 2;	// 6*2 = 12

7. 증가 감소 연산자

• 숫자를 하나 증가하거나 줄이는 연산자입니다.

• ++ -- 등의 연산자가 이에 해당됩니다.

• 증가 감소 연산자는 변수에만 사용할 수 있으므로 참고하세요.

/* 변수 선언 */
let a=0;
let b=2;

/* 증가 감소 연산자 */
a++;	// a의 값을 1증가 a(1)
b--;	// b의 값을 1감소 b(1)

7.1 전위형과 후위형 증가 감소 연산자

• 변수앞에 연산자가 붙는 경우 ++a 전위형

• 변수뒤에 연산자가 붙는 경우 b++ 후위형

• 두 형의 공통점은 변수에 값을 1증가 혹은 1감소 시켜주는 것 입니다.

• 차이점이라고 하면, 전위형은 값을 증가/감소 후에 반환하고, 후위형은 먼저 반환하고
  증가/감소 합니다.

/* 변수 선언 */
let a;
let counter = 1;


/* 전위형 */
let a = ++counter;	// a(2) , counter(2)

/* 후위형 */
let a = counter++;	// a(2) , counter(3)


/* */
let a = counter++;
1) 후위형은 counter의 값을 먼저 a에 반환 > 이후에 counter 값을 할당
2) a(2) , counter(3)

8. 비트 연산자

• 인수를 32비트 정수로 변환하여 이진 연산을 수행합니다.

• 비트 연산자는 저수준(2진수)에서 숫자를 다룰 때 사용하므로, 흔하게 쓰이진 않습니다.

용어	기호
AND	&
OR	l
XOR	^
NOT	!
LEFT SHIFT	<<
RIGHT SHIFT
부호 없는 오른쪽 쉬프트	>>>

9. 쉼표 연산자

• 쉼표연산자는 ,는 좀처럼 보기 힘들고, 특이한 연산자 중 하나입니다.

• 코드를 짧게 사용할 때 쓰이는 연산자입니다.

• 쉼표 연산자는 각각 표현식을 연산처리 하지만, 반환하는 값은 마지막의 표현식만 반환합니다.

/* 변수 선언 */
let a = (1 + 2, 3 + 4);	// a = 3+4 , a에는 7의 값이 저장 됩니다.

⭐
쉼표 연산자는 할당자보다 우선순위 값이 낮습니다. 그래서 괄호를 사용해서 연산을
수행 하는 것이 바람직합니다.

10. 연산자 정리

/* 몫 연산자와 나머지 연산자 */
let a= 5/2;	// a의 목값은 2
let b= 5%2; // b의 나머지 값은 1

/* 복합 할당 연산자 */
let c=4;
let d=10;
let e=20;
let f=6;
c += 5;	// c값에 5를 더한다. ( c = 4 / 4+5=9 와 같다 )
d -=5;	// d값에 5을 뺀다. ( d = 10 / 10-5=5와 같다 )
e *= 2;	// e값에 2를 곱한다. ( e = 20 / 20*2와 같다 )
f /=3;	// f값을 3으로 나눈다. ( f = 2 / 6/3과 같다 )

/* 덧셈 연산자 */
let aa
aa = 1+5; // aa = 6

/* 뺄셈 연산자 */
let bb
bb = 5-4; // bb = 1

/* 곱셈 연산자 */
let cc
cc = 3*7; // cc = 21

11. ** 연산자

• 거듭제곱 연산자는 데이터의 값을 거듭해서 곱셈할 수 있습니다.

• a ** b인 경우에는 a를 b번 곱한 값이 반환 됩니다.

alert( 2 ** 2 );	// 4, 2를 2번 곱한다 ( 2x2 )
alert( 2 ** 3 );	// 8, 2를 3번 곱한다 ( 2x2x2 )

1/2을 사용해서 제곱근을 구할 수도 있습니다.

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

정리

이항 연산자에서 + 연산자는, 피연산자가 숫자인 경우에는 덧셈을 진행하고, 문자열이
하나라도 있는 피연산자라면 문자열로 형 변환해서 문자열간의 병합을 한다.

---

연산자 우선순위는 하나의 표현식에 둘 이상의 연산이 있는 경우, 우선순위가 높은 연산으로 수행된다.
1 + 1 * 1 : 곱셈이 덧셈보다 우선순위가 높기에, 곱셈부터 수행
(1 + 1) * 1 : 괄호안에 있는 연산은 모든 연산자보다 우선순위가 높다. 덧셈부터 수행

---

연산자 우선순위

• 할당 연산자는 우선 순위가 3으로 매우 낮다.
• 쉼표 연산자는 할당 연산자보다 우선 순위가 더 낮다.
• 동일한 기호의 연산은 단항 연산자가 이항 연산자보다 높다.