개요 및 프로젝트 구성

html, css는 화면에 어떻게 출력될 것인가? 에대해서 고민을 많이 함.
자바스크립트는 데이터에 대해서 고민을 많이 하게 될 것이다.

JavaScript

ECMA스크립트 (ES = JS)

원시형, 참조형

원시형 String, Number

const string1 = "Hello"
const string2 = 'Hello'
const string3 = `hello ${string1} ?!` 
console.log(string3)

큰따옴표와 작은 따옴표는 선택적으로 원하는 기호를 사용하면 되고
백탭은 중간에 어떠한 데이터를 넣을때 사용하면 된다.
==> 백탭 이용 : 템플릿 리터럴(기호를 통해서 데이터를 만드는 방식)

NaN => 타입 자체는 숫자이나, 어떤 숫자로 표기할 수는 없어서 숫자 연산에 숫자가 아닌 다른 값이 포함되어 있을 경우가 높기 때문에 기본적으로 코드를 다시 검사
(부정의 의미로 많이 해석)

const a = 0.1
const b = 0.2

console.log(typeof Number((a + b).toFixed(1))) // 소수점의 첫번째까지만 남겨놓기를 바람
// 주의 toFixed는 숫자 데이터를 문자 데이터로 바꾸게 됨 

이렇게 하면 문자를 숫자 데이터로 바꾸게 된다.
toFixed() -> 괄호안에 우리가 잘라내고 싶은 소수점 자리를 적어준다.

원시형 Boolean, null(명시적으로 작성), undefined(암시적으로 자동)

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

console.log(user.name)
console.log(user.age)
console.log(user.email)

원시형 Array, Object, Fuction

// Array(배열)

// new라는 키워드와 함께 호출하는 함수를 생성자 함수라고 하며 다르게는 JS class라고 한다. 
const fruits = ['apple', 'banana', 'Cherry']
// 과일 하나하나들을 아이템 또는 요소(Element)
// 대괄호(기호)를 사용하여 만든 배열  > 리터럴

console.log(fruits) // 대괄호 표기법
console.log(fruits[2])
console.log(fruits[fruits.length-1])

자바스크립트의 객체

밑 코드는 리터럴 방식이 아닌 생성자 함수방식으로 객체 데이터를 만들었다

Object

const user = new Object()
user.name = 'HEROPY'
user.age = 85
console.log(user)
- 위 코드는 리터럴 방식이 아닌 생성자 함수방식으로 객체 데이터를 만들었다

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


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

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

• 객체 데이터에서 속성의 이름, 키는 고유하고. 각각의 키는 순서가 존재하지 않는다

// Object(객체)

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

const userB = {
    name: ' Neo', 
    age:22,
    parent: userA
}
console.log(userB.parent.name)
// 점 표기법은 객체 데이터를 계속해서 불러올 수 있다. 

Fuction

fuction hello() {
    console.log("Hello!")
}

hello() // Call or 호출

js에서의 함수는 하나의 데이터로 취급이 된다
함수는 하나의 데이터이고 그것을 뒤에 ()를 써야 함수가 동작한다
**함수의 호출은 결과적으로 함수가 아니고 함수가 반환하는 특정한 값이다

• 함수는 하나의 JS 데이터로서 , 함수자체와 함수호출은 전혀 다른 개념!

형 변환

형 변환 (Type Conversion)

문자, 숫자, 함수, 객체, 배열 > > 이런것을 하나의 데이터의 종류(형)

• 자바스크립트 데이터 종류가 변할 수 있다.

const a = 0 // Number
const b = false  // String

console.log(a == b) 
// a 변수의 숫자 1과 b 변수의  문자 1을 데이터 종류를 바꿔가면서 비교.
// 다른 종류의 데이터임에도 불구하고 비교했을 때 True라는 값이 나올 수 있다.

// === 일치 (권장, 이유 : 형 변환이 일어날 수도 있기 때문에)
// == 동등

참과 거짓

// 참과 거짓(Truty & Falsy)
// 1) false
// 2) 0
// 3) null
// 4) undefined
// 5) NaN
// 6) '' (빈 문자)
// 7) 0n

if(123) {
   console.log('참!')
}
// 참 : 대부분,    거짓 : boolean 데이터 false와 숫자 데이터 0

const fruits = ['Apple']

if(fruits.length) {
    console.log("아이템이 들어있음!")
}

// .length : 배열 데이터에 들어있는 아이템의 개수

데이터 타입 확인

데이터 타입 확인

// 데이터 타입 확인
// typeof 키워드가 가장 사용하기 편리하지만 null과 배열, 객체 데이터를 구분하지 못 하기 때문에 
// 새로운 방식이 있는데, 이 새로운 방식은 null 데이터를 구분하지 못하여, 체크타입 함수를 별도로 만들 수 있다. 

 console.log(typeof 'Hello' === 'string')
 console.log(typeof 123 === 'number')
 console.log(typeof false === 'boolean')
 console.log(typeof undefined === 'undefined')

 console.log(typeof null === 'object') // object 
 console.log(typeof [] === 'object') //object
 console.log(typeof {}  === 'object')  // object
// 위 세 개 구분 불가

 console.log(typeof function () {} === 'function') // function (익명함수?)
 console.log([].constructor === Array) // f Array() {native code}
 // 이미 js에 들어있는 전역함수. (배열함수)
 console.log({}.constructor === Object) // f Object() {   }

 // null 은 constructor가 없다.
 //console.log(null.constructor)
 console.log(Object.prototype.toString.call(null).slice(8,-1) === 'Null') //[object Null]
// 문자 데이터의 8번 째 부터 제일 마지막의 바로 앞까지만 잘라내서 출력하겠다.


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


console.log(checkType('Hello') === 'String')
console.log(checkType(123) === 'Number')
console.log(checkType(false) === 'Boolean')
console.log(checkType(undefined) === 'undefined')

console.log(checkType(null) === 'Null')
console.log(checkType([]) === 'Array')
console.log(checkType({}) === 'Object')

console.log(checkType(function () {}) === 'function')