JavaScript 형변환

 

JavaScript 형변환(casting)

문자 자료형을 숫자 자료형으로 변환하는 parseInt, Number

- pareseInt 와 Number 는 형변환을 해주는 메소드로, 숫자로 이루어진 문자열을 숫자 자료형으로 변환해 반환하는 역할을 한다. 

- 문자자료형을 숫자 자료형으로 변환하는 방법은 두가지가 있다.

parseInt('문자열')
Number('문자열')

- 숫자로 이루어진 문자열을 숫자 자료형으로 변환해보자. 

const strNumber = '1'

const strNumberParseInt =  parseInt(strNumber)
const strNumberNumber = Number(strNumber)

console.log(typeof strNumberParseInt) // number
console.log(typeof Number(strNumberNumber))  //number

→ number
    number

- 숫자로 이루어진 문자열로 선언된 strNumber를 문자열로 바꾸기 parseInt()와 Number()를 사용해 각각 새로운 변수로 선언했다. 

- 새로운 변수의 typeof 를 이용해 출력해보면 둘 다 number 가 출력되는 것을 볼 수 있다. 

const number = 1
const strNumber = '1'

parseInt(strNumber)
Number(strNumber)

console.log(typeof number)
console.log(typeof strNumber)

→ number
    string

- parseInt 와 Number 메소드는 문자 자료형을 숫자 자료형으로 변환해 반환(return)해주는 메소드이기 때문에 결과를 반환할 뿐 number 와 strNumber의 데이터를 직접적으로 변환하지 않는다. 

- 따라서 반드시 아래와 같이 반환한 데이터를 새로운 변수에 선언하거나 재할당 해야한다. 

- 그러면 parseInt 와 Number의 차이는 무엇일까?

parseInt() 와 Number() 의 차이 

// 숫자로 이루어진 문자열이지만, 실수로 선언해도 동일한 결과가 나온다.
const strNum1 = '1.1234'
const strNum2 = '1.1234'

const numParse = parseInt(num1)
const numNumber = Number(num2)

console.log(`pareInt() : ${numParse}`)
console.log(`Number() : ${numNumber}`)

>>  pareInt() : 1
       Number() : 1.1234

- parseInt() 와 Number() 를 사용해 실수로 이루어진 문자열을 각각 숫자 자료형으로 형변환 해 보았다. 

- paresInt() 는 실수나 실수로 이루어진 문자열을 숫자로 변환할 때 정수(Integer) 형태로 변환한다. 

- Number() 는 실수, 정수 관계 없이 숫자 자료형으로 변환한다. 

- 이 또한 느슨한 타입의 동적언어인 자바스크립트의 특징인데, 자바스크립트는 정수, 실수 자료형의 구분 없이 숫자 자료형으로 묶어 사용한다. 

 

const numStr = '2022년'

console.log(parseInt(numStr)) // 2022
console.log(Number(numStr)) // NaN

→ 2022
    NaN

- numStr 변수에 '2022년' 이라는 숫자와 문자열이 혼합된 형태의 데이터를 할당했다. 

- parseInt 를 사용한 결과 문자열에서 숫자만 추출해서 정수로 반환한 결과인 2022 가 출력되었다. 

- Number 를 사용한 결과 숫자가 아니라는 의미인 NaN이 출력되었다.

- parseInt 는 문자열과 숫자 자료형이 혼합된 형태에서 숫자를 추출해 숫자 자료형으로 변환해 반환하고, Number 는 문자열과 숫자 자료형이 혼합된 형태의 자료형에서 NaN을 반환한다. 

 

숫자 자료형을 문자 자료형으로 변환하는 String, .toString() Template Literal, 빈문자열 이어붙이기

- 숫자 자료형을 문자 자료형으로 변환하는 방법은 4가지가 있다.

• String() 과 .toString()

const num = 1

console.log(typeof String(num))
console.log(typeof num.toString())

→ stinrg
    string

- String() 과 toString()을 사용했을 때 모두 string 으로 형변환이 된 결과를 볼 수 있다. 

• String() 과 .toStirng()의 차이

const stringTest = null

console.log(String(stringTest)) // null
console.log(stringTest.toString()) // TypeError

→ null
    TypeError: Cannot read properties of null (reading 'toString')

- stringTest 변수에 아무 값도 없다는 뜻인 null 을 할당했을 때 String()을 사용한 결과는 정상적으로 null이 출력되지만 toString()을 사용한 결과 TypeError 가 발생했다.

- toString() 을 사용하게 되면 undefined 나 null 값을 그대로 반환하지만, String()을 사용하면 에러를 반환한다. 

- 따라서 좀 더 엄격하고 안전하게 사용하기 위해 String()을 더 많이 사용한다. 

 

• Template Literal(템플릿 리터럴)

- 템플릿 리터럴은 문자열 내에서 표현식을 사용할 수 있게 만드는 기능이다. 

console.log(`템플릿 리터럴 사용 ${1+2}`)

→ 템플릿 리터럴 사용 3

- 템플릿 리터럴을 사용하는 방법은 작성할 문자열을 백틱(`)^[각주:1] 으로 감싸고, 문자열 내에서 표현식을 사용할 부분을 ${} 내에 넣어 사용한다. 

- 템플릿 리터럴을 사용해 숫자 자료형을 문자열 자료형으로 바꿀 수 있다. 

const useTemLiter = `${1}`

console.log(typeof useTemLiter)

→ string

- 템플릿 리터럴은 여러줄 문자열을 표시할 때도 사용한다. 

console.log(`안녕하세요 
template literal을 사용해
여러줄을 출력해 보겠습니다.`)

→ 안녕하세요
     template literal을 사용해
     여러줄을 출력해 보겠습니다.

- 일반적으로 문자열을 출력할 때 사용하는 따옴표를 사용하여 출력할땐 줄바꿈을 하면 에러가 나는 것을 볼 수 있지만, 템플릿 리터럴을 사용해 출력하면 줄바꿈이 적용된다. 

- 템플릿 리터럴 표현 방식도 문자열을 표현하는 방식이기 때문에 템플릿 리터럴 내 숫자를 사용하면 문자열로 표시되는 것이다. 

 

• 빈 문자열 이어붙이기

- 숫자 자료형과 문자열을 더할 경우 문자열로 출력되는 특성을 이용한 것이다. 

const numEmptyString = 1+ ""

console.log(typeof numEmptyString)

→ string

 

 

 

 

 

1. 일반적인 작은따옴표(') 가 아닌 esc 밑 숫자 1 왼쪽에 있는 키를 영문으로 사용하여 사용한다. [본문으로]