[JavaScript] Type

◎Type(타입)

:값(value)의 종류

 

우리는 평소 여러가지 표현으로 정보를 전달한다.

'오늘은 2022년 12월 18일 입니다.' , '아메리카노 5000원' , 100 > 24 등등 말이나 글로써 정보를 표현한다.

위 정보에서 2022, 12 등을 문자가 아닌 숫자로 표현한 이유는 뭘까?

정보를 전달받는 사람의 가독성을 높여주기 위함이다.

때문에 숫자나 부등호 기호를 문자열이 아닌 숫자, 기호 그 자체로 분류하고 표현하게 된다.

 

javascript에서도 정보를 전달하기 위해 값을 사용한다.

여기서도 자주 쓰이는 값은 분류를 하게 되고, 분류된 각 타입은 고유한 속성과 메서드를 갖게된다.

 

 

● 타입의 종류

- 원시타입 : 변경 불가능한 값
▶ 종류
① Number 
② String
③ Boolean
④ null
⑤ undefined
⑥ Symbol
(수업에서는 Number, String, Boolean타입을 공부함)

- 객체타입 : 원시 타입을 제외한 나머지 값들(배열, 함수, 정규표현식 등)

 

js에서 타입의 종류를 확인하고 싶다면

→ typeof로 확인해보자

사진1. 각 표현의 타입

---

 

○ 타입의 종류

1) Number 

- 정수(integer), 실수(float) 모두 표현이 가능
- 산술 연산자로 간단한 사칙연산이 가능

사진2. 산술 연산자

- 더 복잡한 계산은 Math내장객체를 사용

● Math내장객체

Math.floor() //내림하여 반환
Math.ceil() //올림하여 반환
Math.round() //반올림하여 반환
Math.abs() //절대값
Math.sqrt() //루트값 
Math.pow(a,b) //a의 b제곱

사진3. Math객체 사용

 

 

 

---

 

2) String

- 자연어를 표현하기 위한 데이터 타입

- 따옴표( ' ' ), 쌍따옴표( " " ). 백틱( ` ` )으로 감싸서 입력
(감싸서 입력하지 않을 시 인식을 하지 못함 - 사진1.참고)

- 문자열 연결 연산자(+)로 문자열을 이어붙일 수 있음
 단, 다른 타입과 연결시 모두 문자열로 반환됨

사진4. 문자열 연결 연산자

위에서 보면 1+'1'의 결과는 11로 숫자처럼 보이지만 타입을 확인해보면 string타입이 나온다.

또, true는 boolean타입이지만 문자열과 연결시 string타입으로 반환되는 걸 확인할 수 있다.

 

- .length로 문자열의 길이를 확인할 수 있음

사진5. 문자열 길이

- 문자열을 구성하는 각 문자는 순서를 가지고 index(인덱스)로 그 위치를 확인할 수 있음

  첫번째 문자의 인덱스는 0이다.

사진6. 문자열 인덱스

● 문자열 내장함수

.toUpprtCase() //대문자로 변환
.toLowerCase() //소문자로 변환
.concat() //+처럼 문자열을 이어붙임
.slice() //문자열의 일부를 자름
//문자열 내 특정 문자를 찾아 위치를 확인. 찾는 문자가 2개 이상인 경우 가장 앞쪽 인덱스 조회. 포함되있지 않다면 -1 출력
.indexOf()
//문자열 내에 특정 문자가 포함되어 있는지 확인. 결과값은 true 또는 false
.includes()

사진7. 문자열 내장함수

 

 

---

 

3) Boolean

- 사실관계를 구분하기 위한 타입

 

-값은 true / false로 반환

 

● falsy값

- Boolean타입은 아니지만 js에서 false로 여겨지는 일부 값

   ↔ true로 여겨지는 값은 truthy값이라 함

- 대표적인 falsy값

false
0
-0
0n
""
''
``
null //빈 값을 할당한 상태
undefined //변수만 선언하고 값을 할당하지 않은 상태
NaN //Not a Number 표현할 수 없는 값

 

● 비교 연산자

: 두 값이 같은지 다른지를 확인할 때 사용

1. ===, !== : 엄격한 동치 연산자.

                    두 피연산자의 값과 타입이 모두 같아야 true, 하나라도 다르면 false

 

2. == , != : 느슨한 동치 연산자.

                 타입이 달라도 값이 같으면 true, 다르면 false

 

3. >, <, >=, <= : 대소관계 비교 연산자.

                         두 피연산자의 값의 크기를 비교

사진8. 비교 연산자

 

● 논리 연산자

1. || : 논리합(OR)

         두 값중 하나만 true여도 true로 판단, 모두 false일 시 false로 판단

 

2. && : 논리곱(AND)

           두 값이 모두 true일때 true로 판단, 하나라도 false면 false로 판단

 

3. ! : 부정(NOT)

        논리부정 연산자. 사실관계를 반대로 표현

사진9. 논리 연산자