07.20(객체)

객체(Object)란?

객체란 실생활에서 우리가 인식할 수 있는 사물

 

 

자바스크립트 객체

이름(name)과 값(value)으로 구성된  프로퍼티(property)의 정렬되지 않은 집합

자바스크립트에서 숫자, 문자, 불리언, undefined 타입을 제외한 모든 것이 객체임

(() => {
  let product = {
    "product-name" : '말린 망고',
    type : "피클류",
    ingredient : ['망고', '설탕'],
    amount : 10,
    origin : "필리핀"
  }

  // console.log(product.product-name);
  console.log(product['product-name']);
  //특수문자/공백등이 포함된 키값은 .(객체접근 연산자 사용불가)
  console.log(product.type);
  console.log(product.ingredient);
  console.log(product.amount);
  console.log(product.origin);

  //객체의 모든 속성 열람: 일반 for문이 아닌 for..in문을 사용
  //변수 k 에 키값이 담긴다.
  for(let k in product){
    console.log(k + " : " + product[k]);
  }
})();

 

프로퍼티의 값으로 함수가 오는 경우 메소드(method)라고 함

(() => {
  let cat = {
    petName : "바다",
    eat : function(food) {
      //객체안의 함수(메소드)에서 다른 속성에 접근하려면,
      //this키워드를 통해서 접근해야한다.
      //이때 this는 전역객체 window가 아니다.
      //<this용법3> 객체안 method에서 this는 현재객체를 가리킨다.
      console.log(this.petName + "이/가 " + food + "을/를 맛있게 먹습니다.");
    }
  }

  console.log(cat.eat);
  cat.eat('물');

  //속성의 동적 추가/삭제

  cat.weight = 5;

  // delete(cat.eat);
  // delete cat.eat;

  //toString 오버라이딩
  cat.toString = function(){
    return "[" + this.petName + ", " + this.weight + "]";
  }

  for(let k in dog){
    console.log(k + " : " + dog[k]);
  }

  console.log("dog = " + dog.toString());

})();

 

 

객체 배열

내장객체(자바스크립트 안에 이미 정의되어 있는 객체)  Array객체를 의미

 

 

객체 배열 생성

배열 이름 = new Array(개수);

배열 이름[index] = "배열요소값";

<script>
(() => {
  let pets = [];
  pets.push({
    name : '도리',
    breed : '코숏',
    weight : 5,
    age : 4
  });
  pets.push({
    name : '니모',
    breed : '코숏',
    weight : 4.5,
    age : 4
  });
  pets.push({
    name : '바다',
    breed : '코숏',
    weight : 3.5,
    age : 4
  });
  
  //배열에 for..in문을 사용하면, 변수에는 인덱스가 들어온다.
  for(let i in pets){
    pets[i].meow = function(){
      if(this.weight >= 4)
        console.log(this.name + "이/가 냐옹 운다.");
      else 
        console.log(this.name + "이/가 냥 운다.");
    }
  }

  // console.log(pets);

  // for(let i in pets){
  //   pets[i].meow();
  // }

})();

 

객체 배열의 메소드

join(결합문자)	배열 요소를 결합 문자로 연결
sort()	배열 요소를 오름차순 정렬
reverse()	배열 요소를 거꾸로 바꿈
concat(배열이름)	두 개의 배열을 하나로 합침
slice(시작위치, 종료위치)	배열 요소 중 시작 위치에서부터 종료 위치 전까지 분리해 새로운 배열에 저장
pop()	배열의 마지막 요소를 제거하고 리턴
push()	배열의 마지막 부분에 새로운 요소를 추가
splice()	배열 요소의 지정한 부분을 삭제하고 삭제한 요소 리턴

 

 

생성자 함수

new 키워드를 통해 객체를 생성할 수 있는 함수

//관례적으로 대문자로 시작
function Cat(name, breed, weight, age){
  //this는 현재객체를 가리킨다.
  this.name = name;
  this.breed = breed;
  this.weight = weight;
  this.age = age;
  // this.meow = function(){
  //   if(this.weight >= 4)
  //     console.log(this.name + "이/가 냐옹 운다.");
  //   else 
  //     console.log(this.name + "이/가 냥 운다.");
  // }
}

//prototype에서 중복된 속성관리
//각 Cat객체에서 참조형태로 중복된 속성을 가져와 사용할 수 있다.
Cat.prototype.bark = function(){
  if(this.weight >= 4)
    console.log(this.name + "이/가 냐옹 운다.");
  else 
    console.log(this.name + "이/가 냥 운다.");
};

(()=>{
  let pets = [];
  pets.push(new Cat('도리','코숏',5,4));
  pets.push(new Cat('니모','코숏',4.5,4));
  pets.push(new Cat('바다','코숏',3.5,4));

  for(let i in pets){
    pets[i].meow();
  }

  console.log(pets);
})();