JS -형변환

hoin_lee·2023년 9월 30일
0

TIL

목록 보기
220/236

형변환

JS를 주 언어로 생각한다면 형변환에 대해 많은 신경을 써야한다.
암묵적인 형변환도 있으며 JS 자체적으로 형변환을 일으켜 코드를 실행시켜 주기 때문에 까딱 잘못하면 의도치 않은 에러를 발생 시킬 수 있다

toString()

가장 기초적인 프로토타입 메서드를 사용해서 형변환 하는 것은

const n = 10;

n.toString(); // '10'
n.toString(2); // '1010'
n.toString(8); // '12'
n.toString(16); // 'a'

toString()을 통해 string 을 반환 받을 수 있다
이때 괄호 안에 기수(radix)를 매개변수로 넣어 최소 2부터 36까지 진수로 변환하여 받을 수 있다

parseInt()

문자열 인자를 파싱해서 특정 진수의 정수를 반환해준다

parseInt('123') // 123

매개변수로는 첫번째로 string을 받고 2번째로 radix를 받는다
진수를 나타내는 2~36까지의 정수이다
MDN에선 기본 radix는 10 아니라고 써있지만 또 상단에 예시 코드에선 default 10 이라고 되어 있어서 애매하다면 직접 작성해서 사용하면 될 것 같다.
물론 기본 동작은 10으로 코드가 동작하긴 한다

typeof

어떤 타입인지 알기 위해서 사용하는 typeof 연산자가 있다
numberstring, boolean 등 여러 타입을 확인 할 수 있지만 typeof를 무적이라고 생각하면 안된다.
모든 타입을 검사할 수 있을 것 같지만 실제론 object와 array를 똑같이 object로 반환하기 때문에 모르고 잇다면 에러를 아마 찾지 못할 것이다.

그래서 prototype에서도 일치하는지 판단하는 메서드가 있고 instanceof라고 해당 객체에서 상속받은 것인지 확인하는 것도 있다

우리가 입력하는 string 도 실제론 new String() 과 다르지 않기에 가장 큰 String이라는 객체에서 만들어졌기에 string에 String 메서드들을 사용할 수 있는 것이다.
그렇기에 instanceof를 활용해서 가장 큰 객체에 포함되어 있는지 확인하면 타입을 판별 할 수 있다.
다만 여기서도 array와 object는 Object에 포함되지만 실제 { } 객체는 obj instanceof Object라고 사용하면 false가 나온다.

병합 연산자

병합 연산자도 있는데 각자 타입이 다른 값들을 연산할 때 병합 해준다

'sss' +2 //'sss2'
'sss' + {id:1} //'sss[object Object]'
{id:1}+2 //'[object Object]2'
5+ +'30' //35
5 * '30' // 150

이렇게 자동적으로 string으로 변환되어 연산되거나 string 앞에 +와 같은 연산자를 두어 string을 number 타입으로 변환시킬 수도 있다

여기서 암묵적인 형변환을 조심해야 하는데

let u = 'hong'; // primitive
u.age = 30; // error가 나지 않는다(:암묵적인 오브젝트 강제형변환)
console.log(u.age) // undefined
console.log(u) // 'hong'

이렇 듯 그 순간은 암묵적인 형변환이 일어나지만 다음 줄이 시작되면 원래 가지고 있던 타입으로 돌아온다
그럼 이때의 메모리는 어떻게 될까? 싶지만 실제론 동작 자체를 씹는 것이긴 하다.
애초에 에러가 나야하는 것이지만 이전 JS버전에서 사용하던 악재가 현재에 일어나는 문제들로 바꿔버리기엔 너무 큰 나비효과를 일으킬 수 있기에 어쩔수 없이 이대로 두는 것이다

이는 우리가 흔히 아는 typof null도 마찬가지다

typeof null을 실행해보면 object를 반환하는 것을 알 수 있는데 이 또한 과거에 있던 에러로 현재 null을 null로 반환되도록 변경해 버리면 이미 만들어진 프로그램들의 오류가 얼마나 클지 모르기에 아직까지 남아있다
따라서 object에관해 typeof로 검사하려면 항상 null또한 신경써줘야한다

profile
https://mo-i-programmers.tistory.com/

0개의 댓글