[Javascript]데이터 타입

#모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다.

 

데이터 타입

자바스크립트의 모든 값이 가지고 있는 타입. ES6기준 7개의 타입이 있다. 크게는 원시타입과 객체타입으로 분류한다. 

원시타입 : primitive type / value type  => 정수, 실수, 문자, 논리 리터럴 등의 실제 데이터 값을 저장하는 타입

객체타입: object type / reference type => 객체(Object)의 주소를 참조하는 타입으로 메모리 주소 값을 통해 값을 참조하는 타입

 

객체와 함수, 배열을 묶어서 객체 타입이라고 하고, 나머지 6개의 타입(숫자, 문자열, 불리언, undefined, null, symbol)을 원시타입으로 구분한다.  같은 원시타입이라고 해도 number 1과 string "1"은 전혀 다른 데이터이다.

 

숫자타입(Number)

자바스크립트의 경우 정수와 실수를 구분하지 않고 모든 숫자값을 배정밀도 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수로 표현한다. 정수, 실수, 2진수, 8진수, 16진구 리터럴 모두 배정밀도 65비트 부동소수점 형식의 2진수로 저장하고, 참조하여 해석할 때는 모두 10진수로 해석한다.

let a = 0b01000001; //2진수
let b = 0o101; // 8진수
let c = 0x41; // 16진수

console.log(a, b,c) // 65, 65, 65
console.log(a === b) // true
console.log(b === c) // true

자바스크립트는 모든 수를 실수로 처리한다 => 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다. ( 소수점 계산은 더 조심하자 )

console.log(1 === 1.0) // true

let a = 0.1;
let b = 0.2;
console.log(a + b); // 0.30000000000000004

let value = 27500;
let tax = 1.1;
let cost = value * tax // 30250.000000000004

숫자타입은 아래 3가지 특별한 값도 계산할 수 있다.

console.log(100 / 0) //Infinity 양의 무한대
console.log(100 / -0) //-Infinity 음의 무한대
console.log(1 * "name") // NaN 연산 불가(Not a number)

 

문자열타입(String)

텍스트 데이터를 나타내는 데 사용한다. 문자열은 0개 이상의 16비트 유니코드 문자의 집합이다.

문자열은 '', "". ``(이하 문자열 방식)으로 텍스트를 감싸 표현한다.

let string0 = '작은 따옴표';
let string1 = "큰 따옴표";
let string2 = `백틱`;

만약에 문자열 방식 2중 이상으로 겹쳐져 있다면, 안의 방식은 문자열로 인식된다.

또한 문자열을 문자열 방식으로 감싸지 않으면 문자열이 아니라 토큰으로 인식된다.

당연히 문자열 방식으로 감싸지 않으면 스페이스와 같은 공백 문자도 포함할 수 없고, 여러개의 토큰으로 인식한다.

 

템플릿 리터럴(Template literal)

ES6부터 제공하는 백틱 문자열 방식의 새로운 문자열 포기법이며, 아래와 같은 기능을 추가적으로 가능하게 한다.

 

1) 멀티라인 문자열

기존 큰따옴표나 작은 따옴표는 엔터로 개행(줄바꿈)할 수 없고, /n과 같은 이스케이프 시퀀스를 사용해야 한다. 하지만 템플릿 리터럴에서는 줄바꿈을 개행으로 인식한다.

let es5 = "이것은
	ES5 문자의 일반적인
    예시 입니다."

let es6 = `이것은
	ES6 백틱을 사용한
    템플릿 리터럴 예시입니다.`;

console.log(es5); // "이것은 ES5 문자의 일반적인 예시입니다."
console.log(es6); //  `이것은
                  //   ES6 백틱을 사용한
                  //   템플릿 리터럴 예시입니다.`; }*

2) 표현식 삽입(expression interpolation)

여러개의 문자열을 합하거나, 계산된 값을 문자열에 합해서 표현하는 것이 쉽다. 합하려는 문자열이나 합수의 실행 값 등을 ${}로 감싸준다.

const getUserName = (id) => {
	let userName;
	...user의 이름을 찾는 로직
    return userName;
	}
let userId = 3341;    
let introduce = `안녕하세요, 제 이름은 ${getUserName(userId)}입니다.`

console.log(introduce) // `안녕하세요, 제 이름은 웨인입니다`

3) 태그드 탬플릿(tagged template)

템플릿 리터럴로 표현된 문자열을 분해할 수 있는 기능이다. tagged template로 이용할 함수에 템플릿 리터럴 문자열을 붙여서 실행한다

let food1 = '피자';
let food2 = '치킨';
let food3 = '떡볶이;'

const foodMsg = (strings, ...values) => {
	console.log(strings); // [ '제가 오늘 먹은 음식은 ','과', '그리고 ', '입니다.' ]
	console.log(values); // [ '피자', '치킨','떡볶이' ]
};
foodMsg`제가 오늘 먹은 음식은 ${food1}과${food2} 그리고 ${food3}입니다.`;

strings에 리터럴로 분해된 문자열이 담겨있고,values에 food1~3이 담겨있는 것을 확인할 수 있다.

str의 length는 rest의 length보다 항상 1 크다. str의 마지막에 값이 없더라도 빈 문자열이 들어가기 때문이다.

//react에서 많이 쓰는 styled-components가 바로 tagged template를 활용한 것이다.
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

 

불리언 타입(Boolean)

논리적 참, 거짓을 나타내는 true, false이다. 조건문에 주로 사용 된다.

 

undefined 타입

undefined 타입의 값은 undefined가 유일하다. undefined는 변수를 초기화 할 때 사용된다. 즉, 개발자가 의도적으로 할당하기 위한 값이 아니라, 자바스크립트 엔진이 변수를 초기화하기 위해 사용하는 값으로, 변수를 참조했을 때, undefined가 나온다면, 변수가 선언 이후 한번도 값이 할당되지 않은 변수라는 것을 간파하기 위해 사용된다.

만약에 특정 변수가 값이 없다는 것을 표현하고 싶다면, 해당 변수에 undefined가 아닌 null을 할당하는 것이 undefiend를 의도에 맞게 사용하는 것이다.

 

null 타입

null타입의 값은 null밖에 없다. 대소문자를 구분하니 유의하자. 프로그래밍에서 변수에 값이 없다는 것을 의도적으로 명시하기 위해 사용한다. 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값이 있었는데 그 값을 더 이상 참조하지 않겠다는 의미이다. (이전에 값이 있었다!). null을 할당하면 자바스크립트 엔진은 해당 메모리 공간에 대해 가비지 콜렉션을 수행한다.

또한 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

const el = document.querySelector('.body-wrap');
console.log(el); // 클래스명이 body-wrap인 돔이 없다면 null을 반환

 

심벌 타입(Symbol)

ES6에서 추가된 타입으로, 변경 불가능한 원시 타입의 값이다. 다른 값과 중복 되지 않는 유일무이한 값이다. 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키 값을 만들기 위해 사용한다. 심벌은 symbol 함수를 호출해 생성한다.

const Symbol('key');
console.log(typeof key); //symbol

const object = {};
object[key] = 'value입니다';
console.log(object[key]); // value입니다.

 

(객체 타입 추후 정리 예정)

 

데이터 타입의 필요성

1.   데이터를 메모리에 저장하려면 먼저 확보해야할 메모리 공간의 크기를 결정해야 하는데, 타입으로 메모리 공간이 얼마나 필요한지 결정할 수 있다.
2.  반대로, 타입을 알면 해당 값을 참조할 때 얼마만큼의 공간의 메모리 셀을 읽어야하는지도 알수 있다.
3.  2진수로 저장되어 있는 값을 어떻게 해석 방식으로 해석할지도 타입에 의해 결정된다.

 

동적 타이핑

자바스크립트는 동적 타이핑 언어이다. 즉 한번 변수에 값을 할당하여 타입이 지정되어 있어도, 다른 값을 할당하면 타입이 변한 값에 맞게 변경될 수 있다는 뜻이다. 동적 타이핑 언어는 정적 타이핑 언어와 다르게 변수 자체에 타입을 선언하지 않는다. 값이 할당될 때 값에 맞게 타입이 선언될 뿐이다(타입 추론). 동적 타이핑은 유연성이 높아 편리하지만, 신뢰성은 떨어진다. 중간에 개발자도 모르게 타입이 바뀔 수도 있는 것이다. 

let item = "실내화";
console.log(typeof item); //String;

item = 1004;
console.log(typeof item); //Number;