JavaScript_23.Object(객체)

23-1. Object (객체)

위 예제를 보자면,

• plan1, plan2, plan3 라는 object가 있다.
• 각 object는 name, price, space, transfer, pages 라는 5개의 property가 있다.
• name 이라는 property의 데이터값은 String형이고, 나머지 4개의 property는 Number이다.

이렇게 object를 사용한 데이터는 아래와 같이 alert 메시지를 바꿀 수 있습니다.

alert(plan2.name + "플랜 가격은 한 달에 " + plan2.price + "달러입니다.")

`plan2.name` 은 "Professional"이고, `plan2.price` 는 5.99입니다.

📌객체를 어떻게 선언하고, 사용할 수 있는지 배워보자

•객체는 {}(중괄호)로 감싸져 있고,
•콜론으로 구분된 이름 / 값의 쌍들이, 쉼표로 분리된 목록의 형태입니다.

다시 말하면 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

plan1의 객체를 만들면 아래와 같다.

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

⚠️아래의 규칙을 지켜 객체를 만들 수 있다.

• property 이름은 중복될 수 없다.
• property이름과 property값 사이에 : (콜론)으로 구분한다.
• property를 추가할 때는 , (쉼표)를 붙여준다.
• property 값에는 어느 type이나 가능하다(string, number, array, object, function..)

⭐property값에 접근하는 방법(점표기법,대괄호표기법)

• 마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 오른쪽에 위치합니다.
• 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 쌍따옴표("")와 함께 대괄호 안에 작성합니다.

let plan1 = {   
  name: "Basic"
};

console.log(plan1.name);
console.log(plan1["name"]);

❓마침표(.)로 접근하는 것이 편한데 대괄호 표현은 언제 쓰는것이 좋을까? 예를 들어 plan1객체의 name이라는 프로퍼티에 접근하고 싶을 때 아래와 같이도 할 수 있다.

let plan1 = {   
  name: "Basic"
};

let propertyName = "name"; // 프로퍼티네임 수정

console.log(plan1[propertyName]);

📌아래의 코드에서 어떻게 객체의 프로퍼티에 접근했는지 확인해보자

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property";
console.log(myObj[name+"1"]);
console.log(myObj[name+"2"]);
console.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]);

console.log(myObj.property1);
console.log(myObj.property2);
console.log(myObj.property3);
console.log(myObj.property3.childproperty);
//위 아래 동일한 내용 출력

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property1";

myObj[name] = ["hi", "hello"]; // property1 부분 수정된 채로 출력

console.log(myObj);

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property1";

myObj[name] = ["hi", "hello"];

console.log(myObj);

myObj.property3.siblingproperty = [3, 6, 9]; // property3에 siblingproperty 추가
console.log(myObj);

📌객체안의 객체의 배열에 접근하기

let objData = {
  name: 50,
  address: { 
    email: "gaebal@gmail.com",
    home: "위워크 선릉2호점"
  },
  books: {
    year: [2019, 2018, 2006],
    info: [{
      name: "JS Guide",
      price: 9000
    }, {
      name: "HTML Guide",
      price: 19000,
      author: "Kim, gae bal"
    }]
  }
};

"HTML Guide"에 접근해보자

let bookname = objectData.books.info[1].name;
console.log(booksname);

---

✍️Assignment

getData 함수를 구현해주세요!
getData 함수는 세 개의 배열을 인자로 받습니다.

•salesArr : 날짜별 판매량
ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]
•reviewArr : 날짜별 리뷰수
ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]
•likeArr : 날짜별 좋아요수
ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]
다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.

리턴되는 객체는 아래와 같이 3개의 property를 가집니다.

•sumAmount : 총 판매량
•sumReview : 총 리뷰개수
•sumLike : 총 좋아요수

function getData(salesArr, reviewArr, likeArr) {
  let objData = {}; // 일단 세가지 파라미터를 담을 빈 객체를 만듦
 
  let salesSum = 0; 	// 세가지 변수를 선언함.
  let reviewSum = 0;
  let likeSum = 0;
 
	//배열의 요소를 도는 for문을 만듦
  for(let i = 0; i < salesArr.length; i++) {
    salesSum = salesSum + salesArr[i][1];
  }
 
  for(let i = 0; i < reviewArr.length; i++) {
    reviewSum = reviewSum + reviewArr[i][1];
  }  

  for(let i = 0; i < likeArr.length; i++) {
    likeSum = likeSum + likeArr[i][1];
  }  
 

  objData.sumAmount = salesSum;
  objData.sumReview = reviewSum;
  objData.sumLike = likeSum;
  //세가지 프로퍼티에 접근하는 방식을 작성.
 
  return objData; // 변수들을 담은 객체를 리턴함
}