명시적 형 변환 기법
Number, String, Boolean을 사용하여 의도적으로 형식을 변환합니다.
명시적 형 변환 기법은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
명시적 형 변환
명시적 형 변환은 연산자가 강제로 변환하도록 맡기는 대신 함수로 값의 타입을 의도적으로 바꾸는 것입니다. 이렇게 하면 코드가 더 명확하고 안전해집니다.
console.log(Number("42"))
console.log(String(42))숫자 변환 함수
숫자 변환 함수는 값을 숫자로 바꿉니다. 숫자로 이루어진 문자열은 정상적으로 변환되고, 숫자가 아닌 문자열은 NaN이 됩니다.
console.log(Number("3.14"))
console.log(Number(" 10 "))
console.log(Number("abc"))숫자 변환의 예외 상황
숫자 변환 함수는 빈 문자열과 널 값을 0으로 처리하지만, 정의되지 않은 값은 NaN이 됩니다. 이러한 예외를 알고 있으면 오류를 예방할 수 있습니다.
console.log(Number(""))
console.log(Number(null))
console.log(Number(undefined))parseInt
parseInt는 문자열의 시작 부분에서 정수를 읽고 숫자가 아닌 문자를 처음 만나는 지점에서 멈춥니다. 뒤에 이어지는 텍스트는 무시합니다.
console.log(parseInt("42px"))
console.log(parseInt("3.99"))
console.log(parseInt("abc"))parseInt의 기수
parseInt에는 항상 기수를 전달하여 숫자 체계를 명시하세요. 일반적인 십진수 해석에는 10을 사용하면 모호함을 피할 수 있습니다.
console.log(parseInt("0x1F", 16))
console.log(parseInt("101", 2))
console.log(parseInt("08", 10))parseFloat
parseFloat는 문자열의 시작 부분에서 부동 소수점 수를 읽으며, parseInt가 버리는 소수 부분도 유지합니다.
console.log(parseFloat("3.14m"))
console.log(parseFloat("1.5e3"))문자열 변환 함수
문자열 변환 함수는 널과 정의되지 않은 값을 포함한 모든 값을 텍스트 표현으로 바꿉니다. 이 값들은 각각 널과 정의되지 않음이라는 단어가 됩니다.
console.log(String(123))
console.log(String(true))
console.log(String(null))toString 메서드
대부분의 값에는 toString 메서드가 있으며, 숫자에 사용할 기수를 지정하면 이진수나 16진수 텍스트를 만들 수 있습니다.
console.log((255).toString(16))
console.log((5).toString(2))불리언 변환 함수
불리언 변환 함수는 참 같은 값과 거짓 같은 값의 규칙에 따라 값을 변환하여 참 또는 거짓을 명시적으로 반환합니다.
console.log(Boolean(1))
console.log(Boolean(""))
console.log(Boolean("no"))알맞은 도구 선택하기
문자열 전체를 숫자로 변환할 때는 숫자 변환 함수를 사용하고, 혼합된 텍스트에서 숫자를 추출할 때는 parseInt 또는 parseFloat를 사용하세요. 텍스트를 출력할 때는 문자열 변환 함수 또는 toString을 사용하세요.
console.log(Number("100"))
console.log(parseInt("100 dollars", 10))변환 결과 확인하기
숫자로 변환한 후에는 Number.isNaN으로 변환이 성공했는지 확인한 다음 결과를 사용하세요.
const raw = "x9"
const n = Number(raw)
if (Number.isNaN(n)) {
console.log("invalid number")
}간단히 확인하기
형 변환에 대한 지식을 확인해 보세요.
복습
복습: 명확한 코드를 작성하려면 타입을 명시적으로 변환하세요.
- 숫자 변환 함수는 전체 문자열을 변환하며 숫자가 아닌 값은 NaN이 됩니다
- parseInt와 parseFloat는 앞부분의 숫자를 추출합니다
- parseInt에는 항상 기수를 전달하세요
- 문자열 변환 함수와 불리언 변환 함수는 각각 텍스트와 참·거짓 값으로 변환합니다
console.log(Number("7"))
console.log(String(7))자주 묻는 질문
“명시적 형 변환 기법” 강의는 무료인가요?
네 — “명시적 형 변환 기법” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“명시적 형 변환 기법”에서 뭘 배우나요?
Number, String, Boolean을 사용하여 의도적으로 형식을 변환합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“명시적 형 변환 기법” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.