[JS] 객체

객체

• 객체는 고유한 프로퍼티(property : 속성)들을 가지는 데이터이다.
  => 여러 데이터를 저장할 수 있다.
• 프로퍼티는 객체의 상태를 나타내는 데이터로 이름(key)와 값(value)으로 구성된다.
• JS의 모든 값은 프로퍼티값이 될 수 있다.
• 프로퍼티에 값이 함수인 경우 메서드(method)라고 부른다.
  => 메서드와 this를 사용하면 객체의 고유한 상태값을 이용한 동작을 만들 수 있다.
• JS의 거의 모든 것이 객체이다.

사용법

1. 객체 생성(리터럴)

• {} 안에 프로퍼티를 key : value의 형태로 작성한다.
  => 코드 블록과 동일한 {}를 사용하기 때문에 주의가 필요하다.
  => 코드 블록과 다르게 ;를 붙여서 작성한다.
• 객체는 여러개의 프로퍼티를 가질 수 있는데 , 로 구분한다.
• 객체의 값을 사용할 때는 user.name처럼 객체 뒤에 .을 붙이고 참조하려는 프로퍼티의 이름(key)으로 접근한다.
• 객체["키값"] 의 형태로도 객체의 프로퍼티에 접근 가능하다.
  => 동적으로 키값에 접근할 때 사용한다.
• 객체에 없는 키값을 참조하면 undefined를 return한다.

// user라는 객체에 age : 30, name : "seok"이라는 속성을 가지는 객체 생성.
let user = {
  age: 30,
  name : "seok",
}

// user 객체의 age 프로퍼티 참조하여 출력.
console.log(user.name);
// 위의 코드와 동일하게 동작
console.log(user["name"]);
// user 객체에 height 프로퍼티 없으므로 undefined 반환
console.log(user.height);

2. 메서드

• 메서드에서 this를 사용하면 메서드를 호출한 객체를 가르킨다.
  => 화살표 함수로 메서드를 지정하면 this가 호출한 객체를 가르키지 않는다.
• 메서드 안에 내부 함수를 지정하면 this가 객체를 가르키지 않는다.
  => 내부 함수를 화살표 함수로 작성하면 this가 객체를 가르키게 할 수 있다.
• 메서드를 호출할 때는 객체.메서드()처럼 메서드를 가지고 있는 객체 뒤에 .을 붙여서 호출한다.

let user = {
  age: 30,
  name : "seok",
  greeting : function(){
    // 메서드 호출 시 this는 user를 가르킨다.
  	console.log(`안녕하세요 ${this.name}입니다.`);
  }
}

// 메서드 호출 시 
user.greeting(); // 안녕하세요 seok입니다.

3. 프로퍼티 값의 할당

• 객체.프로퍼티 = 값;의 형태로 할당 및 재할당 가능하다
  => 해당 키값의 프로퍼티가 없는 경우 키를 새로 생성하여 값을 할당한다.
  => 해당 키값의 프로퍼티가 있는 경우 값을 재할당한다.

let user = {
  name : "seok",
  age : 30,
}

// user 객체에 height라는 프로퍼티가 없으므로 height 프로퍼티를 새로 생성
user.height = 173;
// user 객체에 age라는 프로퍼티가 존재하므로 31이라는 값을 재할당
user.age = 31;