[데이터 타입] - 기본 타입

Donggu(oo)·2022년 10월 26일
0

JavaScript

목록 보기
2/49
post-thumbnail

기본 타입

타입(data type)이란?

  • 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.
  • 자바스크립트에는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 한다.
  • 타입마다 다른 속성과 메서드가 있다.
  • 크게 원시 자료형과 참조 자료형으로 구분할 수 있다.

1. 원시 자료형(primitive data type)


  • 변경 불가능한 값(immutable)이며 pass-by-value(값에 의한 전달)이다.
  • 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다. 즉, 그 값을 복사하여 변수에 저장한다.
  • 고정된 저장 공간을 차지하는 데이터를 모두 원시 자료형이라고 한다.
  • 변수 x를 변수 y에 할당하는 경우, 변수 x의 값은 원시 자료형이기 때문에 x의 값이었던 2를 복사하여 할당되고, y에 3이 할당되어도 여전히 x는 2이다. x의 값을 y로 복사하여 할당했기 때문이다. Line 3의 코드가 변수 x에 영향을 미치지 않는다.
let x = 2;
let y = x;
y = 3;  // x = 2

1) 숫자(number)

  • 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.
  • 자바스크립트에서 숫자는 모두 Number type이다. 정수, 소수, 실수, n진법 구분 없음
  • 정수 및 부동소수점 숫자(floating point number) 등의 숫자를 나타낼 때 사용한다.
  • 덧셈 +, 뺄셈 -, 곱셈 *, 나눗셈 / 연산이 대표적
  • 또한 매우 큰 수나 매우 작은 수를 표현할 경우 e표기법을 사용할 수 있다.
let integer = 10;        // 정수
let double = 10.12;      // 실수
let negative = -20;      // 음의 정수
let binary = 0b01000001; // 2진수
let octal = 0o101;       // 8진수
let hex = 0x41;          // 16진수
let thirdNum = 10e6;   // 10000000
let fourthNum = 10e-6; // 0.00001

2) 문자열(string)

  • 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용
  • ' ' 혹은 " " 따옴표로 묶음
  • ' ' 안에 따옴표를 넣어야 할 경우 " " 큰따옴표 사용
let str = "Hello";   // 큰따옴표를 사용한 문자열
let str2 = 'Single quotes are ok too';   // 작은따옴표를 사용한 문자열
let thirdStr = "내 이름은 '홍길동'이야"  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음
let fourthStr = '내 이름은 "홍길동"이야' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음
  • 숫자와 문자열을 더할 수도 있다. 이 경우 자바스크립트는 숫자를 문자열로 자동 변환하며, 두 문자열을 연결하는 연산을 수행한다.
let num = 10;
let str = "JavaScript";
document.getElementById("result").innerHTML = (num + str); // 10JavaScript
  • 탬플릿 리터럴이란 내장된 표현식을 허용하는 문자열 리터럴
  • 탬플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열 형식화, 문자열 태깅 등 다양한 기능 제공
  • `` (백틱)으로 감싸줌
  • 백틱으로 변수나 표현식을 감싼 후 ${...} 안에 넣어주면 원하는 변수나 표현식을 문자열 중간에 넣을 수 있다
  • 줄바꿈과 공백이 허용됨
let a = 20;
let b = 8;
let c = "자바스크립트";
let str = `저는 ${a+b}살이고 ${c}를 좋아합니다.`;
console.log(str);   //저는 28살이고 자바스크립트를 좋아합니다.

3) boolean

  • 긍정(true), 부정(false)을 나타낼 때 사용한다.
let isGreater = 4 > 1;   // true (비교 결과: "yes")

4) undefined

  • undefined 타입인 값은 undefined가 유일함
  • undefined는 '아무것도 할당되지 않은 상태(타입이 정해지지 않은 것)'를 나타냄(초기화)
  • 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.
  • 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됨
let age;   // 초기화하지 않았으므로 'undefined'가 출력
typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함

5) null

  • null은 object 타입이며, null 타입인 값은 null이 유일함
  • undefined가 아무것도 할당되지 않았다는 것을 의미한다면, null은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용
  • 어느 타입에도 속하지 않는 값, 이전에 할당된 값을 더이상 사용하지 않고 비어있는 상태(재할당)
let age = null;   // object 타입의 null 값

※ 주의사항(null과 undefined)

  • null과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 결과값이 다르므로 주의해야 한다.
  • null과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않는다.
null ==  undefined;  // true
null === undefined;  // false

6) symbol

  • ECMAScript부터 새롭게 추가된 타입
  • 심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있음
let sym = Symbol("javascript");  // symbol 타입
let symObj = Object(sym);        // object 타입

let id = Symbol();  // id는 새로운 심볼이 됩니다.
let id = Symbol("id");  // 심볼 id에는 "id"라는 설명이 붙습니다.
  • 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르고, 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 함
let id1 = Symbol("id");
let id2 = Symbol("id");

alert(id1 == id2); // false -> 동일 연산자(==)로 비교 시 false가 반환
  • 객체 리터럴 {...}을 사용하여 객체를 만든 경우, [...]대괄호를 사용해야 함
let id = Symbol("id");

let user = {
  name: "John",
  [id]: 123 // "id": 123은 안됨, 심볼이 아닌 문자열 "id"가 됨 
};

2. 참조 자료형(reference data type)


  • 원시 자료형을 제외한 나머지(object로 구분되는 모든 자료형)는 참조 자료형이며, 대표적으로 객체(object), 배열(array), 함수(function)가 있다.
  • 참조 자료형이 할당될 때에는 보관함의 주소(reference)가 담긴다.
  • 대량의 데이터를 다루기에 적합하다.
  • second는 first가 가지고 있는 주소를 그대로 가지고 있다. 값만 복사했다면 second의 0번째 인덱스에 있는 요소를 변경하면 first는 변경되지 않겠지만, 주소를 공유하고 있기 때문에 first도 똑같이 변경된다.
let first = [10, 20, 30, 40];
let second = first;
second[0] = 5;
  1. first === second의 결과는 true이다.
  2. first의 0번째 인덱스에 있는 요소는 5이다.
  3. first와 second는 같은 주소를 공유하고 있다.

1) 객체(object)

  • 객체(object)는 원시형과 달리 다양한 데이터를 담을 수 있음
  • 객체는 여러 프로퍼티(property)나 메서드(method)를 같은 이름으로 묶어놓은 일종의 집합체
  • 자바스크립트에서는 숫자, 문자열, boolean, undefined 타입을 제외한 모든 것이 객체임, 하지만 숫자, 문자열, boolean과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됨
  • 객체는 { } 중괄호를 이용해 만들고, 중괄호 안에는 '키(key) : 값(value)'쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있다. 키(key)에는 문자형, 값(value)에는 모든 타입이 허용됨
  • 예제
let user = {     // 객체
  name: "John",  // 키: "name",  값: "John" -> 첫번째 프로퍼티
  age: 30        // 키: "age", 값: 30 -> 두번째 프로퍼티
  "likes birds": true  // 복수의 단어는 프로퍼티 이름을따옴표로 묶어야 한다.
};

2) 배열(array)

  • 자바스크립트에서 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다.
  • 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.
  • 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수 있다.
  • 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다.
  • 자바스크립트에서 배열은 Array 객체이다.
  • 인덱스는 0부터 시작한다.
let arrLit = [1, true, "JavaScript"];  // 1,true,JavaScript

3. typeof 연산자


  • 특정 값의 타입을 잘 모를 때 typeof 연산자로 타입을 확인해볼 수 있다.

기본 문법

typeof;
console.log(typeof 1)
> number
console.log(typeof '1')
> string
console.log(typeof 1 < 2)
> false
  • 변수에 할당한 값도 typeof 연산자로 타입을 확인할 수 있다.
let number = 1;
  console.log(typeof number)
> number
let string = '1';
  console.log(typeof string)
> string

0개의 댓글