[ javascript ] 타입(자료형)

타입의 의미

변수를 설정하고 값을 할당할때 할당할 수 있는 값들의 종류가 있는데 이것을 타입이라고 한다.

타입의종류

javascript에는 여러가지 타입이 있는데 대표적으로 아래와 같은 것들이 있다.

1.문자열을 의미하는 string타입
string타입은 문자열로 된 값을 의미하고 큰따옴표,작은따옴표, 백틱 안에 들어간다. 문장,단어,알파벳,숫자 등등이 들어 갈 수 있는데 예를들어 숫자로 입력을 해도 따옴표안에 들어가 있다면 숫자가 아닌 문자로 인식한다는 것이다.

 let person="hdh"

그럼 만약에 따옴표 출력할 문자열 자체에 따옴표가 표시되게 할려면 어떻게 해야 할까? 작은 따옴표을 나타내고 싶다면 큰 따옴표 안에 작은 따옴표를 넣어 주면 되고, 큰 따옴표를 나타내고 싶다면 작은 따옴표 안에 작은 따옴표를 넣어 주면 된다. 작은 따옴표 안에 작은 따옴표를 넣거나, 큰따옴표 안에 큰따옴표를 넣으면 오류가 발생한다.그러나 작은따옴표안에 작은따옴표, 큰따옴표안에 큰따옴표를 넣을 수 있는 방법이 있다. 바로 백슬래시()를 넣어 주는 것이다.이런 것을 이스케이프 표현이라고 하는데 코드를 읽어 나가다가 백슬래시가 나오면 그거 다음에 오는 것은 코드상 다른 의미가 있는게 아닌, 그냥 문자 그대로 출력시키는 역할을 한다.
아래의 예시를 보자

// 큰따옴표를 나타내기 위해 작은따옴표 안에 큰따옴표를 넣어 주었다.
let word = 'abcd"efg"hijk'
console.log(word)  //abcd"efg"hijk 가 출력이 된다.

//작은따옴표를 나타내기 위해 큰따옴표 안에 작은따옴표를 넣어 주었다.
let word2 = "abcd'efg'hijk"
console.log(word2) //abcd'efg'hijk 가 출력이 된다.

//백슬래시와 함께 사용하면 작은따옴표 안에 작은따옴표, 큰따옴표 안에 큰따옴표를 넣을 수 있다.
let word3 = 'abcd\'efg\'hijk'
let word4 = "abcd\"efg\"hijk"
console.log(word3, word4) // 각각 abcd'efg'hijk, abde"efg"hijk가 출력이 된다.

추가적인 이스케이프 표현도 알아보자
\n -> 줄바꿈을 해주는 표현
\t -> 탭을 넣어주는 표현
\ -> 백슬래시 자체를 문자로 표현할때 사용하는 표현

//콘솔에 아래와 같이 반갑습니다를 안녕하세요 밑에 출력하려고 엔터를 입력해서 표현을 하면 에러가 뜬다.왜냐하면 줄바꿈이 되는 순간 코드가 끝난다고 생각하기 때문에 오류가 뜨는 것이다.
console.log('안녕하세요
            반갑습니다')

//이때 사용하는 것이 \n이다. 아래와 같이 입력하면 안녕하세요 밑에 반갑습니다가 출력되는 것을 확인할 수 있다.
console.log('안녕하세요\n반갑습니다') 

// \t를 입력하면 탭이 들어간다.아래와 같이 입력해보면 안녕하세요와 반갑습니다 사이에 탭이 들어간 것을 확인해 볼 수 있다.
console.log('안녕하세요\t반갑습니다')

// 백슬래시를 하나만 입력하면 그냥 무시된다.백슬래시를 두개 입력하면 백슬래시 하나가 문자로 표현된다.
console.log('안녕하세요\반갑습니다') // 안녕하세요반갑습니다
console.log('안녕하세요\\반갑습니다') // 안녕하세요\반갑습니다

하지만 이 모든 것들이 백틱(``)안에서는 가능하다. 즉 백틱 안에서는 엔터를 쳐서 다음줄로 넘기면 실제로 다음줄로 넘어가게 출력이 되고, 탭을 넣어주면 탭이 들어간 것이 출력이 된다.또 백틱 안에서 ${}안에 변수나 상수등을 넣어 주면 그 값을 그래도 사용할 수 있다.이 방법을 사용하지 않으면 문자와 변수를 +로 연결해서 표현해야 하기 때문에 가독성이 매우 떨어진다. 변수와 상수 뿐 아니라 무언가를 리턴하는 JS코드도 입력해 줄 수 있다. 아래의 예시를 보자

// 백틱 안에서 탭도 사용했고 엔터도 사용했다.
let bt = `안녕하세요 반가워요
앞으로 잘 부탁해요`

//출력해보면 탭과 엔터가 모두 적용이 된 것을 볼 수 있다.
console.log(bt) 

//백틱 안에서 변수와 상수를 사용해보자
const name = 'hdh'
let age = 30
console.log(`내 이름은 ${name}이고, 나이는 ${age}이다`) // 내 이름은 hdh이고, 나이는 30이다

//백틱을 사용하지 않으면 아래와 같이 해줘야 한다.너무 번거롭다
console.log('내 이름은' +name+'이고' + ',나이는' +age+'이다') // 내 이름은 hdh이고, 나이는 30이다

// 백틱 안에 계산식을 넣어 보면 계산이 되는 것도 확인 할 수 있다.
console.log(`5더하기 3은 ${5+3}이다.`) // 5더하기 3은 8이다.

2.숫자를 의미하는 number타입
숫자 타입도 있는데 이것들은 따옴표안에 들어가지 않는다.
숫자타입은 다음과 같이 사용된다.

let num=3

3.참과 거짓을 판단하는 boolean타입
boolean타입은 논리 연산에 쓰이는 데이터 타입이다.값이 true나 false로 출력되는 데이터 타입을 의미한다.

let bool=1>3

4.자료형 타입(배열,객체)
배열이란 관련있는 데이터들을 하나로 묶어서 하나의 변수 아래에 저장하는 것을 말한다.
예를들면 다음과 같이 사용된다 -> let color=['black','yellow','blue'];
객체란 여러 속성들을 하나의 변수에 저장하는 것을 말한다.
예를들면 아래와 같이 사용된다.

let man={
  name:'hdh',
  age:'30',
  isStudent: true
};

5.undefined 과 null 타입
undefined는 정해지지 않은 상태를 나타내고, null은 비어있는 상태를 명시해 준 것이라고 생각하면 된다.

6.함수도 타입이다.

typeof연산자

그런데 만약 특정 값의 타입을 모르거나, 내가 변수에 어떤 타입의 값을 입력했는지 알고 싶을때 typeof연산자를 사용하여 타입을 알 수가 있다.값이 number로 나오면 타입이 숫자로 되어 있다는 것이고, string으로 나오면 타입이 문자로 되어 있다는 것이고, boolean타입으로 나오면 boolean타입으로 되어 있다는 것이다.값이 object로 나온다면 배열이나 객체 타입이 사용이 되었다는 뜻이다.
다음의 예제를 보고 코드를 입력해보자.

> // 1과 '1'이 각각 어떤 타입인지 알아보자

1. console.log(typeof 1) // number
2. console.log(typeof'1') //string

> //변수를 선언하고 값을 할당한 다음 타입을 알아보자

let A="2"
console.log(typeof A)  //string

> //boolean타입을 만들고 typeof를 통해 type을 확인해보자.

let bool=3>1
console.log(typeof bool) // boolean
console.log(typeof (1>3)) // boolean

> //주의!! boolean타입을 사용을 했지만 아래와 같이 괄호 없이 사용을 한다면 값이 boolean이 아닌 false로 
나오게 될텐데 그 이유는 괄호가 없어서 typeof 1과 3이 비교가 되기때문에 typeof1은 number라는 문자이고 3은 숫자이기 
때문에 비교 자체가 성립하지 않아 false라는 값을 출력한다. 따라서 괄호를 꼭 써줘야 한다._**

console.log(typeof 1>3) // false