[Data Type] 내(데이터)가 어떤 값이 될 상(타입)인가?

30 Dec 2022 in Study on Study, JavaScript

• DataType?
  • 원시 타입(Primitive data type)
    • boolean (논리값)
      • 예시
    • null (값이 없다)
    • undefined (값이 없다)
    • number
      • 예시
    • string
      • 예시
      • 템플릿리터럴
        • 보간표현식
    • symbol (ES6에서 추가)
  • 객체 타입(object/reference type)
    • object
      • 객체 생성하기

DataType?

데이터 타입은 프로그래망 언어에서 사용할 수 있는 데이터의 종류이다.
코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 하는데
데이터 타입은 데이터를 메모리에 저장할 때 확보해야 하는 메모리 공간의 크기와 할당할 수 있는 유효값에 대한 정보, 그리고 메모리에 저장되어 있는 2진수 데이터를 어떻게 해석할지에 대한 정보를 컴퓨터와 개발자에게 제공한다.
자바스크립트의 모든 값은 데이터 타입을 가지며 데이터 타입의 종류는 7개가 존재한다.

원시 타입(Primitive data type)

예를 들어 number type 1과 string type ‘1’은 다른 값이다.
원시 타입은 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달)이다.
아래에서 원시 타입의 종류를 알아보자

boolean (논리값)

조건식이 참인지 거짓인지 표현하기 위해 사용하는 값.
논리값에는 true, false 두가지 종류뿐이다.
주로 제어구문(if/else문, while문, do/while문, for문)에 사용한다.

예시

let x = 2;

if(x === 2){
    return true
}else{
    return false
}

//true

null (값이 없다)

‘아무 것도 없다’를 값으로 표현한 리터럴.
‘어디에도 아무 것도 없다’

undefined (값이 없다)

값이 정의되지 않은 상태를 뜻한다.

let N;
console.log(typeof(N)); //undefined
//변수명이 선언되었으나 변수에 값이 정의되지 않은 상태.

• undefined가 되는 다섯가지 상황
  1. 값을 아직 할당하지 않은 변수의 값
  2. 없는 객체의 프로퍼티를 읽으려고 시도했을 때의 값
  3. 없는 배열의 요소를 읽으려고 시도했을 때의 값
  4. 아무것도 반환하지 않는 함수가 반환하는 값
  5. 함수를 호출했을 때 전달받지 못한 인수의 값

===> 값을 할당하지 않은 결과! ====> undefined

number

대다수의 프로그래밍 언어에는 정수 타입과 부동소수점 타입이 따로 있으나 자바스크립트는 숫자를 모두 64비트 부동소수점으로 표현한다.
프로그램에 직접 작성할 수 있는 상수 값은 리터럴(literal)이라고 하며 표기법에 따른 예시는 아래와 같다.

분류	표기법	예시	설명	비고
정수리터럴	10진수	123	정수를 그대로 표현
	16진수	0x2a	숫자 앞에 0x를 붙임
	8진수	0o73	숫자 앞에 0o를 붙임	ES6
	2진수	0b101	숫자 앞에 0b를 붙임	ES6
부동 소수점 리터럴	정수, 소수	3.14	소수를 그대로 표현
	소수	0.123	정수부가 0일 때는 0을 생략할 수 있음
	가수부e지수부	6.02e23	6.02*10^23
	가수부E지수부	1.616199E-35	1.616199*10^-35

예시

var num1 = 3;              // 정수값
var num2 = 15.5;            // 부동 소수점 값
var num3 = -39.26;          // 음수 부동 소수점 값

var num4 = 5E4;             // 5 x 10 Powers of 4 = 50000
var num5 = 5E-4             // 5 x 10 Powers of -4 = -50000

var num6 = 40 / 0;          // 숫자를 0으로 나눈 값, 결과: 무한대
var num7 = 40 / -0;         // 음수 0으로 나눈 값, 결과: -Infinity

var num8 = 25, num9 = 93.8; // 다중 변수 선언 및 초기화

그리고

1. Infinity => 플러스 무한대
2. typeof연산자로 해당 값이 숫자 타입인지 확인 가능
3. NaN => 부정값(Not a Number)
   • 0을 0으로 나눈 결괏값, Infinity/Infinity의 결괏값, 음수의 제곱근 등 숫자로 표현할 수 없는 부정 값

string

길이가 16비트인 유니코드 문자를 나열한 문자열이며 작은 따옴표(‘)나 큰따옴표 (“)를 문자열의 앞뒤에 붙여 표현한다.
HTML, JS 모두 작은따옴표, 큰 따옴표를 사용하므로 HTML은 큰 따옴표, JS는 작은 따옴표 등으로 구분해 사용하면 좋다고 한다. (그래야 한다는 건 아님.)
줄 바꿈 문자와 탭 문자 등은 문자열에 그대로 추가할 수 없으며 이스케이프 시퀀스로 표현해야 한다.

예시

'안녕 반가워'
"대답하렴"
""                  //빈문자열
'1부터 센다 대답하렴'
'1'

//큰 따옴표, 작음 따옴표 같이 쓰는 상황이라면?
"I'm horse"         //작은 따옴표 쓰면 큰 걸로 감싸기 
'He said, "No"'     //큰 따옴표 쓰면 작은 걸로 감싸기

템플릿리터럴

템플릿 리터럴은 역따옴표()`로 묶은 문자열이다.
역따옴표, 즉 백틱은 처음 프로그래밍을 배우기 시작할 때 접했고 당최 키보드의 뭘 눌러야 쓸 수 있는건지 혼란스러웠는데 키보드의 ₩모양을 영어자판으로 두고 치면 나오더라.

보간표현식

템플릿 리터럴 안에는 플레이스 홀더를 넣을 수 있다.
플레이스 홀더란 실제 내용물을 나중에 삽입할 수 있도록 일단 확보한 장소라는 뜻이다.
플레이스 홀더는 ${}로 표기한다.

symbol (ES6에서 추가)

일단은 이런게 있다. 정도만 알아두려고 한다.

객체 타입(object/reference type)

객체는 변수 여러 개가 모여서 만들어진 복합 데이터 타입이며 객체 안에 저장된 값은 바꿀 수 있고 참조(주소) 타입이다.
배열, 함수, 정규 표현식과 같은 다양한 요소를 객체로 본다.
아래에서 객체 타입을 알아보자

object

객체를 표로 설명하면

이름	값
hello	“me”
bye	“you”

표를 참고해 설명하자면 객체에 포함된 데이터 하나를 객체의 프로퍼티라고 부르며 이 프로퍼티는 객체 내에 이름과 값을 짝지은 쌍을 말한다.
이 프로퍼티의 이름 부분을 프로퍼티 이름 또는 키라고 부른다.(값은 값이라고 한다.)

객체 생성하기

1. 객체 리터럴을 사용하기

    let card = {hello: "me", bye: "you"}; //객체 리터럴을 변수 card에 대입.
   

   • 프로퍼티 값에는 모든 데이터 타입의 값과 표현식 대입 가능
   • 객체 안의 프로퍼티 값을 읽거나 쓸 때는 마침표연산자(.) 또는 대괄호연산자([])를 사용한다.

      card.hello // me  , 마침표로 쓸 때는 프로프티 이름 (식별자)만 사용  
      card["bye"] // you ,  대괄호로 쓸 때는 프로퍼티 이름 또는 문자열을 반환하는 표현식 사용  
     

   • 객체에 없는 프로퍼티를 읽으려고 시도하면 undefined 반환

      card.today // undefined (선언만 하고 대입은 없는 상태)
      //*객체 리터럴 안에 프로퍼티 작성 안하면 빈 객체 생성됨
      let obj = {};
      console.log(obj); // object
     

   • 없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티 생성됨

      card.value = 14;
      console.log(card); //{hello: "me", bye: "you", value: 154}
     

   • delete연산자 사용하면 프로퍼티 삭제 가능

      delete card.hello;
      console.log(card); //{bye: "you", value: 154};
     

2. 생성자 함수를 사용하기 (constructor function) 유사한 객체를 여러 개 만들어야 할 때 new연산자와 생성자 함수로 쉽게 만들 수 있다.
   1. 함수 이름의 첫 글자는 대문자로 시작
   2. 반드시 ‘new’연산자 붙여 실행

   (추후 class관련 문서에서 자세히 알아보자)

마지막으로 정리하며 영화 ‘관상’의 명대사인 ‘내가 왕이 될 상인가’라는 말을 typeof에 적용시켜보겠다. (갑자기?)
내가 왕이 될 상인가?
1이 number가 될 type인가?
‘1’이 string이 될 type인가?
(1>3)이 boolean이 될 type인가?
…
..
.

위의 적절한 예시처럼(?) 데이터 왕국에는 모든 백성들이 각자의 신분(타입)을 가지고 있다.
그 신분은 숫자이기도, 문자, boolean, 함수, 자료(배열, 객체)이기도 하며 아직 데이터값을 받지 못한(undefined) 것이기도 하다.

각 백성(데이터)들의 신분(타입)을 알아보려면 typeof 라는 연산자를 사용하도록 하자.

각 데이터의 타입을 아는 것은 기본이라고 생각한다.. 어떤 데이터인지 알아야 자유자재로 데이터를 다루는 일을 시작할 수 있을 것이기 때문이다. 그러니 기본을 잘 익혀두도록 하자.