자바스크립트 기본 - 객체

객체 - https://opentutorials.org/course/743/6491

객체(Object)는 배열과 유사한 역할을 한다. 객체와 배열의 눈에 보이는 차이점은 색인의 값이다.

배열의 경우 아래와 같이 자동으로 색인의 순서 및 내용을 정해준다.

a	b	c
0	1	2

하지만 객체는 아래와 같이 색인의 값을 우리가 원하는 값으로 지정할 수 있다.

a	b	c
"first"	"second"	"third"

a. 객체의 생성

객체는 중괄호로 만들어야 한다.

아래는 하나의 객체를 만들어서 변수에 넣은 것이다.

객체에서는 색인을 key, 원소를 value로 부른다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

그림으로 표현하면 아래와 같이 key는 문자들로 만들어져 있고 value들은 숫자로 되어있다. 

key와 value는 어떠한 형식으로도 만들 수 있다. 

10	6	80
egoing	k8805	sorialgi

객체는 아래와 같이 다른방법으로도 생성 할 수 있다.

var grades = {};   //var grades = new Object(); 을 사용해도 됨

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

grades['egoing']을 부르면 10을 반환하는데 grades.egoing을 불러도 10을 반환한다.

b. 객체의 사용

객체를 생성하면 배열과 같이 순서가 있지 않다.

배열은 순서가 있기 때문에 배열.length를 이용하여 색인의 값으로 값을 가져올 수 있다.

그래서 객체는 아래의 for문의 문법으로 key, value값을 가져온다.

아래의 for문은 for-in문 이라고 부르며 객체에서만 사용하는 것이 아닌 배열에서도 사용할 수 있다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};

for(var name in grades) {   //grades에 있는 key값 egoing, k8805, sorialgi들을 name이라는 변수가 가지고 있다.

    document.write("key : "+name+" name: "+grades[name]+"<br />"); //key값들은 가지고 있기 때문에 grades[key]를 통해서 value값을 확인 할 수 있다.

}

결과값

key : egoing name: 10

key : k8805 name: 6

key : sorialgi name: 80

b. 객체의 중첩

객체안에는 객체를 넣을수도 있고, 함수를 넣을 수도 있다.

아래는 객체안에 객체를 넣은 상태이다.

//grades라는 변수에 key는 list, value값은 {'egoing': 10, 'k8805': 6, 'sorialgi': 80} 으로 객체를 넣는다

var grades = {

    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80}

}

alert(grades['list']['egoing']); // egoing의 value에 접근하기위한 문법이다

결과값 : 10

---

아래는 객체안에 객체를 넣은 상태에서 객체안에 함수를 넣은 상태이다.

var grades = {

    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

   

    'show' : function(){ // grades라는 변수에 key값은 show, value는 alert('Hello world')으로 객체를 넣는다

           alert('Hello world');

        }

    }

alert(grades['show']()); // show의 value값인 alert('Hello world')에 접근하기 위해서는 show를 부르는데 함수이기 때문에 ['show']() 이렇게 괄호를 붙여서 호출한다.

결과값 : Hello world

---

this : 자바스크립트에 정해져 있는 변수, 함수가 속해있는 객체를 가르키는 변수. 

var grades = {

'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

'show' : function(){

for(var name in this.list){  //this.list는 grades객체의 list에 접근하는 문법, name에 list의 key를 넣어줌

document.write(name+':'+this.list[name]+"<br />"); //this.list[name]은 grades.list['egoing'], grades.list['k8805'], grades.list['sorialgi']을 반환한다.

}

}

};

grades.show(); //객체에 소속되어 있는 함수를 호출한다. show를 호출하기 때문에 show함수안에 있는 for문을 통하여 list에 접근하여 list의 value를 보여준다.

결과값

egoing:10

k8805:6

sorialgi:80

그림으로 표현한 객체

grades객체

list

show