본문 바로가기

Action/Path to Cowcowwow

[FE Dev] JavaScript 자료형 형 변환 관련 알아둬야할 정보 정리

반응형

정리의 목적
JavaScript가 어떻게 작동하는 지 명확히 알고
위험성이 큰 코드를 작성하지 않기위해.

예를들면(그냥 생각나는 걸 써봄)
현재 섭씨 온도 값을 서버에 요청해 화씨로 표현하는 기능을 구현한다. 섭씨 온도 변수에 null 값을 할당 한다면, 혹시 서버에서 정보를 가져오지 못했을 때 섭씨 0도 기준으로 계산되 표출되어 자칫 코드가 잘 작동하고 있다고 오해할 수 있을 것 같다. 선언만하고 서버 오류로 값이 할당되지 않으면(undefined) 변환 결과가 NaN이 될 것이고 이에 대해 어떻게 처리할 지 구상해 예상한 오류에 대한 처리 로직을 만들어 둘 수 있다.

  • typeof null은 object로 나오나 null은 object가 아니다.
  • undefined는 숫자형 변환 시 NaN이 되고 null은 0이 된다.
  • 덧셈 연산자 +는 문자열이 있으면 자료를 문자형으로 바꿔 결합한다. (그 외 숫자 연산자들은 숫자형으로 이항의 자료를 변환하려한다. 변환이 안되는 케이스는 NaN 반환)
  • 단항 덧셈 연산자로 문자열을 숫자로 형 변환하기 쉽다. (형변환을 활용한 바나나 출력하기)
alert(('b' + 'a' + + 'a' + 'a')
// baNaNa
  • 전위형 연산자는 바뀐 값을 반환하고, 후위형은 바뀌기 전 값을 반환하고 연산한다.
let a = 1, b = 1;

alert( ++a ); // 2, 전위형은 증가 후의 값을 반환합니다.
alert( b++ ); // 1, 후위형은 증가 전의 값을 반환합니다.

alert( a ); // 2, 값이 1만큼 증가합니다.
alert( b ); // 2, 값이 1만큼 증가합니다.
반응형