18. 데이터 타입

컴퓨터 프로그래밍에서는 데이터를 처리하는 것이 매우 중요한 일입니다. 이번 시간에는 자바스크립트라는 컴퓨터 언어에 어떤 형태의 데이터가 있는지 살펴보고, 각각의 특징에 대해 살펴보겠습니다.

18-1. JavaScript Data types

자바스크립트의 다양한 데이터 타입을 살펴보겠습니다. (MDN | JavaScript Data Type)

✔️ 기본 자료형 (Primitive) 인 여섯 가지 데이터 타입

• String (문자열)
• Number (숫자)
• Boolean (true/false)
• Undefined
• Null
• Symbol (ECMAScript 6 에 추가됨)

✔️ 별도로 Object(객체) 도 있음

---

18-2. typeof 연산자

• 각 데이터 타입을 자세히 알아보기 전에 typeof 연산자를 배우겠습니다.
• typeof 연산자를 통해 이 값, 이 변수는 무슨 데이터 타입인지 알 수 있습니다.
• typeof 연산자를 적용하면 다음 문자열 중 하나를 반환합니다.
  1. "undefined" : 정의되지 않은 변수
  2. "boolean"
  3. "string"
  4. "number"
  5. "object" : 함수를 제외한 객체 또는 "object"
  6. "function"
• typeof 연산자는 다음과 같이 사용합니다.

let msg = "message";

console.log(typeof msg); // "string"
console.log(typeof 100); // "number"

 

:: typeof null

• typeof null → "object"
• null 이라는 데이터 타입이 object 로 반환됩니다.
• null 은 빈 객체를 참조하고 있어서 그렇습니다.
• 이 내용은 뒤에서 추가로 학습하겠습니다!

 

:: Array 데이터 타입

console.log(typeof []);

• 배열의 type을 확인해보면 "object"입니다.
• 왜냐하면 사실 배열은 확장된 객체 이기 때문입니다...!
• 일단 typeof 연산자로 배열을 확인하면 "object" 가 출력된다는 것만 기억하시고 넘어가주세요.

---

18-3. Number (숫자)

• Number 라는 데이터 타입은 숫자를 의미합니다.
• Number 타입에서 중요한 것은 연산입니다.
• 산술 연산자를 사용하여 Number 타입에 대한 연산은 아래와 같이 작성합니다.

1 + 1 // 더하기
2 - 1 // 빼기
2 * 4 // 곱하기
6 / 2 // 나누기

• 더하기(+)는 왼쪽 값과 오른쪽 값을 더해서 하나의 값을 만든다는 점에서 이항 연산자라고 부릅니다.
• 이항 연산자 중에서 산수를 하는 것이기 때문에 산술 연산자라고 부릅니다.

---

18-4. String (문자열)

• 문자열 데이터 타입은 따옴표(" ") 혹은 작은따옴표(' ')로 감싼 모든 표현을 뜻합니다.
• 주의) 큰따옴표로 시작하면 큰따옴표로 끝나고, 작은따옴표로 시작하면 작은따오표로 끝나야 합니다.
• 산술 연산자를 통해 숫자 데이터 타입을 활용하는 것처럼 문자열 타입에도 다양한 기능이 있습니다.

// 문자열 데이터 타입 변수 선언
let name = "wecode";

// .length >> 문자열이 몇 글자로 되어 있는지 확인
name.length // 5

// .toUpperCase >> 문자열을 대문자로 출력
name.toUpperCase() // "WECODE"

// .indexOf >> 특정 텍스트의 포함 유무 및 위치 확인
name.indexOf('c') // 2
name.indexOf('j') // -1

 

cf. 텍스트 문자열의 연결

☑️ 문자열 + 문자열

alert("안녕하세요! " + userName + "님");

• 텍스트를 서로 조합할 수도 있습니다.
• 텍스트를 조합할 때는 + 연산자를 사용합니다.
• 텍스트와 변수를 조합해서 사용할 수도 있습니다.
• 아래는 모두 같은 결과가 나옵니다.

console.log("안녕" + "하세요");
console.log("안녕" + "하" + "세요");
console.log("안녕" + "하세" + "" + "요");

let hi = "안녕";
console.log(hi + "하세요");

let ha = "하세요";
console.log(hi + ha);

• 아래의 코드를 직접 입력해 확인해보세요.

let message = "감사합니다., ";
let userName = "김개발";
let banger = "님!";
let customMess = message + userName + banger;
console.log(customMess);

 

☑️ 문자열 + 숫자 조합

이제는 텍스트인 String과 숫자인 Number의 조합을 해보려고 합니다. 아래의 결과는 무엇이라고 나오나요?

console.log("2" + "2");

우리가 보기에는 둘 다 숫자인데, " " (쌍따옴표)로 감싸져 있기때문에 컴퓨터는 숫자라고 인식하지 않습니다. 그래서 2라는 텍스트(1)와 2라는 텍스트(2)가 붙은 22 라는 문자열이 출력됩니다. 숫자로 표현하려면 쌍따옴표가 없어야 합니다.

console.log(2 + 2); // 숫자 4

이렇게 컴퓨터는 각각의 값이 텍스트인지, 숫자인지 타입을 갖고 있습니다. JavaScript에서는 텍스트와 숫자를 구분하는 것은 " "(쌍따옴표) 입니다. 그렇다면 아래의 변수 중에 무엇이 숫자이고, 무엇이 텍스트인지 아시겠나요?

const iAmString = "983";
const iAmNumber = 983;

const iAmStringToo = "0";
const iAmNumberToo = 0;

const iAmAlsoString = "-10";
const iAmAlsoNumber = -10;

숫자를 " "(따옴표)로 감싸지 않은 다음의 결과는 무엇 일까요?

alert("2 더하기 2는 " + 2 + 2);

실행해보셨나요? 우리가 원하는 결과가 아닙니다. 프로그래밍은 왼쪽에서부터 순서대로 실행되기 때문에 다음과 같은 결과가 나온 것입니다.

• 위와 같이 서로 다른 type인 String + Number를 시도할 때는 항상 주의해야 합니다.
• String과 Number형을 더하면 항상 String 형으로 변환됩니다.
• 원래 다른 프로그래밍 언어에서는 서로 다른 type인 String과 Number는 서로 더하거나 뺄 수 없습니다.
• 하지만 JavaScript 에서는 오류를 내지 않고 더하게 되죠.
• 이런 것을 유연 하다고 좋아하는 개발자도 있지만, 에러를 낼 여지가 있기 때문에 JavaScript 의 단점으로 꼽는 개발자도 있습니다.

문자열이냐 숫자냐에 따라 결과가 많이 달라지므로 데이터 타입을 정확하게 표현하는 것에 관심을 가질 필요가 있습니다.

---

18-5. boolean

• boolean 은 단 두 개의 데이터로 이루어진 데이터 타입입니다. → true / false
• boolean 데이터 타입은 조건문과 반복문에서 유용하게 사용됩니다.
• 다른 데이터 타입이 boolean 값으로 변환되는 여러 경우가 있습니다.

 

:: 여러 데이터 타입의 boolean 값 변환

✔️ true 로 변환되는 값

• 문자열 : 비어 있지 않은 모든 문자열
• 숫자 : 0 이 아닌 모든 숫자
• 객체: 모든 객체 ({ }, [ ] 포함)

✔️ false 로 변환되는 값

• 문자열 : " " (빈문자열)
• 숫자 : 0, NaN
• 객체 : null
• undefined

 

:: 조건문에서의 boolean 데이터 값 활용

• 다른 데이터 타입이 boolean 값으로 변환 되는 것은 아래와 같이 조건문에서 활용될 수 있습니다.
• (조건문은 추후 자세히 다룰 예정입니다.)
• if 조건문은 특정 조건의 true/false 값을 판단하여 if문을 실행합니다.

let sam = 3;

if (sam === 3) {  //sam === 3 이 true이면
  // 실행
}

아래의 코드를 보겠습니다.

let msg = "message";

if (msg) {
  // 실행
}

• 해당 if 문은 비교나 검사할 조건 없이 msg 만 들어가 있습니다.
• 자바스크립트에서 문자열은 " "(빈 문자열)을 제외하고 모두 true 값을 갖습니다.
• 따라서 저 위의 msg 부분은 true 가 되고, if문이 실행됩니다.

아래의 if문은 숫자 0이 false로 변환되는 예시입니다. if문이 실행되지 않습니다.

let number = 0;

if (number) {
  // 실행 안됨
}

---

18-6. undefined

• undefined 데이터 타입은 말 그대로 정의되지 않은 데이터 타입입니다.
• let, const 키워드를 사용해서 변수를 정의할 때 초기화 하지 않았다면, 즉 변수를 선언만 하고 값을 할당하지 않았다면 변수에는 undefined 가 할당됩니다.

let msg;
console.log(msg === undefined); //true (msg는 선언만 하고, 초기화 하지 않았습니다.)

---

18-7. null

• null 타입은 데이터 타입 중 하나 입니다.
• 하지만 콘솔에 typeof null 로 확인해보면 "object" 라고 나옵니다.
• null 은 말그대로 아무것도 아닌 빈 객체를 가리키고 있어서 "object" 라고 나옵니다.

---

18-8. 객체(Object)

• 마지막은 객체(Object) 데이터 타입입니다.
• 객체는 키(Key)와 값(Value)의 조합으로 이루어진 데이터입니다.
• 중괄호로 감싸진 key-value(property)의 형태를 갖습니다.

const person = {
	name : "wecode",
	age : 30,
	skills : ['HTML', 'CSS', 'Javascript'] 
}

• 객체 타입은 뒤에서 더욱 자세히 다루도록 하겠습니다.