JS에서의 객체(Object) 알아보기😎

객체(Object)

객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해준다.

• 객체는 여러 값을 하나의 변수에 그룹화하는 방법입니다.
• 각 값은 속성(프로퍼티)으로 저장됩니다.
• 속성은 key와 value로 이루어져 있습니다.

프로퍼티(Property)

프로퍼티는 객체의 속성을 나타내는 접근 가능한 이름과 활용 가능한 값을 가지는 특별한 형태이다.

객체 생성 방법👍

객체 리터럴: {}를 사용하여 객체를 생성

const person = {
  name: '함바오',
  age: 17
};

생성자 함수: new 키워드와 함께 object()를 사용

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("함바오");

alert(user.name); // 함바오
alert(user.isAdmin); // false

객체의 속성 접근

점 표기법(dot notation)

console.log(person.name); // '함바오'

대괄호 표기법(bracket notation)

console.log(person['name']); // '함바오'

속성 추가 및 수정

속성 추가

person.height = 180;

속성 수정

person.age = 18;

속성 삭제

delete 연산자를 사용해 속성을 삭제할 수 있다.

delete person.age;

객체 메서드

객체는 함수(메서드) 를 속성으로 가질 수 있습니다.

const person = {
  name: '함바오',
  greet: function() {
    console.log('Hello!');
  }
};
person.greet(); // 'Hello!'

this 키워드

this는 현재 객체를 가리킵니다.

const person = {
  name: '함바오',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet(); // 'Hello, my name is 함바오'

객체를 활용한 동적 속성

객체의 속성은 동적으로 추가하거나 제거할 수 있다.

const key = 'age';
person[key] = 30;

객체와 반복

객체의 모든 속성에 대해 반복하려면 for...in 을 사용한다.

for (let key in person) {
  console.log(key, person[key]);
}

객체의 구조 분해 할당

구조 분해 할당을 사용하여 객체의 속성을 쉽게 추출할 수 있다.

const { name, age } = person;
console.log(name, age); // '180', 18