[Javascript] 객체와 클래스

Jane Yeonju Kim·2022년 2월 4일
0

JavaScript

목록 보기
11/14
post-thumbnail

Object & object

Object와 object가 다른 의미인데, Object는 자바스크립트의 데이터 타입이고 거의 모든 객체는 Object의 인스턴스입니다. 새로운 객체를 생성할 때는 new Object()로 생성할 수도 있습니다. 이 글에서는 object 객체를 설명하겠습니다.

객체의 속성과 값

객체는 여러 종류의 데이터를 속성(property)과 속성 값(value)으로
관리하는 묶음 단위(property : value)입니다!
파이썬의 dict타입(key : value 묶음 단위)과 비슷합니다.

속성에 접근하는 방법도 같습니다.
1. dot notation (점 표기법)
2. bracket notation (괄호 표기법)

const myCart = { apple: 7 , orange: 3, banana: 5 }

console.log(myCart.apple)             // 7
console.log(myCart['orange'])         // 3
console.log(Object.keys(myCart))      // ['apple', 'orange', 'banana']
console.log(Object.values(myCart))    // [7, 3, 5]


let key, value
for (key in myCart) {
  if (myCart.hasOwnProperty(key)) {
    value = myCart[key]
    console.log(key + ' ' + value)
  }
}
// apple 7
// orange 3
// banana 5

생성자 함수와 클래스

생성자 함수가 뭔지 이해하기가 어려웠는데.. 클래스와 같은 기능을 하는 걸로 보아 클래스가 없었을 때 함수로 구현하던 클래스 기능의 함수 이름인 것 같습니다.. 객체를 빠르고 쉽게 생성하는 템플릿이죠.
두 가지 모두 새로운 객체를 생성할 때는 같은 방법으로 new 예약어를 이용하여 생성합니다!

생성자 함수로 객체를 생성할 때는 일반함수를 생성하듯이 만드는데
생성자 함수 이름은 대문자로 시작하고, this예약어를 사용하여 생성될 객체의 속성을 미리 정의합니다. 속성에 함수를 정의할 때의 함수명(hiss속성 안의 함수명)은 더 복잡한 구조로 만드는 경우 디버깅 용도로 쓸 수 있다고 합니다. 아래의 코드에서는 익명함수로 선언했습니다.

// 생성자 함수 선언
function Momcat(meow, purr) {
  this.meow = meow
  this.purr = purr
  this.hiss = function () {return "😾"}
}

//  객체 두개 생성
let sonCat = new Momcat("Meow!", "Purrr")
let dauCat = new Momcat("Meow?", "Purr")

// 생성된 객체의 속성 확인
console.log(sonCat)   //  {meow: 'Meow!', purr: 'Purrr'}
console.log(dauCat)   //  {meow: 'Meow?', purr: 'Purr'}

console.log(dauCat.hiss())   //  😾

클래스로 객체 생성할때는 constructor()에 인자(==파라미터)를 받고
같은 레벨에 함수를 선언합니다.

// 클래스 선언 (객체 생성 및 속성 확인 결과가 모두 같다.)
class Momcat {
  constructor (meow, purr) {
    this.meow = meow
    this.purr = purr
  }
  hiss() {return "😾"}
}

도움되는 강의들

코딩애플 클래스 강의
드림코딩 클래스와 오브젝트 차이점
파이썬과 자바스크립트 비교하는 블로그 글

profile
안녕하세요! 김개발자입니다 👩‍💻 🐈

0개의 댓글