[혼공스] ch.6 객체

6-1. 객체의 기본

1. 객체

typeof([])
>> "object" // object가 객체

• 배열은 요소 접근 시 인덱스 사용
• 객체는 요소 접근 시 키 사용
  • 객체는 중괄호로 생성, 자료를 쉼표로 연결해 입력
  • 객체 뒤에 대괄호 사용하고 키 입력하면 객체 요소에 접근 가능
  • 대괄호 방법 외에 온점도 사용 가능

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

    product['제품명']
    product['유형']
    product['성분']
    product['원산지']

2. 속성과 메소드

• 요소 : 배열 내부에 있는 값
• 속성 : 객체 내부에 있는 값
• 메소드 : 객체 속성 중 함수 자료형인 속성

• 메소드 내에서 자기 자신이 가진 속성임을 표현할 때 this 키워드 사용

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

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

• 객체 처음 생성 후, 속성을 제거하거나 추가하는 것 = 동적으로 속성을 추가한다, 동적으로 속성을 제거한다

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

<script>
  const student = {}
  student.이름 = '윤인성'
  student.취미 = 악기'
  student.장래희망 = '생명공학자'
  
  console.log(JSON.stringify(student,null,2))
</script>

• 동적으로 객체 속성 제거하기 : delete 키워드 사용

delete 객체.속성

<script>
  const student = {}
  student.이름 = '윤인성'
  student.취미 = 악기'
  student.장래희망 = '생명공학자'
  
  delete student.장래희망
  
  console.log(JSON.stringify(student, null, 2))
</script>

4. 메소드 간단 선언 구문

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

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

• 자료형 : 기본 자료형(숫자, 문자열, 불), 객체 자료형(함수, 배열 등)

1. 객체 자료형

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

2. 기본 자료형

• 실체가 있는 것 중 객체가 아닌 것

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

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

4. 객체 자료형의 일시적 승급

• 자바스크립트는 사용의 편리성을 위해 기본 자료형의 속성과 메소드 호출할 때 일시적으로 기본 자료형을 객체로 승급시킴
• 단, 승급은 일시적으로 발생

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

• 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>

6. Number 객체

• 숫자 n번째 자릿수까지 출력하기 :toFixed()
• NaN과 Infinity 확인 : isNaN(), isFinite()

7. String 객체

• 문자열 양쪽 끝의 공백 없애기 : trim()
• 문자열을 특정 기호로 자르기 : split()

8.JSON 객체

• 자바스크립트의 객체처럼 자료를 표현하는 방식
• 값 표현 시 문자열, 숫자, 불 자료형만 사용 가능(함수 등 사용 불가)
• 문자열은 반드시 큰따옴표로 만들어야 함
• 키에도 반드시 따옴표 붙여야 함
• 자바스크립트 객체를 JSON 문자열로 변환할 때 JSON.stringify() 메소드 사용

9. Math 객체

• 수학과 같은 기본 연산 할 때 사용
• 랜덤 숫자 생성 시 Math.random() 메소드 사용(0 이상 1 미만의 범위)

6-3. 객체와 배열 고급

1. 속성 존재 여부 확인

• 객체에 없는 속성 접근 시, undefined 자료형 나옴

<script>
  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))
</script>

2. 배열 기반의 다중 할당

• 한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능 추가됨

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

3. 객체 기반의 다중 할당

• 객체 내부에 있는 속성 꺼내 변수로 할당

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

4. 배열 전개 연산자

• 얕은 복사(참조 복사) : 배열 복사했을 때 다른 이름 붙을 뿐인 것
• 깊은 복사 : 복사한 두 배열이 완전히 독립적으로 작동

5. 객체 전개 연산자

{...객체}

{...객체, 자료, 자료, 자료} // 전개 연산자 사용한 객체 요소 추가

기본 과제

[문제]
객체, 속성, 메소드가 무엇인지 설명하기

[답]

• 객체 : 실제로 존재하는 것

typeof([])
>> "object" // object가 객체

• 속성 : 객체 내부에 있는 값, 이름과 값으로 구성
• 메소드 : 속성 중에 함수 자료형인 것