JavaScript | Object (TIL 4. KEY POINT)

Object

1. 개념: 자료를 저장하고 처리하는 기본 단위를 의미한다.

   let book = {
    title: "자바스크립트",
    author: "엄문주",
    pages: "1000",
    price: "10000"
   }
   

2. 종류

   • 내장객체(Built-in Object): Math, Array, Boolean, Number 등 자바스크립트 내에 미리 만들어져 있는 객체를 의미한다.
   • 문서 객체 모델(DOM): 객체를 통해서 웹 문서를 관리하는 방식을 의미한다. Documetnt, Image 등이 있다.
   • 브라우저 객체 모델(BOM): 웹브라우저의 정보를 객체로 다루는 것을 의미한다. Navigator, History, Location Screen 등이 있습니다.
   • 사용자 정의 객체: 사용자가 필요할 때, 직접 만들어서 사용하는 것을 의마한다.

3. 용어

   • 속성(Property): 객체에서 값을 담고 있는 정보.

   • 매서드(Method): 객체가 어떻게 동자할지를 선언해 놓은 함수. .(마침표) 또는 [ ]을 이용한다.

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

   • 프로토타입(Prototype): 기본틀, 웹 이미지를 만들기 위해서는 Image 객체를 사용하는데, 이 때, Image 객체는 모든 웹 이미지가 공통적으로 갖고 있는 속성과 기능을 모아 놓은 것이다. 즉, Image 객체가 프로토타입 이라고 할 수 있다.

   • 인스턴스(Instance): 프로토타입을 사용해서 만들어낸 객체를 의미한다. new 예약어를 사용한 뒤, 프로토타입 객체 이름과 ( )를 써주면 사용 할 수 있다.

     let now = new Date()
      now
      Sun Oct 25 2020 13:42:55 GMT+0900 (대한민국 표준시)

     Math.floor(Math.random() * 100 +1) // Math 객체는 따로 인스턴스를 생성하지 않습니다.

   • 리터럴 표기법: 프로그래밍에서 자료를 표기하는 방식을 의미한다. 아래와 같이 변수를 선언하면서 동시에 값 5을 지정하는 것이 리터럴 표기법이다.

     let a = 5;

   • 객체 리터럴 표기법: 객체를 선언하면서 동시에 값을 지정해 주는 것. 중괄호 { } 안에 "속성 이름: 값" 을 입력하면 된다. 속성이 여러개일 경우 ,(쉼표) 를 넣어 구분한다. 속성을 추가하고 싶으면, 객체에 .(마침표) +속성(fiedl)에 값을 입력하면 된다.

     let book = {
          title: "자바스크립트",
          author: "엄문주",
          pages: "1000"
          price: "100000"
          info: function() {
             alert(this.title + "책의 분량은" + this.pages + "쪽입니다.");
          }
     };   

     book.field = "History"

   • 생성자 함수를 이용해서 위 코드와 같이 객체를 만들 수 있다.

     function Book(author, pages, price, title) {
         this.author = author;
         this.pages = pages;
         this.price = price;
         this.title = title;
     };
     
     jsBook = new Book("엄문주", 500, 10000, "자바스크립트") //jsBook은 Book의 인스턴스
     jsBook.title
     "자바스크립트"

4. Date 객체

   • 현재 날짜 정보: new Date()

   • 특정 날짜나 시간 정보를 가지는 Date 객체

     new Date("2020-10-25") // 특정 날짜를 괄호안에 입력하면 된다.

     new Date("2020-10-25T16:21:00") // 시간 정보는 T를 추가한 후 시간을 입력하면 된다. 

   • 날짜/시간 정보를 가져오는 함수

     • getFullYear(): '연도' 정보를 가져와 네 자리 숫자로 표시
     • getMonth(): '월' 정보를 가져옵니다. (0~11) 0은 1월을 의미한다.
     • getDate(): '일' 정보를 가져옵니다.
     • getDay(): '요일' 정보를 가져옵니다. (0~6) 0은 일요일을 의미한다.
     • getTime(): 밀리초로 시간을 나타냅니다. 밀리초는 1/1000초 입니다.
     • getHours()
     • getMinutes()
     • getSeconds()
     • getMilliseconds()

   • 날짜/시간 정보를 설정하는 함수

     • setFullYear(): 연도를 네 자리 숫자로 설정.
     • setMonth(): 0~11의 숫자로 월을 표시.
     • setDate(): 1~31의 숫자로 설정

5. 문제 풀기

   문제: 이제까지 성공하셨던 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: 총 좋아요수

   답:
   
   

6. 문제풀이 및 후기

   문제를 풀면서 처음에는 어떻게 시작을 해야 할 지 몰르겠더라... 그래서, 일단 변수부터 설정하고, 천천히 문제를 들여다 보았다. 결국 날짜별로 조회수의 합을 구해야 하는 것인데, 이 때는 for 문을 써야겠다는게 떠올랐고, 그렇다면, 그 값들이 계속해서 더할 수 있도록 만들어야겠구나! 하는 생각으로 코드를 만들었었는데, 계속해서 에러가 떴었다. 아직 배열이 익숙하지 않은 내 실력때문에... <=를 계속 쓴것이었다. 없는 값을 빼려고 하니... 나올리가... 한참을 고민했다. 이 문제는 어렵다. 근데, 곰곰히 생각해보면 풀 수 있는 문제니... 너무 낙담하지 말도록...

   어려웠던 부분

   • sumAmount, sumReview, sumLike 변수에 0을 할당하는 것
   • for 문에서 변수 i < 매개변수.legnth