(JS) 객체(Object) (2019/10/10)

-개념

다루고 싶은 모든 데이터의 집합소

 

 

-프로퍼티(property)

객체 내부에서 어떤 값을 나타내는 제목 (key)과 값(value)이 한 세트로 이루어진 것을 프로퍼티라고 한다. 

즉, 객체는 프로퍼티들로 이루어 져있다.

let cafe = {
  americano : 2800,
  caffeLatte : 3400,
  smoothie : 4000
}

객체 cafe 에서 값을 나타내는 제목(key)은 americano, caffeLatte, smoothie이고 값(value)은 2800, 3400, 4000 이 된다.

프로퍼티(property)는 americano : 2800, caffeLatte : 3400, smoothie : 4000이 각각의 개별적 프로퍼티이고 개별적 프로퍼티가 모여서 cafe객체를 이루어진다.

 

 

-메서드(method)

프로퍼티의 값에 함수(function)를 가지게 되면 메서드(method)라고 부른다. 메서드(method)는 객체의 행동을 담당한다.

let cafe = {
  americano : 2800,
  caffeLatte : 3400,
  smoothie : 4000,
  sum : function(){
    return this.americano + this.smoothie;
  },
}
console.log(cafe.sum());

console.log(cafe.sum())

sum은 메서드(method)를 가진 프로퍼티(property)이다. sum은 객체 cafe에 있는 americano의 값(value)과 smoothie의 값(value)을 더하고 더한 값을 출력하는 행동을 담당한다.

여기서, this는 cafe 내부에 있는 americano와 smoothie를 가리킨다. 만약 this를 사용하지 않으면 americano 와 smoothie는 찾을 수 없어서 에러가 발생한다.

 

 

-객체의 생성 방법

1. 리터럴 표기 방법

let obj1 = {
  'property1' : 'value1',
  'property2' : 'value2',
  'property3' : 'value3',
  1 : 'value4',
}
console.log(obj1);
// {1: "value4", property1: "value1", property2: "value2", property3: "value3"} 출력

console.log(obj1.property2);
// value2 출력

console.log(obj1[1]);
// value4 출력

리터럴 방식이 가장 기본적인 객체 생성 방법이고 값의 제목(key)과 값(value) 사이에는 " : "으로 표시하고 프로퍼티(property)와 프로퍼티(property) 사이에는 " , " 로 구분 지어 준다. 마지막 프로퍼티(property)에는 " , "가 필요 없지만 붙여주는 습관을 가지는 게 좋다고 한다. 

 

console.log(obj1)

단순히 obj1을 호출할 경우 객체 key와 value를 모두 출력한다.

 

console.log(obj1.property2)

특정 객체 값을 출력하기 위해서는 "객체 이름. key"를 사용하면 된다.

만약, key값이 숫자 일 경우에는 "객체 이름. key" 이렇게 사용할 수 없다.

 

console.log(obj1 [1])

obj1객체에 4번째 key값은 숫자이다. 숫자일 경우 "객체 이름[key값]" 이렇게 사용해야 한다.

마치 배열처럼

 

2. 객체 생성

let obj2 = {}

obj2[1] = 'value1';
obj2[2] = 'value2';
obj2[3] = 'value3';
obj2['string'] = 'value4';

console.log(obj2);
// {1: "value1", 2: "value2", 3: "value3", string: "value4"} 출력

console.log(obj2[1]);
// value1 출력

console.log(obj2['string']);
// value4 출력

obj2 [1] = 'value1'

obj2 [2] = 'value2'

obj2 [3] = 'value3'

obj2 ['string'] = 'value4'

obj2의 key값을 "[]" 감싸서 객체에 넣을 수 있다.

"[]"에 key값 1을 넣고 value값으로 'value1'를 넣는다. 이런 식으로 다른 key와 value값도 obj2에 넣는다.

 

console.log(obj2)

obj2객체 전체 값을 출력한다.

 

console.log(obj2 [1])

key값이 숫자라서 "객체 이름[key값]"을 사용해서 출력한다.

 

console.log(obj2 ['string'])

"객체 이름[key값]"에 key값이 문자열일 때도 사용 가능하다.

 

3. 객체 생성

let obj3 = {};

obj3.property1 = 'value1';
obj3[2] = 'value2';

console.log(obj3);
// {2: "value2", property1: "value1"} 출력

obj3.property1 = 'value1'

obj3 [2] = 'value2'

obj2에 값을 넣으려면 "."을 사용하여 값을 담을 수 있다.

"."찍고 key값 property1을 적고 value값으로 'value1'를 넣는다. 이런 식으로 다른 key와 value값도 obj3에 넣는다.

여기도 마찬가지로 key값에 숫자를 넣으려면 "[]"를 사용해야 한다.

 

숫자는 "[]" 사용 , 문자열은 "[]", "." 사용

 

4. 생성자 함수를 사용한 방법

new를 사용하여 객체를 생성하고 초기화시킬 수 있다.

 

 

-프로퍼티(property) 사용

let cafe = {
  americano : 2800,
  caffeLatte : 3400,
  smoothie : 4000,
  sum : function(){
    return this.americano + this.caffeLatte; 
  },
}

console.log(cafe.sum());
// 6200 출력

console.log(cafe.americano);
// 2800 출력

console.log(cafe.caffeLatte);
// 3400 출력

console.log(cafe.americano)

console.log(cafe.caffeLatte)

프로퍼티(property) 사용은 객체 이름(cafe). 사용하고 싶은 프로퍼티 제목(americano); 을 하면 해당 값(value)이 나온다.

 

console.log(cafe.sum())

메서드(method) 사용은 객체 이름(cafe). 메서드 제목(sum)()에 괄호를 붙여준다.

 

 

-프로퍼티(property) 삭제

let cafe = {
  americano : 2800,
  caffeLatte : 3400,
  smoothie : 4000
}

delete cafe.smoothie;

console.log(cafe.smoothie);
// undefined 출력

delete cafe.smoothie

프로퍼티를 삭제하려면 delete 객체 이름(cafe). 삭제하고 싶은 프로퍼티 제목(smoothie);  을 하면 해당 프로퍼티(property)는 삭제된다.