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 을 숫자로 지정할 수는 없는 것과 같은 매우 상식적인 제약이 될 수 있다.
위의 오류를 해석하면 "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']
일반적인 Object 와의 차이점은 "키"가 존재하지 않고 "값" 만 존재한다는 점입니다.
당연하게도, "값" 이 많아질 수록,Object 에 비해 훨~씬 더 간결한 작성이 가능합니다. 길이의 제한이 없기 때문이거든요!
C. Function
JavaScript 의 핵심이 되는 함수입니다.
함수는 작성자를 포함한, 많은 학습자들이 학생시절에 수학에서 고통받았던 그 함수와 비슷합니다.
X = f(x)x의 값을 지정하면 X가 f(x) 상응하는 값을 계산하여 출력할 것입니다. 우리가 기존에 알고 있는 그 함수입니다.
이를 JavaScript 에서는 작성하는 것이며, 여기서는 "선언" 이라는 표현을 사용합니다. ex)변수 선언
function adda(x) {
let X = x + 1
return X
}
이 함수에 관련된 것은, 이후에 함수에 대한 내용만을 따로 작성하는 포스팅을 작성할 예정입니다.
이제, 데이터 타입에 대해서 기초적인 사항을 알아보았습니다.
다음 포스팅에서는 기본 작성 문법등에 대해서 보다 쉽게 접근해보도록 하겠습니다.
감사합니다.