[javascript 언어공부] 객체(3)

이번에는 객체라는 값에 담길 수 있는 값이 무엇인가에 대해 살펴보자.

객체를 먼저 만들어보자.

객체 안의 list 라는 key 값을 만든다. 그리고 그 안에 들어가는 value는 다시 객체가 될 수 있다. 

var grades = {

'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}

}

그리고 grade라는 객체에 list라는 객체에 estelar라는 키 값을 가진 값을 가져오려면

grades['list']['estelar']

다음과 같이 호출할 수 있다.

또 value값 안에는 함수도 들어갈 수 있다.

var grades = {

'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}

'show': function (){

alert('hello world');

}

}

그리고 이 함수에 접근하려면

grades['show']라고 접근할 수 있을 것이며, 이 값은 함수이기 떄문에, 

함수를 호출하려면 

grades['show'](); 다음과 같이 호출할 수 있게 되는 것이다. 

이처럼 객체에는 함수도 저장될 수 있으며, 왜냐면 자바스크립트에서 함수는 일종의 값이고, 변수에 저장될 수 있기 때문에

값으로서의 함수는 객체 안에 저장될 수 있는 것이다.

또 하나 이야기 할 것은 this 라는 키워드이다. 

this라는 변수는, 자바스크립트에 정해져있는 변수로 

이 함수가 속해있는 객체를 가리키는 변수이다. 

var grades = {

'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}

'show': function (){

alert(this);

}

}

이 맥락에서는 이 function을 소유하고 있는 객체를 가리키는 변수로 grades를 담고 있다.

var grades = {

'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}

'show': function (){

console(this.list);

}

}

다음과 같이 this.list 값은 

grades['list'] 와 같은 말이되고, 

개발자도구에서 실행하면 list objct가 출력된다.

즉 우리가 show라는 함수를 출력하면, list 안의 값들을 화면으로 출력할 수 있게 된다.

그렇다면 

var grades = {

'list' : {'estelar':'10','yesri':'6','hongjoo':'80'}

'show':function (){

for(var name in this.list){

console.log(name, this.list[name])'

//콤마를 통해서 값을 주게되면, 콤마를 통해서 여러개의 값을 화면에 출력할 수 있게 된다.

}

}

}

이후 grades.show(); 를 통해 객체에 소속돼있는 함수를 호출할 수 있다.

이 맥락에서, grades라는 객체는 list라는 데이터와 show라는 함수를 그룹핑한 그릇이라고 할 수 있다. 

list

show

여기 있는 list와 show는 서로 관련성 있는 것들이 그룹핑 할 수 있다..

이러한 것을 객체지향 프로그래밍이라고 한다.

서로 연관돼있는 데이터와 연관돼있는 처리를 

하나의 그릇 안에 모아서 그룹핑 해 놓은 프로그래밍 스타일 기법이 객체지향 프로그래밍이라고 한다.