산술연산자(Arithmetic type)와 형변환(Type coercion)

❇️ 참고 : 느슨 vs 엄격한 동치 연산
느슨한 동치 연산(==, loose equality)을 사용하면 타입 변환(type coercion)이 일어난다.
꼭 엄격한 동치 연산(===, strict equality)을 사용할 것!!

❓ 어떤 산술연산자가 어떻게 형변환을 시키는가?

✳️ number + 'string타입인 숫자' 는 string 타입으로 연산결과를 반환하는데, 다른 사칙연산자는 number 타입을 반환하고,
✳️ 'string타입인 숫자' + Boolean 은 string 으로 묶여서 나옴.
'1' + true === '1true' // true;

→ 그럼 모든 연산자들로 모든 타입들을 연산하면 어떻게 나오지? 싶어서 함수로 다 더해봤다.

1. BigInt 와 symbol 은 연산을 했더니 에러가 발생해서 제외했다. 애넨 아직 낯설다.
2. 보통 'string타입인 숫자'와 number 타입이 서로 형변환이 되어서 이슈가 되는 경우가 있을 것 같아서, 두 타입을 중심으로 함수를 작성해봤다.

⇒ 결론부터 말하자면 + 는 number → string 으로 바꾸고, - 등 다른 산술연산자들은 string → number 로 바꾼 후 연산을 진행한다. 자세한 설명은 아래에!

➕ + 연산자

+ 연산자의 경우, 왼쪽부터 순서대로 연산을 진행하다 string 을 만나면 그 뒤에 오는 number 타입들을 모두 string 타입으로 변환해서 연산을 실행하고, 결과값을 string 타입 으로 반환한다.(아래 예시 코드 중 calculateTypePlus() 함수 참조)

➖ 그 외 연산자

다른 연산자들은 string 안의 숫자를 number 타입으로 자동 변환해서(묵시적 변환) 연산을 실행하고, 결과값을 number 타입 으로 반환한다.

💡 응용 : 숫자 ↔ 문자 형변환

산술연산자를 이용해서 숫자 ↔ 문자 형변환을 쉽게 할 수 있다!

• number -> string : + 연산자 console.log(typeof(1 + '')); // string
• string -> number : - 연산자 console.log(typeof('1' - 0)); // number

📍 예시 코드

→ 결과값을 눈으로 보고 싶어서 산술연산자 별 string + number 의 결과값 타입을 출력하는 함수를 작성해 보았다.

let str = '6';
let num = 3;
let arithOperator = ['+', '-', '/','*', '%', '**'];

// string + 산술연산자 + number 의 결과값과 타입을 출력하는 함수
function calculateType() { 
  for(let i = 0; i < arithOperator.length; i++) {
    let result;
    if(arithOperator[i] === '+'){
      result = str + num;    }
    if (arithOperator[i] === '-') {
      result = str - num;    }
    if (arithOperator[i] === '/') {
      result = str / num;    }
    if (arithOperator[i] === '*') {
      result = str * num;    }
    if (arithOperator[i] === '%') {
      result = str % num;    }
    if (arithOperator[i] === '**') {
      result = str ** num;    }
    console.log(`${str}(string) ${arithOperator[i]} ${num}(number) = ${result} (${typeof result})`);
  }
}

// number + 산술연산자 + string 의 결과값과 타입을 출력하는 함수 (혹시 몰라서 순서를 바꿔보았는데 결과는 같다)
function calculateTypeReverse() {
  for(let i = 0; i < arithOperator.length; i++) {
    let result;
    if(arithOperator[i] === '+'){
      result = num + str;    }
    if (arithOperator[i] === '-') {
      result = num - str;    }
    if (arithOperator[i] === '/') {
      result = num / str;    }
    if (arithOperator[i] === '*') {
      result = num * str;    }
    if (arithOperator[i] === '%') {
      result = num % str;    }
    if (arithOperator[i] === '**') {
      result = num ** str;    }
    console.log(`${num}(number) ${arithOperator[i]} ${str}(string) = ${result} (${typeof result})`);
  }
}

// + 연산자 실행 중 string 타입 뒤에 복수의 number 타입을 넣어보았다. 모두 string 을 만난 시점에서 string 으로 형 변환이 일어난 후 연산이 진행된다.
function calculateTypePlus(){
  let firstStr = str + num + num;
  let secondStr = num + str + num + num;
  let thirdStr = num + num + str + num + num;

  console.log(`${str}(string) + ${num}(number) + ${num}(number)= ${firstStr} (${typeof firstStr})`);
  console.log(`${num}(number) + ${str}(string) + ${num}(number) + ${num}(number)= ${secondStr} (${typeof secondStr})`);
  console.log(`${num}(number) + ${num}(number) + ${str}(string) + ${num}(number) + ${num}(number) = ${thirdStr} (${typeof thirdStr})`);
}

// - 연산자는 string 타입을 number 타입으로 바꾼 후 연산을 진행한다.
function calculateTypeMinus(){
  let firstStr = str - num - num;
  let secondStr = num - str - num - num;
  let thirdStr = num - num - str - num - num;

  console.log(`${str}(string) - ${num}(number) - ${num}(number)= ${firstStr} (${typeof firstStr})`);
  console.log(`${num}(number) - ${str}(string) - ${num}(number) - ${num}(number)= ${secondStr} (${typeof secondStr})`);
  console.log(`${num}(number) - ${num}(number) - ${str}(string) - ${num}(number) - ${num}(number) = ${thirdStr} (${typeof thirdStr})`);
}

calculateType();
/*
3(number) + 6(string) = 36 (string)
3(number) - 6(string) = -3 (number)
3(number) / 6(string) = 0.5 (number)
3(number) * 6(string) = 18 (number)
3(number) % 6(string) = 3 (number)
3(number) ** 6(string) = 729 (number)
*/
calculateTypeReverse();
/*
3(number) + 6(string) = 36 (string)
3(number) - 6(string) = -3 (number)
3(number) / 6(string) = 0.5 (number)
3(number) * 6(string) = 18 (number)
3(number) % 6(string) = 3 (number)
3(number) ** 6(string) = 729 (number)
*/
calculateTypePlus();
/*
6(string) + 3(number) + 3(number)= 633 (string)
3(number) + 6(string) + 3(number) + 3(number)= 3633 (string)
3(number) + 3(number) + 6(string) + 3(number) + 3(number) = 6633 (string)
*/
calculateTypeMinus()
/*
6(string) - 3(number) - 3(number)= 0 (number)
3(number) - 6(string) - 3(number) - 3(number)= -9 (number)
3(number) - 3(number) - 6(string) - 3(number) - 3(number) = -12 (number)
*/