📐 Operator

String concatenation (문자열 연결)

console.log("my" + "cat");
console.log("1" + 2); //숫자가 문자열로 변환되어 출력된다.
console.log(`string literals; 1 + 2 = ${1 + 2}`);  //중간에 줄을 바꾸거나, 특수 기호를 이용해도 문자열로 그대로 출력

문자를 + 기호를 이용해서 연속으로 출력할 수 있다.

---

Arithmetic Operators (산술 연산)

console.log(1 + 1); //add
console.log(1 - 1); //subtract
console.log(1 / 1); //divide
console.log(1 * 1); //multiply
console.log(1 % 1); //remainder (나머지)
console.log(1 ** 1); //exponentiation (거듭제곱)

막간! 퍼센트(%) 구하기 공식!!

전체값(x)에서 일부값(y)은 몇 퍼센트?

y / x * 100

ex) 20 / 55 * 100 // 36.363636......

전체값(x)에서 몇 퍼센트는 얼마?

x * 퍼센트 / 100

ex) 55 * 20 / 100 // 11

막간! 부동 소수점 (Floating Point) vs 고정 소수점 (Fixed Point)
브라우저 개발자 도구-콘솔에서 해당값을 입력해보자!

0.1 + 0.2;

당연히 0.3이 나오겠지? 하고 Enter를 눌러보면...띠용~
⇒ 컴퓨터는 소수를 2진수를 이용해 저장하기 때문에, 위의0.1 + 0.2; 같은 10진수 소수를 정확히 다룰 수 없다.

우리는 0.1 이라고 입력했지만, 컴퓨터 내부에서 2진수로 변환하여 받아들이는 과정에서 약간의 오차가 발생하는데, 이를 반올림 오차(rounding error)라고 한다.

⇒ 왜 이런 오차를 그냥 두는걸까?
컴퓨터의 저장용량은 한정되어 있고 0과 1밖에 다루지 못하기 때문에, 10진수 소수를 아주 빠르게 계산하기 위해. 즉, 계산 상의 효율성을 위해 이렇게 설계한 것!

(p.s - 금융 분야처럼 조금의 오차도 허용되지 않는 분야에서는 정확한 연산을 위한 전용 라이브러리를 사용한다.)

---

Increment and Decrement Operators (증가/감소 연산)

pre increment/decrement

let counter = 2;
const preIncrement = ++counter;

변수 앞에 ++기호를 붙여주면 pre Increment를 사용할수 있다.

counter = counter + 1; //counter의 값을 1 증가한 후에
preIncrement = counter; //preIncrement 변수에 counter의 값을 할당

pre Increment 는 위의 코드와 동일한 역할을 한다!

const preDecrement = --counter;

마이너스 - 역할을 하는 pre Decrement 도 같은 방식!

post incement/decrement

let counter = 2;
const postIncrement = counter++;

변수 뒤에 ++기호를 붙여주면 post Increment를 사용할수 있다.

preIncrement = counter; //postIncrement 변수에 counter의 값을 할당한 후에
counter = counter + 1; //counter의 값을 1 증가

post Increment 는 위의 코드와 동일한 역할을 한다!

const postDecrement = counter--;

마이너스 - 역할을 하는 post Decrement 도 같은 방식!

---

Assignment Operators (할당 연산)

let x = 3;
let y = 6;

x += y; // 9 (x = x + y; (x값을 x + y로 수정))
x -= y; // 3 (x = x - y;)
x *= y; // 18 (x = x * y;)
x /= y; // 3 (x = x / y;)

x += y; ⇒ x = x + y;를 뜻한다.

---

Comparison Operators (비교 연산)

console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal

---

Logical Operators (논리 연산)

const value1 = false;
const value2 = 4 < 2; //4 < 2는 틀린 값으므로, 값은 flase

|| (or)

console.log(`or: ${value1 || value2 || check()}`);
function check() {
   for{
   대충 엄청 복잡한 함수
   }
   return true; //아무튼 결국은 true를 return 하는 아이!
}

1. or ⇒ 입력한 값 3개 중에 하나라도 true 면 true 가 출력
2. value1 = false... ⇒ value2 = flase... ⇒ check() = true!!
3. 결국은 true가 출력!!!

&& (and)

console.log(`or: ${value1 && value2 && check()}`);
function check() {
   for{
   대충 엄청 복잡한 함수
   }
   return true; //아무튼 결국은 true를 return 하는 아이!
}

1. and ⇒ 입력한 값 3개 중에 하나라도 false 면 false 가 출력
2. value1 = false!! 끝!!
3. 뒤에까지 연산할 필요 없이 바로 false가 출력!!!

---

논리 연산자가 중복될 경우에는 어떻게 해석될까?

if (age > 65 || age < 21 && res === "한국")

• age가 65를 넘거나 혹은
• age가 21보다 아래이면서 그리고 사는 곳은 한국이다.
  
• age가 65를 넘거나 혹은 age가 21보다 아래이다.
• 그리고 사는 곳은 한국이다.
  

🤷🏻‍♀️ 둘 다로 해석될 수 있는데... 컴퓨터는 어떻게 해석할까?
⇒ 컴퓨터는 왼쪽에서 부터 해석하기 때문에 위가 맞는 해석이다!

👩🏻‍🏫 이렇게 여러개의 논리 연산자를 사용할 경우에는 반드시 괄호로 묶어줄 것!!

1번으로 해석하길 원한다면 :
if (age > 65 || (age < 21 && res === "한국"))

2번으로 해석하길 원한다면 :
if ((age > 65 || age < 21) && res === "한국")

📌 중요 point!!!!

or연산자는 순차적으로 연산하다가 하나라도 true가 나오면 연산을 멈추고 바로 true를 출력한다!
(and는 하나라도 false가 나오면 바로 false 출력)

EX) or 연산에서 만약 const value1 = true; 라면, 뒤에까지 갈 필요도 없이 바로 true를 출력하고 끝내버림!

⇒ 그러므로 연산이 많고 복잡한 함수나, extension 같은걸 앞에 두게되면 계산하느라 시간 다 간당..... 심플한 value 값을 제일 앞에 두고, 복잡한 함수 등은 제일 뒤에 두는게 좋다!!!

📌 or과 and를 이용해서 간편해서 null check를 할 수 있다!

💁🏻‍♀️ null check란?
null이나 undefined 은 어떤 변수에도, 어떤 속성에도 들어있을 수 있기 때문에 코드를 짤 때는 항상 값이 있는 경우와 없는 경우 (즉 null 혹은 undefined인 경우)를 모두 고려해서 코드를 짜야 할 필요가 있다. 이때 어떤 값이 null 혹은 undefined인지 확인하는 작업을 null check 라고 한다!

function printIfNotNull(input) {
  if (input !== null **&&** input !== undefined) {
    console.log(input);
  }
}

매번 이렇게 길게 작성할 필요는 없고, 보통은 input !== null && input !== undefined; 등으로 줄여서 많이 사용한다.
(null과 undefined은 공부하다 보니 생각보다 내용이 길어서 다음에 따로 정리해서 올리는걸로!!! 절대 귀찮은거 아님)

! (not)

const value1 = false;
console.log(!value1); //value의 값이 true가 된다.

값을 반대로 바꿔준다.

---

Equality operator (동등 비교 연산)

const stringFive = "5";
const numberFive = 5;

console.log(stringFive == numberFive); //true
console.log(stringFive != numberFive); //false

console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true

== (abstract equality)

피연산자의 type이 다를 경우, type을 변환한 후 비교

stringFive와 numberFive 는 type은 다르지만, type을 무시하고 확인하면 값은 같기때문에 == 로 검사시 true가 나온다.

null check 할 때 == , != 를 주로 사용한다.

=== (strict equality)

피연산자의 type이 다를 경우 무조건 false를 반환

stringFive와 numberFive 는 type을 무시하면 같은 값이지만, type은 다르기 때문에 === 로 검사시 false가 나온다.

프로그래밍 중에 Equality로 검사할 일이 생기면 === 사용하는걸 권장한다! (null check 제외)

Object.is

두 인수가 정말로 같은 값인지 검사한다.

아래의 두 예외를 제외하고는 === 와 똑같이 동작한다.

Object.is(NaN, NaN); // true (=== 에서는 false)
Object.is(0, -0); // false (=== 에서는 true)

Object Equality by reference

const solmi1 = {name: "solmi"};
const solmi2 = {name: "solmi"};
const solmi3 = solmi1;

이 3개의 object는 똑같은 데이터가 들어있지만, 실제 메모리에는 solmi1, solmi2는 각각 다른 reference에 저장되어 있고, solmi3은 solmi1과 같은 reference에 저장되어있는 상태다!

여기서 Equality로 검사해보면 어떤 값이 출력될까?

console.log(solmi1 == solmi2); //false
console.log(solmi1 === solmi2); //false
console.log(solmi1 === solmi3); //true

solmi1과 solmi2는 각각 다른 reference에 저장되어 있기 때문에, === 는 커녕 == 도 flase!

하지만 solmi1과 solmi3은 같은 reference에 저장되어 있기 때문에, true!