[JS] 데이터 타입

📌 String (문자형)

const string1 = "Hello"
const string2 = 'Hello'
const string3 = `Hello`

console.log(string3 $(string1) ?!) //Hello Hello ?!

• 백틱 기호를 사용해서 문자 데이터를 저장하면 출력시에 $( )를 사용해서 중간에 다른 문자데이터를 보관할 수 있다.

(참조) velog - 특수 기호

📌 Number (숫자형)

NaN : Not a Number

⇒ 숫자 연산에 숫자가 아닌 다른 형태의 데이터가 들어있을 가능성이 높다.

const number = 123

console.log(number) //123
console.log(number + undefined) //NaN

toFixed 메소드

const a = 0.1
const b = 0.2

console.log(Number((a+b).toFixed(1))) //0.3

• 부동 소수점 연산할 때는 원하는 값이 안 나올 수 있다. (컴퓨터는 십진수를 이진수로 변환하여 계산하기 때문에) 그래서 소수점 계산을 할 때 원하는 자릿수만큼만 나오게 하기 위해 toFixed 라는 메소드를 사용한다.
• 단, toFixed 메소드는 숫자 데이터를 문자 데이터로 바꾸기 때문에 이것을 숫자 데이터로 출력하기 위해 앞에 Number 함수(무조건 대문자로 시작!!)를 사용한다.

typeof

const string1 = "Hello"
const a = 0.1
const b = 0.2

console.log(typeof string1) //string
console.log(typeof a) //number

• 데이터의 타입을 알려주는 키워드

📌 Boolean

true / false 두 개의 값을 가지는 자료형

📌 NULL 과 undefined

두 가지 모두 값이 없다는 의미지만

• null 은 값이 없음을 명시하기 위해 작성하는 값이고
• undefined 는 일부러 값으로 부여하는 경우는 거의 없고, 만든 변수에 아무런 값이 할당되지 않으면 JS가 내부적으로 undefined 라는 값을 자연스럽게 할당한다.

즉, 어떤 값이 존재하지 않는다는 것과 아직 할당되지 않았다는 의미의 차이가 있다.

---

📌 Array (배열)

//생성자 함수 방식
const fruits = new Array('Apple', 'Banana', 'Cherry')

//리터럴 방식 array template(대괄호)를 사용해서 간편하게 작성
const fruits = ['Apple', 'Banana', 'Cherry']

• 배열에 들어있는 각각의 값은 item / element 라고 부른다.
• 배열의 가장 마지막에 들어있는 값을 인덱싱을 통해 알고 싶을 때
  console.log(fruits[fruits.length - 1])
  배열의 길이에서 1을 뺀 값 = 배열의 가장 마지막에 들어있는 값의 인덱스 번호

---

📌 Object (객체)

객체 생성 방식

1. 생성자 함수 방식

const user = new Object ()
user.name = 'HEROPY'
user.age = 85

2. 리터럴 방식

const user = {
	name: 'HEROPY',
	age: 85
}

3. 함수 내부에서 this 를 사용해서 객체 생성하는 방식

function User() {
	this.name = 'HEROPY'
	this.age = 85
}
const user = new User()

객체에서 value 값을 찍어내는 방법

1. 점 표기법
console.log(user.name)

2. 대괄호 표기법(1)
console.log(user['name'])

3. 대괄호 표기법(2)
const key = 'name'
console.log(user[key])

//점 표기법이 간단하므로 평소에는 점 표기법을 사용하다가 (3번처럼) 데이터로 속성의 이름을 조회할 때는 대괄호 표기법을 사용하면 된다.

• 객체 타입은 key(키) : value(값) 형태로 내용이 들어있다.
• key는 속성(property) 라고도 한다.
• 객체 데이터에서 key는 고유하다. (속성명 중복 불가능)
• 각각의 key는 순서가 존재하지 않는다.
  • user 라는 예시에서 name, age 순서로 작성했지만 출력할 땐 age, name 순서로 나올 수도 있음.
• 만약 같은 key를 중복해서 작성했다면 나중에 작성된 것이 우선시 된다. (= 객체를 활용할 때 나중에 작성된 값을 사용한다는 것)
• 객체 데이터 안에 객체 데이터가 있을 수 있다.

const userA = {
	name: 'HEROPY',
	age: 85
}

const userB = {
	name: 'HEROPY',
	age: 85,
	parent: userA
}

console.log(userB.parent) //객체 userA { name: 'HEROPY', age: 85 } 가 출력된다. 객체 데이터 그대로 출력됨.
console.log(userB.parent.name) //userB.parent = userA 객체이므로 userB.parent에 이어서 점 표기법을 사용할 수 있다.
console.log(userB['parent']['name']) //대괄호 표기법 역시 사용가능


const users = [userA, userB]
console.log(users[0].name) //users 라는 배열은 userA 와 userB 라는 객체를 요소로 갖고 있음. users[0] = userA 객체를 의미하며 users[0].name은 'HEROPY'이다.
console.log(users[0]['name']) //대괄호 표기법 역시 사용가능하다.

---

📌 function (함수)

함수는 하나의 데이터이다.

function hello() {
	console.log('Hello!')
}

console.log(hello) //hello 함수 자체가 콘솔에 출력됨. hello 라는 함수 자체가 하나의 데이터형이기 때문에 그 내용이 출력되는 것임
console.log(hello()) //함수이름 뒤에 ()를 붙여서 함수를 "호출"해야 함수 내부 구조가 실행된다.

예제 1

const a = function () {
	console.log('A')
}

const b = function () {
	//아무 내용 없음
}

b(); //b 함수에는 아무런 내용도 없기 때문에 콘솔에 아무것도 출력되지 않음 (undefined 아님)

예제 2

const a = function () {
	console.log('A')
}

const b = function (c) {
	console.log(c);
  	c();
}

b(a)

예제 2 결과

• console.log(c) → a 라는 함수 자체가 출력
• c() → 함수 a가 호출되어 실행된 결과가 출력

---

📌 형 변환 (Type Conversion)

• === 일치 연산자 (데이터 값과 타입이 모두 일치하는지 확인)
• == 동등 연산자 (데이터 값이 일치하는지 확인)
  • 서로 데이터 타입이 다른 피연산자를 비교할 때, 피연산자를 숫자로 바꿔서 비교한다. (형 변환이 발생)

---

📌 참과 거짓 (Truthy & Falsy)

우리가 사용하는 대부분의 데이터는 참의 의미를 갖고 있다.
그러니 거짓의 의미를 갖는 값만 몇 가지 외워두자

1. false
2. 숫자 0 (문자 ‘0’은 참)
3. null
4. undefined
5. NaN (Not a Number)
6. ‘’ (빈 문자열 데이터)
7. 0n (BigInt)

예제

const fruits = ['Apple', 'Banana']

if (fruits) {
  console.log('아이템이 들어있음!')
}
//만약 fruits 배열이 비어있다면? 콘솔에 내용이 출력될까?
//ㅇㅇ 출력됨!! 배열에 아무런 아이템이 없어도 콘솔 내용이 출력된다.
//이를 해결하기 위해서 조건을 어떻게 바꿔야할까?

if (fruits.length) {
  console.log('아이템이 들어있음!')
}
//조건을 fruits.length 로 주면 배열이 비어있을 때 조건이 확실하게 0이 되므로 콘솔에 내용이 출력되지 않는다!

---

📌 데이터 타입 확인

1. typeof 키워드
   • 대부분의 데이터 타입은 typeof 키워드를 붙여서 타입을 확인할 수 있다.
   • 하지만 null, 배열, 객체는 모두 object로 표시되어 타입을 제대로 확인할 수 없다.

2. constructor

console.log([].constructor === Array) //true
console.log({}.constructor === Object) //true
console.log(null.constructor === Null) //ERROR!!!
//null은 constructor 라는 속성이 없어서 constructor 로는 데이터타입을 확인할 수 없다.

3. null 타입 확인하기

console.log(Object.prototype.toString.call(null).slice(8, -1) === 'Null') //true

4. 모든 데이터의 타입을 확인하는 함수 만들기

function checkType(data) {
	return Object.prototype.toString.call(data).slice(8, -1)
}

console.log(checkType(null)) //null
console.log(checkType(undefined)) //undefined
console.log(checkType(23)) //number