CH02. JS 데이터

🔍원시형

: 실제 값을 직접 포함

1. String

const string1 = "ksw";
const string2 = 'jcm';               //큰따옴표와 동일한 리터럴 방식
const string3 = `tbz ${string1} ?!`; //템플릿 리터럴: 중간에 어떠한 데이터를 채워 넣을때 사용

console.log(string3);

• 리터럴 : 어떠한 기호를 통해 데이터를 만들어내는 방식
• 실행결과 : tbz ksw ?!

2. Number

const num = -123 //양수, 음수 모두 가능
const pi = .14   //소수점 앞 0 생략 가능

console.log(num+undefined)
console.log(pi)

• 실행결과:
  NaN -> Not a Number(데이터 타입은 숫자인데 숫자로 표기할 수 없는 값, 보통 숫자 연산에 다른 자료형이 포함된 경우)
  0.14

const a = 0.1
const b = 0.2

console.log(Number((a+b).toFixed(1)))   //toFixed 메서드로 원하는 소수점 위치까지 자름, 
                                        //Number 함수로 형변환

• 실행결과: 0.3

3. Boolean

const a = true
const b = false

if (b) {
  console.log("ksw")
}

• 실행결과: -> false여서 출력되지 않음

4. null

let age = null           //값이 비어있음, 없음, 알수없음을 명시적으로 직접 작성함

console.log(age)

setTimeout(function () { //callback 함수 사용
  age = 25
  console.log(age)
}, 1000)                  //1초 뒤 실행

• 실행결과:
  null
25

즉, 어떤 값이 존재하지 않는다는 것을 표시할때 사용

5. undefined

let age           //값이 비어있음, 없음, 알수없음을 암시적으로 나타내 자동으로 들어감

console.log(age)

setTimeout(function () { //callback 함수 사용
  age = 25
  console.log(age)
}, 1000)                  //1초 뒤 실행

• 실행결과:
  undefined -> 변수에 어떠한 값이 할당 되어있지 않은 상태를 의미
  25

즉, 값이 할당되지 않은 상태를 표시할때 사용

---

🔍참조형

: 값의 위치를 가리킴

1. Array(배열)

const tbz = ['ksw','jcm','kyh']

console.log(tbz[1])
console.log(tbz.length)

• 실행결과:
  jcm
3

2. Object(객체)

• 형태
  {key(=속성=property) : value(값)}

• 방식

  • 생성자 방식

  • 리터럴 방식

    const tbz ={
     name: 'ksw',
     age: 25
    }
    
    console.log(tbz)

    -> 실행 결과: {name: 'ksw', age: 25}
    

• 객체데이터 안에 객체데이터 가능

const A= {
  name: 'ksw',
  age: '25'
}

const B= {
  name: 'jcm'
  age: '27'
  friend: A
}

console.log(B.friend.name) //= console.log(B['friend']['name'])

-> 실행 결과: ksw
cf) 점 표기법, 대괄호 표기법으로 속성의 값 조회가능

3. Function(함수)

const getNumber = function () { //변수에 익명함수를 할당, function getNumber()와 동일
  return 123
}

console.log(getNumber()) //함수 호출시 반환값이 출력됨

-> 실행 결과: 123

#예제

const a = function () {
  console.log('A')  //설명4
}
const b = function (c) {  //설명1
  console.log(c)   //설명2
  c()   //설명3,4
}
b(a)    //설명1

#실행결과

f () {
console.log("A");
}  
------------------
A  

#설명
1. b 라는 함수를 호출할 때 인수로 a를 넣으면 현재 함수인 a는 c라는 매개변수로 감
2. 함수 a가 콘솔에 출력됨
3. c라는 매개변수를 호출 = 함수a 호출
4. a함수가 동작하며 문자 'A' 출력

---

💡형변환

const a = 1  //숫자 
const b ='1' //문자

console.log(a===b)  //일치 연산자 ===
console.log(a==b)  //동등 연산자 ==

• 실행 결과:
  false
true -> 형변환 발생

💡참과 거짓(Truthy & Falsy)

• 대부분의 값은 참에 해당

• 거짓에 해당하는 값 :

  • false
  • 0, 0n, -0
  • null
  • undefined
  • NaN
  • ' ' (빈문자)

  -> 조건에 넣을시 콘솔에 아무것도 출력되지 않음

#예제

const tbz = []
if (tbz.length) {
console.log('아이템이 들어있음')
}

#실행결과
-> 길이 0이 전달되기 때문에 출력되지 않음

💡데이터 타입 확인

• typeof 키워드 : 타입 비교하여 콘솔에 boolean 형식으로 출력
• object 타입에 해당하는 데이터는 3개이므로 다른 방식 사용
  • 배열과 객체는 constructor 키워드 사용
  • null은 Object.prototype.toString.call(null).slice(8, -1) 사용
• checkType() : ( )안에 값을 넣으면 콘솔에 타입 출력됨 (비교하여 boolean 형식으로 출력도 가능)