[JS] 객체

객체

문장 내에서 동사의 행위가 미치는 대상입니다. 객체 또는 오브젝트는 클래스에서 정의한 것을 토대로 메모리에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료구조, 함수 또는 메소드가 될 수 있다.

▶메모리에 등록된 데이터 (함수, 메소드, 자료구조)
▶객체는 속성과 기능을 가지고 있다.
▶객체를 대입하는 변수는 메모리에 올라간 객체의 주소를 참조하고 있다.
▶객체를 대입하는 변수는 참조변수라고 한다.

참조변수

메모리에 등록된 객체의 주소 값을 참조하는 변수로 기본 자료형은 참조 변수라고 하지 않습니다. 객체는 어느 변수에 대입되더라도 생성된 메모리에 참조하게 됩니다.

// 기본 자료형
    var n1 = 100;
    var n2 = n1;

// 객체 참조
    var arr1 = ['홍길동'];
    var arr2 = arr1;

객체 선언

• {}의 기호로 객체를 선언 할 수 있다.
• 객체는 키와 값으로 이루어져 있다.
• 값에는 모든 데이터타입(객체, 함수 포함)을 담을 수 있다.
• 키는 객체에 담긴 값의 주소이다.
• 키는 주로 문자열로 지정을 한다.
• 값에 지정된 함수를 메소드라고 한다.

// 객체 구문
    var 변수명 = {
	'키1' : 값1,
	'키2' : 값2,
	'키3' : 값3
    }

예시

var obj = {};
var obj2 = new Object();

console.log(obj, 'obj');
console.log(obj2, 'obj2');

/*
객체에 속성 및 메서드 저장하기
- 함수는 메서드
- 함수 이외의  데이타는 속성 혹은 객체
*/
var obj3 = {
    name : '홍길동', //속성
    getName : function(){ //메서드
    				console.log('메서드 실행');
			}
}

var obj4 = {};
//아래의 방법으로 객체.속성 혹은 객체.메서드     접근 할 경우에는
//객체가 미리 선언이 되어 있어야 한다.
obj4.name = '홍길동'; //속성
obj4.getName = function(){ 
            		//메서드
        	}

/*
객체의 속성 및 메서드 접근
*/
//속성 접근하기
console.log(obj3.name, 'obj3.name');
//메서드 실행하기
console.log(obj3.getName(), 'obj3.getName()');

객체 활용

• 객체를 선언하고 그 객체의 속성 접근 및 메소드 실행을 할 수 있다.
• 객체의 메소드 내부에서 나 자신의 객체를 가리킬 때 this라는 키워드를 쓴다.

※ 체이닝기법: '.' 를 찍어 그 당시의 객체의 속성이나 메소드를 활용하는 방법

 var obj = {
    name : '홍길동', //속성
    getName : function(){ //메서드
                 console.log(this.name, '메서드 내부에서 this 키워드 활용');
                 return this.name ; //나 자신의 속성 name값을 리턴하기
              },
    arr : ['홍길동','이순신', '유관순'],
    subObj : { //객체내부에 객체 생성
                 n1 : 10,
                 n2 : 20
	     }
    }

예시

1. 객체 선언된 객체의 속성 및 메소드 실행

console.log(obj.name, '객체의 name이라는 속성에 접근하기');
var getName = obj.getName();
console.log(getName, '메서드 호출 후 return 결과값');

2. 체이닝 기법으로 속성 및 메소드 접근하기

//체이닝기법
// <--- 여기까지는 배열에 접근하게된다.
obj.arr; 
// <-- obj.arr 까지는 배열이다. 그러므로 push메서드 활용이 가능하다.
obj.arr.push('둘리'); 
console.log(obj.arr, '배열에 값 삽입이 되었는지 확인');
console.log(obj.subObj.n1);

var car = {
color : '빨강', //자동차 색상
model : 'k7', //자동차 모델
moveHistory : [], //이동한 거리 내역
move : function(km){ //이동 시키기
        console.log(this.color + '색상의' + this.model + '가' + km + 'km 이동 합니다.');
        //move 메서드 실행할때마다  moveHistory 배열에 값 저장하기
       	this.moveHistory.push(km);
      }
    };

car.move(100);
car.move(50);
car.move(200);
//이동한 내역 
console.log(car.moveHistory);