[javascript] 5. 자바스크립트 객체 란?

[javascript] 5. 자바스크립트 객체 란?

* 목차 *

1. 객체 란?

2. 객체의 필요성

3. 객체의 구조

4. 객체의 프로퍼티(Property)란?

5. 객체의 메소드 란?

6. 프로퍼티 및 메소드 사용법

7. 객체 메소드내에서 프로퍼티 사용법

8. 객체에 프로퍼티 및 메소드 추가/삭제

9. 객체와 관련있는 키워드

10. 객체의 활용 방법

1. 객체 란?

  - 여러 정보{property)와 정보를 활용하는 메소드 를 합쳐 놓은 덩어리 라고 할 수 있습니다.

  - C++의 Class 와 비슷합니다.

  - C++과 java 스크립트 대응 표 

C++	javascript
class	객체
멤버 변수	프로퍼티(한글로 "속성")
멤버 함수	메소드

  - C++의 클래스와 javascript의 객체와의 큰 차이점

    1) C++의 Class 는 자료형으로 사용 할수 있습니다. 그러나 javascript의 객체는 자료형으로 사용 할 수 없습니다.

       왜냐하면 javascript는 자료형은 var라는 자료 형으로 모든 자료형을 다 받습니다.

      * 자료형이란? int, char, double 과 같은 것입니다.

2. 객체의 필요성

  - 프로그램에서 객체를 사용하는 이유는 크게 2가지가 있습니다.

    1) 관련있는 정보의 연결을 위해서 사용

    2) 코드의 유지 보수가 편합니다.

       왜냐하면 관련된 모든 정보가 객체에 모두 존재하기 때문입니다.

   * 객체와 C언어의 비교 ?

     - C언어에서는 살작 부족한 객체의 개념인 구조체가 존재 합니다.하지만, 메소드가 존재 하지 않아 구조체의 정보를 활용 할수 가 없습니다. 뭐 구조체 변수에 함수 포인터를 만들어서 억지로 객체 처럼 마들어서 함수를 맵핑 시켜 구조체 처럼 사용 할수 있습니다. 

3. 객체의 구조

var test_object = {};

  - 객체는 식별자에 {}를 할당 하여 만들어집니다.

  - 객체는 프로퍼티와 , 메소드로 이루어 져있습니다. 

  - 객체에 정의된 "식별자"에 어떤 것을 할당 하느냐에 따라서 프로퍼티가 되고 메소드가 됩니다.

  - 프로퍼티 및 메소드 할당 방법

    <식별자> : "자료형" 

    <식별자> : function () {}

var test_object = {

attribute1 : 100, // 프로퍼티

attribute2 : 'hello', // 프로퍼티

getAttribute2 : function () { // 메소드

return this.attribute2;

}

}

4. 객체의 프로퍼티(Property) 이란?

  - 객체의 정의된 "식별자"에 함수를 제외한 자료형 과 배열 을 할당 하면 "식별자"를 프로퍼티이라고 부릅니다.

  * 자료형의 종류 : 숫자, 문자열, boolean, 객체, 함수, undefined

  - 객체의 프로퍼티 생성 방법

    <식별자> : <값> 또는 <배열>

    * <식별자> 명명 규칙 : 문자 열일 경우 ' '로 감싸주어야 합니다.

var test_object = {

number : 1,

string : "test",

boolean : true,

array : [52,1,1,1],

'long string' : "longlong string",

} 

  

5. 객체의 메소드 란?

  - 객체의 정의된<식별자>(아래 코드에서 method1 해당) 에 함수를 할당 하면 해당<식별자>를 메소드라고 부릅니다.

  - 객체의 메소드 생성 방법

    <식별자> : 익명 함수

var test_object = {

method1 : function(){

console.log('test');

}

}

6. 프로퍼티 및 메소드 사용법 

  1) 프로퍼티 사용법

    (1) 일반 프로터피 명 사용법 

      - "객체명.프로터피명" 으로사용이 가능

alert(test_object.attribute1);

    (2) 문자열 프로퍼티명 사용법

      - "객채명['프로퍼티명']" 으로 사용 가능 

alert(test_object['long string']);

  2) 메소드 호출 사용법

   (1) 메소스 호출 사용법

      - "객체명.메소드명()" 으로 사용 가능

alert(test_object.getAttribute2());

7. 객체 메소드내에서 프로퍼티 사용법

  - 객체의 메소드 내에서 프로퍼티을 사용 하려면 2가지 방법이 존재 합니다. 

  - this를 이용한 프로퍼티 접근, this는 현재 객체를 의미합니다. 

  1) 일반 프로퍼티명 사용

    "this.프로퍼티명" 으로사용 됩니다.

  2) 문자열 프로퍼티명 사용 

    "this['프로퍼티명']" 으로사용 하면 됩니다.

getAttribute2 : function () {

return this.attribute2; // 일반 프로퍼티명 사용

},

getlongAttribute : function () {

return this['long string']; // 문자열 프로퍼티명 사용

}

8. 객체에 프로퍼티 및 메소드 추가/삭제

  1) 프로퍼터 추가

    - 객체.식별자 = "값"; 의 형태를 가집니다.

var add_object = {};

add_object.addattribute = 'test1';

  2) 메소드 추가

    - 객체.식별자 = function() { }; 의 형태를 가집니다.

var add_object = {};

add_object.addfunction = function () {

alert('function test');

}

  3) 프로퍼티 및 메소드 삭제

    - 다음 처럼 사용시 프로퍼티 및 메소드 삭제가 가능 합니다.

    - 메소드 또한 객체에서는 식별자에 함수를 할당 하는것 이기때문에 가능한 것입니다.

delete(add_object.addattribute);

9. 객체와 관련있는 키워드

  1) in 키워드

    (1) 정의 

      - 객체에서 찾으려는 프로퍼티가 존재하는지를 확인 할때 사용합니다.

    (2) 형식

      - ('프로퍼티명' in 객체)

      - 리턴값은 boolean 형태 입니다.

    (3) 사용법 

var add_object = {};

add_object.addattribute = 'test1';

add_object.addfunction = function () {

alert('function test');

};

alert("객체에 addattribute 프로퍼티이 존재하나요? " + ('addattribute' in add_object));

// 응닫 값 : 객체에 addattribute 프로퍼티이 존재하나요? true

alert("객체에 addattribute1 프로퍼티이 존재하나요? " + ('addattribute1' in add_object));

// 응답 값 : 객체에 addattribute1 프로퍼티이 존재하나요? false

  2) with 키워드

    (1) 정의 

      - 객체를 생략 하고 코딩을 하려고 할때 사용 합니다.

    (2) 형식

      with (객체) {

        프로퍼티 및 메소드를 "객체.프로퍼티명 또는 객체.메소드명()" 으로 사용 하는 것이 아닌

        "프로퍼티명 또는 메소드명()"으로 바로 사용

      }

    (3) 사용법 

var add_object = {};

add_object.addattribute = 'test1';

add_object.addfunction = function () {

alert('function test');

};

with (add_object) {

alert('addatribute는 ' + addattribute);

addfunction();

}

10. 객체의 활용 방법

  1) for in을 이용한 프로퍼티 값 출력

var for_object = {

test1 : 1,

test2 : 2,

test3 : 3,

test4 : 4,

test5 : 5

};

for(key in for_object) {

console.log("key : " + key + " value : " + for_object[key]);

}

     - 출력 값 

key : test1 value : 1

key : test2 value : 2

key : test3 value : 3

key : test4 value : 4

key : test5 value : 5

  2) 배열을 이용한 객체 활용

    - 배열에는 객체는 담을 수 있기 때문에 아래와 같이 객체를 배열에 담아 사용 할 수 있습니다.

    - 배열명.push를 사용하여 객체 추가 가능 합니다.

var object_array = []; // 배열 생성

object_array.push({친구1:"철수", 친구2:"영희",친구3:"동수"});

object_array.push({친구1:"땡칠이", 친구2:"맹구",친구3:"희철"});

object_array.push({친구1:"영철", 친구2:"진구",친구3:"철구"});

var output = "내 친구들\n";

for (var i in object_array) {

with (object_array[i]) {

output += "친구1: " + 친구1 + "친구2: " + 친구2 + "친구3 : " + 친구3 + "\n";

}

}

alert(output);

    - 결과

      내 친구들 

      친구1: 철수친구2: 영희친구3 : 동수 

      친구1: 땡칠이친구2: 맹구친구3 : 희철 

      친구1: 영철친구2: 진구친구3 : 철구

  3) 함수를 이용한 객체 생성

    - 동일한 형태의 객체를 매번 만들려고 하면 매우 번거롭고 힘이듭니다.

    - 그렇기 때문에 객체 만드는 부분을 함수화 하여 사용하면 좀더 편합니다.

//객체를 만드는 함수

function makeObject(todolistnum, work1, work2, work3) {

var return_objeect = {

todolist : todolistnum,

work_list1 : work1,

work_list2 : work2,

work_list3 : work3,

toString : function(){

return "리스트" + this.todolist + " 할일1 :" + this.work_list1 + " 할일2 :" +

this.work_list2 + " 할일3 :" + this.work_list3 + "\n";

}

}

return return_objeect;

}

// 객체를 생성하여 배열에 추가 합니다.

var object_array = [];

object_array.push(makeObject("1", "일어나기", "밥먹기", "다시자기"));

object_array.push(makeObject("2", "게임하기", "밥먹기", "다시자기"));

object_array.push(makeObject("2", "놀기", "밥먹기", "다시자기"));

// 생성한 객체의 toString을 수행합니다.

for (var i in object_array) {

document.body.innerHTML += object_array[i].toString() + "</br>";

}

  4) 객체는 매개변수로 전달 하기

    - 일반 적으로 매개 변수로 전달되는 객체를 "옵션 객체"라고 부릅니다.

    - 객체를 매개변수로 달하면 한번에 많은 정보를 깔끔하게 보낼수 있게 때문에  좋습니다

    - 객체 값의 초기화는 꼭 해주어야 합니다.

function test(options) {

// 객체 값 초기화

// 전달 받은 객체의 프로퍼티가 존재 하지 않으면 || 뒤의 값으로 초기화 합니다.

options.value1 = options.value1 || 10,

options.value2 = options.value2 || 20,

options.value3 = options.value3 || 30

alert(options.value1 + "," + options.value2 + "," + options.value3);

}

test({

value1 : 2222,

value3 : 3333

});

<연관된 글>

- [javascript] 1. 자바스크립트 기초 (기본 구조)

- [javascript] 2. 자바스크립트 함수란?

- [javascript] 3. 자바스크립트 내장 함수

- [javascript] 4. 자바스크립트 실행 순서

- [javascript] 5. 자바스크립트 객체 란?

- [javascript] 6. 자바스크립트 값 복사와 참조 복사

- [javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype)