7. 자바스크립트(JavaScript) 자료형

1. 숫자형(Number)

• 숫자 형태를 가진 데이터입니다.
• 다른 프로그래밍 언어와 달리 숫자의 형태를 구체적으로 나눠 정의하지 않습니다.
• 정수, 부동 소수점, 작은 수, 큰 수 등 여러 유형의 숫자를 숫자형(Number) 하나로 정의합니다.
• 64-bit Floating Point(63비트 부동 소수점) 국제 IEEE 754 표준에 의해 정의된 방식으로, 숫자 값을 64bit 정보로 저장합니다.
• 숫자는 비트 0~51에 저장되고, 지수는 비트 52~62, 부호는 비트 63에 저장됩니다.
  ex) 13을 자바스크립트로 표현하면 컴퓨터는 숫자를 비트로 변환하여 메모리에 저장합니다.
• 숫자형으로 분류되지만 일반적인 숫자와 다른 역활을 수행하는 값이 있습니다.
  • Infinity : 무한대를 의미하며 다른 어떤 수보다 가장 큰 수입니다.
  • NaN : "Not a number" 이라는 뜻으로, 산술 연산의 결과가 유효하지 않은 값이며 숫자가 너무 커서 표현할 수 없는 값입니다.

console.log(Infinity)					// Infinity
console.log(1 / Infinity)				// 0   Infinity로 나누면 무슨 값이든 0이 됨
console.log(0 / 0)						// NaN
console.log(Infinity - Infinity)		// NaN
console.log(0 / "유효하지 않은 수식")   // NaN

2. 문자형(String)

• 값이 텍스트 형태인 데이터 입니다.
• 문자열로 표현할 때는 큰따옴표 " ", 작은따옴표 ' ', 억음 부호 ` ` 와 함께 사용합니다.
• 처음과 끝이 기호로 둘러싸인 형태로 문자열이 작성되며 처음과 끝의 기호는 동일해야 합니다.
• 따옴표 기호들은 단일 문장이어야 유효하나, 간혹 줄 바꿈이 필요한 문장은 음표로 묶인 텍스트 안에 ＼n을 추가하면 줄 바꿈이 가능합니다. 백슬래쉬 뒤에 문자는 경우에 따라 변경이 가능합니다.
  => ＼n를 HTML에서 처리할 때는 <br/>태그로 변경해줘야 하는데 이때 replace() 함수를 사용하여 ＼n를 <br/>태그로 변경해주면 됩니다. ex) p.replace(/＼n/g, '<b/r>')

const s = "String"
const p = "Paragraph1 \nParagraph2"
console.log(s)
console.log(p)
// String
// Paragraph1 
// Paragraph2

3. 불린형(Boolean)

• 질문의 대답인 "예", "아니요"를 프로그래밍 언어로 표현하는 것입니다.
• 참(true), 거짓(false) 값으로 이루어진 자료형입니다.

console.log(7 > 3)   // true
console.log(7 < 3)   // false

4. null, undefined

• null은 빈 값, undefined는 없는 값을 의미합니다.
  
  • null
    • 비어 있는, 존재하지 않은 값을 의미합니다.
    • 값의 부재를 의미하며 원시 자료형 null로 분류됩니다.
    • typeof로 자료형을 확인할 땐 object(객체)를 반환합니다.
      => 자바스크립트 기존 이슈로 인한 결과이므로 인해서 객체형이라 오해하면 안 됩니다.
  • undefined
    • 변수가 정의되었지만 아무 값도 할당받지 않은 상태를 의미합니다.
      ex) 함수에서 명시적으로 값을 반환하지 않았을 때, 변수에 어떠한 값도 대입하지 않고 정의할 때 undefined가 반환됩니다.

const value1 = null
console.log(value1)         // null
console.log(typeof value1)  // object
let value2
console.log(value2)         // undefined
console.log(typeof value2)  // undefined

* typeof
- 우측에 있는 값이 어떤 자료형인지 확인하고, 확인된 자료형 정보를 문자형으로 반환

5. 템플릿 문자열(Template String)

• 억음 부호 ` ` 로 작성합니다.
• 템플릿 문자열을 이용하면 ${표현식}을 이용하여 삽입 처리(interpolation)가 가능합니다.
• 삽입 처리란 표현식의 계산된 결과가 문자열로 변경되어 해당 위치에 삽입되는 것을 말합니다.
• 템플릿 문자열도 새로운 타입이 아닌 문자열입니다.

const cart = [
  {name: "옷", price: 10000},
  {name: "가방", price: 20000}
]
const numOfItems = `카트에 ${cart.length}개의 아이템이 있습나다.`
const cartTable = `
  <ul>
    <li>품목: ${cart[0].name}, 가격: ${cart[0].prices}</li>
    <li>품목: ${cart[1].name}, 가격: ${cart[1].prices}</li>
  </ul>
`
console.log(numOfItems)
console.log(cartTable)
// 카트에 2개의 아이템이 있습니다.
/*
  <ul>
    <li>품목: ${cart[0].name}, 가격: ${cart[0].prices}</li>
    <li>품목: ${cart[1].name}, 가격: ${cart[1].prices}</li>
  </ul>
*/

const personName = "harin"
const helloString = "hello " + personName
const helloTemplateString = `hello ${personName}`
console.log(helloString === helloTemplateString)   // true
console.log(typeof helloTemplateString)            // string