연산자

• 연산자는 하나 이상의 표현식을 대상으로 산술,할당,비교,논리,타입,지수 연산 등을 수행해 하나의 값을 만든다
• 연산의 대상을 피연산자 라 한다
• 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다

// 산술 연산자
5 * 4 // 20

// 문자열 연결 연산자
'My name is'+'Lee' // My name is Lee

// 할당 연산자
color = 'red' // 'red'

// 비교 연산자 
3 > 5 // -> false

// 논리 연산자
true && false // false

// 타입 연산자 
typeof 'Hi' // string

연산자

• 표현식을 좀 더 복잡하게 사용하기 위해 연산자를 사용한다
• let 보다 const 를 우선 사용한다 -> 변수의 값을 직접 바꾸는 일은 거의 없기 때문이다

---

7.1 - 산술 연산자

• 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다
• 산술 연산이 불가능할 경우 NaN을 반환

7.1.1 - 산술 연산자

• 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다

이항 산술 연산자	설명
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	왼쪽의 피연산자를 오른쪽의 피연산자로 나눈 후, 그 나머지를 반환

7.1.2 - 단항 산술 연산자

• 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다
• 이항 산술 연산자와는 달리 증가/감소 연산자는 피연산자의 값을 변경하는 부수 효과가 있다
• 다시 말해 증가/감소 연산을 하면 피연산자의 값을 변경하는 암묵적인 할당이 이뤄진다

단항 산술 연산자	설명
++	증가
--	감소
+	피연산자에 대한 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. 피연산자의 타입을 숫자 타입으로 변환하여 반환한다.
-	양수를 음수로, 음수를 양수로 반전한 값을 반환한다.

// + 단항 산술 연산자는 피연산자의 타입을 숫자 타입으로 변경하여 반환한다.
console.log(+"10"); // 10
console.log(+false); // 0
console.log(+true); // 1

// - 단항 산술 연산자는 피연산자의 타입을 숫자로 변환하여 반환한다.
// 피연산자가 음수라면 양수로, 양수라면 음수로 반전한 값을 반환한다.
console.log(-"10"); // -10
console.log(-true); // -1
console.log(-false); // 0

증가 / 감소 연산자

var x = 1;

// ++연산자 (증가 연산자) 는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x+1;
console.log(x); // 2

// --연산자 (감소 연산자) 는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x--; // x = x-1;
console.log(x); // 1

• 증가/감소 연산자는 위치에 의미가 있다
• 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다
  -> 선증가/감소 후할당
• 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소 시킨다
  -> 선할당 후증가/감소

let number = 10;

console.log(`result: ${number++}`); //'result: 10'
console.log(`result: ${++number}`); // 'result: 12'
console.log(`result: ${--number}`); // 'result: 11'
console.log(`result: ${number--}`); // 'result: 11'

+ / - 단항 연산자

+단항 연산자

• 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자타입으로 변환하여 반환한다
• 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환한다

-단항 연산자

• 피연산자의 부호를 반전한 값을 반환한다
• 피연산자를 숫자타입으로 변환하여 값을 생성해 반환한다

const number = -5;

console.log(-(number)); // 5
console.log(-(-number)); // -5

const string = '5';

// typeof 연산자는 연산하려는 값의 타입을 반환합니다.
console.log(typeof string); // 'string'
console.log(typeof -(-string)); // 'number'
console.log(typeof +string); // 'number'

• *는 산술연산자이기 때문에 문자와 숫자를 곱하면 NaN이 뜬다

console.log(number * 'hello'); // NaN

---

7.2 - 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다
• 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있다
• 할당문은 값으로 표현식인 문으로서 할당된 값으로 평가된다
  -> 따라서 할당문을 다른 변수에 할당할 수도 있다

let number = 1;

number += 1;
console.log(number); // 2

number -= 1;
console.log(number); // 1

number *= 10;
console.log(number); // 100

할당 연산자

• 연산과 할당을 동시에 해주는 연산자

---

7.3 - 비교 연산자 / 일치 연산자

• 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다

7.3.1 - 동등 / 일치 비교 연산자

• 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다

동등 비교 연산자

• 좌항과 우항의 피연산자를 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다

일치 비교 연산자

• 동등비교연산자는 예측하기 어려운 결과를 만들어냄으로 일치 비교 연산자 사용을 권장한다
• 일치비교연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다
• 일치 비교 연산자에서 주의할 것은 NaN이다
• NaN은 자신과 일치하지 않는 유일한 값이다
• 따라서 숫자가 NaN인지 조사하려면 isNaN 함수를 사용한다

isNaN(NaN); // true

부동등 비교 연산자(!=) / 불일치 비교 연산자(!==)

• 동등 비교 연산자와 일치 비교 연산자의 반대 개념이다

console.log(0 !== false); // true (타입이 다르다)
console.log(1 != true); // false (타입을 일치시킨 후 값만을 비교한다)

비교 연산자 / 일치 연산자

• 배열은 참조 데이터이기 때문에 배열과 배열을 비교하면 배열들이 동일한 원소를 가지고 있어도 다른 데이터이다
• 두 배열은 각각 다른 메모리를 변수명으로 참조하고 있기 때문에 두 배열을 비교한다면 두 변수명은 다른 주소값을 가지고 있기 때문에 false 이다
• null과 undefined는 비교연산자로 비교시 -> true
  일치 연산자로 비교시 -> false 이다 (다른 타입이기 때문이다)
• truthy,falsy -> 참인것 같은 값 , 거짓인것 같은 값
• JavaScript는 특정 조건에 따라 0이 거짓이 될 수도 있고 참이 될 수도 있다 해서 0을 flasy한 값으로 정의
• 0,null,undefined는 flasey한 값
• ! 는 타입을 한번 변환해준다 → true는 false로 false는 true로
• !!는 타입을 두번 변환하는 것을 의미한다 -> false는 다시 false
• 빈문자열("")은 -> false
• != 는 ==의 반대 ===는 ! ==의 반대 개념

const array1 = [1,2,3];
const array2 = [1,2,3];

console.log(array1==array2); // false
console.log(array1===array2); // false

---

7.4 - 삼항 조건 연산자

• 조건식의 평가 결과에 따라 반환할 값을 결정한다
• 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다.
• 두번째 또는 세번째 피연산자로 평가되는 표현식이다
• 첫번째 피연산자는 조건식 즉, 불리언 타입의 값으로 평가될 표현식이다
• 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환 된다

let 변수 = 조건식 ? 값1 : 값2; // 조건식 true -> 값1 , false -> 값2

삼항 조건 연산자

• 삼항조건연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다
• 값으로 평가할 수 있는 표현식이므로 변수에 대입 가능하다
• '문'이지만 표현식이다
• 조건문 등 다른 '문'은 변수에 대입할 수 없지만 삼항 조건 연산자문은 변수에 대입이 가능하다(표현식이기 때문)

---

7.5 - 논리 연산자

• 논리 연산자는 우항과 좌항의 피연산자를 논리 연산 한다
• 부정 논리 연산자의 경우 우항의 피연산자를 논리 연산 한다

const a = 10 < 5;
const b = 10 >= 20;

console.log(a && b); // false
console.log(!a && b); // false
console.log(a || !b); //true 

• 부정 논리 연산자(!)는 언제나 불리언 값을 반환한다
• 피연산자가 반드시 불리언 값일 필요는 없다 , 만약 피연산자가 불리언 값이 아니언 불리언 타입으로 암묵적 타입 변환된다

!0; // true
!'hello'; // false

단축 평가

• 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
• 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다
• 9.4절 '단축 평가'에서 자세히 살펴보자

// 단축 평가
'cat' && 'dog' // dog

단축 평가

• true && 10 → 10
• false&& 10 → false
• 어차피 false이므로 10까지 보지도 않고 바로 false를 출력한다
• true || 10 → treu 하나만 true여도 true이기 때문에 바로 true까지만 읽고 -> true 반환
• false || 10 → 10나온다 10까지 봐야 treu인지 flase인지 나오기때문이다
• 리액트의 컴포넌트 사이사이에 조건문을 넣기보다 단축평가와 삼항연산자를 많이 사용한다

---

7.7 - 그룹 연산자

• 소괄호(( ))로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다
• 그룹 연산자를 사용하면 연산자의 우선순의를 조절할 수 있다
• 그룹 연산자는 연산자 우선순위가 가장 높다

7.9 - 지수 연산자

• 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다

2 ** 2; // 4
2 ** 0; // 1
2 ** -2; // 0.25

• 지수연산자가 도입되기 이전에는 Math.pow()메서드를 사용했다

Math.pow(2,2) // 4

지수 연산자

• Math.pow(넘버 타입 , 몇번 제곱 할지)를 나중에 사용해서 제곱을 할 수 있다

---

7.10 - 그 외의 연산자

• new -> 생성자 함수를 호출할 때 사용하여 인스턴스를 생성
• 인스턴스 : 일반적으로 실행 중인 임의의 프로세스, 클래스의 현재 생성된 오브젝트를 가리킨다