자바스크립트 기본 - 객체
객체 - 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 |