[실전 자바스크립트]4. 8가지 기본 타입

연산을 처리할 때에는 값의 "타입"이 중요하다.

console.log(10+5); // 숫자에 대해서
console.log('10' + '5'); // 문자열에 대해서

아래에서는 자바스크립트가 제공하는 기본 8가지의 타입을 확인한다.

const v1 = 12; // 1.number
const v2 = 123456124151231231515n; // 2.bigint
const v3 = 'ab'; // 3. string
const v4 = true // 4. boolean
const v5 = {} // 5. object : 내부에 속성값을 담을 수 있다.
const v6 = Symbol('abc'); // 6. symbol : 오브젝트에서 유니크한 속성 이름을 표현할 때 사용한다. 추가 설명은 나중에
const v7 = undefined; // 7. undefined : 값이 할당 된 적이 없다.
const v8 = null; // 8. null : 값이 없다.

//typeof키워드를 활용하여 type을 확인 할 수 있다.
console.log(typeof v1)

기본 타입 외에 object로부터 파생되어진 function타입도 존재한다.

function f1 {}
console.log(typeof f1); // funciton

class MyClass{}
console.log(typeof MyClass); // function : javascript의 class는 function기반으로 만들어졌기 때문에, typeof를 사용하면 function으로 출력되어 진다. 

typeof로는 null을 구분하기 힘드나, object의 toString이라는 함수를 통해서 확인할 수 있다.

console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(typeof []); // 배열의 타입은 object까지만 나오지만,
console.log(Object.prototype.toString.call([])); // [object Array] 이렇게 배열까지 나오는 것을 확인 할 수 있다.

//toString함수는 더 세부적인 구분을 해준다.

symbol은 "유일한" 속성 이름을 만들 때 사용한다.

const idSymbol = Symbol('id'); // idSymbol을 만들었다.
const obj = { id: 123 }; // id라는 property를 가진 object를 만들었다.
obj[idSymbol] = 456; // object의 idSymbol에 456값을 넣었다. 
console.log(obj);
// { id: 123, [Symbol(id)]: 456 } // id라는 Symbol에 값이 할당되어진 것을 볼 수 있다. 이렇게 같은 id라는 이름의 property충돌문제를 해결 할 수 있다.

const arr = [];
console.log(arr[Symbol.iterator]); // array에 iterator라는 속성이 있다.

타입 변환을 위한 함수를 사용 할 수 있다.

//String, Number, BigInt, Boolean
const v1 = String(123);
const v2 = String(new Date());
console.log(typeof v1, v1);
console.log(typeof v2, v2);

const v3 = Number('123');
const v4 = BigInt('123');
console.log(typeof v3, v3);
console.log(typeof v4, v4);

const v1 = Boolean(123); 
const v2 = Boolean(0);
console.log(typeof v1, v1);
console.log(typeof v2, v2);

const v3 = Boolean('abc'); //문자열의 길이가 0보다 크면 true
const v4 = Boolean(''); //아니면 false
console.log(typeof v3, v3);
console.log(typeof v4, v4);

// !!형식으로 boolean을 반환 할 수가 있다. ! = NOT !! = 자신의 boolean값
const v11 = !!123;
const v12 = !!0;
const v13 = !!'abc';
const v14 = !!'';
console.log(typeof v11, v11);
console.log(typeof v12, v12);
console.log(typeof v13, v13);
console.log(typeof v14, v14);

new 키워드를 사용하면 새로운 object로써 만들어진다

console.log(typeof new Boolean(true));
console.log(typeof new Number(1));
console.log(typeof new String('abc'));

const s1 = new String('abc');
s1.id = 123;
console.log('value:', s1.valueOf());
console.log('id:', s1.id); // 이런식으로 id값을 붙일께 아니라면 new를 쓸 필요는 없다.

자바스크립트에서 값이 같은지에 대해서 비교하기

//등호를 세개 사용하는 방식 : type과 값이 모두 같은지 검사합니다.
console.log(123 === 123);
console.log('123' === '123');
console.log('123' === 123);
console.log(0 === false);
console.log(123 === true);

//등호를 두개 사용하는 방식 : 두 값이 다르다면? type을 바꿔서까지 비교해준다.
console.log(123 == 123);
console.log('123' == '123');
console.log('123' == 123);
console.log(0 == false);
console.log(123 == true); // type을 변환해서 판단한다면 참이 될 것이라는 예상을 하지만, 실제로는 false가 나온다. ==의 겨우 이러한 내부처리 로직이 있기 때문에, ===을 사용하는 것을 권장한다.