스노우보드 참 좋아하는데 맨날 키보드 앞에만 있네

[JavaScript] 객체(Object) 본문

개발/Javascript

[JavaScript] 객체(Object)

워너-비 2017. 10. 31. 16:25

<!-- 본 포스팅은 개인공부를 위한 용도로 잘못된 정보가 있을 수 있습니다. 오류 발견시 댓글 환영합니다. -->


객체 (Object)



오늘은 객체에 대해 공부해보도록 하자.

자바스크립트의 거의 모든 것은 객체이다. 기본 데이터 타입인 boolean, number, string, null, undefined를 제외하고 말이다.

객체는 배열과 상당히 유사하다.


개요

자바스크립트의 기본 자료형은 숫자, 문자열, 불, 객체, 함수, undefined이다.


그러면 배열의 자료형은 무엇일까?

1
alert(typeof ([]));



응~ 오브젝트야~


배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 비슷하다.

차이가 있다면 배열은 요소 접근 시 인덱스를 사용하지만, 객체는 키를 사용한다는 점이다.


객체를 생성한 후 콘솔창에 출력한다.


1
2
3
4
5
6
7
8
var product = {
  제품명 : '7D 건조 망고',
  유형 : '당절임',
  성분 : '망고, 설탕, 메타중아호아산나트륨, 치자황색소',
  원산지 : '필리핀'
};
 
console.log(product);



Console 창 결과

[object Object] {
  성분: "망고, 설탕, 메타중아호아산나트륨, 치자황색소",
  원산지: "필리핀",
  유형: "당절임",

  제품명: "7D 건조 망고" 


객체의 키를 배열의 인덱스로, 객체의 속성을 배열의 요소와 비교할 수 있다.


키 

속성 

 제품명

7D 건조 망고 

 유형

당절임 

 성분

망고, 설탕, 메타중아호아산나트륨, 치자황색소 

 원산지

필리핀 



객체의 요소에 접근하는 방법도 배열과 비슷하다.

객체 뒤에 대괄호'[]'나 온점'.'을 사용하고 키를 표시하여 객체의 요소에 접근할 수 있다.


객체의 요소 접근

product['제품명']     :     '7D 건조 망고'

product['유형']        :     '당절임' 

product.성분            :     '망고, 설탕, 메타중아호아산나트륨, 치자황색소'

product.원산지        :     '필리핀'


식별자가 아닌 문자를 키로 정의했을 때는 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.

ex) 'with ~!@#$%^&*()_+'



속성과 메서드

배열 내부의 값을 요소(element)라 한다. 반면 객체 내부의 값은 속성(property)이라고 한다.

속성은 아래와 같이 모든 형태의 자료형을 가질 수 있다.

1
2
3
4
5
6
7
8
9
 
var object = {
number : 273,
string : 'WannaBe',
boolean : true,
array : [1, 2, 3, 4],
method : function(){
}
};




this 키워드


메서드 내의 속성을 출력할 때, 자신의 속성을 분명하게 표시해야 한다.

이 때 this 키워드를 사용한다.


1
2
3
4
5
6
7
8
9
10
// 변수를 선언합니다.
var person = {
name : '워너비',
eat : function (food) {
alert(this.name + '가 ' + food + '을/를 먹습니다.');
}
};
 
// 메서드를 호출합니다.
person.eat('밥');


결과는 아래와 같다.


자바스크립트는 c++, java와 같은 프로그래밍 언어처럼 객체 내부에서 this 키워드를 생략할 수 없다.

객체 내부에서 객체의 변수에 접근하려면 반드시 this 키워드를 사용해야만 한다.



객체와 반복문

생성한 객체를 출력하기 위해서는 반복문을 이용한다.

객체의 모든 속성을 출력하기 위해서 for in 을 활용하자


for문 안에 key값은 배열(key : 인덱스)과 달리 키를 전달한다는 점을 꼭 알아야한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var product = {
  name: 'Microsoft Visual Studio 2015 Ultimate',
  price : '15,000,000원',
  language : '한국어',
  supportOS : 'Win 32/64',
  subscription : true
};
 
var output = '';
for(var key in product){
  output += '*' + key + ': ' + product[key] + '\n';
}
alert(output);





객체 관련 키워드 in, with

in 키워드

in 키워드를 사용하면 해당 키가 객체 안에 있는지 확인할 수 있다. 유무에 따라 true/false를 반환한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
var output = '';
var student = {
  이름 : '워너비',
  국어 : 92,
  수학 : 100,
  영어 : 80,
  과학 : 88
};
 
output += "'이름' in student : " + ('이름' in student) + '\n';
output += "'성별' in student : " + ('성별' in student);
 
alert(output);




이름 속성이 존재하므로 true를 출력하고, 성별 속성이 존재하지 않으므로 false를 출력한다.



with 키워드

with 키워드는 복잡하게 사용해야 하는 코드를 짧게 줄여준다.


객체의 속성을 출력할 때, 아래와 같이 식별자 student를 여러번 사용하면 상당히 불편하다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var student = {
  이름 : '워너비',
  국어 : 92,
  수학 : 100,
  영어 : 80,
  과학 : 88
};
 
var output = '';
output += '이름 : ' + student.이름 + '\n';
output += '국어 : ' + student.국어 + '\n';
output += '수학 : ' + student.수학 + '\n';
output += '영어 : ' + student.영어 + '\n';
output += '과학 : ' + student.과학 + '\n';
output += '총점 : ' + (student.국어 + student.수학 + student.영어 + student.과학);
 
alert(output);



이때, with 키워드를 아래처럼 사용하여 객체를 명시할 필요 없이 속성을 쉽게 사용할 수 있다.

 with(<객체>) {

<코드>

 } 


with 키워드를 사용하여 객체를 출력하면 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var student = {
  이름 : '워너비',
  국어 : 92,
  수학 : 100,
  영어 : 80,
  과학 : 88
};
 
var output = '';
with (student) {}
output += '이름 : ' + 이름 + '\n';
output += '국어 : ' + 국어 + '\n';
output += '수학 : ' + 수학 + '\n';
output += '영어 : ' + 영어 + '\n';
output += '과학 : ' + 과학 + '\n';
output += '총점 : ' + (국어 + 수학 + 영어 + 과학);
}
 
alert(output);





with 키워드와 객체의 충돌

with 키워드를 사용하는 객체의 속성 이름과 외부 변수의 이름이 같으면 충돌이 발생한다. 이 경우 자바스크립트는 객체의 속성을 우선시 한다

아래의 소스코드를 보면 객체 student 내부에서 정의된 속성 output이 전역변수 output과 이름이 중복된 것을 볼 수 있다.


충돌 발생으로 인해alert 창에 아무것도 출력되지 않는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var student = {
  이름 : '워너비',
  국어 : 92,
  수학 : 100,
  영어 : 80,
  과학 : 88,
  output : '중복된 변수 이름'
};
 
var output = '';
with (student) {}
output += '이름 : ' + 이름 + '\n';
output += '국어 : ' + 국어 + '\n';
output += '수학 : ' + 수학 + '\n';
output += '영어 : ' + 영어 + '\n';
output += '과학 : ' + 과학 + '\n';
output += '총점 : ' + (국어 + 수학 + 영어 + 과학);
}
 
alert(output);




따라서 with 키워드 내부에 window 객체의 output 변수를 사용한다고 지정해주어서 객체 충돌을 방지해야 한다.


window 객체


window 객체는 웹 브라우저에서 동작하는 자바스크립트의 최상위 객체로 웹 브라우저에서 동작하는 자바스크립트의 모든 변수와 함수는 window 객체의 속성과 메서드이다. 출력 함수인 alert() 도 window.alert() 형태로 사용할 수 있다.

window 객체에 대한 자세한 내용은 이후 포스팅에서 다루도록 하겠다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var student = {
  이름 : '워너비',
  국어 : 92,
  수학 : 100,
  영어 : 80,
  과학 : 88,
  output : '중복된 변수 이름'
};
 
var output = '';
with (student) {
window.output += '이름 : ' + 이름 + '\n';
window.output += '국어 : ' + 국어 + '\n';
window.output += '수학 : ' + 수학 + '\n';
window.output += '영어 : ' + 영어 + '\n';
window.output += '과학 : ' + 과학 + '\n';
window.output += '총점 : ' + (국어 + 수학 + 영어 + 과학);
}
 
alert(output);




객체의 속성 추가와 제거

객체를 생성한 이후 속성을 추가하거나 제거할 수 있는데, 이를 '동적으로 속성을 추가한다' 혹은 '...제거한다' 라고 한다.


속성 추가

아래 소스코드처럼 student 객체를 선언한 후 다양한 속성과 메서드 toString 을 추가할 수 있다.


속성 제거

동적으로 객체의 속성을 제거하기 위해 delete 키워드를 사용한다.

아래처럼 'delete (객체명.속성명)' 형식으로 사용할 수 있으며, 괄호는 사용해도 되고 안해도 된다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var student = {};
 
// 객체에 속성을 추가
student.이름 = '워너비';
student.취미 = '스케이트보드';
student.특기 = '프로그래밍';
student.장래희망 = '재벌';
 
// 객체에 toString 메서드 추가
student.toString = function(){
  var output = '';
  for(var key in this) {
    if(key != 'toString'){
      output += key + '\t' + this[key] + '\n';
    }
  }
  return output;
};
 
// 출력
alert(student.toString());
 
// 속성 제거
delete (student.장래희망);
// delete student.장래희망;

// toString() 메서드를 호출하지 않고 사용한다.
alert(student);



위 코드를 실행하면, 아래와 같이 순서대로 alert 창을 볼 수 있다.



객체와 배열을 사용한 데이터 관리

배열에 객체를 넣어 데이터를 관리하는 방법에 대해 알아보자

아래 소스코드는 학생 객체의 성적 속성을 저장한 것을 나타내었다.


배열의 push() 메서드를 이용하여 배열에 요소를 넣을 수 있다.


1
2
3
4
var students = [];
 
students.push({ 이름 : '박효신', 국어 : 90, 수학 : 99, 영어 : 75, 과학 : 90 });
students.push({ 이름 : '박정현', 국어 : 88, 수학 : 98, 영어 : 85, 과학 : 100 });




객체 각각에 getSum(), getAverage() 메서드를 추가한다.

반복문을 통해 배열 students 안의 모든 객체는 이 두 메서드를 갖게 된다.


1
2
3
4
5
6
7
8
9
10
// 메서드 추가
for(var i in students){
  students[i].getSum = function(){
    return this.국어 + this.수학 + this.영어 + this.과학;
  };
  
  students[i].getAverage = function(){
    return this.getSum() / 4;
  };
}



배열 students의 객체 이름, 총점, 평균을 출력하기 위한 소스코드를 작성한다.

for in 반복문으로 배열 students의 요소에 접근하고 문자열을 만들어 출력한다.

전체 소스코드는 아래와 같다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 학생 정보 배열 생성
var students = [];
students.push({ 이름 : '이하늘', 국어 : 90, 수학 : 92, 영어 : 95, 과학 : 90 });
students.push({ 이름 : '강바다', 국어 : 100, 수학 : 100, 영어 : 100, 과학 : 100 });
students.push({ 이름 : '박땅', 국어 : 10, 수학 : 12, 영어 : 4, 과학 : 7 });
 
// 메서드 추가
for(var i in students){
  students[i].getSum = function(){
    return this.국어 + this.수학 + this.영어 + this.과학;
  };
  
  students[i].getAverage = function(){
    return this.getSum() / 4;
  };
}
 
// 출력
var output = '이름\t총점\t평균\n';
for(var i in students){
  with (students[i]) {
    output += 이름 + '\t' + getSum() + '\t' + getAverage() + '\n';
  }
}
alert(output);



출력결과



함수를 사용한 객체 생성

객체를 개별적으로 생성할 때, 아래의 소스코드처럼 다른 형태의 객체를 배열 안에 넣을 수 있는 장점이 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 학생 정보 배열 생성
var students = [];
 
students.push({
  이름 : '이하늘', 국어 : 90,
  수학 : 92, 영어 : 95,
  과학 : 90, 장래희망 : '회사원'
});
 
students.push({
  이름 : '강바다', 국어 : 100,
  수학 : 100, 영어 : 100,
  과학 : 100, 특기 : '시험보기'
});
 
students.push({
  이름 : '박땅', 국어 : 10,
  수학 : 12, 영어 : 4,
  과학 : 7, 부모님자산 : '50억'
});
 



그러나 비효율적이다.

매개변수를 기반으로 객체를 만든 후 객체를 리턴하는 방식으로 객체를 생성하는 함수를 정의할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function makeStudent(name, korean, math, english, science) {
  var willReturn = {
    이름 : name, 국어 : korean,
    수학 : math, 영어 : english,
    과학 : science,
    
    getSum : function(){
      return this.국어 + this.수학 + this.영어 + this.과학;
    },
    
    getAverage : function(){
      return this.getSum()/4;
    },
    
    toString : function(){
    return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
  }
  };
  return willReturn;
}
 
// 학생 정보 배열을 만든다
var students = [];
students.push(makeStudent('호식이', 90, 80, 70, 60));
students.push(makeStudent('두마리', 22, 2, 22, 2));
students.push(makeStudent('치킨이', 100, 100, 100, 100));
 
// 출력
var output = '이름\t총점\t평균\n';
for(var i in students){
  output += students[i].toString()+ '\n';
}
alert(output);




'개발 > Javascript' 카테고리의 다른 글

[JavaScript / ECMAScript6] 전개 연산자(바벨)를 사용한 배열 복사와 병합  (0) 2017.10.31
[JavaScript] 참조 복사와 값 복사 (얕은 복사와 깊은 복사)  (1) 2017.10.31
[JavaScript] 클로저 (closure)  (0) 2017.10.31
[JavaScript] var 와 let 그리고 const  (0) 2017.10.31
[JavaScript] 출력  (0) 2017.10.30
공유하기 링크
'개발/Javascript' Related Articles more
Comments