Java Script 작성하기 - Type of Date (데이터타입)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는, 이전의 오류에 대한 이해를 위해, 데이터타입이 어떠한 것인지를 이해하고, 

그리고 그것이 어떻게 출력되는지, 이 차이로 인해 발생하는 현상이 어떠한 것인지를 간략하게 살펴보도록 하겠습니다.

 

 

============

1. 데이터 타입의 종류는 무엇인가?

2. 기본 원시 타입

3. 참조 타입 

============

 

1. 데이터 타입의 종류는 무엇인가?

데이터 타입의 형태는 2가지로 나뉘어 있다. 먼저 말 그대로의 타입을 논하는, 원시타입 (Primitive Type) 으로, 5가지의 유형이 존재한다.

하지만 이 유형들을 다시 참조타입이라고 하는, 객체타입(Object/Reference Type) 형태로 나뉜다.

 

이러한 유형들을 이해해야, JavaScript 작성 후 결과물을 확인시, 결과물을 보지 않아도, 예상이 가능한 형태로의 발전이 가능할 것이다.

작성자의 의견이라면, HTML/CSS 때와 마찬가지로, 기본 개념이 학습되지 않는다면, 이를 올바르게 할 수 없기 때문에, 반드시 이러한 개념에 대한 이해를 완벽히 하시는것을 권장 드린다.

 

2. Primitive Type (기본 원시 타입)

이 원시타입에는 대표적으로 6가지의 유형이 존재한다. 

먼저 가장 일반적으로 쓰이는, String, Number, Boolean 이 존재하고, 형태에 따른 Underfined, Null, 그리고 유일값을 지정하는 Symbol 이 존재한다.

 

Primitive Type	Detail
Number	숫자를 뜻한다. 이 숫자타입으로 입력된 값들은 콘솔에서 색상을 가진 텍스트로 출력된다. 이전 포스팅 예시에서는 보라색상의 숫자로 표기된다.
String	일반 텍스트를 포함하고 UTF-16 으로 구성된 문자열이다. 숫자라 하더라도 '', "" 따옴표를 사용하여 문자열로 할당할 수 있고, ES6 에서 도입된 `` 기호를 사용하면 줄바꿈 및 공백을 반영하여 출력할 수 있다.
Boolean	1 = 1 은 참, 1 = 0 은 거짓과 같은 True, False 를 뜻한다. 비교연산자를 사용할 때 출력된다.
Underfined	작성자가 놓치거나, 불완전한 작성등으로 인해 값이 할당되지 않았을 때, JavaScript Engine 에서 암묵적으로 초기화 하는 값
Null	작성자가 "의도적"으로 '빈 값' 을 출력하기 위해 할당하는 값. 이 값이 의도된 null 값인지를 체크 하기 위해서는 "===" 이라는 일치연산자를 사용해야 한다. *이는 객체와 관련된 사항이 있으며, 이후에 다룰 예정
Symbol	ES6 에 추가된 데이터 타입으로, 변경불가한 유일한 값을 생성하며, 값 자체의 확인이 불가하여 외부로 노출되지 않음

여기서 대표적으로 우리가 알아야할 점은, String, Number, Boolean 이라고 하는 3가지의 데이터 타입이다.

이를 각각 어떻게 나타나는지를 출력해보면 다음과 같다.

 

 

이전 포스팅에서 설명한 예제와 같이, String Type 은, '' , "" , `` 으로 감싸지 않으면, 오류가 출력된다.

따라서, String Type 의 데이터를 작성할때는 반드시 따옴표를 사용하도록 해야 한다. 

 

그리고 이후에 자세하게 작성하게 될, 비교 연산자를 통해 b 와 c 의 값을 Boolean 으로 비교하였고, 당연하게도 다르므로, False 가 나타난다.  

그리고 각각의 숫자 개체를 출력한 모습이 나타난다.

 

물론 반대로 이를 강제로 지정하는 방법도 존재한다.

이는 변수를 선언 후 , 데이터 타입을 지정할 수도 있는데,  Number 를 String 으로 바꿀 수 는 있겠으나,  String 을 숫자로 지정할 수는 없는 것과 같은 매우 상식적인 제약이 될 수 있다.

 

String > Number 지정시 오류

Number > String 변경

 

위의 오류를 해석하면 "Number is not defined" , 즉 변수 "z" 으로 선언한 값은 String 이므로, number 를 찾을 수 없다는 의미이다. 이에 대한 기본적인 원시타입을 이해하면, 이후에 사용할 반복문, 조건문 등에서 어떠한 값이 출력되는지를 유추할 수 있다.

 

3. Object/Reference Type (참조 타입)

Object/Reference Type	Detail
객체 ( Object )	Oject, 사물을 Programming 에 반영한 결과물
배열 ( Array )	' [ ] ' 으로 감싸서 나타내는 형태의 객체로, 객체와 다르게 키를 지정하지 않고 값만 ' , ' 으로 나열함
함수 ( Function )	JavaScript 에서 가장 많이 사용되고, 선언한 변수에 함수를 대입하는 방식으로 작동
정규 표현식  (Regular Expression )	이후의 포스팅에서 다룰 예정

 

먼저, 한단계 씩 이해해나가야 손쉽게 이해할 수 있으리라 생각합니다.

 

A. Object 

먼저 객체(Object) 입니다. 사실 이러한 참조타입의 단위에서 가장 작은 단위라고 이해하면 어떨까 합니다.

 

이 Object 는 하나 하나의 요소이기도 합니다.

let name = {
    Name : 'hyunwoong',
    Nickname : 'code'
}

예시에서는 let 을 사용해서, 각각 Name, Nickname 의 String 문자열을 선언했습니다. 

이렇게 선언을 하면, 이 let name 으로 선언한 하나의 "객체" 가 되게 됩니다. 

그리고 이 객체 안에 있는, 두 개의 값을 속성(Porperty) 라고 지칭합니다. 이해를 돕기 위해, 줄바꿈이 되었지만, 쉼표로 구분만 하셔도 무방합니다. 하지만 모든 코드 작성은 가독성이 좋아야 하므로, 가급적 줄바꿈을 해주시는게 좋습니다. 

 

즉 여기서의 각자의 명칭들에 대한 용어를 정리하면 다음과 같습니다.

 

Let name = Object ( 객체 )

- 여기서 객체의 경우, 이전 포스팅에서 언급한 것과 같이, 숫자로 시작할 수 없습니다. 

 

Name , Nickname = Key ( 키 )

- 속성에서 값과 짝을 이루는 개념입니다. 객체 안의 속성은 키:값의 관계로 이루어집니다. 이 키는 문자열로만 지정이 가능합니다. 

 

'hyunwoong' , 'code' = Value ( 값) 

- 모든 값을 입력할 수 있습니다. 하지만 값에서 이후에 다루게 될 함수(Function) 이 삽입될 경우, Method 라는 별도의 명칭으로 지칭합니다. 

 

B. Array 

위의 설명된 객체는, 속성에서 값별로 키를 부여했어야 했습니다.

즉 객체 안에 속성을 많이 할 수록, 부여해야할 키가 늘어나고, 작성자는 이를 호출하기가 매우 복잡할 수 있습니다.

이러한 상황에서 적합한 객체가 바로 Array (배열) 입니다. 

 

Array 의 가장 큰 특징은 ' [ ] ' 으로 감싸고 있는 형태로 나오며, 어떠한 값이든 삽입할 수 있습니다. 물론 여기서는 Array 안에 다시 Array 를 입력하거나, Object 를 넣고, Function 도 삽입할 수 있습니다.

이를 간단한 예시로 작성해보면 아래와 같습니다.

 

let name2 = ['hyun', 'woong', 'code']

Array Sample

 

 

일반적인 Object 와의 차이점은 "키"가 존재하지 않고 "값" 만 존재한다는 점입니다. 

당연하게도, "값" 이 많아질 수록,Object 에 비해 훨~씬 더 간결한 작성이 가능합니다. 길이의 제한이 없기 때문이거든요!

 

C. Function 

JavaScript 의 핵심이 되는 함수입니다.

함수는 작성자를 포함한, 많은 학습자들이 학생시절에 수학에서 고통받았던 그 함수와 비슷합니다. 

X = f(x)

x의 값을 지정하면 X가 f(x) 상응하는 값을 계산하여 출력할 것입니다. 우리가 기존에 알고 있는 그 함수입니다.

이를 JavaScript 에서는 작성하는 것이며, 여기서는 "선언" 이라는 표현을 사용합니다. ex)변수 선언

 

function adda(x) {
    let X = x + 1
    return X
}

 

이 함수에 관련된 것은, 이후에 함수에 대한 내용만을 따로 작성하는 포스팅을 작성할 예정입니다. 

 

이제, 데이터 타입에 대해서 기초적인 사항을 알아보았습니다.

다음 포스팅에서는 기본 작성 문법등에 대해서 보다 쉽게 접근해보도록 하겠습니다.

 

감사합니다.