형변환

WONNY_LOG·2023년 8월 10일

형변환

코드 내에 함수를 사용하여 명시적으로 타입을 변환하는 명시적 형변환
비교, 산술, 논리연산자 이용시 JS엔진이 필요에 따라 자동으로 타입을 변환함


명시적 타입 변환이란? (명시적 형변환 explicit coercion)

어떤 자료형으로 선언된 변수를 다른 자료형으로 변환하는것을 말함

  • 묵시적 형 변환과 비슷하지만 큰데이터에서 작은 데이터로 변환될 때 일부를 잘라서 작은 데이터 크기로 맞춰주는것을 말함

명시적 타입의 변환 형변환 함수

1) String Type

String() : 인자를 문자열로 변환한다.
toString() : 인자로 기수를 받을 수 있다.

//String
String(22) // "22"

//toString
const foo = 22;
foo.toString()  //”22"
foo.toString(2) // "10110"

2) Number Type

Number() : 인자를 숫자로 변환한다.
parseInt() : 인자를 정수형의 숫자로 변환한다.
이때 인자가 숫자 0으로 시작할 경우 8진수로 변환하고, 0x로 시작한다면 16진수 숫자로 변환한다.
또한 앞 부분에 공백 뒤에 문자가 나오는 경우 NaN을 반환한다.

//Number
Number("123")  //123

//parseInt
parseInt(333.234) //333
parseInt(0134) // 92 (8진수)
parseInt(0x1b) // 27 (16진수)
parseInt(  "가나") //NaN

3) Boolean Type

Boolean : 인자를 불리언 값으로 변환한다.

Boolean("1") //true

//falsy value
값이 없는 경우
0
-0
null
false
NaN
undefinded
""

암묵적 타입 변환이란? (암시적 형변환 implicit coercion)

대입 연산 혹은 산술연산에서 컴파일러가 자동으로 타입을 변환함

(비교, 산술, 논리연산자 이용시 JS엔진이 필요에 따라 자동으로 타입을 변환함)

  • 데이터 손실이 최소화되는 방향으로 변환이 진행됨
  • JS에서는 정해지지 않은 값 유형을 예상되는 유형으로 강제 변환하려는 성질을 말한다
    -> 이로 인해 사용자는 숫자 값을 넘겨야하는 곳에 문자열을 넣을 수도있고, 문자열을 넣어야하는 곳에 객체를 넘기는 실수를 할수도있다.
    -> JS의 주요기능이긴하나, 가장피해야 할 기능이다.

암묵적 타입 형변환

1) String Type

연산자 사용 시 피연산자 중 문자열이 하나라도만 있으면 String Type으로 변환된다.
undefined 나 null도 문자열로 변환된다.

const bar = {
  toString: () => ' promise is a boy :)'
};
1 + bar; // "1 promise is a boy :)"

2) Number Type

연산자를 제외한 산술 연산자(-, /, *, >, < 등) 사용시 Number Type으로 변환된다.

3 * '3'; // 9
1 + '2' + 1; // 121

숫자 이외의 글자가 들어있는 문자열, 배열 및 undefined는 숫자 타입으로 변환되지 않고 NaN(Not a Number)을 반환한다.

4 * []; // 0
4 * [2]; // 8
4 + [2]; // "42"
4 + [1, 2]; // "41,2"
4 * [1, 2]; // NaN

3) 엄격하지 않은 동등 비교 (==)

true == 1;    // true  (true를 1로 변환) 
false == 0;   // true  (false를 0으로 변환)
'1' == true;  // true  ('1'를 true로 변환)
'1' == 1;     // true  ('1'를 1로 변환)

truthy / falsy 값

truthy

자바스크립트에서, truthy인 값(참 같은 값) Boolean(불리언) 문맥에서 true로 평가되는 값이다.

  • falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다.
if (true) {}
if ({}) {}
if ("0") {}
if ([]) {}

falsy

falsy인 값(거짓 같은 값)은 Boolean 문맥에서 false로 평가되는 값이다

if (undefined) {}
if (null) {}
if (false) {}
if (0) {}
if (NaN) {}
if ("") {}












암시적 형변환
JS의 형변환
truthy / falsy

1개의 댓글

comment-user-thumbnail
2023년 8월 10일

좋은 글 감사합니다. 자주 올게요 :)

답글 달기