Data types

💁🏻‍♀️ 총 7개의 자료형이 Data Type으로 정의되어 있다!

• Boolean
• Null
• Undefined
• Number
• String
• Symbol (ECMAScript6에 추가됨)
• Object

---

✉️ Primitive Types

• 더 이상 작은 단위로 나눠질 수 없는 single item
• value 값 자체가 메모리에 저장된다!
  

🔢 number

JavaScript는 정말 다행히도..... number 하나만으로 숫자 데이터는 다 끝이다!!

재미로 보는 C, Java 언어에서의 숫자 data types
<C언어에서의 숫자 data types>
<JAVA언어에서의 숫자 data types>


⇒ 정수인지 소수인지, 어떤 사이즈의 데이터를 담을지 사전에 미리 생각해서 거기에 맞는 함수를 사용해야 한다. ㅎㄷㄷ....

---

우리의 갓JS로 돌아와서...

let a = 12;
let b = 1.2;

JavsScript에서는 심지어 number 라고 따로 작성하지 않고, 바로 let 을 사용해도 된다!

⇒ 자바 스크립트에서는 타입이 다이나믹하게 결정되기 때문에, let a 등 선언 후 바로 숫자만 적어주면 끝~

const count = 17; // integer number(정수)
const size = 17.1; // decimal number(소수)
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

이렇게 number 하나만으로 정수나 소수에 상관없이 모두 type:number로 출력된다. (왕편하다!)

추후에 배우게 될 TypeScript 에서는?

let a: number = 12;
let b: number = 1.2;

number 를 명확히 명시해야하긴 하지만, number 하나로 충분하다!

---

⚠️ 특이한 number 값

const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);

• infinity 숫자를 0으로 나누면 양의 무한대수가 된다.
• negativeInfinity 마이너스 숫자를 0으로 나누면 음의 무한대수가 된다.
• NaN number가 아닌 string을 숫자로 나누게 되면 NaN(Not a Number) 값이 나온다.

  NaN은 JavaScript의 값들 중 유일하게 자기 자신과 같지 않은 값이다!
  
  따라서, 어떤 값이 NaN인지 판별하기 위해서는 일반적인 비교 연산자를 사용하면 안 되고, 대신 Number.isNaN또는 Object.is 함수를 사용해야 한다.

  const thisIsNan = NaN;
  thisIsNan === NaN; // false = 비교 연산자로는 판별이 불가능하다.
  Number.isNaN(thisIsNan); // true
  Object.is(thisIsNan, NaN); // true
  // 이 함수들을 사용해야 한다!

>💁🏻‍♀️ 막간! bigInt ~~(중요한건 아님)~~<br />
JavaScript에서의 숫자는 (-2^^53) ~ (2^^53) 까지만 표현이 가능한데, 최근에 bigint 라는 type이 추가 되었다!
```javascript
const bigInt = 12345678901234567890123456789012345678901234567890n;
console.log(`value: ${binInt}. type: ${typeof binInt}`);
Number.MAX_SAFE_INTEGER;

⇒ 이렇게 숫자 뒤에 n 만 붙여주면 끝! 제대로 잘 나오는지 확인해볼까??
type: bigint로 잘 나온다!

그치만 요녀석은 나온지 얼마 안된 녀석이라서 아직 많은 브라우저에서 지원이 되지 않는다.

그리고 개발을 하면서 이렇게 큰 범위의 숫자를 쓸 경우는 거의 없어서 흔히 쓰이진 않을듯~

---

✍️ string

const key = 'k';
const YunoYunho = 'passion';
const greeting = 'you know?' + YunoYunho;
console.log(`value: ${greeting}, type: ${typeof greeting}`);
const helloY = `hi ${YunoYunho}!`; //template literals (string)
console.log(`value: ${helloY}, type: ${typeof helloY}`);

• 한개의 글자, 여러개의 글자 모두 string 하나로 끝!

• 일반 string과 변수를 + 기호로 붙여서 작성할 수도 있다.
  ('you know?' + YunoYunho; ⇒ you know?passion으로 출력!)

• template literals (template string)
  ES2015에서 도입된 문자열 리터럴이다. 백틱` 기호에 원하는 string과 ${변수}! 를 적으면, 변수의 값이 자동으로 적혀서 나온다.

console.log(`value: ${helloY}, type: ${typeof helloY}`);

console.log('value: ' + helloY + ' type: ' + typeof helloY);

• 백틱 `을 사용하면, 백틱 사이에 있는 여백과 줄바꿈이 그대로 반영된다. 만약 백틱을 사용하지 않으면, 아래 두번째 코드처럼 '과 +로 일일이 여백을 넣어줘야 한다.
  
  

💡 Escape Sequence

특수 문자를 문자열에 넣거나, 혹은 직접 유니코드 코드포인트를 사용해서 문자를 넣을 수 있도록 해준다.

표기법	문자
\'	홑따옴표
\"	쌍따옴표
\	백슬래시
\n	라인 피드 (텍스트의 한줄이 끝남을 표시하는 문자)
\r	캐리지 리턴 (텍스트의 한줄이 끝남을 표시하는 문자)
\t	탭
\uXXXX	유니코드 문자
\u{X...}	유니코드 문자
$	달러
`	백틱

console.log('lorem \'ipsum\''); // lorem 'ipsum'
console.log('line\nfeed'); // line(줄바꿈)feed
console.log('\uD55C\uAE00'); // 한글
console.log('\u{1F435}'); // 🐵

이런 식으로 사용가능하긴 한데 왠만한건 template literals 사용하자!!

👩🏻‍🏫 Bonus! string 타입에서 자주 쓰이는 속성과 메소드

// 문자열의 길이 알아내기
'hello'.length; // 5

// 여러 문자열 연결하기
'hello'.concat('fun', 'javascript'); // 'hellofunjavascript'

// 특정 문자열을 반복하는 새 문자열 생성하기
'*'.repeat(3); // '***'

// 특정 문자열이 포함되어 있는지 확인하기
 'hello javascript'.includes('hello'); // true
'hello javascript'.startsWith('he'); // true
'hello javascript'.endsWith('ript'); // true
'hello javascript'.indexOf('java'); // 6

// 문자열의 특정 부분을 바꾼 새 문자열 생성하기
'hello javascript'.replace('java', 'type'); // 'hello typescript'

// 문자열의 일부를 잘라낸 새 문자열 생성하기
'hello'.slice(2, 4); // 'll'

// 좌우 공백문자를 제거한 새 문자열 생성하기
'   hello  '.trim(); // 'hello'
'   hello  '.trimLeft(); // 'hello  '
'   hello  '.trimRight(); // '   hello'

// 좌우 공백문자를 추가한 새 문자열 생성하기
'hello'.padStart(8); // '   hello'
'hello'.padEnd(8); // 'hello   '

// 문자열을 특정 문자를 기준으로 잘라 새 배열 생성하기
'hello!fun!javavscript'.split('!'); // ['hello', 'fun', 'javascript']
'hello'.split(''); // ['h', 'e', 'l', 'l', 'o']

// 모든 문자를 소문자, 혹은 대문자로 변환한 새 문자열 생성하기
'Hello JavaScript'.toLowerCase(); // 'hello javascript'
'Hello JavaScript'.toUpperCase(); // 'HELLO JAVASCRIPT'

---

🤥 boolean

참과 거짓을 구분하는 함수!

false
0, null, undefined, NaN, ' ' (빈 문자열)
( ' ' = 비어져 있는 string )

true
any other value
(0이 아닌 number나 string등은 모두 참!)

const canRead = true; //이렇게 바로 true라고 명시해줘도 되고
const test = 3 < 1; //이런 값을 넣어도 계산 후 참,거짓을 평가하여 false으로 인식된다.

---

📭 null

let nothing = null;

넌 텅텅 빈 empty 값이야! 라고 값이 명확하게 지정되었음

typeof로 확인해보면 object라고 나온다.
console.log(typeof null); // object

null은 말그대로 아무것도 아닌 빈 객체를 가르키고 있어서 object라고 나오는것!

let nothing = null;
console.log(typeof nothing); // 이런 경우에도 object 라고 출력됨!

---

❓undefined

let x;
let x = undefined;

선언은 되었지만, 아무 값이 들어가있지 않음
undefined; 이라고 명시해줘도 되고, 첫번째처럼 아무 값도 넣지 않아도 undefined로 인식한다.

---

<br/ >

🔔symbol

고유한 식별자가 필요하거나 동시다발적으로 일어날 수 있는 코드에서 우선 순위를 주고 싶을 때 사용한다.

💁🏻‍♀️ string으로도 식별자를 지정할 수 있는데, 이 경우에는 다른 모듈이나 다른 파일에서 동일한 string를 사용하면, 동일한 식별자로 간주한다.

💁🏻‍♀️ 그러나 symbol은 동일한 값을 넣었더라도, 둘은 다른 식별자로 인식된다.

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); //false

동일한 symbol을 만들고 싶다면 symbol.for 를 이용하면 된다. 이렇게 하면 둘은 같은 식별자로 인식된다.

const symbol1 = Symbol.for('id');
const symbol2 = Symbol.for('id');
console.log(symbol1 === symbol2); //true

⚠️ symbol 출력시 주의!

console.log(value: ${symbol1}, type: ${typeof symbol1}`);`

symbol을 바로 출력하면 Error가 뜨게 되므로,

console.log(value: ${symbol1.description}, type: ${typeof symbol1}`);`

이렇게 value에서 .description을 이용해서 string으로 변환하여 출력해야 한다!

---

📨 Object Types

☝️single item들을 여러개 묶어서 하나의 box로 관리할 수 있게 만들어주는 것
✌️Object의 크기는 너무 커서 하나의 메모리에 담기지 않고, Object를 가르키는 ref 가 메모리에 저장된다.
⇒ 그렇기 때문에 const solmi 안에 이름,나이 등 여러가지 요소들을 넣으면 solmi는 수정할 수 없지만, 그 안에 들어간 이름, 나이등의 값은 수정할 수 있다!

📨 Array

const dayOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

console.log(dayOfWeek[2]); //Wed가 출력!

Array를 선언하려면 [ ](대괄호)로 감싸주면 된다!

⇒ dayOfWeek[2] 라고 했는데 2번째에 있는 Tue가 아닌 Wed가 출력되는 이유?

배열은 번호가 메겨진 index를 가진다.
(나중에 나올 객체도 이러한 인덱스를 가지는데, 객체와 차이점은 배열은 숫자 인덱스를, 객체는 이름으로 된 인덱스를 가진다.)

배열에서 사용하는 숫자 인덱스는 무조건 0번 부터 시작한다.
즉, Mon는 index 0번째 = index[0]에 위치한 것이고, Tue는 index 1번째 = index[1]에 위치한것!

const hi = "Hello!"
const solmi = ["solmi", 26, true, hi, 
							{name:"solmi", gender:26}];

console.log(solmi); //solmi, 26, true, Hello! 출력

Array는 단순한 string뿐 아니라, boolean, number, 미리 선언했던 변수,Object 들까지 모두 묶을 수 있다!
⇒ 이렇게 배열 안에 들어있는 값들을 요소(element, item, etc)라고 부른다.

console.log(solmi[3]); //Hello!라는 값을 얻고 싶다면 이렇게 위치를 넣어줘야 한다

묶은 데이터들은 단순 나열될 뿐이며, 특정 정보를 얻고 싶다면 그 위치값을 기억해야 한다.

ex) DB에서 가져온 리스트 데이터 등을 추가할때 사용

---

📦 Object

const info = {
  name: "solmi",
  age: 26,
  gender: "female",
  sheLikeCoffee: true,
  favFood: ["chicken", "tteokbokki", "jjapaghetti"], //Array도 object로 묶을 수 있다
};
console.log(info.gender); //female이 출력된다

info.age = 27; //info Object는 const로 묶여있지만, info를 이루는 ref 들은 각각 메모리에 저장되었기 때문에 age가 수정이 가능하다.
console.log(info.age); //27이 출력된다

Object를 선언하기 위해서는 { } (컬리 브라켓)으로 감싸주면 된다!
(Array처럼 여러가지 요소, 변수, Array를 넣을 수 있고, 심지어 Array 안에 있는 Object 안에있는 Array 등등도 넣을 수 있으며,(무한으로 즐기기 가능) Array와 달리, 특정 정보의 위치값을 기억하지 않아도 된다!)

ex) Object 안에는 Array도 들어갈 수 있기 때문에 데이터를 합쳐서 만들어야 할때 사용한다.