타입 변환

박재성·2021년 12월 23일
0

타입 변환

자바스크립트는 타입을 직접 지정하지 않지만 타입을 다른 타입으로 변환할 수 있다. 논리적으로 이해가 되지 않는 문법일 수 있다.

자바스크립트는 런타임시 타입이 정해지는데, 이를 다시 변환해서 저장한다..? 뭔가 이상하지만 다르게 생각하면 된다.

문자 데이터를 공백문자로 잘라서 받는다고 생각해보자.

'1'
'2'
'3'
'4'

내가 받은 데이터를 정수로 변환해서 다른 방식으로 가공하고 싶을 때 타입을 강제로 다른 타입으로 변환하는 것을 '명시적 타입 변환' 혹은 '타입 캐스팅' 이라 한다.

그리고 개발자가 의도하지 않았지만 자바스크립트 엔진에 의해 타입이 변환 되는 것을 '암묵적 타입 변환' 또는 '타입 강제 변환' 이라 한다.

let x = 10
let str =  x + '';
console.log(typeof str) // string

타입 변환의 값 할당

명시적 타입 변환, 암묵적 타입 변환은 기존의 값을 변환하는 것이 아니다. 기존의 원시 값(x)를 이용해서 새로운 타입의 변수를 생성하는 것입니다.

즉, x + ''를 평가하기 위해 x의 숫자 값을 이용해 '10'을 생성하고, '10' + ''을 평가해 str에 저장한다. 이 때 '10'은 x에 할당되지 않는다.

자바스크립트 엔진은 특정 연산이 타입 변환을 일으키는데, 이 때 변환된 값은 평가 후 버려진다. 생각만 해도 머리가 복잡해진다. 원치 않은 에러를 만나겠구나 생각하니 머리가 벌써 아파온다.

주의 사항

따라서 내가 작성한 코드에서 타입 변환이 일어나는지, 발생한다면 어디서 어떻게 발생하는지, 어떤 값으로 변환되는지 파악이 가능해야 한다. 그래야 프로그램의 유지보수가 가능해진다. 이를 모르고 막 갈긴다면,,,

중요한 것은 타입변환의 개념을 잘 알고 사용하는 것이다. 문자열로 변환 할 때 toString()을 남발하는 것 보다, 10 + ''이 더 가독성이 좋은 코드가 될 수 있다.

결론적으로, 마구잡이로 쓰는 것은 옳지 않지만 올바르게 사용하면 좋은 코딩 스킬이 될 것이다.

단축평가

논리 연산

자바스크립트 연산자 중 논리 연산자는 특별한 값을 리턴한다.

보통은 true. false를 생각하지만 논리합 혹은 논리곱 연산자 표현식은 2개의 피연산자 중 하나로 평가가 가능합니다.

예를 들어

'cat' && 'dog' //true? no 'dog'

논리곱 연산자는 두 피연산자 모두 평가 되어야 값을 알 수 있습니다. 즉, 두 번째 피연산자가 논리곱 연산의 평가 결과를 결정합니다.

이때 논리곱 연산자는 논리 연산 결과를 결정하는 피연산자, 'dog'를 반환합니다.

반대로 논리합 연산자는 첫 번째 피연산자가 논리 연산 결과를 결정하므로 'cat'을 반환합니다.

이처럼 논리 연산 결과를 결정하는 피연산자를 그대로 반환하는 것을 단축평가라 힙나다.

이를 통해 if문을 대체 할 수 있습니다.

let done = true
let message = ''
if(done) message = "완료"
message = done && '완료'
// 같은 표현식이다.

이용 방법

그리고 단축 평가가 유용하게 사용되는 경우가 있습니다.

  • 객체를 가르키기를 기대하는 변수가 null or undefined가 아닌지 확인
  • 함수의 매개변수가 기본값을 설정할 때

해당 내용은 객체와 함수를 정리할 때 왜 사용하는지 자세하게 다루겠습니다. 일단은 단축평가가 이런 곳에서 쓰이는구나 알고 넘어가겠습니다.

처음 접하는 연산자, 옵셔널 체이닝

무려 es11에서 도입된 개념으로 '?.'는 피연산자가 null or undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.

let str = ''
let length = str && str.lenght

프로퍼티에 대한 개념 공부 필수

처음 접하는 연산자, null 병합

이 개념도 es11에서 도입됐습니다. '??'ㄴ,ㄴ 함수의 매개변수가 기본값을 설정할 때 자주 쓰이는 기법입니다.

let foo = null ?? 'default string

결론

새로 알게된 연산자를 어디에서 써야 하는지 감이 잡히지 않기 때문에... 더 봐야할 개념들

profile
개발, 정복

0개의 댓글