[혼공스] 5주차 _ Chapter 06

 

 

 

06 - 1     객체의 기본 

 

→ 객체:  '이름(name)' 과 '값(value)'로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입

 

 

 

객체

→ 객체(object): 여러 자료를 다룰 때 사용 (이전의 배열도 객체임)

→  객체는 키 (key)를 사용한다.              →  키 : 값 

    <script>
        const product = {
            제품명: '건조 망고',
            유형: '당절임',
            성분: '망고, 설탕, 등등',
            원산지: '필리핀'
        }

    </script>

접근 방법

 

 

 

 

속성과 메소드

→ 배열 내부에 있는 값은 요소, 

→ 객체 내부에 있는 값은 속성이라고 한다. 

→ 객체의 속성도 모든 형태의 자료형을 가질 수 있다. 

 

✅ 속성과 메소드 구분하기 

→ 객체의 속성 중 함수 자료형인 속성 : 메소드 (method) 

 

 

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

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

        pet.eat('밥')
    </script>

는 과 을 앞에 띄워쓰길 해주야 하는 군여

 

 

 

 

 

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

→ 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것 

 

 

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

    <script>
        const student = {}

        student.이름 = '김김김'
        student.취미 = '노래'
        student.장래희망 = '가수'

        console.log(JSON.stringify(student, null, 2))
    </script>

 

 

 

 

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

→ delete 객체 . 속성 

    <script>
        const student = {}

        student.이름 = '김김김'
        student.취미 = '노래'
        student.장래희망 = '가수'

        delete student.장래희망

        console.log(JSON.stringify(student, null, 2))
    </script>

 

 

 

메소드 간단 선언 구문

    <script>
        const student = {
            name: '김김김',
            eat (food) {
                alert(this.name + '은/는 ' + food + ' 을/를 먹는다')
            }
        }

        student.eat('밥')
    </script>

 

 

 

 

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

자료 => 기본 자료형 / 객체 자료형 

 

 

객체 자료형

→  객체: 속성과 메소드를 모두 가질 수 있음 

→ 배열, 함수도 객체이다 

→ 배열인지 확인하기 위해 Array.isArray()

 

 

기본 자료형

→  자바스크립트는 실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것을 의미

→  숫자, 문자열, 불 

 

 

 

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

→  숫자, 문자열, 불 등으로 자료형을 변환하는 함수 (Number, String, Boolean) 

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

객체 생성 

new Number( 10 )

new  String ('안녕')

new  Boolean(true)

 

✅ new 키워드 사용하지 않을 때 

→  new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동한다. 

객체가 아님

 

 

 

기본 자료형의 일시적 승급 

→  원래 기본 자료형은 속성과 메소드를 가질 수 없다. 

→  기본 자료형이 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다. 

일시적이라 추가한 sample 속성 사라짐

 

 

 

 

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

→  prototype 속성 : 객체 전용 옷 (틀) / 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 속성과 메소드 사용가능

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

 

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

        const a = 12
        console.log('a.power() : ', a.power())
        console.log('a.power(3): ', a.power(3))
        console.log('a.power(4): ', a.power(4))
    </script>

n제곱

객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해 valueOf() 사용

 

 

→  문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 : indexOf()

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

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

        const a = '안녕'
        console.log('안 in 안녕:', a.contain('안'))
        console.log('없는데 in 안녕:', a.contain('없는데'))

        const b = [213, 23, 634, 25, 15]
        console.log('213 in  [213, 23, 634, 25, 15]:', b.contain(213))
        console.log('0 in  [213, 23, 634, 25, 15]:', b.contain(0))
    </script>

 

 

 

 

Number 객체

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

→  소수점 이하 몇 자리 까지만 출력하고 싶을 때 사용한다.

유용하넴 ~~

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

→  어떤 숫자가 NaN(not a number)인지 Infinity(무한)인지 확인할 때는 

      Number.isNan( ) , Number.isFinite( ) 메소드를 사용한다. 

→  NaN과 다르게 무한대 값은 비교 연산자로 비교할 수 있다. 

 

 

 

 

String  객체

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

→  문자열 앞뒤 공백 (띄어쓰기, 줄바꿈 등)을 제거할 수 있다. 

줄바꿈 공백도 없애주고

 

 

 

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

→  문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드

→  .trim( ) : 앞뒤 공백 제거 →  .split('/n') : 줄바꿈으로 자른다

→  .map((line) => .split(',')) : 배열 내부의 문자열들을 쉼표로 자른다.

→  JSON.stringify(input, null, 2) : 어떤 값이 들어있는지 쉽게 확인하기 위해 

 

 

 

 

 

JSON 객체

JSON : 자바스크립트 배열과 객체를 활용해 어떤 자료를 표현하는 형식일 뿐

규칙

→  값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있습니다 (함수 등은 사용 불가) 

→  문자열은 반드시 큰따옴표로 만들어야 한다.

→  키에도 반드시 따옴표를 붙여야 한다.

 

→  JSON.stringify( ) 메소드 : 자바스크립트 객체를 JSON 문자열로 변환할 때 사용 

    <script>
        const data = [{
            name: '혼자 공부하는 JS',
            price: 18000,
            publisher: '한빛미디어'
        }, {
            name: 'HTML5 웹 프로그래밍 입문',
            price: 26000,
            publisher: '한빛아카데미'
        }]

        console.log(JSON.stringify(data))
        console.log(JSON.stringify(data, null, 2))
    </script>

 

 

→  JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse( ) 메소드 사용 

    <script>
        const data = [{
            name: '혼자 공부하는 JS',
            price: 18000,
            publisher: '한빛미디어'
        }, {
            name: 'HTML5 웹 프로그래밍 입문',
            price: 26000,
            publisher: '한빛아카데미'
        }]

        const json = JSON.stringify(data)
        console.log(json)

        console.log(JSON.parse(json))
    </script>

 

 

 

 

 

Math 객체

→  기본적 연산할 때 Math 객체 사용 

 

→  Math.random( ) : 랜덤한 숫자 생성할 경우 / 0 이상, 1 미만의 랜덤한 숫자 생성 / 그 이상의 범위에서 랜덤한 숫자를 구현하려면 다양한 처리가 필요함

    <script>
        const n = Math.random()

        console.log('# 랜덤한 숫자')
        console.log('0-1 사이의 랜덤한 숫자: ', n)
        console.log('')

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

        console.log('# 랜덤한 숫자 범위 이동')
        console.log('0~50 사이의 랜덤한 숫자: ', n * 50 - 25)
        console.log('')

        console.log('# 랜덤한 정수 숫자')
        console.log('-25~50 사이의 랜덤한 숫자: ', Math.floor(n * 50 - 25))
    </script>

 

 

 

 

06 - 3     객체와 배열 고급

 

 

속성 존재 여부 확인

    <script>
       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 속성이 없습니다.')
       }
    </script>

 

 

 

<!-- 기본속성지정하기 -->
    <script>
       const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        publisher: '한빛미디어'
       }

    //    object.name == object.name !== undefined ? object.name : '제목 미정';
    //    object.author == object.author !== undefined ? object.author : '저자 미상';
        object.name = object.name !== undefined ? object.name : '제목 미정';
        object.author = object.author !== undefined ? object.author : '저자 미상';
        
       console.log(JSON.stringify(object, null, 2))
    </script>

ㅇ으아ㅏㅏ  = 한 개 넣어줘야 하는데 == 두개 넣어줬다가 왜 안 되는지 한참 찾는 실수 ~ 

 

 

 

 

 

배열 기반의 다중 할당

→  다중 할당 : [ 식별자, 식별자, 식별자, ... ] = 배열 

 

 

 

객체 기반의 다중 할당

→  객체 속성 꺼내서 다중 할당하기 

→  { 속성 이름, 속성 이름 } = 객체 

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

<!-- 객체 속성 꺼내서 다중 할당하기 -->
    <script>
       const object = {
        name: '혼자 공부하는 파이썬',
        price: 18000,
        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)
    </script>

자나깨나 오타조심

 

 

 

배열 전개 연산자

→  배열과 객체는 할당할 때 얕은 복사라는 것이 이루어짐 

→  복사했을 때 다른 이름이 붙음 

 

→  깊은 복사 : 복사한 두 배열이 완전히 독립적으로 작동함 (클론 clone 을 만드는 것) 

 

 

객체 전개 연산자

    <script>
       const 구름 = {
        이름: '구름',
        나이: 6,
        종족: '강아지'
       }

       const 별 = {
        이름: '별',
        나이: 1,
        예방접종: true,
        ...구름
        // ...구름 (구름이라는 객체가 모두 덮어씀)
       }

       console.log(JSON.stringify(구름))
       console.log(JSON.stringify(별))
    </script>

전개 부분 뒤로 이동하기

 

 

 

 

 

✅ 기본 미션 

Q ) 객체, 속성, 메소드가 무엇인가? 

 

1. 객체 

→  '이름(name)' 과 '값(value)'로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입

→  상태(속성)과 행동(메소드)를 포함한다. 

 

2. 속성 

→  객체 내부에 있는 값을 의미한다. 

→  객체가 가지는 데이터나 정보를 의미 

→  보통 키(속성 이름) - 값( 속성의 데이터) 로 표현이 된다. 

 

3. 메소드

→  속성 중에 함수 자료형인 것을 의미한다. 

→  객체가 수행할 수 있는 동작이나 기능을 정의한 함수이다. 

 

 

 

정말 안 믿기겠지만

ㄴ ㅓ무 바빠서 마니마니 늦었스빈다

ㄷㅏ음 주차도 늦을 것 같아서 벌써 슬퍼예 .... ~