Object literal - ES6 , in 연산자, for in 반복문

프로퍼티 값 단축 구문

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

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

var product = {
    id : id,
    price : price
};

var product2 = { id, price };

// product, product2 둘다 { id: 'p-00001', price: 30000 } 출력됨

 

계산된 프로퍼티 이름

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

obj[key] = value;

var prefix = 'key';
var index = 0;
var obj = {};

obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;

console.log(obj);

// 출력 -> { 'key-0': 1, 'key-1': 2, 'key-2': 3 }

 

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

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

console.log(obj2);

// 출력 -> { 'key-3': 4, 'key-4': 5, 'key-5': 6 }

 

메서드 단축

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

ar 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('고구마');

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

 

---

in 연산자

in 연산자를 통해 프로퍼티 존재 여부를 확인할 수 있다.

프로퍼티 값이 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)     // true - 존재하지 않음

이럴 경우 in 연산자로 판단한다.    

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

 

for in 반복문 

for in 반복문을 이용해 객체의 모든 키를 순회할 수 있다.

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


console.log(student);

// { name: '유관순', age: 16, getInfo: [Function: getInfo] }

 

- 반복할 때마다 프로퍼티 키 값을 준다.

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


// 출력
key : name
student['name'] : 유관순
key : age
student['age'] : 16
key : getInfo
student['getInfo'] : getInfo(){
        return `${this.name}(은)는 ${this.age}세 입니다.`;
    }

- value 값 호출할 때 student.key 형태는 안된다.

key : value 라는 프로퍼티가 있어야 사용 가능, key라는 키값이 있는 것이 아니다.