TIL] 프로퍼티 (3)

프로퍼티의 축약 표현

객체 리터럴의 프로퍼티는 키와 프로퍼티 값으로 구도입니다.

프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수 있습니다!

var x = 1, y = 2;

var obj = {
    x: x,
    y: y
};

console.log(obj);

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

이때 프로퍼티 키는 변수 이름으로 자동 생성됩니다.

let x = 1, y = 2;

//프로퍼티 축약 표현
const obj = { x, y };

console.log(obj); // {x: 1, y: 2}

---

계산된 프로퍼티 이름

문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있습니다.

단, 프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 합니다!

이를 계산된 프로퍼티 이름이라 합니다.

var prefix = 'prop';
var i = 0;

var obj = {};

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

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

//ES6

const perfix = 'prop';
let i = 0;

const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

---

메서드 축약 표현

var obj = {
    name: 'Nerd',
    sayHi: function() {
        console.log('Hi' + this.name);
    }
};

obj.sayHi(); // Hi! Nerd

//ES6
const obj = {
    name: 'Nerd',
    //메서드 축약 표현
    sayHi() {
        console.log('Hi' + this.name);
    }
}

obj.sayHi(); // Hi! Nerd

---

오늘은 자바스크립트에 대해 공부를 했습니다!

자바스크립트는 공부하면 할수록 신기한 언어인 것 같습니다!

이제 자바스크립트를 공부할 시간이 많이 생기게 되어

자바스크립트와 리액트에 대해 공부를 하는 시간을 갖고

틈틈이 토이 프로젝트를 진행할 예정입니다!

공부하시는 모든 분들 다들 파이팅입니다!!!

✍️✍️✍️👍👍👍