[JavaScript] 객체 ✅

1. 객체 생성

let user = new Object(); ➡ 객체 생성자 문법
let user = {}; ➡ 객체 리터럴 문법

✨ 중괄호에 ‘키: 값’ 쌍으로 구성된 프로퍼티를 여러 개 넣는다.

let jenny = {
    name : '제니',
    group : '블랙핑크',
    dance : function() {
        return `${this.name}가 춤을 춥니다.`;
    }
}

2. 객체 표기법

🔔 점 표기법

console.log(jenny.name); // 제니

🔔 대괄호 표기법

대괄호 내 문자열을 따옴표로 묶어줘야 한다.

console.log(jenny['name']); // 제니

const key = 'name';
console.log(jenny[key]); // 제니

3. 계산된 프로퍼티

객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 것.

const nameKey = 'name';
const nameValue = '제니';

const groupKey = 'group';
const groupValue = '블랙핑크';

const jenny = {
    [nameKey] : nameValue, 👀
    [groupKey] : groupValue, 👀
    dance: function() {
        return `${this.name}가 춤을 춥니다.`;
    }
}

4. 단축 프로퍼티

프로퍼티 값을 기존 변수에서 받아와 사용하는 것! 이렇게 변수를 사용해 프로퍼티를 만드는 경우는 아주 흔하다.

// ex1
const name = '로제';
const rose = {
    name : name, 👀
};
console.log(rose); // { name: '로제' }

// ex2
const group = "blackpink";
const jenny = {
  group,
  job: "dance",
};

5. Object.keys, Object.values

모든 키 값과 Value 값을 가져오는 함수

const jisoo = {
    name : '지수',
    group : '블랙핑크',
}

console.log(Object.keys(jisoo));
// [ 'name', 'group' ]

console.log(Object.values(jisoo));
//[ '지수', 'BlackPink' ]

주의 👀

1) const로 선언할 경우, 객체 자체를 변경할 수 없다.

2) 객체 안의 프로퍼티나 메서드는 변경할 수 있다.

const jisoo = {
    name : '지수',
    group : '블랙핑크',
}

// jisoo = {}; 
// 객체 자체를 변경할 수 없으므로, 오류가 난다 !

// 객체 내부의 프로퍼티, 메서드는 변경 가능
jisoo.group= 'BlackPink';
console.log(jisoo);
// { name: '지수', group: 'BlackPink' }