js study #coercion & conversion

Oak_Cassia·2024년 2월 22일
0

js 스터디 2023

목록 보기
3/5

type coercion

  • 타입을 암시적으로 변환
  • 엔진이 필요에 따라 자동으로 변환
  • 개발자가 예상치 못한 경우 버그 초래

to string

let num = 1;
let str = "one :" + num; // number to string

let str_nan = NaN + '' // "NaN"
let str_true = true + '' // "true"

let str_obj = ({}) + '' // "[object Object]"
let str_func = (function(){}) + '' // "function(){}"

to number

let str = "1999";
let num = +str; // string to number

console.log(num == str) // str is converted to number

let str2 = "Hi";
let num2 = +str2; // NaN

let num = +{} // NaN
let num = +[] // 0
let num = +[10, 20] // NaN 
let num = +(function(){}) // NaN

boolean

let truthyValue = "Hello"; // true 
let falsyValue = ""; // false, 0, null, undefined, Nan, "" 

explicit type conversion

  • 명시적인 변환

to string

let value = String(NaN); // "NaN"
let value = ((Infinity).toString()); // "Infinity"

to number

let num = Number(" 1000 "); // 1000 문자열 양 끝의 공백은 제거됨
let num = Number(null); // 0
let num = Number(undefined); // NaN
let num = parseInt('-1');

to boolean

let truthyValue = Boolean("Hello"); // true 
let falsyValue = Boolean(""); // false, 0, null, undefined, NaN, "" 

object

  • 세 가지 hint
    - string
    - number
    - default
  • 반환 타입은 원시 타입
    - 단 hint가 string 이어도 number를 반환할 수 있음

조건동작
1. obj[Symbol.toPrimitive](hint) 메서드가 있는지 확인- 있다면 메서드 호출
2. hint가 "string"- obj.toString() 호출 (존재하지 않으면 obj.valueOf() 호출)
3. hint가 "number" 또는 "default"이면- obj.valueOf() 호출 (존재하지 않으면 obj.toString() 호출)

  1. obj[Symbol.toPrimitive](hint) 메서드가 있는지 확인, 있다면 메서드 호출
let obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'string') {
      return "Hello";
    } else if (hint === 'number') {
      return 99;
    } else {
      return "Default";
    }
  }
};

// 힌트가 'string'일 때
console.log(String(obj)); // 출력: "Hello"

// 힌트가 'number'일 때
console.log(Number(obj)); // 출력: 99

// 힌트가 'default'일 때
console.log(obj + 2); // 출력: "Default2"

  1. obj[Symbol.toPrimitive](hint) 가 없고
  2. hint가 "string" 이면 obj.toString() 호출
  3. 존재하지 않으면 obj.valueOf() 호출
let obj = {
  toString() {
    return "Hello, World!";
  }
};

// 힌트가 'string'일 때
console.log(String(obj)); // 출력: "Hello!"

// 힌트가 'number'일 때
console.log(Number(obj)); // 출력: NaN

// 힌트가 'default'일 때
console.log(obj + 2); // 출력: "Hello2"

  1. obj[Symbol.toPrimitive](hint) 가 없고
  2. hint가 "number" 또는 "default" obj.valueOf() 호출
  3. 존재하지 않으면 obj.toString() 호출
let obj = {
  valueOf() {
    return 42;
  }
};

// 힌트가 'string'일 때
console.log(String(obj)); // 출력: "42"

// 힌트가 'number'일 때
console.log(Number(obj)); // 출력: 42

// 힌트가 'default'일 때
console.log(obj + 2); // 출력: 44

let obj = {};

// 힌트가 'string'일 때
console.log(String(obj)); // 출력: "[object Object]"

// 힌트가 'number'일 때
console.log(Number(obj)); // 출력: NaN

// 힌트가 'default'일 때
console.log(obj + 2); // 출력: [object Object]2

  • 원시 타입 반환은 보장
  • 원하는 hint 타입이 반환되지는 않음
let obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'string') {
      // 힌트가 'string'일 때에도 숫자 반환
      return 42;
    } else if (hint === 'number') {
      return 100;
    } else {
      return "Default Value";
    }
  }
};

  • 변환이 두 번 발생하는 예시
let obj = {
	toString() {
		return "99";
	}
};

console.log(obj * 10); // 문자열 99 로 바뀐뒤 숫자 99로 변환 후 계산
profile
어떻게 살아야 하나

0개의 댓글