[혼공JS]객체 chapter 6

객체의 기본

객체 : 이름과 값으로 구성된 데이터 타입

배열도 객체이며 비슷하게 생겨먹었다

배열

인덱스	요소
0	사과
1	바나나
2	배

 

객체

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

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

배열에 접근하는것 또한 비슷합니다.

product['제품명']  or product.제품명    - 2가지 방식으로 사용 가능!

※ 식별자로 쓸수 없는 단어를 키로 쓸때 [   ] 대괄호 방식을 사용

 

속성과 메소드

객체 내부의 값 : 속성 -모든 형태의 자료형이 가능(숫자,자료,배열,함수)

속성과 메소드 구분하기

객체의 속성 중 함수 자료형 = 메소드

 

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

메소드내에서 자기 자신이 가진 속성을 출력하고 싶을때 사용한다

그러니까 동일한 객체내의 속성을 사용하기 위해 this를 사용한다.

 

            const pet ={
                name : '핫산',
                eat : function (food) {   
                    alert(`${this.name} 은/는 ${food} 을/를 먹습니다`)
                }
            }
            pet.eat('고기')

 

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

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

        const student = {} //빈객체 생성
        student.이름 = '핫산'
        student.취미 = '코딩'
        student.장래희망 = '개발자'

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

 

객체.키 이름 = '값'   으로 넣으면 된다.

동적으로 객체 속성 제거

delet 객체.속성

 

메소드 간단 선언문

            const pet ={
                name : '핫산',
                eat (food) { 
                alert(`${this.name} 은/는 ${food} 을/를 먹습니다`)
                }
            }
        pet.eat('고기')

 

화살표 함수를 이용한 메소드

        const test = {
            a : function () {
                console.log(this)
            },
            b : ()=> {
                console.log(this)
            }
        }
        test.a()
        test.b()

위 사진과 같이 this에 대한 내용이 완전 다르다

그러니까 화살표 함수를 메소드에서 사용하게 되면 객체인 test가 아닌 더 상위 객체를 가리키게 됩니다.

 

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

객체자료형

속성과 메소드를 가질 수 있는 모든것은 객체이다.

예시 : 배열 ,함수 ,기타등등

배열 : typeof : object

함수 :typeof : function  -함수는 객체의 특성을 완벽하게 가지므로 일급 객체라고도 함

 

기본 자료형

숫자, 문자열, 불형 - 모두 객체가 아니며 속성 X

속성이 추가 되지 않습니다.

 

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

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

 

기본 자료형의 일시적 승급

자바스크립트의 사용 편의성을 위하여 .length와 같은 속성을 사용했을때 객체로 잠시 승급합니다.

 

그래서 두번째 줄에서 잠시 승급하지만 다시 기본 자료형으로 돌아갑니다.

 

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

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

}

모든 숫자 자료형에 속성값을 추가한 모습

        Number.prototype.power= function(n=2){
            return this.valueOf()**n
        }

        const a= 12
        console.log(`a.power():`,a.power())
        console.log(`a.power():`,a.power(3))
        console.log(`a.power():`,a.power(4))

프로토 타입에 메소드를 추가하여 특정 목적에 따라 사용가능합니다.

 

        String.prototype.contain = function (data) {
            return this.indexOf(data)>=0
        }
        Array.prototype.contain = function (data) {
            return this.indexOf(data)>=0
        }

        //String 객체의 contain메소드를 사용
        const a = '안녕하세요'
        console.log('안녕 in 안녕하세요',a.contain('안녕'))
        console.log('없는데 in 안녕하세요',a.contain('없는데'))
        
        //Array 배열의 contain메소드를 사용
        const b = [273,32,58,103,57,52]
        console.log('273 in [273,32,58,103,57,52]',b.contain('273'))
        console.log('111 in [273,32,58,103,57,52]',b.contain('111'))

Number 객체

소수점 N번째 자릿수 까지 출력하기 : toFixed(N)

NaN과 infinity 확인하기 : isNaN(),isInfinity()

NaN : (Not a Number)   , infinity : 유한한가? 

확인이 필요할때 . 객체.isNaN() 객체.isFinity()  로 확인한다.

 

String객체

문자열 양쪽 끝의 공백 없애기 :trim()

 

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

:알고리즘을 풀거나 , 크롤링하는데 많이 쓰임

 

JSOM객체

자바스크립트가 기본적으로 제공하는 내장객체

자바스크립트 배열과 객체를 활용해 자료를 표현하는 형식

 

{
	"name" : "혼자공부하는파이썬",
    "price" : 10000,
    "publisher" : "한빛미디어"
}

[{
	"name" : "혼자공부하는파이썬",
    "price" : 10000,
    "publisher" : "한빛미디어"
},{
	"name" : "HTML웹프로그래밍입문",
    "price" : 26000,
    "publisher" : "한빛아카데미"
}]

 

객체를 JSON문자열로 변환할떄는 JSON.stringify() 사용함

        const data = [{
            "name" : "혼자공부하는파이썬",
            "price" : 10000,
            "publisher" : "한빛미디어"
        },{
            "name" : "HTML웹프로그래밍입문",
            "price" : 26000,
            "publisher" : "한빛아카데미"
        }]
        //자료를 JSON으로 반환
        console.log(JSON.stringify(data))
        console.log(JSON.stringify(data,null,2))

 

반대로 JSON문자열을 객체로 전환할때는 JSON.parse()

        const data = [{
            "name" : "혼자공부하는파이썬",
            "price" : 10000,
            "publisher" : "한빛미디어"
        },{
            "name" : "HTML웹프로그래밍입문",
            "price" : 26000,
            "publisher" : "한빛아카데미"
        }]
        //자료를 JSON으로 반환
        const json =JSON.stringify(data)
        console.log(json)
        //JSON을 객체로 반환
        console.log(JSON.parse(json))

Math객체

랜덤숫자 사용 :Math.random()

 

        const num = Math.random()
        console.log(`# 랜덤한 숫자`)
        console.log(`0~1 사이의 랜던한 숫자 :` , num)
        console.log(``)

        console.log(`# 랜덤한 숫자 범위확대`)
        console.log(`0~10 사이의 랜던한 숫자 :` , num*10)
        console.log(`0~50 사이의 랜던한 숫자 :` , num*50)
        console.log(``)

        console.log(`# 랜덤한 숫자 범위이동`)
        console.log(`-5~5 사이의 랜던한 숫자 :` , num*10 -5)
        console.log(`-25~25 사이의 랜던한 숫자 :` , num*50 -25)
        console.log(``)

        console.log(`# 랜덤한 정수 숫자 `)
        console.log(`-5~5 사이의 랜던한 숫자 :` , Math.floor(num*10 -5))
        console.log(`-25~25 사이의 랜던한 숫자 :` , Math.floor(num*50 -25))
        console.log(``)

 

외부 스크립트 파일 읽기

    <script src="test.js"></script>

 

src= 파일위치   로 읽어온다.

Lodash 라이브러리

외부라이브러리 불러오기~ CDN 방식을 많이 사용함

    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

		const books = [{
            "name" : "혼자공부하는파이썬",
            "price" : 10000,
            "publisher" : "한빛미디어"
        },{
            "name" : "HTML웹프로그래밍입문",
            "price" : 26000,
            "publisher" : "한빛아카데미"
        },{
            "name" : "머신러닝 딥러닝 ㅅ실전 개발 입문",
            "price" : 30000,
            "publisher" : "위키북스"
        },{
            "name" : "딥러닝을 위한 수학",
            "price" : 25000,
            "publisher" : "위키북스"
        }]
        const output = _.sortBy(books,(book)=>book.price)
        console.log(JSON.stringify(output,null,2))

가격대로 정리된 모습

 

객체와 배열 고급

속성존재여부 확인

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

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

문자열을 true로 판단하여 줄일 수 있다.

        if (object.name){
            console.log('name속성이 존재합니다.')
        }else{
            console.log('name속성이 없습니다.')
        }
        if (object.author){
            console.log('author속성이 존재합니다.')
        }else{
            console.log('author속성이 없습니다.')
        }

더 줄이면 

        object.name || console.log('name속성이 없습니다.')
        object.author|| console.log('author속성이 없습니다.')

 

이러한 확인 작업을 통해 기본속성을 지정 할 수도 있습니다.

 

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

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

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

        object.name = object.name || `제목 미정`
        object.author = object.author|| `저자 미상`

 

배열기반의 다중 할당

[식별자 , 식별자, 식별자 , ....] = 배열

객체 기반의 다중할당

{속성 이름, 속성 이름} = 객체
{식별자 = 속성 이름 , 식별자 = 속성이름} = 객체

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

        const {name,price} =object
        console.log('# 속성 이름 그대로 꺼내서 출력하기')
        console.log(name,price)
        console.log('')

        const {a=name,b=price}=object
        console.log('# 다른 이름으로 꺼내서 출력하기')
        console.log(a,b)

배열 전개 연산자

배열과 객채를 할당할때는 얕은 복사가 이루어집니다.

얕은 복사란?

        const 물건_200301 = ['우유','식빵']
        const 물건_200302 = 물건_200301
        
        //302에만 물건 추가
        물건_200302.push('고구마')
        물건_200302.push('토마토')

        console.log(물건_200301)
        console.log(물건_200302)

302에만 추가하였지만 031에도 추가 되었습니다.

배열은 복사해도 다른 이름이 붙을뿐 메모리 주소가 같아 참조 복사가 이루어져서 그렇습니다.

 

반대로 깊은 복사의 경우 두 배열이 독립적으로 동작하게 됩니다.

[...배열]

        const 물건_200301 = ['우유','식빵']
        const 물건_200302 = [...물건_200301] //깊은복사
        
        //302에만 물건 추가
        물건_200302.push('고구마')
        물건_200302.push('토마토')

        console.log(물건_200301)
        console.log(물건_200302)

 

 

전개연산자로 배열을 전개하고 자료를 추가하는 경우엔

[...배열,자료,자료]

        const 물건_200301 = ['우유','식빵']
        const 물건_200302 = ['고구마',...물건_200301,'토마토'] 
        
        console.log(물건_200301)
        console.log(물건_200302)

같은 배열을 여러번 전개하는 것도 가능합니다.

객체 전개 연산자

배열과 마찬가지로 객체도 동일합니다.

먼저 얕은 복사

        const 구름 = {
            이름 : '구름',
            나이 : '6',
            종족 : '강아지'
        }
        const 별 = 구름
        별.이름 = '별'
        별.나이 =1

        console.log(JSON.stringify(구름))
        console.log(JSON.stringify(별))

전개 연산자를 이용한 깊은 복사

        const 구름 = {
            이름 : '구름',
            나이 : '6',
            종족 : '강아지'
        }
        
        //전개연산자 사용
        const 별 = {...구름}
        별.이름 = '별'
        별.나이 =1

        console.log(JSON.stringify(구름))
        console.log(JSON.stringify(별))

객체연산자에 요소 추가

{...객체,자료,자료}

        const 구름 = {
            이름 : '구름',
            나이 : '6',
            종족 : '강아지'
        }
        const 별 = {
            ...구름,
            이름 : '별',
            나이 : 1,
            예방접종:true
        }

        console.log(JSON.stringify(구름))
        console.log(JSON.stringify(별))

참고로 전개 순서가 중요합니다. 뒤쪽에서 전개연산자를 사용하면 다시 값이 덮어씌어집니다.

이렇게요