[JavaScript] 자바스크립트 데이터 타입

오늘은 자바스크립테 있는 다양한 데이터 형에 대해서 알아보는 시간을 가져보자, 이번 시간에는 각 자료형에 대해 간단하게만 알아보는 시간이고 각 자료형에 대한 자세한 내용은 각 자료형 별로 자세하게 다루도록 하자. 다른 프로그래밍 언어와 마찬가지로 자바스크립트에서도 다양한 데이터 형이 존재한다. 
 

let age = 29;                                           // 숫자
let name = "Jack";                                      // 문자열
let laguages = ["Python","Java","Javascript"];          // 배열
let isCute = True;                                      // 불
let member = {name:"Jack", age:29, nationality:"KO"};   // 객체

위의 예시에서 처럼 다양한 자료형이 존재하는데 각각의 자료형에 대해 자세히 알아보자.
 

1. 숫자

---

자바스크립트에서 숫자를 표현할 때는 크게 정수형(Integer)과 실수형(Float)으로 두 가지가 존재한다.
 

let x = 29;
let y = 3.14
document.write(x + y);

변수 x에는 정수형인 29를 저장하고 y에는 실수형인 3.14를 저장하게 된다, 그리고 이 둘을 더한 값을 출력하게 되면 위의 실행결과와 같이 32.14가 출력되는 걸 확인할 수 있다, 만약 x + y를 더한 값을 다른 변수에 저장하게 될 때는 더한 값이 실수형이므로 실수형으로 저장되게 된다.
 

실행결과

 

2. 문자열

---

다른 프로그래밍 언어에서와 마찬가지로 자바스크립트에서도 문자열(String)은 하나 또는 여러 개의 문자를 더한 값을 말한다, 예를 들어 각각의 문자인 h, e, l, l, o를 더하게 된다면 "hello"라는 하나의 문자열이 되는 것이다. 
 
하지만 각각의 문자 'h', 'e'와 같은 하나의 문자도 문자열이라고도 한다. 자바스크립트에서는 문자열을 작은따옴표(') 또는 큰 따옴표(")로 감싸게 된다.
 

let name = "Jack Snider";
let hobby = 'PUBG';
document.write("<h1>" + name + "의 취미는 " + hobby + "입니다." + "</h1>");

name에는 "Jack Snider", 쌍 따옴표로 감싸고 hobby에는 'PUBG', 단 따옴표로 감싸 둘 다 문자열을 사용할 수 있다는 걸 확인할 수 있다. 하지만 예를 들어 큰 따옴표 안에 또다시 쌍 따옴표로 감싸는 문자열을 생성한다면 어떻게 될까?
 

실행결과

 

let greet = "Jack Snider says "hi~"";
document.write(greet);

위의 코드를 살펴보면 큰 따옴표 안에 또다시 큰 따옴표를 사용한 것을 확인할 수 있다, 그럼 위의 코드를 실행해 보고 어떤 결과가 나오는지 확인해 보자.
 

오류확인

크롬 브라우저에서 F12를 눌러 개발자 모드는 연다음 콘솔창을 확인해 보면 위와 같은 에러를 확인할 수 있다. 해당 오류를 해결하려면 쌍 따옴표 앞에 역슬래쉬(\)를 붙여주면 된다, 역슬래쉬는 보통 키보드에 엔터(Enter) 위에 원화 표시 키를 누르면 된다.
 

let greet = "Jack Snider says \"hi~\"";
document.write(greet);

실행결과

위의 예시처럼 쌍 따옴표 안에 쌍 다옴표를 사용하기 위해 앞에 역 슬래쉬(\)를 붙여주고 다시 실행하였더니 위의 실행결과와 같이 정상적으로 출력됐음을 확인할 수 있다. 쌍 따옴표 안에 쌍 따옴표를 사용하려면 역 슬래쉬를 붙여줘야 하지만 쌍 따옴표 안에 작은따옴표는 그대로 사용할 수 있다.
 

let greet = "Jack Snider says 'hi~'";
document.write(greet);

실행결과

 

3. 불

---

불(Boolean)은 데이터 형의 종류가 2가지 밖에 없다, 바로 true(참)와 false(거짓)이다. 
 

let x = 29;
let y = 29;
let z = 30;

document.write("<h1>x == y : " + (x == y) + "</h1>");
document.write("<h1>x == z : " + (x == z) + "</h1>");

실행결과

수학에선 = 기호는 두 항의 값이 같다로 표현되지만 프로그래밍 언어에선 두 항의 값이 같은지 비교할 땐 == 기호를 사용한다. 따라서 위의 예시에서 x와 y에는 각각 똑같은 값인 29가 저장돼 있고 둘을 비교했을 때 true 값이 저장되고 30이 들어가 있는 z와 x를 비교했을 때는 false를 반환하게 된다.
 

4. 배열

---

배열은 간단히 말해 하나의 변수에 여러 개의 데이터를 담을 수 있는 데이터 타입이다. 파이썬 같은 경우는 배열에 서로 다른 데이터 형의 데이터를 저장할 수 있지만 자바스크립트에선 같은 데이터 형으로만 데이터를 저장할 수 있다.
 

let languages = ["Python", "Java", "JavaScript"]; // 문자열 배열
let numbers = [1,2,3];                            // 정수형 배열

document.write("<h1>" + languages + "</h1>");     // languages 배열 출력
document.write("<h1>" + languages[0] + "</h1>");  // languages 배열의 첫 번째 요소 출력
document.write("<h1>" + languages[1] + "</h1>");  // languages 배열의 두 번째 요소 출력
document.write("<h1>" + languages[2] + "</h1>");  // languages 배열의 세 번째 요소 출력
document.write("<h1>" + numbers + "</h1>");       // numbers 배열 출력

위의 예시와 같이 배열은 대괄호([])로 감싸게 되며 각 요소를 콤마(,)로 구분하게 된다, 자바스크립트를 포함한 다른 프로그래밍 언어들도 배열의 인덱스는 0번째부터 시작된다. 

실행결과

 

5. 객체

---

객체(Object)는 각 요소가 키(Key)와 값(Value)으로 한 쌍을 이룬다, 파이썬을 하시는 분들이라면 파이썬의 딕셔너리와 같다고 생각하면 된다. 그리고 객체는 배열과 달리 대괄호([])를 사용하지 않고 중괄호({})를 사용하여 객체의 요소를 감싼다.
 

let member_info = {name:"Jack", age:29, hobby:"PUBG"}; // Key:Value

document.write("<h1>" + member_info.name + "</h1>");   
document.write("<h1>" + member_info.age + "</h1>");   
document.write("<h1>" + member_info.hobby + "</h1>");

members_info 변수에 키(Key)와 값(Value)으로 이루어진 요소들을 각각 저장하였다, 각 요소의 값(value)에 접근하려면 변수명.키값으로 접근할 수 있는걸 위의 코드에서 확인할 수 있다. 위의 코드에서 키는 name, age, hobby이고 값은 "Jack", 20, "PUBG"이다. 배열과 달리 객체에는 각 요소에 각각 다른 데이터 형을 저장할 수 있다.
 

실행결과