개발일지 5일차

객체의 기본

- 객체란 한마디로 '실제로 존재하는 사물'을 의미하고 '이름'(name)과 '값'(value)으로 구성된

속성을가진 데이터 기본 타입이다.

객체

-자바스크립트에서 여러자료를 다룰때 객체(object)를 사용한다.배열도 여러자료를 다룰수 있다 (배열도 객체이다)

typeof([])
"object"  //객체를 의미하는 "object" 출력

배열의기본

- 배열에는 index와 element가 있다

const array = ['사과','배','망고','딸기']

배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하다.

객체선언

const product = {
	제품명:'70 건조 망고',
    유형: '당절임'
    성분: '망고, 설탕, 메타중아황산나트륨, 치자황색소'
    원산지: '필리핀'

}

객체를 표로 나타냄

키	밸류
제품명	70 건조 망고
유형	당절임
성분	망고,설탕,메타중아황산나트륨, 치자황색소
원산지	필리핀

객체뒤에 대괄호[key] 를 입력하면 객체요소에 접근 할 수 있다

product['제품명']  //'70 건조 망고'
product['유형']  //'당절임'
product['성분']  //'망고, 설탕, 메타중아황산나트륨, 치자황색도'
product['원산지']  //'필리핀'

객체뒤에 온점(.)을 사용할 수도 있다.

  product.제품명  //'70 건조 망고'
  product.유형 //'당절임'
  product.성분  //'망고, 설탕, 메타중아황산나트륨, 치자황색도'
  product.원산지 //'필리핀'

속성과 메소드

- 배열 내부에 있는값을 요소(element)라고 하고, 객체 내부에 있는 값은 속성(property) 라고 한다. 속성도 모든 형태의 자료형을 가질 수 있다.

 const object = {
    number: 273,
    string: '구름',
    Boolean: true,
    array: [52,273,103,32] 

    method: function(){}
  }

속성과 메소드 구분하기

- 객체의 속성 중 함수 자료형을 속성을 메소드(method) 라고 부른다.eat 속성처럼 입력값을 받아 무언가 한 다음 결과를

도출해내는 함수 자료형을 ear() 메소드 라고한다.

const pet {
    pet: '구름'
    eat: function(food){ }
  }

  //메소드 호출
  pet.eat()

메소드 내부에서 this 키워드 사용하기

-메소드 내에서 자기 자신이 가진 속성을 출력할대는 this 키워드사용

const pet {
    nmae: '구름',
    eat: function(food){
        alert(this.name + '은/는' + food + '을/를 먹습니다.')
    }         //(구름)

  }
//메소드 호출
pet.eat()  //구름 은/는 밥을/를 먹습니다.

동적으로 객체속성 추가/제거

- 속성을 추가하거나 제거하는 것을 동적으로 속성을 추가/제거한다 라고함

동적으로 객체 속성 추가하기

- 객체 생성후 속성지정후 값을 입력한다.

const student = {}
student.이름 = '김용식'
student.취미 = '자기'
student.장점 = '착함'

console.log(JSON.stringify(student,null,2))

//{
// "이름": "김용식",
// "취미": "자기",
// "장점": "착함"
//}

 

(JSON.stringfy() 메소드는 객체를 콘솔출력에서 쉽게볼수 있는 방법이다)

동적으로 객체 속성제거하기

- 객체속성을 제거할대는 delete 키워드 사용

const student = {}
student.이름 = '김용식'
student.취미 = '자기'
student.장점 = '착함'
delete.student.장점

console.log(JSON.stringify(student,null,2))

//{
// "이름": "김용식",
// "취미": "자기"
//}

메소드 간단 선언구문

- function () {} 형태로 메소드 간단선언

const pet = {
    name:'구름',
    eat (food){
        alert(this.name + '은/는' + food + '을/를 먹습니다' )

    }

}
pet.ear('밥') //구름은/는 밥을/를 먹습니다.


const pet = {
    name:'하늘',
    eat (food){
        alert(this.name + '은/는' + food + '을/를 먹습니다' )

    }

}
pet.eat('사료') //구름은/는 사료을/를 먹습니다.

요약

• 요소란 배열 내부에 있는 값
• 속성은 객체 내부에 있는 값
• 메소드는 속성중에 함수 자료형 인것을 의미
• this 키워드는 객체내부의 메소드에서 객체자신을 의미
• 속성추가:동적 속성 추가 속성제거:동적 속성제거

객체의 속성과 메소드 사용하기

자료는 기본자료형과 객체 자료형으로 구분한다.

자바스크립트 자료형
기본자료형	객체 자료형
숫자	함수
문자	배열
불린	기타..

객체 자료형

- 배열에 속성지정

const a = []
//undefined

a.sample = 10
//10

a.sample
//10

- 함수에 속성지정

function b (){}
//undefined

b.sample = 10
//10

b.sample
//10

기본 자료형

- 자바스크립트에서는 실체가 있는 것(undefined 와 null 등이 아닌것) 중 객체가 아닌것을 기본 자료형(숫자,문자,불린)이라고 한다.

const c = 273
//undefined

c.sample = 10
//10

c.sample
//undefined

기본 자료형은 객체가 아니므로 속성을 가질 수 없다 문자와 불린도 마찬가지다.

기본자료형을 객체로 선언하기

const 객체 = new 객체 자료형 이름()

new Number(10)
new String('안녕하세요')
new Boolean(true)

const f = new Number(273)

typeof f
"object"

f.sample = 10
10

f.sample
10

f
Number {273, sample:10}

f+0
273

f.valueOf()
273

프로토타입으로 메소드 추가하기

객체 자료형 이름.prototype.메소드 이름 = function () {}

Number.prototype.sample = 10 //객체로 승급
10

const i = 273
undefined

i.sample
10   //속성을 가짐

Number 객체

숫자 n번째 자릿수까지 출력 toFixed()

const i = 123.456789
undefined

i.toFixed(2) //소수점 둘째자리까지 출력
123.46

i.toFixed(3) //소수점 셋째자리까지 출력
123.457

i.toFixed(4) //소수점 넷째자리까지 출력
123.4567

//문자열로 출력

NaN과 Infinity 확인하기:isNaN, isFinite()

- NaN(Not a Number)

const m = Number('숫자로 변환 할 수 없는 경우')
undefined

m
NaN

m === NaN
false

Number.isNaN(m)
true

- Infinity(무한)

const n = 10 / 0
undefined
n
Infinity

const 0 = -10 / 0
undefined
0
Infinity

Number.isFinite(n)
false

Number.isFinite(0)
false

Number.isFinite(1)
true

Number.isFinite(10)
true

String 객체

공백없애기 trim()

const stringA =`
안녕하십니까 김용식입니다.`
undefined
const stringB = `   안녕하십니까 용식입니다.     `
undefined

stringA.trim()
//안녕하십니까 김용식입니다.
stringB.trim()
//안녕하십니까 용식입니다.

문자열을 특정기호로 자르기 split()

let input = `
일자, 달러, 엔, 유로
02,1141.8,1097.46,1262.37
04,1148.7,1111.36,1274.65
05,1140.6,1107.81,1266.58
06,1143.4,1099.58,1267.8
07,1141.6,1091.97,1261.07
`


input = input.trim() //공백제거

input = input.split('\n') //줄바꿈

input = input.map((line) => line.split(',') ) //열드을 쉼포로 자름

JSON.stringify(input, null ,2)

Math 객체

- 수학과 관련된 기본적은 연산을 할때 사용

Math.PI
3.141592653589793

Math.E
2.718281828459045

- 랜덤한 숫자  만들기(범위 지정)

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
  }
  
  console.log(getRandomInt(8,18)) //8 <= getRandomInt  < 18

요약

• 실체가 있는 것 중에서 객체가 아닌 것을 기본자료형(숫자,문자,불린)이라고 한다.
• 객체를 기반으로 하는 자료형을 객체자료형 이라고 한다 (new 키워드)
• 기본 자료형의 승급이란 기본자료형이 일시적으로 객체 자료형으로 변환하는것
• prototype 객체란 객체의 틀을 의미. 속성과 메소드추가

객체와 배열고급

속성 존재 여부 확인

- 객체 내부에 어떤 속성이 있는지 확인해보는 코드

const object = {
    name: '혼자 공부하는 파이썬',
    price: '18000',
    publisher: '한빛미디어'
}

if(Object.name !== undefined){
    console.log('name 속성이 있습니다.')
}else{
    console.log('name 속성이 없습니다.')
}

if(object.author !== undefined){
    console.log('author 속성이 있습니다.')
}else{
    console.log('author 속성이 없습니다.')
}

const object = {
    name: '혼자 공부하는 파이썬',
    price: '18000',
    publisher: '한빛미디어'
}

object.name = object.name !== undefined ? object.name:'제목 미정'
object.author = object.author !== undefined ? object.author:'저자 미상'

console.log(JSON.stringify(object, null, 2))

//{
//"name": "혼자 공부하는 파이썬",
//"price": "18000",
//"publisher": "한빛미디어",
//"author": "저자 미상"
//}

요약

• 속성 존재 여부확인은 객체 내부에 어떤 속성이 있는지 확인하는 것을 의미한다. undefined 활용
• 다중 할당은 배열과 객체하나로 여러변수에 값을 할당 하는것
• 얕은 복사는 복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작하는 의미
• 깊은 복사는 복사후 두객체를 완전하게 독립적으로 사용할 수 있는 복사를 의미

객체는 지금까지 배웠던 문법들이 다 섞여있어서 전에 배웠던 문법이나 키워드들을 이해하지 못하면 객체도 이해하기 조금 어려울 수도 있겠다는 생각이 들었다. 객체도 자바스크립티에서 필수로 알아야 하는요소이니 잘 외우고 알아둬야겠다.