[JavaScript-53] 객체의 프로퍼티를 간단하게 표기하기

음 일단, 우리가 지금까지 프로퍼티를 만들어오던 방식대로 객체를 하나 만들어 볼게요!

const myCar = {
    brand: 'benz',
    model: 'E220
    };

myCar라는 객체는, 두 개의 프로퍼티를 가지고 있죠?

자 그런데, 최신 버전의 JS에서는, 

객체의 프로퍼티 "값(value)"을 객체 외부에서 선언하고, 객체 내부에선 그걸 가져오기만 하는게 가능해요!

말이 조금 어려워서, 코드로 보여드릴게요!

const brand = 'benz';
const model = 'E220';

const myCar = {
    brand: brand,
    model: model
    };

이렇게 말이죠! brand: brand를 해주게 되면, brand라는 이름의 프로퍼티에 해당하는 value는,

myCar객체 외부에서 선언된 brand변수의 값이 들어오게 되는거죠.

 

자 이렇게, 객체 외부에서 선언한 변수를 프로퍼티 값으로 가져오는게 가능하다는 것을 배워봤는데요,

사실 여기서 조금 더 코드를 축약할 수 있습니다.

 

프로퍼티의 이름과, 프로퍼티 값으로 가져올 변수의 이름이 같다면,

그냥 하나만 써주시면 됩니다. 위의 코드를 수정하면, 

const brand = 'benz';
const model = 'E220';

const myCar = {
    brand,
    model
    };

이렇게 된다는 말이죠!

그럼, brand라는 프로퍼티는 {brand: 'benz'}의 의미구나! 생각할 수 있겠죠?

 

마지막으로, 메소드도 메소드 이름과, 메소드 값에 들어갈 함수의 이름이 같다면, 

바로 함수만 써주는 것이 가능한데요,

코드로 보여드리며 이번 글은 마무리 할게요!

const brand = 'benz';
const model = 'E220';

const myCar = {
    brand,
    model,
    getPrice: function getPrice(price) {
        console.log(price);
        };
    };

자, 이런 코드가 있다고 해 봅시다!

지금, getPrice가 메소드의 프로퍼티 이름인 동시에, 함수의 이름이죠?

그럼, 축약이 가능하다! 이런 말입니다.

코드로 보여드리면,

const brand = 'benz';
const model = 'E220';

const myCar = {
    brand,
    model,
    getPrice(price) {
        console.log(price);
        };
    };

이렇게, 프로퍼티 이름과 function키워드를 사용하지 않아도 메소드가 됩니다!