JS 복습 1주차 / 4. 강제 변환 Coercion

챕터 4 ) 강제 변환

🔸 값 변환

• 어떤 값의 타입을 바꾸는 과정이 명시적이면 타입 캐스팅, 암시적이면 강제변환 이라 한다.
• 타입 캐스팅 : 정적 타입 언어에서 컴파일 시점에 발생하며, 의도적으로 변환 사실이 명확하다.
• 강제 변환 : 동적 타입 언어에서 런타임 시점에 발생하며, 작업 중 불분명한 부수 효과로 부터 발생한다.

🔸 추상 연산

• ToString 
  1️⃣ 내장 원시값은 문자열화 방법이 정해져 있다.(null ➡ "null", undefined ➡ "undefined", true ➡ "true")
        숫자는 그냥 변환 되자만 큰 수는 지수화 되어 저장된다.
  2️⃣ 일반 객체는 지정이 없다면 내부 [[Class]] 를 반환한다.("[object Object]")
  3️⃣ 배열은 toString()이 있기에 콤마(,)로 모든 원소가 분리되어 반환된다.([1,2,3].toString() ➡ "1, 2, 3")
  
  JSON 문자열화
  JSON 안전 값들은 기본적으로는 stringify() 유틸리티를 이용하면 해결되지만,
  안전 값들 (undefined, 함수, symbol, 환영참조)은 JSON 값으로 사용불가능한 규격을 벗어난 값이다.
  
  JSON.stringify() 의 인자가 undefined, 함수, symbol 이면 누락시킨다.
  이들이 배열에 있다면 null로 바뀐다.(인덱스는 유지된다)
  객체 프로퍼티에 있다면 지워버린다... ㅎㄷㄷ
  
  🔘 부적합한 JSON 값이나 직렬화가 곤란한 객체값을 문자열화 하기위해서는
        toJSON()을 사용해 문자열화 하기 적당한 JSON 안전값으로 바꾸는 것이 좋다.
  🔘 또한 stringify() 에 두번째 인자에 배열 혹은 함수형태의 대체자를 넣으면 필터링이 가능하다.

const a = {
  b: 32,
  c: "32",
  d: [1, 2, 3]
};

JSON.stringify( a, ["b", "c"] );  //  "{"b": 32, "c": "32"}"

JSON.stringify( a, () => { if(k !== "c") return v;} );
//  "{ "b": 32, "d": [1, 2, 3] }"

 

• ToNumber
  숫자가 아닌 값 ➡ 수식 연산이 가능한 숫자
  ex) true ➡ 1, false ➡ 0, undefined ➡ NaN, null ➡ 0
  
  문자열 값을 ToNumber 를 적용하면 대부분 숫자 리터럴 규칙/구문 과 비슷하게 작동한다.
  변환실패 시  ➡ NaN 으로 반환
  8진수는 올바른 숫자 리터럴로 처리가 안된다.(일반적으로 10진수로 처리한다.)
  
  객체 : 동등한 원시값으로 변환 후 그 결과값을 ToNumber 규칙에 의해 변환
  동등한 원시값으로 바꾸기 위해 ToPrimitive 추상연산 과정에서 해당 객체가 valueOf() 메서드를 구현했는지 확인한다.
  🔘 valueOf() 이 사용가능하고 반환값이 원시값 이면 그대로 강제변환한다.
  🔘 valueOf() 이 사용 불가능하고 반환값이 원시값이 아니면 toString()을 이용해 강제변환해 준다.
  
  

const a = {
  valueOf: function(){
    return "42";
  }
};

const b = {
  toString: function(){
    return "42";
  }
};

const c = [4, 2];
c.toString = function(){
  return this,join( "" );  //  "42"
};

Number( a );  //  42
Number( b );  //  42
Number( c );  //  42
Number( "" );  //  0
Number( [] );  //  0
Number( [ "abc" ] );  //  NaN

 

• ToBoolean
  JS에서 숫자는 숫자이고, 불리언은 불리언 이기에 true ➡ 1, false ➡ 0 이라는 것은 아니다....
  (이제것 사용했던 것들이 모두 아니라 하니 생각이 많아진다....)
  
  Falsy 값
  JS에서 모든 값은 둘중 하나이다.
  1️⃣ 불리언 강제변환시 fasle인 값
  2️⃣ 1번을 제외한 값(명백히 true인 값)
  
  명세가 정의한 falsy값 ➡ 불리언 강제 변환시 false 이외의 값들은 truthy값이다.
  1️⃣. undefined
  2️⃣. null
  3️⃣. false
  4️⃣. ±0, NaN
  5️⃣. ""
  
  Falsy 객체
  일반적인 JS의 의미 뿐만 아니라 브라우저 만의 특이한 동작 방식을 갖는 값을 생성하는 경우의 원인이다.
  ex) 유사 배열 document.all 은 웹페이지의 요소를 JS 프로그램에서 가져올 수 있게 하고,
        truthy 한 일반 객체 처럼 동작한다.
        ➡➡ document.all 을 불리언으로 강제변환한 값을 오래된 비표준 IE 브라우저를 감지하느 수단으로 사용한다.
  
  Truthy 값 ➡ Falsy 값이 아닌 값들
  
  🔘 truthy / falsy 개념은 어떤 값을 Boolean 타입으로 강제 변환시
       해당 값의 작동 방식을 이해한다는 점에서 중요하다.