TIL 13 | JavaScript Operator

https://youtu.be/YBjufjBaxHo
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.

1. String concatenation

① + 기호를 이용해서 문자열과 문자열을 합해서 새로운 문자열을 만들 수 있다.

console.log('my' + 'dog'); // my dog

② 문자열 에 숫자를 더하게 되면, 숫자가 문자열 로 변환되어서 합해진다.

console.log('1' + 2); // 12

③ 백틱 기호를 활용해서 string literals 를 만들 수 있다. ${변수값 계산해준다}

• string literals 좋은점 : 줄바꿈을 하거나, 중간에 'single quote' 이용해도 그대로 문자열로 변환해준다.
• 중간에 single quote 넣고 싶으면 \' (back slash랑 함께 써주기!)
• 새로 줄바꾸기 하고싶으면 \n (back slash랑 n 써주기!)

console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals: 1 + 2 = 3

2. Numeric operators

add 1 + 1
subsract 1 - 1
divide 1 / 1
multiply 1 * 1
remainder 5 % 2 나누고 나머지 값
exponentiation 2 ** 3 2의 3승

3. Increment and decrement operators

3-1. preIncrement

++를 앞에다 붙여주는 것을 preIncrement 라고 한다.

let counter = 2;
const preIncrement = ++counter;  //3  💚

let counter = 2;
counter = counter + 1;  // counter에 1을 더해서 다시 counter에 할당하고 (3이 되었다.) 💛
preIncrement = counter; // 그래서 하나가 증가한 상태(3)에서 이 값이 preIncrement 에 할당 💛

→ 💚 부분 코드와 💛 부분 코드는 동일한 코드이다.

3-2. postIncrement

변수 다음에 ++를 붙여주는 것을 postIncrement 라고 한다.

let counter = 2;
const postIncrement = counter++; 🧡
// 먼저 변수의 값을 postIncrement에 할당한 다음에 그 뒤에 counter 값을 1을 증가시킨다.

let counter = 2;
postIncrement = counter; // 먼저 변수의 값을 postIncrement에 할당한 다음에 🤎
counter = counter + 1;   // 그 뒤에 counter의 값을 1 증가시킨다. 🤎

→ 🧡 부분 코드와 🤎 부분 코드는 동일한 코드이다.

3-3. preDecrement

preIncrement 와 같다.
-- 도 똑같다. 값을 하나씩 감소시키는 것이고, 앞에 있으면 바로 업데이트 되어서 할당이 된다.

let counter = 3;
const preDecrement = --counter; //2

let counter = 3;
counter = counter - 1;
preDecrement = counter;

3-4. postDecrement

postIncrement 랑 같다.
-- 는 값을 하나씩 감소시키는 것이고, 뒤에 있으면 할당을 해놓고 업데이트는 그 뒤에 일어난다.

let counter = 3;
postDecrement = counter--;

let counter = 3;
postDecrement = counter;
counter = counter - 1;

4. Assignment operators

할당하는 operators 이다.

let x = 3;
let y = 6;
x += y 의 의미는 x = x + y
x -= y 의 의미는 x = x - y
x *= y 의 의미는 x = x * y
x /= y 의 의미는 x = x / y

5. Comparison operators

10 < 6 less than
10 <= 6 less than or equal
10 > 6 greater than
10 >= 6 greater than or equal

6. Logical operators: || , && , ! ⚡️

6-1. || (or)

여러개 중에 하나라도 true가 있으면 true로 return 해주는 연산자

const value1 = false; //false
const value2 = 4 < 2; //false

console.log(`or: ${value1 || value2 || check()}`);
// 😛 (10번)
// or: true

function check() {
  for (let i = 0; i < 10; i++) {
    //wasting time
    consol.log('😛');
  }
  return true;
} // check라는 함수는, 앞에서 시간을 조금 낭비하다가 결국 true를 return 해주는 함수이다.

🚨 or 연산자의 중요한 POINT!
→ or 연산자는 처음으로 true가 나오면 그 자리에서 멈춘다. 왜냐하면 or중에 어떤것이든 하나라도 true이면 그건 true인거니까. 그래서 위 코드에서 만약 value1이 true 였다면 첫번째에서 true가 나왔으니 더 이상 뒤에 check 함수는 실행해 볼 필요가 없고 wasting 단계도 이어지지 않으므로 콘솔창에 😛 이것도 출력이 되지 않을 것이다.
즉, computation이 무거운 함수를 호출하거나, expression 같은 것을 제일 앞에 두면,,? 🥵
당연히 simple 한 것들을 제일 앞에 둬서 이것들 마저 false일 때에만 마지못해 마지막으로 무거운 것을 호출시키는게 제일 좋다 👏🏻✨👍🏻

6-2. && (and)

여러개중에 모두 true이어야 true를 return 해주는 연산자
아래 작성된 코드같은 경우, value1이 false면 바로 game set!
뒤에서 true이든 false이든 이미 모두가 true 임은 깨져버렸으니 뒤의 값이 무엇이든 상관없어졌다. 그래서 value2 와 check는 실행이 안된다.

const value1 = false; //false
const value2 = 4 < 2; //false

console.log(`and: ${value1 && value2 && check()}`);

function check() {
  for (let i = 0; i < 10; i++) {
    //wasting time
    consol.log('😛');
  }
  return true;
}

🚨 그러므로 (and)도 무거운 operation 일수록 제일 뒤에서 체크하는 것이 좋다!

🤚🏻 그리고 and 는 간편하게 null 체크 할 때도 많이 사용된다.

• often used to compress long if-statement
• nullableObject && nullableObject.something
  → 이 object가 null이면 false가 되기 때문에 "nullableObject.something" 이건 실행이 안된다.
  → 즉 이 object가 null이 아닐때에만(=true 일때만) nullableObject의 something을 받아오게 된다.

if (nullableObject != null) {
  nullableObject.something;
}
// nullableObjeect 가 null이 아니라면, nullableObject의 something을 받아와라

6-3. ! (not)

not 연산자는 값을 반대로 바꿔준다

const value1 = true; //ture

console.log(!value1); //false

→ value1이 true 이기 때문에, not 연산자가 값을 반대로 바꿔줘서 false 가 출력된다.

7. Equality

7-1. == loose equality, with type conversion

(타입을 변경해서 검사)

const stringFive = '5';
const numberFive = 5;

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

7-2. === strict equality, no type conversion

(타입을 신경써서 확인하며, 타입이 다르면 다른 애들이다.) ✅ 추천

const stringFive = '5';
const numberFive = 5;

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

7-3. object equality by reference

equality를 공부할 때에는 object를 조금 더 신경 써서 공부할 필요가 있다.

const mark1 = { name: 'mark' , age: 24};
const mark2 = { name: 'mark' , age: 24};
const mark3 = mark1;

console.log(mark1 == mark2); //false
console.log(mark1 === mark2); //false
console.log(mark1 === mark3); //ture

🤔 mark1 과 mark2 가 다른 이유는 각각 다른 reference 가 저장되어 있기 때문이다.
🤔 mark1 과 mark3 이 동일한 이유는 mark1 이 가지고 있는 reference value를 mark3로 할당했기 때문에 똑같은 reference를 가지고 있는 것이다.

object는 메모리에 탑재될 때 reference 형태로 저장이 된다. 위에서 보면 mark1 과 mark2 는 똑같은 데이터가 들어있는 object 이지만, 실제로 mark1과 mark2 의 메모리에는 각각 다른 reference가 들어있고 그 다른 reference는 서로 다른 object를 가리키고 있다. 그리고 mark3에는 mark1의 reference가 할당되어 있기 때문에 똑같은 reference를 가지고 있게 된다.