javascript - core - 객체

객체

원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)
0개 이상의 프로퍼티로 구성된 집합

property : key, value로 구성
method : 프로퍼티 값이 함수인 경우

생성방법

1. 객체 리터럴
2. object생성자 함수
3. 생성자 함수
4. object create 메서드
5. class(ES6)

object literal(리터럴 객체)

객체 리터럴 생성

프로퍼티 : 객체의 상태를 나타내는 값(data)으로 키-값 쌍으로 구성

메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior), 객체 안에 정의된 함수

var student = {
    // 프로퍼티
    name : '유관순',
    age : 16,
    
    // 메서드
    getInfo : function() {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
};

프로퍼티를 정의하지 않을 시 빈 객체 생성

var student2 = {};

property

프로퍼티 사용 시 주의사항, 특수한 상황

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

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

method

메소드 : 객체 내부에 정의 된 함수

자바스크립트의 함수는 객체이다.
함수는 값으로 취급할 수 있고 프로퍼티 값으로도 사용할 수 있다.

var dog = {
    name : '뽀삐',
    // 메소드 - 객체 내부에 정의 된 함수
    eat : function(food) {
        console.log(`${this.name}(은)는 ${food}를 맛있게 먹어요.`);
    }
};

//호출하는 방법
dog.eat('고구마');

property-accessor(프로퍼티 접근)방법

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

console.log(dog.name);
dog.eat('고구마');

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

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

console.log(dog['name']);
//console.log(dog[name]); - 프로퍼티 키는 반드시 따옴표로 감싼 문자열을 사용한다.
dog['eat']('고구마');

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

마침표 표기법이 간편하지만 사용할 수 없는 경우
(프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름일 경우)
대괄호 표기법을 사용한다.

마침표 표기법을 사용할 수 없는 경우

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']);

// 프로퍼티 키가 숫자로 이루어진 문자열인 경우 대괄호 표기법에서 따옴표를 생략할 수 있다.
// console.log(obj.0);
// console.log(obj.'0');
console.log(obj[0]);
console.log(obj['0']);

property-change-add-remove(프로퍼티 변경, 추가 삭제)

프로퍼티 변경
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신 된다.

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

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

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

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

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

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

delete dog.something;

ES6

01. property-value-shorthand

프로퍼티 값 단축 구문

var id = 'p-00001';
var price = 30000;

var product = {
    id : id,		//key값 : value값	
    price : price
};

console.log(product);

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름을 때 프로퍼티 키를 생략할 수 있다.

var product2 = { id, price };   // 프로퍼티 키는 변수 이름으로 자동 생성
console.log(product2);

02_computed-property-name(계산된 프로퍼티 이름)

계산된 프로퍼티 이름

ES5에서는 계산 된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 표기법을 사용해야 한다.

var prefix = 'key';
var index = 0;
var obj = {};	// 빈 객체 선언

// 리터럴 외부에서 작성
obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;

console.log(obj);

ES6에서는 객체 리터럴 내부에서도 계산 된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

var obj2 = {
    [`${prefix}-${index++}`] : index,
    [`${prefix}-${index++}`] : index,
    [`${prefix}-${index++}`] : index
};

console.log(obj2);

// 결과값 : { 'key-0':1, key-1':2, key-2':3 }

03_method-shorthand(메서드 단축)

ES5에서 메서드를 정의하려면 프로퍼티의 값으로 함수를 할당한다.

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

dog.eat('고구마');

ES6에서 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

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

dog2.eat('고구마');

additional-operator-and-travesal

in-operator

in 연산자 : 프로퍼티 존재 여부 확인

test프로퍼티는 프로퍼티 값이 undefined일 뿐 프로퍼티는 존재하지만 존재하지 않는다고 판별 될 수 있는 문제가 있다.

var student = {
    name : '유관순',
    age : 16,
    test : undefined
};

console.log(student.name === undefined);        // false - 존재
console.log(student.height === undefined);      // true - 존재하지 않음
console.log(student.test === undefined);

in 연산자로 판단하기

console.log("name" in student);
console.log("height" in student);
console.log("test" in student);		//true

02_for-in(반복문)

for in 반복문 : 객체의 모든 키를 순회

for(var key in student)
for (객체의 key 변수명 in 순회할 대상 리터럴객체)

var student = {
    name : '유관순',
    age : 16,
    getInfo() {
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }
};

console.log(student);

for(var key in student) {
    console.log(`key : ${key}`);                           // 프로퍼티 키 값
    console.log(`student['${key}'] : ${student[key]}`);    // 프로퍼티 키에 해당하는 값
}

프로퍼티의 키 값에 접근할 때 키 값이 변수라면 대괄호 표기법을 사용해야한다.

//console.log(`student['${key}'] : ${student.key}`);
console.log(`student['${key}'] : ${student[key]}`);