01.JavaScriptベース-演算子

// 이항연산자 '+'와 문자열 연결
let s = "my" + "string";
alert(s); // mystring
// 덧셈에서 문자열에 있으면 문자로 연결됨
alert( '1' + 2 ); // "12"
alert( 2 + '1' ); // "21"
// 덧셈에서 숫자끼리 만났을 때는 덧셈이 되지만, 문자열을 만나면 합쳐짐
alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.
// 뺄셈, 나눗셈, 곱셈에서는 문자형을 숫자형으로 자동 변환된 후 연산이 이뤄짐
alert( 6 - '2' ); // 4
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행됩니다.

// 1씩 증가
let counter = 2;
counter++;      // counter = counter + 1과 동일하게 동작함
alert( counter ); // 3
// 1씩 감소
let counter = 2;
counter--;      // counter = counter - 1과 동일하게 동작함
alert( counter ); // 1

// 증감연산자 전위형
// counter를 먼저 증가시킨 뒤, 증가된 값을 반환하여 할당함
let counter = 1;
let a = ++counter;
console.log(counter) // 2
console.log(a); // 2
// 증감연사자 후위형
// count를 먼저 할당한 뒤, 자신을 증가시킴
let counter = 1;
let a = counter++; // (*) ++counter를 counter++로 바꿈
console.log(counter); // 2
console.log(a); // 1
// 전위형 vs 후위형 예제
let counter = 2; // 초기 counter 2로 선언
const preIncrement = ++counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// preIncrement: 3, counter: 3
const postIncrement = counter++;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// postIncrement: 3, counter: 4
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
// preDecrement: 3, counter: 3
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);
// postDecrement: 3, counter: 2

// assignment operators
let x = 3;
let y = 6;
x += y; // x = x + y
console.log(x,y) // 9 6
x -= y; // x = x - y
console.log(x,y) // 3 6
x *= y; // x = x * y
console.log(x,y) // 18 / 6
x /= y; // x = x / y
console.log(x,y) // 3 / 6
//
let n = 2;
console.log(n) // 2
n = n + 5;
console.log(n) // 7
n = n * 2;
console.log(n) // 14
//
let n = 2;
n *= 3 + 5; // n = n * (3 + 5) -> 할당연산자가 우선순위 낮아 오른쪽 연산(3+5)부터 연산됨
console.log(n); // 16

//comparison operators
console.log(10 < 6); // false
console.log(10 <= 6); // false
console.log(10 > 6); // true
console.log(10 >= 6); // ture

// logical operators : ||(or), &&(and), !(not)
const value1 = false; //false
const value2 = 4 < 2; //false
// || (or) : finds the first turthy value(가장 처음 나오는 true를 찾음)
// 이 때문에 함수 같은 경우는 || 맨 뒤에 둠, 함수가 true가 되서 뒤에 것들이 실행 안될 수 있기 때문
console.log(`or: ${value1 || value2 || check()}`);
function check() {
  for (let i = 0; i < 10; i++) {
    console.log("🥰");
  }
  return true;
}
// && (and) : finds the first falsy value(가장 처음 나오는 false를 찾음)
// 첫번째 value1가 flase기 때문에 뒤에 모두 실행 안됨
console.log(`and: ${value1 && value2 && check()}`);
function check() {
  for (let i = 0; i < 10; i++) {
    console.log("🥰");
  }
  return true;
}
// !(not)
console.log(!value1); // ture

// 동등연산자(==) : lose equality, with type conversion
console.log(10 == '10'); // ture
console.log(10 === 10); // ture
console.log(10 === '10'); // false
console.log(0 == false); // true
console.log('' == false); // true
console.log( 0 === false ); // false(형변환없음. 형이 다르기 때문에 false)
// 동등연산자 예외
console.log(null == undefined); // true
console.log( null === undefined ); // false

// null vs undefined
console.log( null == undefined ); // true 
// -> 예외적으로 동등연산자(==)는 null이나 undefined가 피연산자로 있을 때 형변환을 하지 않음.
// -> 그럼에도 불구하고 true가 나온 것은 동등연산자에서 null과 undefined를 특별한 커플로 취급하기 때문.
console.log( null === undefined ); // false -> 형을 바꾸지 않기 때문
//
// null vs 0
console.log( null > 0 );  // false -> null이 숫자형 0으로 반환되기 때문에 크지 않음
console.log( null == 0 ); // false -> 동등연산자에서 null을 만나때는 형변환 안이뤄짐(예외)
console.log( null >= 0 ); // true -> 비교연산자에서는 null이 숫자형 0으로 반환된기 때문에 true
//
// undefined vs 0
alert( undefined > 0 ); // false -> undefined 숫자형으로 형변환되면 NaN이기 때문
alert( undefined < 0 ); // false -> undefined 숫자형으로 형변환되면 NaN이기 때문
alert( undefined == 0 ); // false  -> 형변환 되지 않음. 즉, undefined는 null 또는 undefined랑만 같음