Object leteral - 객체, 프로퍼티, 메소드

객체

자바스크립트는 객체 기반 프로그래밍 언어로 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다.

• 객체 :  0개 이상의 프로퍼티로 구성 된 집합이며 
• 프로퍼티:  객체의 상태를 나타내는 키(key)와 값(value)으로 구성된다. 
• 메소드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)으로 프로퍼티 값이 함수일 경우.

 

객체 생성 방법

1. 객체 리터럴

2. Object 생성자 함수

3. 생성자 함수

4. Object.create 메서드

5. Class(ES6)

 

이 중 가장 일반적이고 간단한 방법이 객체 리터럴을 사용하는 방법이다.

-> 중괄호 내 0개 이상의 프로퍼티를 정의한다.

var student = {
	name : '유관순', // key값 : value값
    age : 16,
    getInfor : function(){
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }   // 메소드
};


console.log(typeof student);   // object
console.log(student);		   // { name: '유관순', age: 16, getInfor: [Function: getInfor] }

var student2 = {};  // 프로퍼티를 정의하지 않을 시 빈 객체 생성
console.log(typeof student2);  // objct
console.log(student2);		   // {}

 

프로퍼티 (속성)

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

문자열이므로 따옴표를 사용하지만 식별자 네이밍 규칙에 따르는 경우 사용하지 않아도 되며

식별자 네이밍 규칙을 따르지 않을 때에는 따옴표를 반드시 사용해야 한다. (하지만 규칙을 따를 것을 권장한다.)

 

프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

 

 

var obj = {
    normal : 'normal value',
    '@ s p a c e @' : 'space value',    //특수문자 사용시에는 ''사용 
    '' : '',                            //빈 문자열 키는 오류 발생하지 않지만 권장하지 않음
    0 : 1,                              //숫자 키는 내부적으로 문자열로 변환
    var : 'var',                        //예약어 키는 오류 발생하지 않지만 권장하지 않음
    normal : 'new value'                //이미 존재하는 키를 중복 선언하면 나중에 선언한 프로퍼티로 덮어씀

}

console.log(obj);  //선언하는 순서대로 출력되진 않음. 내부적으로 결정됨.


// 출력 값
{
  '0': 1,
  normal: 'new value',
  '@ s p a c e @': 'space value',
  '': '',
  var: 'var'
}

 

메소드 

객체 내부에 정의된 함수로, 함수는 값으로 취급할 수 있고, 프로퍼티 값으로도 사용할 수 있다.

var dog = {
    name : '뽀삐',
    eat : function(food){
        console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
    }

};

dog.eat('고구마');


// 출력 값
뽀삐(은)는 고구마를 맛있게 먹어요.

 

프로퍼티 접근

1. 마침표 표기법 (dot notation)

console.log(dog.name);    // 뽀삐
dog.eat('고고마');		   // 뽀삐(은)는 고고마를 맛있게 먹어요.​

 

2. 대괄호 표기법 (square bracket notation)

 

- 프로퍼티 키는 반드시 따옴표로 감싼 문자열을 사용한다.

console.log(dog['name']); // 뽀삐
  console.log(dog[name]);  // -> 출력X
dog['eat']('고구마'); // 뽀삐(은)는 고구마를 맛있게 먹어요.

 

 

- 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름일 경우 반드시 대괄호 표기법을 사용한다.

var obj = {
    'dash-key' : 'dash-value',
    0 : 1
};

//console.log(obj.dash-key);
//console.log(obj.'dash-key');
//console.log(obj[dash-key]);
//위의 경우 다 에러 

console.log(obj['dash-key']);    //dash-value

 

- 프로퍼티 키가 숫자로 이루어진 문자열인 경우 대괄호 표기법에서 따옴표를 생략할 수 있다.

//console.log(obj.0);
//console.log(obj.'0');
// 위의 경우 다 에러

console.log(obj[0]);    //1
console.log(obj['0']);  //1

 

프로퍼티 변경, 추가, 삭제

- 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다. 거듭 할당해도 마찬가지임

var dog = {
    name : '뽀삐'
};

dog.name = '두부';       
dog['name'] = '두부';
console.log(dog.name);   //두부

 

- 프로퍼티 동적 추가

존재하지 않는 프로퍼티 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

dog.age = 3;
dog['age'] =3;
console.log(dog);   

// 출력 -> { name: '두부', age: 3 }

 

- 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제하며, 만약 존재하지 않는 프로퍼티를 삭제하면 에러없이 무시된다.

 

delete dog.age;
delete dog['age'];
console.log(dog);

// 출력 -> { name: '두부' }

delete dog.something;   // ->무시됨