[JS] 데이터

1. String

• 기호 '', "", 백틱(``을 이용해서 입력. 보통 한 가지로 통일해서 사용한다.
• 단, 백틱(``) 기호는 템플릿 리터럴 방식으로 표현식을 문자열에 입력하거나 줄바꿈을 표현하거나 할 때 사용한다.

🐣표현식을 문자열에 입력할 떄:

let num = 1;
let str = `Hello + ${num}` + /nWorld!`     //줄바꿈: /n

2. Number

• 자바스크립트에서 number은 어떤 값을 입력하던지 실수로 인식한다.
• 0.1 + 0.2 = 0.3의 값을 얻고 싶다면 toFixed() 메소드를 별도로 입력해줘야 한다.
• 단, toFixed()는 숫자 데이터를 문자 데이터로 변환시키는데, Number()로 감싸주면 숫자 데이터로 재변환시킬 수 있다.

3. Boolean

• 오직 true, false만 있는 데이터이다.

4. Null (값이 없다)

• 값이 없음을 직접적으로 명시할 때 사용한다.
• null은 boolean과 함께 사용하면 컴퓨터에서 숫자 0으로 인식해 false가 된다.

5. Undefined (값을 정의하지 않았다)

• 값을 따로 지정해주지 않았을 때 자동으로 할당되는 값으로 오류를 발생시킬 수 있는 쓰레기 값을 초기화해주는 역할이라고 한다.

6. Array

• 생성자 함수인 'new Array ()' 또는 '대괄호 기호'를 이용해서 생성할 수 있다.
• array의 각각을 item(또는 array의 element)이라고 부르고, 그 순서를 idnex라고 칭한다. 순서는 0부터 시작한다.
• array의 특정 item 불러오는 것을 indexing이라고 한다. 👉 e.g) console.log(fruits[1])
• [].constructor 라는 속성을 이용하면 array 전역 함수가 출력된다.
  • 같은 맥락에서 {}.constructor는 object 전역 함수와 같다.

7. Object

• 대표적인 8가지 데이터 타입을 제외하고는 나머진 모두 객체이다.

🐣🐣객체 생성 방법은 세 가지이다.

🐣(1) 생성자 함수

const user =  new Object ()
user.name = 'Apple'
user.age = 5
console.log(user)

🐣(2) 👉function 함수에 this.속성을 용해 User 함수 정의하기
        👉User 함수 호출
        👉호출한 함수를 새로운 변수에 저장하기

function User () {
  this.name = 'Apple'
  this.age = 5
  }
  
// new User() 함수 호출하기

const user = new User()
  
console.log(user)

🐣(3) 리터럴 방식으로 만들기⭐ simple

 const user = {
  name: 'Apple',
  age: 5
 }
 console.log(user)

🐣🐣객체 속성 조회 방법은 두 가지이다.

🐣(1) 점 표기법

console.log(user.name)

🐣(2) 대괄호 표기법⭐

console.log(user['name'])

---

(1)점 표기법은 표기가 단순하다는 것이 장점이다.
(1)점 표기법은 객체 데이터를 연속으로 사용할 수 있다는 것이 장점이다.

const userA = {
  name: 'Apple',
  age: 40
}
const userB = {
  name: 'pineapple',
  age: 10,
  parent: userA
}
console.log(userB.parent.name) // expected output: Apple

🐣따라서, 어떻게 코드를 짜느냐에 따라 객체의 속성 뿐만 아니라 다른 객체, 다른 객체의 속성까지도 사용할 수 있게 된다.
✋잠깐❗❗객체 데이터는 대괄호 표기법으로도 표기할 수 있음을 배웠다. 이를 다르게 말하면.... '(2)대괄호 표기법 또한 가능하다'이다.

console.log(userB['parent']['name']) // expected output: Apple

---

(2)대괄호 표기법은 객체 속성 대신에 객체 속성을 선언한 변수를 입력해줄 수도 있어 코드 유용성이 더 높다는 것이 장점이다. 이러한 특징들 때문에 대괄호를 많이 쓰는 것 같다.

const user = {
  name: 'Apple',
  age: 5
 }
const key1 = 'name'  
console.log(key)     // expected output: Apple
const key2 = 'age' 
console.log(age)     // expected output: 5

⭐⭐번외로, Array를 이용한 객체, 객체 속성 조회 방법도 있다. 새로운 변수에 배열 데이터를 선언하는데 이때 배열 데이터의 item으로 객체 데이터를 저장해주는 것이다.

const userA = {
  name: 'Apple',
  age: 40
}
const userB = {
  name: 'pineapple',
  age: 10,
  parent: userA
}
const users_AB = [userA, userB]
console.log(users_AB)      // expected output: object data A+B
console.log(users_AB[0])   // expected output: userA
console.log(users_AB[1].name)   // expected output: pineapple
console.log(users_AB[1]['name'])   // expected output: pineapple

8. Function

• 함수명 (): 함수를 호출한다 (call).
• 콘솔에 출력 할 때 함수명만 작성해줄 경우 함수의 구조가 출력되므로 함수명 뒤에 ()를 덧붙여준다.
• 컴퓨터는 'typeof 함수()'를 숫자 데이터로 인식하고, 'typeof 함수'는 function으로 인식한다.

🐣함수 선언 및 출력 과정 엿보기🐣

const a = function () {     // 1. ()는 매개변수다.
 console.log('Apple')
}
const b = function (c) {    // expected output:  3-1. 함수a 로직 / 3-2. Apple 
  console.log(c)			// 3-1. 인수a는 함수b의 매개변수c에 할당되고 console.log를 통해 출력된다.
  c()						// 3-2. 인수a가 할당된 매개변수c를 호출한다. = 함수 a를 호출한다.
}
b(a)                        // 2. 함수a는 함수b의 인수로 들어간다. 

9. 형 변환

• 일치 연산자는 데이터 타입이 일치하는지 비교하고, 동일 연산자는 데이터를 자동으로 동일한 타입으로 변환시킨 후 같은지 비교한다.
• 둘 중 일치 연산자를 권장한다. 동일 연산자의 경우 데이터 타입을 같도록 변환시킨 후 비교하기 때문에 개발자의 예측과 다른 결과가 발생할 수 있기 때문이다.

10. 참과 거짓 : Truthy & Falsy

• Boolean data의 true와 false에 국한되어 있는 개념이 아니다.
• if 조건문에서 숫자 0은 false로 변환된다. (문자 0은 true이다.)
• if 조건문에서 false로 변환되는 것엔 false, 숫자 0, null, undefined, NaN, 빈 문자(''), 0n(Bigint의 한 종류) 등이 있다.
• 배열 데이터는 일반적으로 true로 변환되기 때문에 배열 데이터가 비어 있는 상태이더라도 if 조건문이 실행된다. 따라서 false로 만들어주기 위해 배열 데이터를 숫자 0으로 만들어줘야 한다. 내가 아는 방법은 배열.length을 사용하는 것이다.

11. 데이터 타입 확인 checkType