[코딩 공부_88] 객체(object), 프로퍼티(property), 메소드(method)

1. 객체(Object) : 여러값을 한번에 저장한 형태를 뜻한다(JS는 모든 것이 다 객체로 이루어져있다)

 

<변수를 사용해 값을 하나씩 저장>

<script>
var channelName = "alpaca coding";
var openYear = "2021";
var isHot = true;
</script>

<한 번에 저장할 때 객체를 사용>

<script>
{
  channelName : "alpaca coding"
  openYear : 2021;
  isHot : true;
}
</script>

 

2. 객체의 구성

 

3. 객체의 표현

<script>
var myChannel = {
	channelName: "alpaca coding",
    openYear: 2021,
    isHot: true,
    complain: null,
    info: {
    	category: "코딩",
        videoCount: 56
        }
}
</script>

- key에 따옴표 생략 가능하다.

- key에 _, $ 문자로 시작하기

- value에는 모든 자료형 추가 기능

- 객체 안에 객체도 삽입가능

 

4. 객체에 접근하기

 - 점 표기법 > .으로 접근

 

- 대괄호 표기법

<script>
myChannel["open year"];
*변수에 담은 값으로도 접근 가능
var data = "open year";
myChannel[data];
</script>

 

- 객체 안에 객체에 접근

<script>
myChannel.info.category;
myChannel.info.[category];
<script>

 

5. 프로퍼티(property) : 객체의 일부로 이름과 값 사이 연결을 의미한다

- 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태이다

** 자바스크립트의 프로퍼티는 undefined나 null을 할당한다고 삭제되지 않는다. 프로퍼티의 삭제는 delete라는 키워드를 사용해야한다

<scirpt>
var foo={}; // foo 객체 생성.
foo.a=1; // . 연산자를 이용하여 a 라는 이름의 프로퍼티를 생성하면서 1이라는 값을 할당.
var sum = foo.a+10; // . 연산자를 이용하여 foo 객체의 a 프로퍼티에 접근하여 값을 활용가능하다.
console.log(sum);
> 11

var foo= new Object();
foo.name='foo';
console.log(foo.name);
> foo

foo.name=null;
console.log(foo.name);
> null

delete foo.name;
console.log(foo.name);
> undefined
</scirpt>

6. 메소드(method) : 객체가 가지고 있는 동작, 객체에 있는 함수

- 함수와 메소드가 서로 일련의 동작을 실행한다는 점에서 동일하기 떄문에 많은 사람들이 헷갈려한다. 하지만 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행하여한다. 즉 그 동작을 수행하는 주체는 객체이다. 그 동작을 수행하기 위해서는 객체에게 그 동작을 수행하라고 지시해야한다. 함수는 그 동작을 수행하기 위해 객체에게 어떤 동작을 수행하라고 명령하지 않아도 된다.

- 메소드는 객체를 움직이는 동작이며 그 동작을 수행하기 위해서 객체의 정보를 담고 있는 프로퍼티를 사용할 수 있다.

<script>
var foo={};
foo.a=1;
foo.b=2;
foo.sum=function() {console.log(foo.a+foo.b);};
foo.sum();
> 3
</script>

 

<<실습>>

    <script>
        var alpaca = {
            name: '박한성',
            getMarried: false,
            money: null,
            habit: 'tennis',
            // console창에서 객체가 최상위에 보임
            favorite: {
                movie : 'between calm and passion',
                person : 'elon musk',
                food : '보쌈'
            },
            "special ability" : "cook"
        };
    
        console.log(alpaca);
        console.log(alpaca.name);
        console.log(alpaca.habit);
    
        // 객체의 value값 수정
        alpaca.habit = "soccer";
        console.log(alpaca.habit);
    
        // 객체에 value 추가하기
        alpack.friend = "koala";
        alpack.iveMoney = 5000;
    
        console.log(alpaca);
    
        // 객체에 value 삭제하기
        delete alpaca.friend;
    </script>