All About

혼자 공부하는 자바스크립트_5주차 정리 및 미션 본문

혼공학습단/혼공 JS(10기)

혼자 공부하는 자바스크립트_5주차 정리 및 미션

ColorNScent 2023. 8. 15. 19:49

혼자 공부하는 자바스크립트 5주차

※ 순서

Chp 6. 정리

미션

 

Chp 6. 객체

■ 객체의 기본

  • 객체: 이름과 값으로 구성된 '속성'을 가진 자바스크립트의 기본 데이터 타입
    • 여러 자료를 다룰 때 객체를 사용
    • ex) 배열
      • 요소에 접근 시 → 배열: 인덱스 / 객체: 키
      • 객체 생성 → 중괄호{...}로 생성 & 키: 값 & 쉼표(,)로 연결
      • 객체 요소 접근 → 객체 뒤 대괄호[...]사용 & 키 입력  or 온점(.) 사용
        • ex) product['제품명'] or product.제품명
        • 식별자로 사용할 수 없는 단어를 키로 사용할 때는 문자열 사용
        • 식별자로 사용할 수 없는 키에 접근할 때는 대괄호 사용
  • 속성: 객체 내부에 있는 값 (↔ 요소: 배열 내부에 있는 값)
  • 메소드: 객체의 속성 중 함수 자료형인 것, 속성 중에 동작(함수)인 것
    • this 키워드: 자기 자신이 가진 속성이라는 것 표현 시 사용, 객체 내부의 메소드에서 객체 자신을 나타내는 키워드
      • ex) this.name
  • 동적 속성 추가: 객체 생성한 후 속성을 지정하고 값 입력
  • 동적 속성 제거: delete 키워드 사용
    • ex) delete 객체.속성

 

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

  • 기본 자료형: 실체가 있는 것(undefined, null 등이 아닌 것) 중에 객체가 아닌 것 
    • ex) 숫자, 문자열, 불
    • 객체가 아니므로 속성 가질 수 X
  • 객체 자료형: 객체를 기반으로하는 자료형
    • new 키워드로 생성 
    • 객체: 속성과 메소드를 가질 수 있는 모든 것
      • 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서 일급 객체에 속한다고 표현함
  • 기본 자료형을 객체로 선언하기
    • 숫자, 문자열, 불 객체 생성 가능
    • 이전과 다르게 속성 가짐
    • new 키워드 사용하지 않으면 자료형 변환 기능로 작동(주의)
const 객체 = new 객체 자료형 이름()
  • 기본 자료형의 일시적 승급: 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것
  • prototype(프로토타입) 객체: 객체의 틀
    • 속성과 메소드 추가하면 해당 객체 전체에서 사용 가능

 

■ 객체와 배열 고급

  • 속성 존재 여부 확인: 객체 내부에 어떤 속성이 있는지 확인하는 것
    • undefined 활용: 객체에 없는 속성에 접근하면 나타남
  • 다중 할당: 배열과 객체 하나로 여러 변수에 값을 할당하는 것
    • 배열 기반
      • [식별자, 식별자, 식별자, ...] = 배열
    • 객체 기반
      • 객체 속성 꺼내서 다중 할당
{속성 이름, 속성 이름} = 객체
{식별자 = 속성 이름, 식별자 = 속성 이름} = 객체
  • 얕은 복사(참조 복사): 복사하는 행위가 단순하게 다른 이름을 부이는 형태로동작하는 복사
  • 깊은 복사: 복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사
    • '전개 연산자' 사용
      • 전개 연산자를 사용한 배열 복사: [...배열]
      • 전개 연산자를 사용한 배열 요소 추가: [...배열, 자료, 자료, 자료]
      • 전개 연산자를 사용한 객체 복사: {...객체}
      • 전개 연산자를 사용한 객체 요소 추가: {...객체, 자료, 자료, 자료}

 

 

▶ 5주차 미션

    ▷ 기본 미션

Q. 객체, 속성, 메소드가 무엇인지 설명하기

A. 객체는 이름과 값으로 구성된 속성을 가진 자바스크립트의 기본 데이터 타입으로 여러 자료를 다룰 때 사용한다.

속성은 객체 내부에 있는 값으로 이름과 값으로 구성되었다. 메소드는 객체의 속성 중 함수 자료형인 것, 즉 속성 중에 동작인 것이다.

 

    ▷ 선택 미션

Q. p.288 확인 문제 3번 풀고 풀이 과정 설명

A.

const rad = degree * (Math.PI / 180)
console.log(Math.sin(rad))

<p.288 확인 문제 3번_결과>

풀이: Math.sin() 메소드의 괄호 안에 라디안을 넣어야하므로 degree를 라디안 단위로 변경한 후 메소드에 값을 넣었다.