자바스크립트 자료형(type)의 종류와 형변환에 대해 알아보자

#자바스크립트 #자바스크립트형변환

​

안녕하세요

미래의 UI/UX 개발자 여러분

웹 기능 구현의 꽃 자바스크립트

기초강의를 준비해 봤습니다

​

다른 블로그보니 프로그래밍 공부는

가독성이 너무 떨어져서

최대한 가독성이 좋게 깔끔하게 글을 작성해 볼게요!

자바스크립트 자료형(type) 종류

자바스크립트에는 대표적으로

문자형,숫자형,Boolean형 세가지가 있는데요

깊게 들어가면 더 많은 형(type)이 존재하지만

기초과정에선 이 세가지만 기억하시면 됩니다

​

1.문자형

​

문자형은 말그대로 문자형입니다

주로 ""안에 들어가는 형태이며

숫자도 문자형으로 표현이 가능합니다

3과 "3"은 다른것으로 취급합니다

​

주의사항은 자바스크립트에서는 대문자와 소문자를

구분하기 떄문에 Apple과 apple은 다릅니다

​

2.숫자형

​

말그대로 숫자형입니다

1,2,3,4 ···· 등 정수형태나

1.2 , 1.5, 3.141592 ···· 실수 형태​가 존재합니다

​

앞서 말한 3과 "3"이 다른 이유도

형태가 다르기 떄문입니다

앞의 3은 숫자형이고

뒤의 "3"은 문자형입니다

​

​

3.Boolean

​

논리형이라고 불리는 Boolean입니다

자바스크립트에서 매우 중요한 역할을 하며

true와 false 만 존재합니다

자바스크립트 자료형(type) 변환

자료형 변환에 대해 알아보겠습니다

​

String - 문자형으로 변환

​

식은 아래와 같습니다

​

String(3);

console.log(String(3));

​

콘솔결과 : "3"

​

숫자형 3을 자료형 "3'으로

강제로 문자형으로 변환할 수 있습니다

​

**\*주의사항\***은 string이아닌

첫글자 대문자 String입니다

​

Number - 숫자형으로 변환

​

식은 아래와 같습니다

Number("3");

console.log(Number("3"));

​

콘솔결과 : 3

​

문자형을 숫자형으로 변환시켜 줍니다

Number안에서는 "3"과 3은 같은 숫자형입니다

​

만약 문자를 숫자형으로 바꾸면 어떻게 될까요?

let num = Number("안녕하세요")

console.log(num)

​

콘솔결과: NaN(Not a Number)

​

숫자가 아니라는 NaN이

결과값으로 나옵니다

​

**\*주의사항\***은 역시 number가 아닌

첫글자 대문자 Number입니다

​

//Number(null)은 0 입니다

​

Boolean - 논리형으로 변환

​

true와 false만 가지고 있는 Boolean형은

false로 변환 되는 값만 기억하시면 됩니다

let B = Boolean(0 , "", null, undefined, NaN )

console.log(B)

​

콘솔결과 : false

​

그외 나머지 값들은 모두 true로 반환됩니다

​

주의사항으로는

첫글자 대문자 표기와

Boolean("0") = true

Boolean(" ") = true

차이점은 "0"= 문자 0

" "= 빈문자열이 아닌 공백포함이라

true값이 반환됩니다

​

자바스크립트 자료형(type) 변환

활용하는 곳

자바스크립트에서 숫자형과 문자형을 구분하는데

3 + "5"를 하면 어떻게 될까요?

​

바로 "35"가 됩니다

숫자형과 문자형을 더하면 숫자형이 자동으로

문자형으로 변환되어 계산됩니다

​

문자형의 + 연산 은 이어 붙이기 입니다

우리가 글을 이어 붙여서 쓰는 것 처럼 말이죠

​

이럴떄는 강제로 문자형을 숫자형으로

바꾸어줘야 제대로된 연산이 가능합니다

let add = Number("3") + 4

console.log(add)

​

콘솔결과 : 7

​

예를 들어 고객이 입력한 숫자 값을

자바스크립트 내에서 문자형으로 인식한다면

Number을 앞에 넣어 계산하면 편하겠죠 ^^

​

이상으로 간단히 문자형의 종류와

자료형 변환에 대해 알아보았습니다

​

기타 궁굼하신게 있으시면

댓글로 남겨주세요 ^^