TIL_26_with Wecode 016 JavaScript about 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 이다.

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

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값을 접근하고 싶을 때는 아래 처럼.
  

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

let plan1 = {   
  name: "Basic"
};
console.log(plan1.name);
console.log(plan1["name"]); //Basic

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

let plan1 = {   
  name: "Basic"
};
let propertyName = "name";
console.log(plan1[propertyName]); //Basic

아래의 코드에서 어떻게 객체의 프로퍼티에 접근했는지 확인해주세요.

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
  childproperty: "haha"
  }
};
let name = "property";
console.log(myObj[name+"1"]); // hello
console.log(myObj[name+"2"]); // [1,2,3,4,5]
console.log(myObj[name+"3"]);
//{ childproperty: 'haha' }
console.log(myObj[name+"3"]["child"+name]); // haha
console.log(myObj.property1); // hello
console.log(myObj.property2); // [1,2,3,4,5]
console.log(myObj.property3);
//{ childproperty: 'haha' }
console.log(myObj.property3.childproperty); // haha

위의 myObj 객체를 정의한 후에 property 값을 수정할 수 있다.

let name = "property1";
myObj[name] = ["hi", "hello"];
console.log(myObj);
/* 결과
[ 'hi', 'hello' ]
{
  property1: [ 'hi', 'hello' ],
  property2: [ 1, 2, 3, 4, 5 ],
  property3: { childproperty: 'haha' }
}
*/

myObj의 property1가 배열로 바꼈는데, 이 배열의 첫번째 요소를 접근하고 싶으면 아래와 같이 할 수 있다.

console.log(myObj.property1[0]); // hi

아래와 같은 객체의 구조는 정말 많이 쓰인다고 한다.
객체의 객체의 배열의 객체.....?

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"
    }]
  }
};

objData라는 객체안에 name, address, books라는 property가 있다.
books에 또 객체가 할당되어있다.
위의 데이터에서 "HTML Guide"에 접근하고 싶을 때는 아래와 같이 해주면 된다.

let bookName = objData.books.info[1].name;
console.log(bookName); // HTML Guide

일부러 books 라는 property 명 대신에 's'를 빼고 book이라고 작성한다면?
당연히 자바스크립트 컴파일 오류.

let bookName = objData.book.info[1].name;
console.log(bookName);

objData.book은 objData 객체의 book이라는 property명의 property값을 가져와야 하는데,
해당 property명은 존재하지 않으니까 값도 없는 것이고 그래서 undefined라고 나온다.

Assignment

• 이제까지 성공하셨던 Assignment와는 조금 다른 유형입니다.
• 그 동안에는 특정값을 구해서 return 했다면, 이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다.
• 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]]
  위의 예시로 보여드린 배열은 단지 예일뿐, 날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다.
  왜 각각 세 개의 배열을 하나의 객체로 구조를 바꿔야 할까요?
  위의 배열에서 4월 1일에 판매량, 리뷰수, 좋아요수를 확인하려면 세 개의 배열을 각각 for문으로 반복해서 날짜를 확인해야 하므로 좋은 구조의 데이터라고 할 수 없습니다. (날짜가 365일이라고 하면, 세 개의 배열이 각자 365번 돌아야 하니까요)
  그래서 세 개의 배열을 사용하기 좋게 객체로 바꿀 것입니다.
  객체는 프로퍼티명으로 바로 접근 가능하니까, 날짜만 알면 반복문을 돌지 않아도 바로 데이터를 얻을 수 있습니다. 그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다.
  다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.
  objData가 갖고 있는 property는 3개 입니다.
• sumAmount: 총 판매량
• sumReview: 총 리뷰개수
• sumLike: 총 좋아요수

function getData(salesArr,reviewArr,likeArr){
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;
  for (let i = 0; i < salesArr.length; i++){
    sumAmount = sumAmount + salesArr[i][1];
  }
  for (let i = 0; i < reviewArr.length; i++){
    sumReview = sumReview + reviewArr[i][1];
  }
  for (let i = 0; i < likeArr.length; i++){
    sumLike = sumLike + likeArr[i][1];
  }
  let objData = {
    sumAmount,
    sumReview,
    sumLike
  };
  return objData;
}

참고사이트