TIL #4 javascript Object

1. Object (객체)의 구성

• javascript의 Object(객체)는 property이름 과 property 값으로 구성된 집합이다. (property이름은 key 값이라고 하며 property 값은 value값이라고 한다.)

객체는 중괄호{}로 감싸져 있고 key 값과 value 값은 콜론(;) 값으로 구분되고 쉼표로 구분된 목록의 형태이다.

• 객체 구성 예시

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

객체 생성 규칙

1. property 이름 (key 값) 은 중복될 수 없다.
2. property 이름 (key 값) 과 property 값 (value 값) 사이는 콜론(:) 으로 구분되어야한다.
3. property를 추가할때는 쉼표(,)를 사용한다.
4. property 값에는 어떤 type이나 다 가능하다.

2. 객체 값에 접근하는 방법

1. 마침표(.) 연산자를 이용해서 접근하려는 객체명을 . 앞에 적고 . 뒤에 property 이름 (key 값) 을 입력한다.
2. 대괄호([])를 사용하여 접근하려는 객체명을 [] 전에 입력하고 [] 안에 property 이름 (key 값) 을 쌍따옴표(" ") 와 함께 입력한다.

• 객체 접근 방법 별 예시

let plan1 = {   
  name: "Basic"
};

console.log(plan1.name); // 1번 방법
console.log(plan1["name"]); // 2번 방법

1번 방법과 2번 방법의 차이는 2번 방법으로 접근하면 대괄호 ([]) 안에 변수명을 사용할 수 있다는 점이다.

• 예시

let plan1 = {   
  name: "Basic"
};

let propertyName = "name";

console.log(plan1[propertyName]);

property 이름 (key 값)과 동일한 "name" 이라는 string 을 propertyName 이라는 변수로 선언하여 객체에 접근한 것이다.

• 아래와 같이 다양한 방법으로도 객체에 접근이 가능하다.

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

let name = "property";
console.log(myObj[name+"1"]); // name = "property" 이기 때문에 name+"1" = "property1"이 된다.
console.log(myObj[name+"2"]);
console.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]); // name = "property" 이기 때문에 "child" + name 은 "childproperty"가 된다.

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"

3. 객체 값 수정 및 추가

• 객체 값을 변경하는 방법은 아래 예시와 같다.

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

let name = "property1";

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

객체를 생성하는 것과 마찬가지로 객체 값 (value 값)은 다른 어떠한 type으로도 변경 할 수 있다.

• 바로 위 예시에 아래와 같은 코드를 추가하여 새로운 property를 추가할 수 있다.

myObj.property1.siblingproperty = [3,6,9];

console.log (myObj)
// = {
  property1: [ 'hi', 'hello', siblingproperty: [ 3, 6, 9 ] ],
  property2: [ 1, 2, 3, 4, 5 ],
  property3: { childproperty: 'haha' }
}

위의 예시에서 siblingproperty는 property의 이름이 되고 [3,6,9]는 property의 값이 된다.

• 아래 예시처럼 객체 내의 배열에 접근 한다.

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

• 객체 내 배열 안에 있는 객체와 그 객체 값인 배열에도 접근할 수 있다.

console.log (myObj.property1.siblingproperty); // = [3,6,9]
console.log (myObj.property1.siblingproperty[0]); // = 3

- Assignment

세 개의 배열을 인자로 받아서 그걸 조합해 하나의 새로운 객체를 만든다.

function getData (salesArr, reviewArr, likeArr){

}

	let objData = {
		sumAmount : 
    	sumReview : 
    	sumLike : 
	}
    return objData;

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]]

이 세가지를 조합하여 지금까지의 총 판매량, 총 리뷰 수, 총 좋아요 수를 담은 객체를 새롭게 만들어야한다. 새로운 객체는 objData 라는 변수로 리턴되고 objData는 sumAmount, sumReview, sumLike 라는 property 이름 (key 값) 을 갖는다.

판매는 sales, 리뷰는 review, 좋아요는 like라는 변수를 사용해 각각 날짜와 수량으로 배열을 만들어 salesArr, reviewArr, likeArr 이라는 인자에 대입한다.
인자에 대입하기 위해 배열 type의 변수를 getData 함수 위에 생성한다.

let sales = [];
let review = [];
let like = [];

그리고 상단 함수 코드안에 있는 objData의 type이 객체 형태여야 하기 때문에 sumAmount, sumReview, sumLike라는 key 값에 대입할 value값의 변수를 작성해놓는다.

  let objData = { 
    sumAmount: totalSale,
    sumReview: totalReview,
    sumLike: totalLike,
  };

모든 판매량, 리뷰 수, 좋아요 수를 확인하기 위해서는 반복문 (for 문)을 사용하여 모든 내부 정보를 확인하고 확인된 값만을 모두 합해야하기 때문에 초기totalSale, totalReview, totalLike 의 값은 0으로 설정한다.

function getData(salesArr, reviewArr, likeArr) {
  let totalSale = 0;
  let totalReview = 0;
  let totalLike = 0;

이후 모든 값을 더할 수 있는 반복문을 작성한다.

for (i = 0; i < salesArr.length; i++){
  totalSales += salesArr[i][1];
}

인자 길이의 직전 만큼의 횟수까지 1을 더하면서 올라가고, 올라가면서 그 순서에 해당하는 배열에 [1] 번째 요소를 totalSales 에 계속 더해주게되고 해당 인자의 [1]에 해당하는 요소들의 총합을 구한다.

totalSales += salesArr[i][1] 의 의미는 totalSales = totalSales + salesArr[i][1] 과 동일하다.

다른 인자들의 총합을 구하는 방식도 동일하다.

이렇게 구해진 값들은

  let objData = { 
    sumAmount: totalSale,
    sumReview: totalReview,
    sumLike: totalLike,
  };

위 코드를 이용해 모두 objData 라는 객체에 sumAmount, sumReview, sumLike 라는 key 값의 value 값으로 대입된다.

이렇게 완성된 objData를

return objData;

return 하는 것까지가 getData 함수의 역할이다.

console.log (getData(sales, review, like));

console.log를 통해 console 창에서 getData 함수를 실행한 결과를 확인할 수 있다.

console 창을 확인해보면 sales, review, like 가 비어있기 때문에 아래와 같은 결과를 확인할 수 있다.

{ sumAmount: 0, sumReview: 0, sumLike: 0 }

Object는 하면 할수록 어렵고 정말 많이 사용되기 때문에 제대로 알고 넘어가야할 항목이라고 생각된다.
개념을 이해하더라도 이해한 개념을 언제 사용해야하는지 응용하지 못하면 무용지물이라는 사실을 최근에 많이 느끼고 있기 때문에 (사실 개념을 완벽하게 이해하지 못해서 그런것 아닐까 라는 생각도 든다.) 더욱 새심하고 꼼꼼하게 정리하는 것이 중요한 것 같다.

Object에 대한 더 자세한 내용은 다음에도 계속 작성할 생각이다.
하면 할수록 어렵고 지치지만 결론은 더 열심히 하는 것 밖에 없다고 오늘도 깨닫는다.